From 9d41ffbb59be42bc50f5764d47031756ebf155f6 Mon Sep 17 00:00:00 2001
From: James Smith <jamessmith1@outlook.com>
Date: Wed, 20 May 2026 08:44:29 +0100
Subject: [PATCH] fix: apply UI tier to standalone dashboard pages (ADS-B, AIS,
 Satellite)

Each dashboard is a separate HTML page that doesn't inherit the main SPA's
localStorage restore. Add a synchronous tier-restore script before CSS loads
so html[data-ui-tier] selectors fire on first paint.

Also add enhanced/lean tier override blocks to each dashboard CSS to remap
the dashboard-local variables (--bg-dark, --bg-panel, --radar-cyan, etc.)
that variables.css doesn't cover, and add lean-mode scanline/bg hide rules
since components.css is not loaded on these pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/adsb_dashboard.css      | 35 ++++++++++++++++++++++++++++++
 static/css/ais_dashboard.css       | 35 ++++++++++++++++++++++++++++++
 static/css/satellite_dashboard.css | 32 +++++++++++++++++++++++++++
 templates/adsb_dashboard.html      |  1 +
 templates/ais_dashboard.html       |  1 +
 templates/satellite_dashboard.html |  1 +
 6 files changed, 105 insertions(+)

diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css
index f343550..01b5c5d 100644
--- a/static/css/adsb_dashboard.css
+++ b/static/css/adsb_dashboard.css
@@ -2460,3 +2460,38 @@ body {
         font-size: 11px;
     }
 }
+
+/* ============================================
+   ENHANCED TIER — amber military console
+   ============================================ */
+html[data-ui-tier="enhanced"] {
+    --bg-dark: #080600;
+    --bg-panel: #0c0a04;
+    --bg-card: #0e0b05;
+    --radar-bg: #0c0a04;
+    --radar-cyan: #c89628;
+    --border-glow: rgba(200, 150, 40, 0.25);
+    --border-color: rgba(200, 150, 40, 0.2);
+    --grid-line: rgba(200, 150, 40, 0.07);
+    --accent-cyan: #c89628;
+    --accent-green: #c89628;
+}
+
+/* ============================================
+   LEAN TIER — flat dark, no GPU effects
+   ============================================ */
+html[data-ui-tier="lean"] {
+    --bg-dark: #111111;
+    --bg-panel: #181818;
+    --bg-card: #1a1a1a;
+    --radar-bg: #181818;
+    --border-glow: transparent;
+    --border-color: #2a2a2a;
+    --grid-line: transparent;
+    --noise-image: none;
+}
+
+html[data-ui-tier="lean"] .scanline,
+html[data-ui-tier="lean"] .radar-bg {
+    display: none;
+}
diff --git a/static/css/ais_dashboard.css b/static/css/ais_dashboard.css
index 736b5d4..a1a901f 100644
--- a/static/css/ais_dashboard.css
+++ b/static/css/ais_dashboard.css
@@ -1373,3 +1373,38 @@ body {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.5; transform: scale(0.8); }
 }
+
+/* ============================================
+   ENHANCED TIER — amber military console
+   ============================================ */
+html[data-ui-tier="enhanced"] {
+    --bg-dark: #080600;
+    --bg-panel: #0c0a04;
+    --bg-card: #0e0b05;
+    --radar-bg: #0c0a04;
+    --radar-cyan: #c89628;
+    --border-glow: rgba(200, 150, 40, 0.25);
+    --border-color: rgba(200, 150, 40, 0.2);
+    --grid-line: rgba(200, 150, 40, 0.07);
+    --accent-cyan: #c89628;
+    --accent-green: #c89628;
+}
+
+/* ============================================
+   LEAN TIER — flat dark, no GPU effects
+   ============================================ */
+html[data-ui-tier="lean"] {
+    --bg-dark: #111111;
+    --bg-panel: #181818;
+    --bg-card: #1a1a1a;
+    --radar-bg: #181818;
+    --border-glow: transparent;
+    --border-color: #2a2a2a;
+    --grid-line: transparent;
+    --noise-image: none;
+}
+
+html[data-ui-tier="lean"] .scanline,
+html[data-ui-tier="lean"] .radar-bg {
+    display: none;
+}
diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index 5302166..c6bc9e6 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -1778,3 +1778,35 @@ body.embedded .panel {
 body.embedded .controls-bar {
     padding: 10px 15px;
 }
+
+/* ============================================
+   ENHANCED TIER — amber military console
+   ============================================ */
+html[data-ui-tier="enhanced"] {
+    --bg-dark: #080600;
+    --bg-panel: #0c0a04;
+    --bg-card: #0e0b05;
+    --border-glow: rgba(200, 150, 40, 0.25);
+    --border-color: rgba(200, 150, 40, 0.2);
+    --grid-line: rgba(200, 150, 40, 0.07);
+    --accent-cyan: #c89628;
+    --accent-green: #c89628;
+}
+
+/* ============================================
+   LEAN TIER — flat dark, no GPU effects
+   ============================================ */
+html[data-ui-tier="lean"] {
+    --bg-dark: #111111;
+    --bg-panel: #181818;
+    --bg-card: #1a1a1a;
+    --border-glow: transparent;
+    --border-color: #2a2a2a;
+    --grid-line: transparent;
+    --noise-image: none;
+}
+
+html[data-ui-tier="lean"] .scanline,
+html[data-ui-tier="lean"] .grid-bg {
+    display: none;
+}
diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html
index 34c20ca..fc63015 100644
--- a/templates/adsb_dashboard.html
+++ b/templates/adsb_dashboard.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AIRCRAFT RADAR // INTERCEPT - See the Invisible</title>
+    <script>(function(){var t=localStorage.getItem('intercept-ui-tier')||'enhanced';document.documentElement.setAttribute('data-ui-tier',t);})();</script>
     <!-- Dedicated dashboards always use bundled assets so navigation is not
          blocked by external CDN reachability. -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">
diff --git a/templates/ais_dashboard.html b/templates/ais_dashboard.html
index 330de8b..b539975 100644
--- a/templates/ais_dashboard.html
+++ b/templates/ais_dashboard.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>VESSEL RADAR // INTERCEPT - See the Invisible</title>
+    <script>(function(){var t=localStorage.getItem('intercept-ui-tier')||'enhanced';document.documentElement.setAttribute('data-ui-tier',t);})();</script>
     <!-- Dedicated dashboards always use bundled assets so navigation is not
          blocked by external CDN reachability. -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">
diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html
index 6ea9b84..631ef00 100644
--- a/templates/satellite_dashboard.html
+++ b/templates/satellite_dashboard.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SATELLITE COMMAND // iNTERCEPT - See the Invisible</title>
+    <script>(function(){var t=localStorage.getItem('intercept-ui-tier')||'enhanced';document.documentElement.setAttribute('data-ui-tier',t);})();</script>
     <!-- Dedicated dashboards always use bundled assets so navigation is not
          blocked by external CDN reachability. -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">