From e65a25e526da45e2564b8a3eabdac66b3009ee5e Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 21:55:01 +0100 Subject: [PATCH 1/9] feat: add lean and enhanced CSS variable override blocks --- static/css/core/variables.css | 73 +++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/static/css/core/variables.css b/static/css/core/variables.css index b3a24cc..86b523c 100644 --- a/static/css/core/variables.css +++ b/static/css/core/variables.css @@ -265,3 +265,76 @@ --transition-slow: 0ms; } } + +/* ============================================ + LEAN TIER — flat dark, no GPU effects + ============================================ */ +[data-ui-tier="lean"] { + --bg-primary: #111111; + --bg-secondary: #181818; + --bg-tertiary: #1f1f1f; + --bg-card: #1a1a1a; + --bg-elevated: #202020; + --bg-overlay: rgba(17, 17, 17, 0.92); + --surface-glass: #181818; + --surface-panel-gradient: #181818; + + --ambient-top-left: transparent; + --ambient-top-right: transparent; + --ambient-bottom: transparent; + + --border-color: #2a2a2a; + --border-light: #333333; + --border-glow: transparent; + + --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.3); + --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3); + --shadow-glow: none; + + --transition-fast: 0ms; + --transition-base: 0ms; + --transition-slow: 0ms; + + --scanline: none; + --grid-line: transparent; + --noise-image: none; +} + +/* ============================================ + ENHANCED TIER — amber military console + ============================================ */ +[data-ui-tier="enhanced"] { + --bg-primary: #080600; + --bg-secondary: #0c0a04; + --bg-tertiary: #100d06; + --bg-card: #0e0b05; + --bg-elevated: #141008; + --bg-overlay: rgba(8, 6, 0, 0.82); + --surface-glass: rgba(14, 11, 5, 0.82); + --surface-panel-gradient: linear-gradient(160deg, rgba(20, 16, 8, 0.94) 0%, rgba(12, 10, 4, 0.96) 100%); + + --accent-cyan: #c89628; + --accent-cyan-dim: rgba(200, 150, 40, 0.14); + --accent-cyan-hover: #e0aa30; + --accent-cyan-glow: rgba(200, 150, 40, 0.10); + + --accent-green: #c89628; + --accent-green-hover: #e0aa30; + --accent-green-dim: rgba(200, 150, 40, 0.14); + + /* red is intentionally unchanged — critical alerts only */ + + --ambient-top-left: rgba(200, 150, 40, 0.08); + --ambient-top-right: rgba(200, 150, 40, 0.05); + --ambient-bottom: rgba(200, 150, 40, 0.04); + + --grid-line: rgba(200, 150, 40, 0.07); + --border-color: rgba(200, 150, 40, 0.2); + --border-light: rgba(200, 150, 40, 0.3); + --border-glow: rgba(200, 150, 40, 0.25); + --border-focus: #c89628; + + --status-online: #c89628; + --status-info: #c89628; +} From 0b5d8581871a9b1c3c3e9ab90ac9737f56ba2901 Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:14:25 +0100 Subject: [PATCH 2/9] feat: add lean/enhanced body background overrides --- static/css/core/base.css | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/static/css/core/base.css b/static/css/core/base.css index 5279f22..1539a0c 100644 --- a/static/css/core/base.css +++ b/static/css/core/base.css @@ -434,3 +434,35 @@ a:hover { --text-secondary: #d1d5db; } } + +/* ============================================ + LEAN TIER — strip body background and animations + ============================================ */ +[data-ui-tier="lean"] body { + background-image: none; + background-attachment: unset; + background-size: unset; +} + +[data-ui-tier="lean"] *, +[data-ui-tier="lean"] *::before, +[data-ui-tier="lean"] *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0ms !important; + scroll-behavior: auto !important; +} + +/* ============================================ + ENHANCED TIER — tighter grid background + ============================================ */ +[data-ui-tier="enhanced"] body { + background-image: + radial-gradient(1200px 620px at 8% -12%, var(--ambient-top-left), transparent 62%), + radial-gradient(980px 560px at 92% -16%, var(--ambient-top-right), transparent 64%), + radial-gradient(900px 520px at 50% 126%, var(--ambient-bottom), transparent 68%), + linear-gradient(var(--grid-line) 1px, transparent 1px), + linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); + background-size: auto, auto, auto, 20px 20px, 20px 20px; + background-attachment: fixed; +} From 41a720f1f6ac62ffb480ea67d21b9357166638f2 Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:16:50 +0100 Subject: [PATCH 3/9] feat: add lean/enhanced layout overrides; retire data-animations CSS Co-Authored-By: Claude Sonnet 4.6 --- static/css/core/layout.css | 101 ++++++++++++++++++++++++++++++++----- static/css/index.css | 37 -------------- 2 files changed, 88 insertions(+), 50 deletions(-) diff --git a/static/css/core/layout.css b/static/css/core/layout.css index 4de2b49..be4d7dd 100644 --- a/static/css/core/layout.css +++ b/static/css/core/layout.css @@ -1041,19 +1041,6 @@ transform: rotate(90deg); } -/* Effects/animations toggle icon states */ -.nav-tool-btn .icon-effects-off { - display: none; -} - -[data-animations="off"] .nav-tool-btn .icon-effects-on { - display: none; -} - -[data-animations="off"] .nav-tool-btn .icon-effects-off { - display: flex; -} - /* Dashboard Button in Nav */ a.nav-dashboard-btn, a.nav-dashboard-btn:link, @@ -1172,3 +1159,91 @@ a.nav-dashboard-btn:hover { background: rgba(220, 230, 244, 0.9); box-shadow: var(--shadow-sm); } + +/* ============================================ + LEAN TIER — flat nav and header + ============================================ */ +[data-ui-tier="lean"] .mode-nav { + background: #181818; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +[data-ui-tier="lean"] .mode-nav::after, +[data-ui-tier="lean"] .app-header::after, +[data-ui-tier="lean"] .mobile-nav::after, +[data-ui-tier="lean"] .dashboard-header::after { + display: none; +} + +[data-ui-tier="lean"] .app-header { + background: #181818; + box-shadow: none; +} + +[data-ui-tier="lean"] .mode-nav-dropdown-menu { + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: #202020; +} + +/* ============================================ + ENHANCED TIER — amber console nav framing + ============================================ */ +[data-ui-tier="enhanced"] .mode-nav { + background: linear-gradient(180deg, rgba(14, 11, 3, 0.95), rgba(8, 6, 0, 0.92)); +} + +[data-ui-tier="enhanced"] .mode-nav::after, +[data-ui-tier="enhanced"] .app-header::after, +[data-ui-tier="enhanced"] .dashboard-header::after { + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); +} + +[data-ui-tier="enhanced"] .mode-nav-btn.active { + background: rgba(200, 150, 40, 0.08); + color: var(--accent-cyan); + border-left: 2px solid var(--accent-cyan); + box-shadow: -2px 0 8px rgba(200, 150, 40, 0.15); + padding-left: 12px; +} + +[data-ui-tier="enhanced"] .nav-clock .utc-time { + color: var(--accent-cyan); + text-shadow: 0 0 8px rgba(200, 150, 40, 0.3); + font-weight: 700; +} + +[data-ui-tier="enhanced"] .mode-nav-btn .nav-label, +[data-ui-tier="enhanced"] .mode-nav-label { + font-family: var(--font-mono); + letter-spacing: 2px; +} + +/* Tier toggle button — label visibility */ +.nav-tier-btn .tier-label-lean { display: none; } +.nav-tier-btn .tier-label-enhanced { display: none; } +[data-ui-tier="lean"] .nav-tier-btn .tier-label-lean { display: inline; } +[data-ui-tier="enhanced"] .nav-tier-btn .tier-label-enhanced { display: inline; } + +/* Tier toggle — icon visibility */ +.nav-tier-btn .icon-tier-lean { display: flex; } +.nav-tier-btn .icon-tier-enhanced { display: none; } +[data-ui-tier="lean"] .nav-tier-btn .icon-tier-lean { display: flex; } +[data-ui-tier="lean"] .nav-tier-btn .icon-tier-enhanced { display: none; } +[data-ui-tier="enhanced"] .nav-tier-btn .icon-tier-lean { display: none; } +[data-ui-tier="enhanced"] .nav-tier-btn .icon-tier-enhanced { display: flex; } + +/* Enhanced tier toggle button styling */ +[data-ui-tier="enhanced"] .nav-tier-btn { + background: rgba(200, 150, 40, 0.10); + border-color: rgba(200, 150, 40, 0.4); + color: #c89628; + box-shadow: 0 0 8px rgba(200, 150, 40, 0.08); + text-shadow: 0 0 6px rgba(200, 150, 40, 0.3); +} + +[data-ui-tier="enhanced"] .nav-tier-btn:hover { + background: rgba(200, 150, 40, 0.16); + border-color: rgba(200, 150, 40, 0.6); +} diff --git a/static/css/index.css b/static/css/index.css index a589275..188b3ca 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -7317,39 +7317,6 @@ body::before { transform: rotate(-90deg); } -[data-animations="off"] .nav-tool-btn .icon-effects-on { - opacity: 0; - transform: rotate(90deg); -} - -[data-animations="off"] .nav-tool-btn .icon-effects-off { - opacity: 1; - transform: rotate(0deg); -} - -/* Disable cosmetic animations when toggled off */ -[data-animations="off"] .globe-svg, -[data-animations="off"] .rotating-meridians, -[data-animations="off"] .meridian-1, -[data-animations="off"] .meridian-2, -[data-animations="off"] .meridian-3, -[data-animations="off"] .welcome-scanline, -[data-animations="off"] .landing-scanline, -[data-animations="off"] .scanline, -[data-animations="off"] .signal-wave, -[data-animations="off"] .signal-wave-1, -[data-animations="off"] .signal-wave-2, -[data-animations="off"] .signal-wave-3, -[data-animations="off"] .logo-dot, -[data-animations="off"] .welcome-logo { - animation: none !important; -} - -[data-animations="off"] body::before, -[data-animations="off"] .visuals-container::after { - display: none; -} - /* ============================================ VISUAL REFRESH OVERRIDES ============================================ */ @@ -7687,10 +7654,6 @@ body[data-mode="tscm"] { box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08); } -[data-animations="off"] .mode-content.active { - animation: none !important; -} - @media (max-width: 1023px) { .run-state-strip { margin-left: 8px; From 678aefd76ee72b8fb17dfa1fca66c205438946da Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:18:48 +0100 Subject: [PATCH 4/9] feat: add lean/enhanced component overrides; retire data-animations component CSS --- static/css/core/components.css | 44 ++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/static/css/core/components.css b/static/css/core/components.css index f9b91d8..a3427b3 100644 --- a/static/css/core/components.css +++ b/static/css/core/components.css @@ -248,10 +248,6 @@ } } -[data-animations="off"] .panel-indicator.active { - animation: none; -} - .panel-content { padding: var(--space-3); } @@ -1181,3 +1177,43 @@ textarea:focus { z-index: 1; border-radius: inherit; } + +/* ============================================ + LEAN TIER — flat cards, no shadows/glows + ============================================ */ +[data-ui-tier="lean"] .card, +[data-ui-tier="lean"] .panel, +[data-ui-tier="lean"] .stat-card, +[data-ui-tier="lean"] .data-card { + box-shadow: none; + border-radius: 2px; +} + +[data-ui-tier="lean"] .panel-indicator.active { + animation: none; + box-shadow: none; +} + +/* ============================================ + ENHANCED TIER — amber left-border card accents + ============================================ */ +[data-ui-tier="enhanced"] .stat-card, +[data-ui-tier="enhanced"] .data-card { + border-left: 2px solid var(--accent-cyan); + background: rgba(200, 150, 40, 0.03); +} + +[data-ui-tier="enhanced"] .stat-value, +[data-ui-tier="enhanced"] .data-value { + font-family: var(--font-mono); + color: var(--accent-cyan); +} + +[data-ui-tier="enhanced"] .stat-label, +[data-ui-tier="enhanced"] .data-label { + font-family: var(--font-mono); + letter-spacing: 2px; + text-transform: uppercase; + font-size: var(--text-xs); + color: rgba(200, 150, 40, 0.5); +} From 95776f5519776957757ef4411295e246684869ae Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:20:31 +0100 Subject: [PATCH 5/9] feat: add tier toggle button to nav; migrate data-animations restore to data-ui-tier --- templates/partials/nav.html | 42 ++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 6e630e5..592c5df 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -190,9 +190,11 @@
-
From 2b25d5cbadcc90e3a2402ffc5a9fdae412fe189a Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:23:58 +0100 Subject: [PATCH 7/9] feat: add Display Mode step to first-run setup modal --- static/js/core/first-run-setup.js | 64 ++++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/static/js/core/first-run-setup.js b/static/js/core/first-run-setup.js index 9f313b8..ee1b027 100644 --- a/static/js/core/first-run-setup.js +++ b/static/js/core/first-run-setup.js @@ -10,6 +10,7 @@ const FirstRunSetup = (function() { let notifyStatusEl = null; let modeStatusEl = null; let modeSelectEl = null; + let uiTierStatusEl = null; let dependencyReady = null; @@ -168,10 +169,69 @@ const FirstRunSetup = (function() { } ); + const tierStep = createStep( + 'Display Mode', + 'Choose how the interface looks. You can change this later with the toggle in the nav bar.', + (statusEl, actionsEl) => { + uiTierStatusEl = statusEl; + + const btnWrap = document.createElement('div'); + btnWrap.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;'; + + function makeTierBtn(tier, title, desc, previewFn) { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'setup-btn'; + btn.style.cssText = 'display:flex;flex-direction:column;align-items:flex-start;height:auto;padding:10px;text-align:left;gap:4px;'; + + const preview = document.createElement('div'); + preview.style.cssText = 'width:100%;height:48px;border-radius:3px;margin-bottom:4px;overflow:hidden;'; + previewFn(preview); + + const titleEl = document.createElement('strong'); + titleEl.style.cssText = 'font-size:12px;'; + titleEl.textContent = title; + + const descEl = document.createElement('span'); + descEl.style.cssText = 'font-size:10px;color:var(--text-dim);white-space:normal;line-height:1.3;'; + descEl.textContent = desc; + + btn.appendChild(preview); + btn.appendChild(titleEl); + btn.appendChild(descEl); + + btn.addEventListener('click', () => { + document.documentElement.setAttribute('data-ui-tier', tier); + localStorage.setItem('intercept-ui-tier', tier); + refreshStatuses(); + if (typeof showAppToast === 'function') { + showAppToast('Display Mode Set', `Switched to ${title} mode.`, 'info'); + } + }); + return btn; + } + + const leanBtn = makeTierBtn('lean', 'Lean', 'No effects — for Raspberry Pi or older hardware.', (el) => { + el.style.cssText += 'background:#111;border:1px solid #222;display:flex;flex-direction:column;justify-content:center;padding:6px;gap:3px;'; + el.innerHTML = '
INTERCEPT● LIVE
ADS-B ........... 247
TSCM ............ 3 ⚠
'; + }); + + const enhancedBtn = makeTierBtn('enhanced', 'Enhanced', 'Amber military console — for desktop or laptop.', (el) => { + el.style.cssText += 'background:#080600;border:1px solid rgba(200,150,40,0.3);display:flex;flex-direction:column;justify-content:center;padding:6px;gap:3px;'; + el.innerHTML = '
INTERCEPT14:27Z
247 ADS-B
'; + }); + + btnWrap.appendChild(leanBtn); + btnWrap.appendChild(enhancedBtn); + actionsEl.appendChild(btnWrap); + } + ); + content.appendChild(depsStep); content.appendChild(locationStep); content.appendChild(notifyStep); content.appendChild(modeStep); + content.appendChild(tierStep); const footer = document.createElement('div'); footer.className = 'setup-footer'; @@ -276,6 +336,8 @@ const FirstRunSetup = (function() { setStatus(locationStatusEl, hasLocation, hasLocation ? 'Configured' : 'Not set'); setStatus(notifyStatusEl, notifications.ready, notifications.label); setStatus(modeStatusEl, hasDefaultMode, hasDefaultMode ? localStorage.getItem(DEFAULT_MODE_KEY) : 'Not set'); + const hasTier = Boolean(localStorage.getItem('intercept-ui-tier')); + setStatus(uiTierStatusEl, hasTier, hasTier ? localStorage.getItem('intercept-ui-tier') : 'Not set'); if (dependencyReady === null) { checkDependencies(); @@ -283,7 +345,7 @@ const FirstRunSetup = (function() { } setStatus(depsStatusEl, dependencyReady, dependencyReady ? 'Ready' : 'Missing tools'); - const doneCount = Number(dependencyReady) + Number(hasLocation) + Number(notifications.ready) + Number(hasDefaultMode); + const doneCount = Number(dependencyReady) + Number(hasLocation) + Number(notifications.ready) + Number(hasDefaultMode) + Number(hasTier); const completeBtn = document.getElementById('setupCompleteBtn'); if (completeBtn) { completeBtn.textContent = doneCount >= 3 ? 'Mark Setup Complete' : 'Complete Anyway'; From cafc2554deb20421d04fbf45ada68aeba8b68614 Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:25:38 +0100 Subject: [PATCH 8/9] feat: retire data-animations from index.html, login.html, and base_dashboard.html --- templates/index.html | 24 +----------------------- templates/layout/base_dashboard.html | 7 ------- templates/login.html | 8 +++----- 3 files changed, 4 insertions(+), 35 deletions(-) diff --git a/templates/index.html b/templates/index.html index 290e27f..491a9ae 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11990,34 +11990,12 @@ }).catch(err => console.warn('Failed to save theme to server:', err)); } - // Animation toggle functions - function toggleAnimations() { - const html = document.documentElement; - const currentState = html.getAttribute('data-animations'); - const newState = currentState === 'off' ? 'on' : 'off'; - - if (newState === 'on') { - html.removeAttribute('data-animations'); - } else { - html.setAttribute('data-animations', newState); - } - - // Save to localStorage for persistence - localStorage.setItem('intercept-animations', newState); - } - - // Load saved theme and animations on page load + // Load saved theme on page load (function () { // First apply localStorage theme for instant load (no flash) const localTheme = localStorage.getItem('intercept-theme') || 'dark'; document.documentElement.setAttribute('data-theme', localTheme); - // Apply animations preference - const localAnimations = localStorage.getItem('intercept-animations'); - if (localAnimations === 'off') { - document.documentElement.setAttribute('data-animations', 'off'); - } - // Then fetch from server to sync (in case changed on another device) fetch('/settings/theme') .then(r => r.json()) diff --git a/templates/layout/base_dashboard.html b/templates/layout/base_dashboard.html index 18ec5c9..84865ca 100644 --- a/templates/layout/base_dashboard.html +++ b/templates/layout/base_dashboard.html @@ -74,13 +74,6 @@ 100% { top: 100%; } } - /* Animations toggle */ - [data-animations="off"] .scanline, - [data-animations="off"] .radar-bg, - [data-animations="off"] .grid-bg { - display: none; - } - /* Dashboard main content */ .dashboard-content { flex: 1; diff --git a/templates/login.html b/templates/login.html index 9d37deb..0537a41 100644 --- a/templates/login.html +++ b/templates/login.html @@ -2,12 +2,10 @@ From eb0512b3c025c67eada5c23c04224e10a97b8f2f Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 19 May 2026 22:30:25 +0100 Subject: [PATCH 9/9] chore: remove orphaned icon-effects CSS (replaced by tier toggle) --- static/css/index.css | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/static/css/index.css b/static/css/index.css index 188b3ca..2f668e7 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -7299,24 +7299,6 @@ body::before { transform: scale(0.98); } -/* Animation toggle icon states in nav bar */ -.nav-tool-btn .icon-effects-on, -.nav-tool-btn .icon-effects-off { - position: absolute; - transition: opacity 0.2s, transform 0.2s; - font-size: 14px; -} - -.nav-tool-btn .icon-effects-on { - opacity: 1; - transform: rotate(0deg); -} - -.nav-tool-btn .icon-effects-off { - opacity: 0; - transform: rotate(-90deg); -} - /* ============================================ VISUAL REFRESH OVERRIDES ============================================ */