karim/xplane-cockpit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

PFD/cockpit polish + KAP140 autopilot + UI refinements

Browse Source 
- PFD: full-screen 2D attitude, G1000 yellow+magenta chevron symbology, rAF
  60fps horizon smoothing, translucent tapes, slimmer softkey bar, header fixes
- Collapsible macOS-dark sidebar (Inter), VFR six-pack + engine cluster + tach
- KAP140 autopilot on the analog page; GMC-710 AFCS tab
- FMS rebuilt as an X-Plane-style CDU; PWA; settings panel (knob mode)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
karim
2026-06-01 17:20:16 +02:00
parent ebc33a78b7
commit 354ea5d44b
10 changed files with 253 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+45 -7
View File
@@ -100,6 +100,39 @@ body {
.vfr-gauge svg, .vfr-sg svg { width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.55)); }
.vfr-name, .vfr-sname { font-family: var(--ui-font); letter-spacing: 1.2px; color: #c9d0d7; font-weight: 600; }
.vfr-name { font-size: 11px; } .vfr-sname { font-size: 9px; }
.vfr-ap { display: flex; justify-content: center; margin-top: clamp(8px, 1.5vw, 18px); }
/* KAP 140 autopilot (steam-gauge C172) */
.kap140 { display: flex; align-items: center; gap: 12px; background: linear-gradient(#2a2c30, #161719);
border: 1px solid #0a0a0a; border-top: 1px solid #4a4d52; border-radius: 10px; padding: 11px 14px; font-family: var(--ui-font);
box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.kap-brand { color: #8893a0; font-size: 9px; font-weight: 700; letter-spacing: 1px; writing-mode: vertical-rl; transform: rotate(180deg); }
.kap-lcd { background: #06160b; border: 1px solid #0a4d24; border-radius: 4px; padding: 7px 11px; min-width: 168px;
box-shadow: inset 0 0 16px rgba(0,90,35,.5); font-family: 'Saira Semi Condensed', monospace; }
.kap-l1 { display: flex; gap: 12px; align-items: center; }
.kap-l1 .an { color: #0c3a1e; font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.kap-l1 .an.on { color: #3bff6e; text-shadow: 0 0 8px rgba(59,255,110,.5); }
.kap-l2 { display: flex; gap: 14px; align-items: baseline; margin-top: 3px; color: #3bff6e; }
.kap-l2 .big { font-size: 22px; font-weight: 700; }
.kap-l2 .u { font-size: 10px; color: #1f9d52; margin-left: 2px; }
.kap-l2 .vs { font-size: 14px; }
.kap-keys { display: flex; gap: 7px; align-items: stretch; }
/* physical, G1000-style buttons */
.kap-btn { background: linear-gradient(#3b3e44, #23262b); color: #eef2f6; border: 1px solid #08090b; border-top: 1px solid #5c6168;
border-radius: 7px; padding: 13px 11px; font-family: var(--ui-font); font-size: 12px; font-weight: 700; letter-spacing: .3px; cursor: pointer; min-width: 44px;
box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10); }
.kap-btn:hover { background: linear-gradient(#454951, #2a2d33); }
.kap-btn:active { transform: translateY(1px); background: linear-gradient(#1a8f44, #136b32); color: #fff; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.kap-btn.sm { padding: 6px 9px; font-size: 10px; min-width: 0; }
.kap-updn { display: flex; flex-direction: column; gap: 4px; }
/* clickable rotary: top half = up, bottom half = down */
.kap-knob { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kap-dial { position: relative; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
background: radial-gradient(circle at 38% 30%, #4e535b, #14161a 72%); border: 1px solid #08090b;
box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 0; }
.kap-dial .kdir { color: #aeb6bf; font-size: 11px; line-height: 1; user-select: none; }
.kap-dial:hover .kdir { color: #fff; }
.kap-knoblbl { color: #8893a0; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.vfr-clock { background: #0c0d0f; border: 1px solid #2a2f36; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.vc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vc-row b { font-family: 'Saira Condensed', monospace; color: #46e0c0; font-size: 18px; }
@@ -233,16 +266,15 @@ body {
.bezel-core { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.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; border-radius: 6px; overflow: hidden; position: relative;
border: 2px solid #0a0a0a; box-shadow: inset 0 0 18px #000, inset 0 0 2px #1a3a5a;
flex: 1; background: #000; overflow: hidden; position: relative;
display: flex; min-height: 0;
}
.bezel-screen > * { width: 100%; height: 100%; }
.softkeys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; padding: 8px 2px 2px; }
.softkeys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 4px 2px 1px; }
.softkey {
height: 30px; display: flex; align-items: center; justify-content: center;
height: 20px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(#202224, #131416); border: 1px solid #000; border-top: 1px solid #45474b;
border-radius: 4px; color: #cfd6dc; font-size: 12px; font-weight: 600; letter-spacing: .3px;
border-radius: 3px; color: #cfd6dc; font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
box-shadow: 0 1px 2px #000; cursor: pointer; font-family: inherit;
}
.softkey:not(.empty):hover { background: linear-gradient(#2a2c2f, #1a1b1e); border-top-color: #5a5d61; }
@@ -258,10 +290,10 @@ body {
.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.outer {
width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
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;
}
.knob-wrap.big .knob.outer { width: 58px; height: 58px; }
.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; }
.knob.outer { cursor: pointer; border: none; padding: 0; }
@@ -278,6 +310,12 @@ body {
.knob-arrow:active { background: #000; }
.knob-arrow.left { left: -2px; } .knob-arrow.right { right: -2px; }
.knob-arrow.top { top: -2px; } .knob-arrow.bottom { bottom: -2px; }
.knob-cluster.zones { padding: 5px; }
/* settings panel */
.set-lbl { color: var(--c-mut); font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-bottom: 8px; font-family: var(--ui-font); }
.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); }
.pan-pad { display: grid; grid-template-columns: repeat(2, 14px); gap: 2px; margin-top: 3px; }
.pan-pad button {