From fe3d0b3c7b43b6c5af0620b589b3bafd2ccdabb8 Mon Sep 17 00:00:00 2001 From: itsrubberduck Date: Thu, 28 May 2026 14:16:42 +0200 Subject: [PATCH] neues navbar design --- app/pages/pm.vue | 324 +++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 296 insertions(+), 28 deletions(-) diff --git a/app/pages/pm.vue b/app/pages/pm.vue index e12735f..709c5c7 100644 --- a/app/pages/pm.vue +++ b/app/pages/pm.vue @@ -116,16 +116,63 @@ -
- -
-
-
-
-

{{ flightContext.callsign || 'N/A' }}

-

{{ flightContext.dep }} → {{ flightContext.dest }}

+
+ +
@@ -1492,6 +1550,7 @@ const debugMode = ref(true) // Layout / view state const activeTab = ref<'funk' | 'freq' | 'log' | 'flug' | 'more' | 'debug'>('funk') +const experienceMenu = ref(false) const inputMode = ref<'voice' | 'text'>('voice') const learningMode = ref(true) @@ -3210,22 +3269,220 @@ onUnmounted(() => { overflow: hidden; } -.pm-topbar { +/* HUD top bar (matches classroom design) */ +.hud { flex: 0 0 auto; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(5, 9, 16, 0.85); + position: sticky; + top: 0; + z-index: 40; + border-bottom: 1px solid var(--border); + background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); - padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; + padding-top: env(safe-area-inset-top); } -.pm-topbar-inner { +.hud-inner { display: flex; align-items: center; - justify-content: space-between; - gap: 12px; + gap: 16px; + padding: 10px 12px; max-width: 1400px; margin: 0 auto; width: 100%; } +.hud-left { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; +} +.hud-center { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 0 8px; +} +.hud-right { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; + margin-left: auto; +} +.hud-right .btn { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 40px; + padding: 8px 12px; + border-radius: 12px; +} +.hud-right .btn-label { + white-space: nowrap; +} +.hud-logo { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 12px; + border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); + background: color-mix(in srgb, var(--accent) 14%, transparent); + color: var(--accent); + transition: border-color .2s ease, background .2s ease, color .2s ease; +} +.hud-logo:hover { + border-color: color-mix(in srgb, var(--accent) 54%, transparent); + background: color-mix(in srgb, var(--accent) 20%, transparent); +} +.hud-logo-icon { + color: currentColor; +} +.hud-divider { + width: 1px; + height: 32px; + background: var(--border); + border-radius: 999px; +} +.brand { + font-weight: 600; + white-space: nowrap; +} +.sep { + color: var(--t3); +} +.mode-switch { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + border-radius: 10px; + border: 1px solid transparent; + background: transparent; + color: var(--t2); + font: inherit; + font-weight: 500; + cursor: pointer; + transition: color .2s ease, background .2s ease, border-color .2s ease; +} +.mode-switch:hover, +.mode-switch:focus-visible { + color: var(--accent); + background: color-mix(in srgb, var(--accent) 12%, transparent); + border-color: color-mix(in srgb, var(--accent) 22%, transparent); + outline: none; +} +.mode-switch-icon { color: currentColor; } + +:global(.experience-menu) { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 240px; + padding: 8px; + border-radius: 14px; + border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); + background: color-mix(in srgb, var(--bg) 92%, transparent); + box-shadow: 0 18px 40px rgba(2, 6, 23, .4); +} +:global(.experience-option) { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-radius: 10px; + border: 1px solid transparent; + background: transparent; + color: var(--t2); + text-align: left; + font: inherit; + cursor: pointer; + text-decoration: none; + transition: background .2s ease, border-color .2s ease, color .2s ease; +} +:global(.experience-option:hover), +:global(.experience-option:focus-visible) { + background: color-mix(in srgb, var(--accent) 14%, transparent); + border-color: color-mix(in srgb, var(--accent) 26%, transparent); + color: var(--accent); + outline: none; +} +:global(.experience-option.is-active) { + background: color-mix(in srgb, var(--accent) 18%, transparent); + border-color: color-mix(in srgb, var(--accent) 32%, transparent); + color: var(--accent); +} +:global(.experience-option-body) { + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; +} +:global(.experience-option-title) { + font-weight: 600; + line-height: 1.2; +} +:global(.experience-option-sub) { + font-size: 12px; + color: var(--t3); +} + +.hud-context { + display: flex; + flex-direction: column; + min-width: 0; + margin-left: 4px; + line-height: 1.15; +} +.hud-context-callsign { + font-size: 14px; + font-weight: 600; + color: var(--text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.hud-context-route { + font-size: 11px; + color: var(--t3); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.hud-status { + display: flex; + flex-direction: column; + gap: 3px; + flex-shrink: 0; +} + +@media (max-width: 1180px) { + .hud-context, + .hud-status, + .sep, + .mode-switch, + .hud-divider, + .brand { + display: none; + } +} +@media (max-width: 860px) { + .hud-inner { + gap: 8px; + padding: 8px 10px; + } + .hud-right { gap: 6px; } + .hud-right .btn { + padding: 8px; + min-width: 40px; + justify-content: center; + } + .hud-right .btn-label { display: none; } + .hud-center { padding: 0; } +} .pm-body { flex: 1 1 auto; @@ -3283,19 +3540,26 @@ onUnmounted(() => { gap: 2px; padding: 6px 4px; border-radius: 12px; - color: rgba(255, 255, 255, 0.55); + border: 1px solid transparent; + color: var(--t2); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; - transition: color 120ms ease, background 120ms ease; + background: transparent; + transition: color .2s ease, background .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; } -.pm-navbtn:hover { - color: rgba(255, 255, 255, 0.85); +.pm-navbtn:hover, +.pm-navbtn:focus-visible { + color: var(--accent); + background: color-mix(in srgb, var(--accent) 12%, transparent); + border-color: color-mix(in srgb, var(--accent) 22%, transparent); + outline: none; } .pm-navbtn.is-active { - color: #22d3ee; - background: rgba(34, 211, 238, 0.12); + color: var(--accent); + background: color-mix(in srgb, var(--accent) 18%, transparent); + border-color: color-mix(in srgb, var(--accent) 32%, transparent); } /* Frequency control group in the top bar */ @@ -3528,9 +3792,10 @@ onUnmounted(() => { flex: 0 0 auto; flex-direction: column; gap: 6px; - width: 132px; - padding: 16px 10px; - border-right: 1px solid rgba(255, 255, 255, 0.08); + width: 168px; + padding: 16px 12px; + border-right: 1px solid var(--border); + background: color-mix(in srgb, var(--bg) 70%, transparent); overflow-y: auto; } .pm-sidenav .pm-navbtn { @@ -3538,8 +3803,11 @@ onUnmounted(() => { flex-direction: row; justify-content: flex-start; gap: 10px; - padding: 12px 14px; + padding: 11px 14px; + border-radius: 12px; font-size: 14px; + font-weight: 600; + letter-spacing: 0.01em; } .pm-lograil { display: block;