feat: UI refactor - unified navigation, design tokens, dashboard integration

- Add centralized design tokens in static/css/core/variables.css
- Create reusable base templates (base.html, base_dashboard.html)
- Add unified navigation partial (partials/nav.html) with all modules
- Create reusable UI components (card, loading, empty_state, status_badge, stats_strip)
- Integrate navigation into ADSB, AIS, and Satellite dashboards
- Consolidate CSS by importing shared variables in dashboard stylesheets
- Add comprehensive UI_GUIDE.md documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-30 09:27:39 +00:00
parent 3a6bd3711e
commit a58e2f0d21
21 changed files with 3294 additions and 123 deletions
+14 -5
View File
@@ -1,9 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SATELLITE COMMAND // iNTERCEPT - See the Invisible</title>
<title>SATELLITE COMMAND // iNTERCEPT</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
<!-- Design tokens -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/core/variables.css') }}">
<!-- Fonts - Conditional CDN/Local loading -->
{% if offline_settings.fonts_source == 'local' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">
@@ -27,8 +30,10 @@
<header class="header">
<div class="logo">
SATELLITE COMMAND
<span>// iNTERCEPT - See the Invisible</span>
<a href="/" style="color: inherit; text-decoration: none;">
SATELLITE COMMAND
<span>// iNTERCEPT</span>
</a>
</div>
<div class="stats-badges">
<div class="stat-badge">
@@ -62,10 +67,14 @@
<span id="trackingStatus">TRACKING</span>
</div>
<div class="datetime" id="utcTime">--:--:-- UTC</div>
<a href="/?mode=satellite" class="back-link">Main Dashboard</a>
<a href="/" class="back-link">Main Dashboard</a>
</div>
</header>
<!-- Unified Navigation -->
{% set active_mode = 'satellite' %}
{% include 'partials/nav.html' %}
<main class="dashboard">
<!-- Polar Plot -->
<div class="panel polar-container">