G1000: two-way sim sync, more PFD/MFD fidelity, authentic dialogs
Sync (FlyWithLua companions in plugins/ + server/fmssync.js): - FMS flight-plan two-way sync (App <-> in-sim FMS) via fms-sync.lua - G1000 UI-state publish (page/range/inset) via ui-sync.lua + CDI source, baro, map-range follow - Terrain awareness: elevation grid probe (terrain-probe.lua) -> red/yellow MFD overlay vs aircraft altitude PFD: - AFCS mode annunciation bar from autopilot _status datarefs - CDI source GPS/VLOC colouring, BRG1/BRG2 pointers + DME windows, marker beacons - magenta speed/altitude trend vectors, selected-altitude alerting - time-based (frame-rate-independent) smoothing for attitude/heading/tapes MFD: - nav data bar (DTK/ETE/active leg), airways overlay from earth_awy.dat, compass rose anchored to the ownship Dialogs (NEAREST/FLIGHTPLAN/DIRECT-TO/PROCEDURES): - flat, square, embedded G1000 look (no shadow/rounded/transparency) - compact lower-right placement, no close X (softkey toggles), single window - NEAREST 2-line entries (ILS/VFR, COM freq, runway length), PROC action menu Service worker: network-first HTML so reloads pick up new builds (cache v2). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+214
-36
@@ -6,15 +6,17 @@
|
||||
/* App chrome (everything that is NOT a G1000 instrument): same clean
|
||||
macOS-dark look as the desktop launcher. */
|
||||
--ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
|
||||
--c-bg: #1c1c1e;
|
||||
--c-surface: #2c2c2e;
|
||||
--c-fill: #3a3a3c;
|
||||
--c-line: #48484a;
|
||||
--c-line-soft: #38383a;
|
||||
--c-txt: #ffffff;
|
||||
--c-txt2: #ebebf5;
|
||||
--c-mut: #8e8e93;
|
||||
--c-green: #30d158;
|
||||
/* monochrome chrome palette (191919 / 0f0f0f / f0f0f0) — no colour accent */
|
||||
--c-bg: #0f0f0f;
|
||||
--c-surface: #191919;
|
||||
--c-fill: #232323;
|
||||
--c-line: #3a3a3a;
|
||||
--c-line-soft: #2a2a2a;
|
||||
--c-txt: #f0f0f0;
|
||||
--c-txt2: #e0e0e0;
|
||||
--c-mut: #8a8a8a;
|
||||
--c-on: #f0f0f0; /* active/primary highlight (inverted) */
|
||||
--c-green: #30d158; /* kept only for the green LCD/display look */
|
||||
--c-amber: #ffd60a;
|
||||
--c-red: #ff453a;
|
||||
color-scheme: dark;
|
||||
@@ -54,7 +56,7 @@ body {
|
||||
}
|
||||
.sb-top:hover { background: #34343a; }
|
||||
.brand { font-weight: 700; font-size: 17px; letter-spacing: .3px; white-space: nowrap; }
|
||||
.brand span { color: var(--c-green); font-weight: 500; }
|
||||
.brand span { color: var(--c-mut); font-weight: 500; }
|
||||
.sb-chev { color: var(--c-mut); font-size: 12px; }
|
||||
.app.nav-narrow .brand span { display: none; }
|
||||
.app.nav-narrow .sb-chev { display: none; }
|
||||
@@ -70,7 +72,7 @@ body {
|
||||
transition: background .12s, color .12s;
|
||||
}
|
||||
.snav-i:hover { background: var(--c-surface); color: var(--c-txt2); }
|
||||
.snav-i.active { background: rgba(48,209,88,.16); color: var(--c-green); border-color: rgba(48,209,88,.35); }
|
||||
.snav-i.active { background: rgba(255,255,255,.09); color: var(--c-txt); border-color: #444; }
|
||||
.snav-ic { flex: 0 0 22px; }
|
||||
.snav-lbl { white-space: nowrap; }
|
||||
.app.nav-narrow .snav-lbl { display: none; }
|
||||
@@ -157,16 +159,35 @@ body {
|
||||
.pfd-inset .mapwrap, .pfd-inset .leaflet-host { width: 100%; height: 100%; }
|
||||
.mapwrap.inset .leaflet-control-container { display: none; }
|
||||
/* NRST (nearest) window — pops over the right side of the PFD */
|
||||
/* G1000 windows: flat opaque rectangles embedded in the display — no shadow,
|
||||
no rounded corners, thin light border. They look part of the screen. */
|
||||
.nrst-window {
|
||||
position: absolute; z-index: 4; top: 9%; right: 1.5%; width: 41%; max-width: 440px;
|
||||
background: rgba(8, 10, 12, 0.94); border: 1px solid #4a5560; border-radius: 3px;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace; box-shadow: 0 4px 18px rgba(0,0,0,0.6);
|
||||
position: absolute; z-index: 4; right: 2%; top: 50%; bottom: 11%; width: 31%; max-width: 320px;
|
||||
display: flex; flex-direction: column;
|
||||
background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.nrst-list { flex: 1; }
|
||||
/* NEAREST AIRPORTS: two-line entries like the real GDU (ident/brg/dis/approach
|
||||
then com-type/freq/runway-length) */
|
||||
.apt-entry { padding: 4px 8px 5px; border-bottom: 1px solid #161b20; }
|
||||
.apt-l1 { display: grid; grid-template-columns: 1fr auto auto auto; align-items: baseline; column-gap: 8px; }
|
||||
.apt-l2 { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; column-gap: 6px; margin-top: 1px; }
|
||||
.apt-id { color: #36d2ff; font-size: 16px; font-weight: bold; justify-self: start; }
|
||||
.apt-id.cur { background: #19b8e6; color: #042230; padding: 0 4px; border-radius: 1px; }
|
||||
.apt-brg, .apt-dis { color: #fff; font-size: 14px; text-align: right; }
|
||||
.apt-dis u { color: #6f808d; font-size: 9px; text-decoration: none; margin-left: 1px; }
|
||||
.apt-app { color: #fff; font-size: 12px; min-width: 30px; text-align: right; }
|
||||
.apt-app.ils { color: #16d24a; }
|
||||
.apt-comlbl { color: #6f808d; font-size: 11px; }
|
||||
.apt-com { color: #fff; font-size: 13px; }
|
||||
.apt-rwlbl { color: #6f808d; font-size: 11px; }
|
||||
.apt-rw { color: #fff; font-size: 13px; text-align: right; }
|
||||
.nrst-head { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #11161b; border-bottom: 1px solid #2c343c; }
|
||||
.nrst-title { color: #39d3c0; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
|
||||
.nrst-title { color: #36d2ff; font-size: 13px; font-weight: bold; letter-spacing: 2px; }
|
||||
.nrst-tabs { display: flex; gap: 3px; margin-left: auto; }
|
||||
.nrst-tabs button { background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; border-radius: 2px; font: inherit; font-size: 11px; padding: 2px 9px; cursor: pointer; }
|
||||
.nrst-tabs button.on { background: #0c9; color: #04201c; border-color: #0c9; font-weight: bold; }
|
||||
.nrst-tabs button.on { background: #19b8e6; color: #042230; border-color: #19b8e6; font-weight: bold; }
|
||||
.nrst-x { background: none; border: none; color: #9fb0bd; cursor: pointer; font-size: 14px; padding: 0 2px; }
|
||||
.nrst-cols, .nrst-row { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr; align-items: baseline; padding: 2px 8px; column-gap: 4px; }
|
||||
.nrst-cols { color: #6f808d; font-size: 10px; border-bottom: 1px solid #222; padding-bottom: 4px; }
|
||||
@@ -177,15 +198,99 @@ body {
|
||||
.nrst-row .c-xtra { color: #39d3c0; text-align: right; }
|
||||
.nrst-row .c-name { grid-column: 1 / -1; color: #8b9aa6; font-size: 10px; margin-top: -1px; }
|
||||
.nrst-list { max-height: 62vh; overflow-y: auto; }
|
||||
/* DME + ALERTS popups (PFD DME / CAUTION softkeys) — left side, G1000 style */
|
||||
.pfd-pop {
|
||||
position: absolute; z-index: 4; top: 13%; left: 1.5%; width: 30%; max-width: 270px;
|
||||
background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.pop-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 8px 12px; font-size: 15px; }
|
||||
.pop-grid b { color: #6f808d; font-weight: normal; }
|
||||
.pop-grid span { color: #fff; text-align: right; }
|
||||
.pop-tabs { display: flex; gap: 3px; padding: 6px 8px; border-top: 1px solid #2c343c; }
|
||||
.pop-tabs button { flex: 1; background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; border-radius: 2px; font: inherit; font-size: 11px; padding: 3px 0; cursor: pointer; }
|
||||
.pop-tabs button.on { background: #0c9; color: #04201c; border-color: #0c9; font-weight: bold; }
|
||||
/* airway name labels on the MFD map */
|
||||
.awy-divicon { background: none; border: none; }
|
||||
.awy-lbl { color: #8fd0f0; font: 10px 'Roboto Mono', monospace; background: rgba(0,0,0,0.45); padding: 0 2px; border-radius: 2px; white-space: nowrap; }
|
||||
.pfd-pop.alerts { top: 46%; } /* below the DME window so both can be open */
|
||||
/* altitude alerter: flash the selected-altitude box (approaching / deviation) */
|
||||
.alt-alert { animation: altflash 1s steps(1, end) infinite; }
|
||||
@keyframes altflash { 50% { opacity: 0.25; } }
|
||||
.alerts-list { padding: 6px 0; max-height: 40vh; overflow-y: auto; }
|
||||
.alert-row { padding: 4px 12px; font-size: 14px; border-bottom: 1px solid #161b20; }
|
||||
.alert-row.warn { color: #ff5a4d; font-weight: bold; }
|
||||
.alert-row.cau { color: #ffce46; }
|
||||
.alert-none { padding: 10px 12px; color: #6f808d; font-size: 13px; }
|
||||
/* full-area NRST (MFD page) */
|
||||
.nrst-window.full { position: absolute; inset: 0; width: auto; max-width: none; border: none; border-radius: 0;
|
||||
background: #0a0d10; box-shadow: none; z-index: 660; display: flex; flex-direction: column; }
|
||||
.nrst-window.full .nrst-list { max-height: none; flex: 1; }
|
||||
/* FLIGHT PLAN page (MFD full / PFD window) */
|
||||
.fpl.full { position: absolute; inset: 0; z-index: 660; background: #0a0d10; display: flex; flex-direction: column; }
|
||||
.fpl.win { width: 320px; max-height: 44%; background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||||
display: flex; flex-direction: column; font-size: 13px; }
|
||||
.fpl-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #0a0f14; border-bottom: 1px solid #2c343c;
|
||||
color: #36d2ff; font-family: var(--ui-font); font-weight: 700; font-size: 13px; letter-spacing: 2px; }
|
||||
.fpl-tot { margin-left: auto; color: #fff; font-size: 12px; font-family: 'Saira Condensed', monospace; }
|
||||
.fpl-x { background: none; border: none; color: #9fb0bd; cursor: pointer; font-size: 15px; padding: 0 2px; }
|
||||
.fpl-cols, .fpl-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr .8fr .9fr 30px; align-items: center; gap: 6px; padding: 4px 12px; }
|
||||
.fpl-cols { color: #6f808d; font-size: 10px; border-bottom: 1px solid #222; letter-spacing: .5px; }
|
||||
.fpl-cols span:nth-child(n+2) { text-align: right; }
|
||||
.fpl-rows { flex: 1; overflow-y: auto; }
|
||||
.fpl-row { font-size: 16px; border-bottom: 1px solid #161b20; cursor: pointer; font-family: 'Saira Condensed', monospace; }
|
||||
.fpl-row:hover { background: #11161b; }
|
||||
.fpl-row.act { background: rgba(255,32,255,.12); }
|
||||
.fpl-row.sel { box-shadow: inset 0 0 0 1px #0ff; }
|
||||
.r-wpt { color: #0ff; font-weight: 700; } .r-wpt i { color: #0a8; font-style: normal; font-size: 10px; margin-left: 6px; }
|
||||
.r-wpt b { font-weight: 700; } .r-wpt b.cur { background: #19b8e6; color: #042230; padding: 0 4px; border-radius: 1px; }
|
||||
.r-dtk, .r-dis, .r-cum { color: #e7edf2; text-align: right; }
|
||||
.r-alt { color: #0ff; text-align: right; }
|
||||
/* ORIG / DEST subtitle (PFD window) */
|
||||
.fpl-od { color: #36d2ff; text-align: center; font-family: 'Roboto Mono', monospace; font-size: 14px; padding: 3px 0; border-bottom: 1px solid #1c242c; letter-spacing: 1px; }
|
||||
/* compact window: DTK/DIS only (drop CUM/ALT), no editor — like the real FPL window */
|
||||
.fpl.win .fpl-cols span:nth-child(4), .fpl.win .fpl-cols span:nth-child(5),
|
||||
.fpl.win .r-cum, .fpl.win .r-alt, .fpl.win .r-del, .fpl.win .fpl-entry { display: none; }
|
||||
.fpl.win .fpl-cols, .fpl.win .fpl-row { grid-template-columns: 1.4fr .8fr 1fr; }
|
||||
.fpl.win .fpl-row { font-size: 15px; }
|
||||
.fpl-row.act .r-wpt, .fpl-row.act .r-dtk, .fpl-row.act .r-dis, .fpl-row.act .r-cum, .fpl-row.act .r-alt { color: #ff5bff; }
|
||||
.r-del { background: none; border: none; color: #c44; font-size: 15px; cursor: pointer; }
|
||||
.fpl-empty { color: #6f808d; text-align: center; padding: 18px; font-size: 13px; font-family: var(--ui-font); }
|
||||
.fpl-entry { border-top: 1px solid #2c343c; padding: 10px 12px; background: #0c1116; font-family: var(--ui-font); }
|
||||
.fpl-hits { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
|
||||
.fpl-hits button { display: flex; align-items: baseline; gap: 8px; background: #141a20; border: 1px solid #222b33; color: #cfd6dd; font: inherit; padding: 5px 8px; cursor: pointer; text-align: left; }
|
||||
.fpl-hits b { color: #0ff; } .fpl-hits i { color: #0a8; font-style: normal; font-size: 11px; } .fpl-hits span { color: #6f808d; font-size: 11px; margin-left: auto; }
|
||||
.fpl-inrow { display: flex; gap: 8px; }
|
||||
.fpl-inrow input { flex: 1; background: #05080b; border: 1px solid #2c343c; color: #0ff; font: inherit; font-size: 15px; letter-spacing: 1px; padding: 9px 10px; text-transform: uppercase; }
|
||||
.fpl-actions { display: flex; gap: 8px; margin-top: 8px; }
|
||||
.fpl-btn { flex: 1; background: #232323; color: #e0e0e0; border: 1px solid #3a3a3a; border-radius: 8px; padding: 9px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
|
||||
.fpl-btn.add { background: #f0f0f0; color: #0f0f0f; border-color: transparent; flex: 0 0 auto; padding: 9px 16px; }
|
||||
.fpl-btn:hover:not(:disabled) { filter: brightness(1.15); } .fpl-btn:disabled { opacity: .4; cursor: default; }
|
||||
.fpl-msg { margin-top: 6px; font-size: 12px; } .fpl-msg.ok { color: #39d3c0; } .fpl-msg.err { color: #ffae42; }
|
||||
/* saved-plans load picker */
|
||||
.fpl-load { position: absolute; inset: 0; z-index: 10; background: #000a; display: flex; align-items: center; justify-content: center; }
|
||||
.fpl-load-box { width: min(380px, 90%); max-height: 80%; background: #0c1116; border: 1px solid #2c343c; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 12px 36px rgba(0,0,0,.6); }
|
||||
.fpl-load-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #11161b; border-bottom: 1px solid #2c343c; color: #39d3c0; font-family: var(--ui-font); font-weight: 700; font-size: 13px; }
|
||||
.fpl-load-head button { background: none; border: none; color: #9fb0bd; cursor: pointer; font-size: 14px; }
|
||||
.fpl-load-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
|
||||
.fpl-load-list button { background: #141a20; border: 1px solid #222b33; color: #0ff; font-family: 'Saira Condensed', monospace; font-size: 16px; font-weight: 700; text-align: left; padding: 9px 12px; border-radius: 6px; cursor: pointer; }
|
||||
.fpl-load-list button:hover { background: #1c252e; }
|
||||
.fpl-load-list button i { color: #6f808d; font-style: normal; font-size: 11px; margin-left: 6px; }
|
||||
/* page-group indicator (bottom-right), like the real G1000; tap = next page */
|
||||
.mfd-pageind { position: absolute; right: 6px; bottom: 6px; z-index: 700; display: flex; align-items: center; gap: 6px;
|
||||
background: #000a; border: 1px solid #2c343c; border-radius: 4px; padding: 5px 8px; cursor: pointer;
|
||||
font: 700 12px/1 monospace; color: #0ff; }
|
||||
.mfd-pageind em { width: 8px; height: 8px; border: 1px solid #0ff; display: inline-block; }
|
||||
.mfd-pageind em.on { background: #0ff; }
|
||||
.nrst-empty { color: #6f808d; text-align: center; padding: 12px; font-size: 12px; }
|
||||
/* XPDR squawk-entry readout above the softkey keypad */
|
||||
.squawk-entry { text-align: center; color: #9fb0bd; font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: 1px; padding: 3px 0; }
|
||||
.squawk-entry b { color: #19ff19; font-size: 18px; letter-spacing: 5px; margin-left: 6px; }
|
||||
/* TMR/REF window — left side of the PFD */
|
||||
.tmr-window {
|
||||
position: absolute; z-index: 4; top: 9%; left: 1.5%; width: 30%; max-width: 320px;
|
||||
background: rgba(8, 10, 12, 0.94); border: 1px solid #4a5560; border-radius: 3px;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace; box-shadow: 0 4px 18px rgba(0,0,0,0.6);
|
||||
position: absolute; z-index: 4; bottom: 11%; right: 2%; width: 31%; max-width: 320px;
|
||||
background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.tmr-body { padding: 8px 10px; }
|
||||
.tmr-clock { font-size: 34px; font-weight: bold; text-align: center; color: #fff; letter-spacing: 2px; }
|
||||
@@ -210,24 +315,35 @@ body {
|
||||
.tmr-minalert { margin-top: 6px; text-align: center; background: #ffd24a; color: #1a1400; font-weight: bold; padding: 3px; border-radius: 2px; letter-spacing: 2px; }
|
||||
/* Modal dialogs (Direct-To, …) */
|
||||
.dlg-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
|
||||
.dlg { background: #0c1015; border: 1px solid #3a4651; border-radius: 5px; min-width: 320px; color: #fff; font-family: 'Roboto Mono', monospace; box-shadow: 0 8px 30px rgba(0,0,0,0.7); }
|
||||
.dlg-head { background: #11161b; padding: 8px 12px; border-bottom: 1px solid #2c343c; color: #fff; font-weight: bold; letter-spacing: 1px; border-radius: 5px 5px 0 0; }
|
||||
/* G1000 side-window dialogs (PROC / Direct-To / FPL): compact panels in the
|
||||
display's lower-right, no screen dimming — like the real unit. */
|
||||
.gwin-backdrop { position: absolute; inset: 0; z-index: 20; background: transparent; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 2% 11% 0; }
|
||||
.dlg { background: #05080b; border: 1px solid #7e8a94; border-radius: 0; min-width: 280px; color: #fff; font-family: 'Roboto Mono', monospace; }
|
||||
.dlg-head { background: #0a0f14; padding: 6px 12px; border-bottom: 1px solid #2c343c; color: #36d2ff; font-weight: bold; letter-spacing: 2px; text-align: center; border-radius: 2px 2px 0 0; }
|
||||
.dto-arrow { color: #e040fb; margin-right: 8px; }
|
||||
.dto-body { padding: 12px; }
|
||||
.dto-lbl { color: #6f808d; font-size: 11px; display: block; margin-bottom: 4px; }
|
||||
.dto-input { width: 100%; box-sizing: border-box; background: #05080b; border: 1px solid #2c343c; color: #0ff; font: inherit; font-size: 20px; letter-spacing: 3px; padding: 6px 10px; text-transform: uppercase; }
|
||||
.dto-hits { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
|
||||
.dto-hits button { display: flex; align-items: baseline; gap: 8px; background: #141a20; border: 1px solid #222b33; color: #cfd6dd; font: inherit; padding: 5px 8px; cursor: pointer; text-align: left; }
|
||||
.dto-hits button.on { border-color: #0c9; background: #0a1f1b; }
|
||||
.dto-hits button.on { border-color: #36d2ff; background: #0d2c38; }
|
||||
.dto-hits button b { color: #0ff; } .dto-hits button i { color: #0a8; font-style: normal; font-size: 11px; } .dto-hits button span { color: #6f808d; font-size: 11px; margin-left: auto; }
|
||||
.dto-sel { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #222; }
|
||||
.dto-sel .dto-id { color: #0ff; font-size: 20px; font-weight: bold; }
|
||||
.dto-sel .dto-type { color: #0a8; font-size: 11px; }
|
||||
.dto-sel .dto-vec { color: #e040fb; margin-left: auto; font-weight: bold; }
|
||||
.dto-tgt { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
|
||||
.dto-tgt .dto-id { color: #36d2ff; font-size: 22px; font-weight: bold; letter-spacing: 1px; }
|
||||
.dto-tgt .dto-type { color: #6f808d; font-size: 11px; }
|
||||
.dto-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 6px 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #222; }
|
||||
.dto-grid b { color: #6f808d; font-weight: normal; font-size: 12px; }
|
||||
.dto-grid span { color: #fff; font-size: 15px; }
|
||||
.dlg-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #2c343c; }
|
||||
.dlg-actions .fbtn { flex: 1; }
|
||||
/* PROC dialog */
|
||||
.dlg.proc { width: 640px; max-width: 92vw; }
|
||||
.dlg.proc { width: 400px; max-width: 38%; }
|
||||
.dlg.proc.menu { width: 300px; }
|
||||
.proc-menu { display: flex; flex-direction: column; padding: 4px 0; }
|
||||
.proc-menu-i { background: none; border: none; border-bottom: 1px solid #11161b; color: #d7e2ea; font: inherit; font-family: 'Roboto Mono', monospace; font-size: 14px; text-align: left; padding: 8px 12px; cursor: pointer; letter-spacing: .5px; }
|
||||
.proc-menu-i:hover { background: #11161b; }
|
||||
.proc-menu-i.sel { background: #19b8e6; color: #042230; font-weight: bold; }
|
||||
.proc-back { background: #1c242c; border: 1px solid #2c343c; color: #36d2ff; font: inherit; font-size: 14px; line-height: 1; padding: 4px 9px; cursor: pointer; border-radius: 2px; }
|
||||
.proc-body { padding: 12px; }
|
||||
.proc-apt { display: flex; align-items: center; gap: 8px; }
|
||||
.proc-apt label { color: #6f808d; font-size: 11px; }
|
||||
@@ -236,13 +352,13 @@ body {
|
||||
.proc-err { color: #ffae42; font-size: 12px; margin-top: 6px; }
|
||||
.proc-tabs { display: flex; gap: 4px; margin: 10px 0 6px; }
|
||||
.proc-tabs button { flex: 1; background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; font: inherit; font-size: 12px; padding: 5px; cursor: pointer; }
|
||||
.proc-tabs button.on { background: #0c9; color: #04201c; font-weight: bold; border-color: #0c9; }
|
||||
.proc-cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; height: 300px; }
|
||||
.proc-tabs button.on { background: #19b8e6; color: #042230; font-weight: bold; border-color: #19b8e6; }
|
||||
.proc-cols { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 5px; height: 220px; }
|
||||
.proc-list, .proc-preview { background: #05080b; border: 1px solid #1c242c; overflow-y: auto; display: flex; flex-direction: column; }
|
||||
.proc-coltitle { position: sticky; top: 0; background: #11161b; color: #6f808d; font-size: 10px; padding: 4px 8px; border-bottom: 1px solid #222; }
|
||||
.proc-list button { background: none; border: none; border-bottom: 1px solid #11161b; color: #cfd6dd; font: inherit; font-size: 14px; text-align: left; padding: 6px 8px; cursor: pointer; }
|
||||
.proc-list button:hover { background: #11161b; }
|
||||
.proc-list button.on { background: #0a1f1b; color: #0ff; font-weight: bold; }
|
||||
.proc-list button.on { background: #19b8e6; color: #042230; font-weight: bold; }
|
||||
.proc-empty { color: #6f808d; font-size: 11px; padding: 8px; }
|
||||
.proc-leg { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #11161b; font-size: 13px; }
|
||||
.proc-leg b { color: #0ff; } .proc-leg u { color: #39d3c0; font-size: 10px; text-decoration: none; margin-left: auto; }
|
||||
@@ -258,7 +374,7 @@ body {
|
||||
|
||||
/* ---- GDU-1040 bezel ---- */
|
||||
.bezel {
|
||||
width: 100%; height: 100%; display: flex; align-items: stretch; gap: 0;
|
||||
width: 100%; height: 100%; display: flex; align-items: stretch; gap: 12px;
|
||||
background: linear-gradient(150deg, #3a3c40, #202123 55%, #2c2d30);
|
||||
border-radius: 18px; padding: 12px; box-shadow: inset 0 1px 0 #4a4c50, 0 8px 30px #000;
|
||||
font-family: 'Saira Semi Condensed', sans-serif;
|
||||
@@ -267,9 +383,18 @@ body {
|
||||
.bezel-title { text-align: center; color: #c9ced3; font-size: 14px; font-weight: 700; letter-spacing: 3px; padding: 2px 0 6px; }
|
||||
.bezel-screen {
|
||||
flex: 1; background: #000; overflow: hidden; position: relative;
|
||||
display: flex; min-height: 0;
|
||||
display: flex; flex-direction: column; min-height: 0;
|
||||
}
|
||||
.bezel-screen > * { width: 100%; height: 100%; }
|
||||
.screen-content { flex: 1; min-height: 0; width: 100%; position: relative; }
|
||||
.screen-content > * { width: 100%; height: 100%; }
|
||||
/* on-screen softkey label row (lowest line of the display) */
|
||||
.sk-labels { flex: 0 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
|
||||
padding: 3px 2px; background: #000; border-top: 1px solid #1c1c1c; }
|
||||
.skl { display: flex; align-items: center; justify-content: center; height: 20px; border-radius: 3px;
|
||||
color: #e8edf2; font-size: 11px; font-weight: 700; letter-spacing: .3px; font-family: 'Saira Semi Condensed', sans-serif; }
|
||||
.skl.empty { color: transparent; }
|
||||
.skl.on { background: #e8edf2; color: #0a0c0e; }
|
||||
.skl.caution { background: linear-gradient(#ffd23a, #e0b400); color: #1a1b1e; }
|
||||
.softkeys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 4px 2px 1px; }
|
||||
.softkey {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
@@ -283,12 +408,19 @@ body {
|
||||
.softkey.on { background: #e8edf2; color: #0a0c0e; border-top-color: #fff; font-weight: 800; }
|
||||
.softkey.caution { color: #1a1b1e; background: linear-gradient(#ffd23a, #e0b400); border-top-color: #fff2a8; font-weight: 800; }
|
||||
|
||||
.bezel-knobs { display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 4px 6px; gap: 6px; }
|
||||
.bezel-knobs.left { width: 88px; } .bezel-knobs.right { width: 100px; }
|
||||
.bezel-knobs { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; gap: 14px; flex: 0 0 104px; width: 104px; }
|
||||
/* NAV/HDG (+ AP block on MFD) group at the top, ALT pinned to the bottom */
|
||||
.bezel-knobs.left { justify-content: flex-start; }
|
||||
.bezel-knobs.left > .knob-wrap:last-child { margin-top: auto; }
|
||||
/* COM at top … FMS at bottom, evenly spread */
|
||||
.bezel-knobs.right { justify-content: space-between; }
|
||||
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
|
||||
.knob-lbl { color: #d2d7dc; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
|
||||
.knob-sub { color: #8b9197; font-size: 8.5px; font-weight: 600; letter-spacing: .3px; text-align: center; }
|
||||
.knob-extra { position: absolute; right: -10px; top: 6px; width: 20px; height: 16px; background: #1a1b1e; border: 1px solid #000; border-radius: 3px; color: #cfd6dc; font-size: 11px; text-align: center; line-height: 16px; }
|
||||
.knob-swap { position: absolute; right: 2px; top: 0; width: 26px; height: 20px; background: linear-gradient(#2a2c2f, #16171a); border: 1px solid #000; border-top: 1px solid #45474b; border-radius: 4px; color: #0ff; font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }
|
||||
.knob-swap:active { background: #000; }
|
||||
.knob-emerg { position: absolute; left: 2px; top: 2px; color: #c33; font-size: 8px; font-weight: 700; letter-spacing: .3px; }
|
||||
.knob.outer {
|
||||
width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
|
||||
background: radial-gradient(circle at 35% 30%, #55585d, #2a2c2f 70%); box-shadow: 0 2px 5px #000, inset 0 1px 0 #6a6d72;
|
||||
@@ -296,6 +428,13 @@ body {
|
||||
.knob-wrap.big .knob.outer { width: 68px; height: 68px; }
|
||||
.knob.inner { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #44474b, #1c1e20); box-shadow: inset 0 1px 0 #5a5d61; }
|
||||
.knob.joy .joy-cross { position: absolute; color: #6a6d72; font-size: 22px; font-weight: 700; pointer-events: none; }
|
||||
/* RANGE knob: white surround ring + zoom −/+ and curved arrows (like the GDU) */
|
||||
.knob.joy { overflow: visible; }
|
||||
.rng-ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #d2d7dc; pointer-events: none; }
|
||||
.rng-sign { position: absolute; top: 50%; transform: translateY(-50%); color: #d2d7dc; font-size: 17px; font-weight: 700; pointer-events: none; line-height: 1; }
|
||||
.rng-sign.m { left: -23px; } .rng-sign.p { right: -23px; }
|
||||
.rng-arc { position: absolute; top: -14px; color: #d2d7dc; font-size: 15px; pointer-events: none; }
|
||||
.rng-arc.l { left: -10px; } .rng-arc.r { right: -10px; }
|
||||
.knob.outer { cursor: pointer; border: none; padding: 0; }
|
||||
.knob.outer:active { box-shadow: 0 1px 2px #000, inset 0 2px 4px #000; }
|
||||
|
||||
@@ -316,6 +455,41 @@ body {
|
||||
.set-opt { display: flex; gap: 8px; }
|
||||
.set-opt .fbtn { flex: 1; }
|
||||
.set-hint { color: var(--c-mut); font-size: 11px; margin-top: 10px; line-height: 1.45; font-family: var(--ui-font); }
|
||||
/* radio tuner — KAP-140 green LCD + macOS-dark launcher chrome */
|
||||
.rtuner { width: min(400px, 94vw); background: linear-gradient(#23262c, #15171b); border: 1px solid #0a0a0a;
|
||||
border-top: 1px solid #4a4d52; border-radius: 16px; padding: 16px; font-family: var(--ui-font);
|
||||
box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
|
||||
.rt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||||
.rt-title { color: var(--c-txt); font-size: 18px; font-weight: 700; letter-spacing: .5px; }
|
||||
.rt-kind { color: #cfd6dd; background: #0f0f0f; border: 1px solid #3a3a3a; font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; }
|
||||
/* green LCD with both frequencies */
|
||||
.rt-lcd { display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
||||
background: #06160b; border: 1px solid #0a4d24; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
|
||||
box-shadow: inset 0 0 22px rgba(0,90,35,.5); }
|
||||
.rt-f { display: flex; flex-direction: column; gap: 3px; }
|
||||
.rt-f.right { align-items: flex-end; }
|
||||
.rt-f span { color: #1f9d52; font-size: 10px; letter-spacing: 1.5px; }
|
||||
.rt-f b { font-family: 'Saira Condensed', monospace; font-size: 30px; font-weight: 700; line-height: 1; }
|
||||
.rt-f b.act { color: #3bff6e; text-shadow: 0 0 12px rgba(59,255,110,.55); }
|
||||
.rt-f b.sby { color: #f0f0f0; text-shadow: 0 0 8px rgba(240,240,240,.3); }
|
||||
.rt-swap { flex: 0 0 auto; width: 48px; height: 40px; background: linear-gradient(#2b2b2b, #161616); color: #e0e0e0;
|
||||
border: 1px solid #08090b; border-top: 1px solid #4a4a4a; border-radius: 9px; font-size: 22px; cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
|
||||
.rt-swap:hover { color: #fff; } .rt-swap:active { transform: translateY(1px); background: #3a3a3a; color: #fff; }
|
||||
.rt-tune { display: flex; flex-direction: column; gap: 10px; }
|
||||
.rt-row { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 10px; align-items: center; }
|
||||
.rt-unit { color: var(--c-txt2); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-align: center;
|
||||
background: #2c2f35; border: 1px solid #3a3f47; border-radius: 8px; padding: 8px 0; }
|
||||
.rt-step { background: linear-gradient(#3b3e44, #23262b); color: #eef2f6; border: 1px solid #08090b; border-top: 1px solid #5c6168;
|
||||
border-radius: 10px; padding: 16px 0; font-size: 24px; font-weight: 700; cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1); }
|
||||
.rt-step:hover { background: linear-gradient(#454545, #2a2a2a); }
|
||||
.rt-step:active { transform: translateY(1px); background: linear-gradient(#3a3a3a, #1f1f1f); color: #fff; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
|
||||
.rt-actions { display: flex; gap: 10px; margin-top: 16px; }
|
||||
.rt-btn { flex: 1; background: #232323; color: var(--c-txt2); border: 1px solid #3a3a3a; border-radius: 10px; padding: 13px; font-family: var(--ui-font); font-size: 14px; font-weight: 700; cursor: pointer; }
|
||||
.rt-btn:hover { background: #2e2e2e; }
|
||||
.rt-btn.primary { background: #f0f0f0; color: #0f0f0f; border-color: transparent; }
|
||||
.rt-btn.primary:active { transform: translateY(1px); filter: brightness(.92); }
|
||||
|
||||
.pan-pad { display: grid; grid-template-columns: repeat(2, 14px); gap: 2px; margin-top: 3px; }
|
||||
.pan-pad button {
|
||||
@@ -363,6 +537,10 @@ body {
|
||||
font: 600 12px/1 monospace; color: #0ff; background: #000a; padding: 4px 6px; }
|
||||
.mc-mode em { width: 8px; height: 8px; border: 1px solid #0ff; display: inline-block; }
|
||||
.mc-mode em.on { background: #0ff; }
|
||||
.mc-wind { position: absolute; left: 6px; top: 6px; display: flex; gap: 6px; align-items: center;
|
||||
font: 600 12px/1 monospace; color: #fff; background: #000a; padding: 4px 7px; }
|
||||
.mc-wind i { color: #9ab; font-style: normal; }
|
||||
.mc-windarr { display: inline-block; font-size: 16px; line-height: 1; color: #cfe3ff; }
|
||||
|
||||
/* Autopilot — GMC-710-style AFCS mode controller (app chrome look) */
|
||||
.afcs { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
|
||||
@@ -520,7 +698,7 @@ body {
|
||||
background: #08240f; color: #29f06a; border: 1px solid #0a5; border-radius: 8px;
|
||||
padding: 12px 16px; font-weight: 800; font-family: monospace; letter-spacing: 1px;
|
||||
}
|
||||
.fbtn.add { background: #0a5; color: #021008; }
|
||||
.fbtn.add { background: #f0f0f0; color: #0f0f0f; }
|
||||
.fbtn.export { background: #ffae42; color: #2a1500; border-color: #ffae42; flex: 1; }
|
||||
.fbtn:disabled { opacity: .4; }
|
||||
.fms-actions { display: flex; gap: 8px; margin-top: 8px; }
|
||||
|
||||
Reference in New Issue
Block a user