diff --git a/docs/UI_GUIDE.md b/docs/UI_GUIDE.md new file mode 100644 index 0000000..cbd2ff2 --- /dev/null +++ b/docs/UI_GUIDE.md @@ -0,0 +1,608 @@ +# iNTERCEPT UI Guide + +This guide documents the UI design system, components, and patterns used in iNTERCEPT. + +## Table of Contents + +1. [Design Tokens](#design-tokens) +2. [Base Templates](#base-templates) +3. [Navigation](#navigation) +4. [Components](#components) +5. [Adding a New Module Page](#adding-a-new-module-page) +6. [Adding a New Dashboard](#adding-a-new-dashboard) + +--- + +## Design Tokens + +All design tokens are defined in `static/css/core/variables.css`. Import this file first in any stylesheet. + +### Colors + +```css +/* Backgrounds (layered depth) */ +--bg-primary: #0a0c10; /* Darkest - page background */ +--bg-secondary: #0f1218; /* Panels, sidebars */ +--bg-tertiary: #151a23; /* Cards, elevated elements */ +--bg-card: #121620; /* Card backgrounds */ +--bg-elevated: #1a202c; /* Hover states, modals */ + +/* Accent Colors */ +--accent-cyan: #4a9eff; /* Primary action color */ +--accent-green: #22c55e; /* Success, online status */ +--accent-red: #ef4444; /* Error, danger, stop */ +--accent-orange: #f59e0b; /* Warning */ +--accent-amber: #d4a853; /* Secondary highlight */ + +/* Text Hierarchy */ +--text-primary: #e8eaed; /* Main content */ +--text-secondary: #9ca3af; /* Secondary content */ +--text-dim: #4b5563; /* Disabled, placeholder */ +--text-muted: #374151; /* Barely visible */ + +/* Status Colors */ +--status-online: #22c55e; +--status-warning: #f59e0b; +--status-error: #ef4444; +--status-offline: #6b7280; +``` + +### Spacing Scale + +```css +--space-1: 4px; +--space-2: 8px; +--space-3: 12px; +--space-4: 16px; +--space-5: 20px; +--space-6: 24px; +--space-8: 32px; +--space-10: 40px; +--space-12: 48px; +--space-16: 64px; +``` + +### Typography + +```css +/* Font Families */ +--font-sans: 'Inter', -apple-system, sans-serif; +--font-mono: 'JetBrains Mono', monospace; + +/* Font Sizes */ +--text-xs: 10px; +--text-sm: 12px; +--text-base: 14px; +--text-lg: 16px; +--text-xl: 18px; +--text-2xl: 20px; +--text-3xl: 24px; +--text-4xl: 30px; +``` + +### Border Radius + +```css +--radius-sm: 4px; +--radius-md: 6px; +--radius-lg: 8px; +--radius-xl: 12px; +--radius-full: 9999px; +``` + +### Light Theme + +The design system supports light/dark themes via `data-theme` attribute: + +```html + +``` + +Toggle with JavaScript: +```javascript +document.documentElement.setAttribute('data-theme', 'light'); +``` + +--- + +## Base Templates + +### `templates/layout/base.html` + +The main base template for standard pages. Use for pages with sidebar + content layout. + +```html +{% extends 'layout/base.html' %} + +{% block title %}My Page Title{% endblock %} + +{% block styles %} + +{% endblock %} + +{% block navigation %} +{% set active_mode = 'mymode' %} +{% include 'partials/nav.html' %} +{% endblock %} + +{% block sidebar %} +
+ +
+{% endblock %} + +{% block content %} +
+

Page Title

+ +
+{% endblock %} + +{% block scripts %} + +{% endblock %} +``` + +### `templates/layout/base_dashboard.html` + +Extended base for full-screen dashboards (maps, visualizations). + +```html +{% extends 'layout/base_dashboard.html' %} + +{% set active_mode = 'mydashboard' %} + +{% block dashboard_title %}MY DASHBOARD{% endblock %} + +{% block styles %} +{{ super() }} + +{% endblock %} + +{% block stats_strip %} +
+ +
+{% endblock %} + +{% block dashboard_content %} +
+ +
+
+ +
+{% endblock %} +``` + +--- + +## Navigation + +### Including Navigation + +```html +{% set active_mode = 'pager' %} +{% include 'partials/nav.html' %} +``` + +### Valid `active_mode` Values + +| Mode | Description | +|------|-------------| +| `pager` | Pager decoding | +| `sensor` | 433MHz sensors | +| `rtlamr` | Utility meters | +| `adsb` | Aircraft tracking | +| `ais` | Vessel tracking | +| `aprs` | Amateur radio | +| `wifi` | WiFi scanning | +| `bluetooth` | Bluetooth scanning | +| `tscm` | Counter-surveillance | +| `satellite` | Satellite tracking | +| `sstv` | ISS SSTV | +| `listening` | Listening post | +| `spystations` | Spy stations | +| `meshtastic` | Mesh networking | + +### Navigation Groups + +The navigation is organized into groups: +- **SDR / RF**: Pager, 433MHz, Meters, Aircraft, Vessels, APRS, Listening Post, Spy Stations, Meshtastic +- **Wireless**: WiFi, Bluetooth +- **Security**: TSCM +- **Space**: Satellite, ISS SSTV + +--- + +## Components + +### Card / Panel + +```html +{% call card(title='PANEL TITLE', indicator=true, indicator_active=false) %} +

Panel content here

+{% endcall %} +``` + +Or manually: +```html +
+
+ PANEL TITLE +
+
+
+

Content here

+
+
+``` + +### Empty State + +```html +{% include 'components/empty_state.html' with context %} +{# Or with variables: #} +{% with title='No data yet', description='Start scanning to see results', action_text='Start Scan', action_onclick='startScan()' %} +{% include 'components/empty_state.html' %} +{% endwith %} +``` + +### Loading State + +```html +{# Inline spinner #} +{% include 'components/loading.html' %} + +{# With text #} +{% with text='Loading data...', size='lg' %} +{% include 'components/loading.html' %} +{% endwith %} + +{# Full overlay #} +{% with overlay=true, text='Please wait...' %} +{% include 'components/loading.html' %} +{% endwith %} +``` + +### Status Badge + +```html +{% with status='online', text='Connected', id='connectionStatus' %} +{% include 'components/status_badge.html' %} +{% endwith %} +``` + +Status values: `online`, `offline`, `warning`, `error`, `inactive` + +### Buttons + +```html + + + + + + + + + + + + + + + + + + +``` + +### Badges + +```html +Default +Primary +Online +Warning +Error +``` + +### Form Groups + +```html +
+ + + Enter frequency in MHz +
+ +
+ + +
+ + +``` + +### Stats Strip + +Used in dashboards for horizontal statistics display: + +```html +
+
+
+ 0 + COUNT +
+
+
+
+ TRACKING +
+
--:--:-- UTC
+
+
+``` + +--- + +## Adding a New Module Page + +### 1. Create the Route + +In `routes/mymodule.py`: + +```python +from flask import Blueprint, render_template + +mymodule_bp = Blueprint('mymodule', __name__, url_prefix='/mymodule') + +@mymodule_bp.route('/dashboard') +def dashboard(): + return render_template('mymodule_dashboard.html', + offline_settings=get_offline_settings()) +``` + +### 2. Register the Blueprint + +In `routes/__init__.py`: + +```python +from routes.mymodule import mymodule_bp +app.register_blueprint(mymodule_bp) +``` + +### 3. Create the Template + +Option A: Simple page extending base.html +```html +{% extends 'layout/base.html' %} +{% set active_mode = 'mymodule' %} + +{% block title %}My Module{% endblock %} + +{% block navigation %} +{% include 'partials/nav.html' %} +{% endblock %} + +{% block content %} + +{% endblock %} +``` + +Option B: Full-screen dashboard +```html +{% extends 'layout/base_dashboard.html' %} +{% set active_mode = 'mymodule' %} + +{% block dashboard_title %}MY MODULE{% endblock %} + +{% block dashboard_content %} + +{% endblock %} +``` + +### 4. Add to Navigation + +In `templates/partials/nav.html`, add your module to the appropriate group: + +```html + +``` + +Or if it's a dashboard link: +```html + + + My Module + +``` + +### 5. Create Stylesheet + +In `static/css/mymodule.css`: + +```css +/** + * My Module Styles + */ +@import url('./core/variables.css'); + +/* Your styles using design tokens */ +.mymodule-container { + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: var(--space-4); +} +``` + +--- + +## Adding a New Dashboard + +For full-screen dashboards like ADSB, AIS, or Satellite: + +### 1. Create the Template + +```html + + + + + + MY DASHBOARD // iNTERCEPT + + + + + + + {% if offline_settings.fonts_source == 'local' %} + + {% else %} + + {% endif %} + + + + + + + + + + + +
+
+ + +
+ +
+ Back + Main Dashboard +
+
+ + + {% set active_mode = 'mydashboard' %} + {% include 'partials/nav.html' %} + + +
+ +
+ + +
+ +
+ + + + +``` + +### 2. Create the Stylesheet + +```css +/** + * My Dashboard Styles + */ +@import url('./core/variables.css'); + +:root { + /* Dashboard-specific aliases */ + --bg-dark: var(--bg-primary); + --bg-panel: var(--bg-secondary); + --bg-card: var(--bg-tertiary); + --grid-line: rgba(74, 158, 255, 0.08); +} + +/* Your dashboard styles */ +``` + +--- + +## Best Practices + +### DO + +- Use design tokens for all colors, spacing, and typography +- Include the nav partial on all pages for consistent navigation +- Set `active_mode` before including the nav partial +- Use semantic component classes (`btn`, `panel`, `badge`, etc.) +- Support both light and dark themes +- Test on mobile viewports + +### DON'T + +- Hardcode color values - use CSS variables +- Create new color variations without adding to tokens +- Duplicate navigation markup - use the partial +- Skip the favicon and design tokens imports +- Use inline styles for layout (use utility classes) + +--- + +## File Structure + +``` +templates/ +├── layout/ +│ ├── base.html # Standard page base +│ └── base_dashboard.html # Dashboard page base +├── partials/ +│ ├── nav.html # Unified navigation +│ ├── page_header.html # Page title component +│ └── settings-modal.html # Settings modal +├── components/ +│ ├── card.html # Panel/card component +│ ├── empty_state.html # Empty state placeholder +│ ├── loading.html # Loading spinner +│ ├── stats_strip.html # Stats bar component +│ └── status_badge.html # Status indicator +├── index.html # Main dashboard +├── adsb_dashboard.html # Aircraft tracking +├── ais_dashboard.html # Vessel tracking +└── satellite_dashboard.html # Satellite tracking + +static/css/ +├── core/ +│ ├── variables.css # Design tokens +│ ├── base.css # Reset & typography +│ ├── components.css # Component styles +│ └── layout.css # Layout styles +├── index.css # Main dashboard styles +├── adsb_dashboard.css # Aircraft dashboard +├── ais_dashboard.css # Vessel dashboard +├── satellite_dashboard.css # Satellite dashboard +└── responsive.css # Responsive breakpoints +``` diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css index 22ccd18..9ac3982 100644 --- a/static/css/adsb_dashboard.css +++ b/static/css/adsb_dashboard.css @@ -1,3 +1,9 @@ +/** + * ADSB Dashboard Styles + * Imports design tokens for consistency, with dashboard-specific overrides + */ +@import url('./core/variables.css'); + * { margin: 0; padding: 0; @@ -5,23 +11,14 @@ } :root { - --bg-dark: #0a0c10; - --bg-panel: #0f1218; - --bg-card: #151a23; - --border-color: #1f2937; - --border-glow: #4a9eff; - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --accent-green: #22c55e; - --accent-cyan: #4a9eff; - --accent-orange: #f59e0b; - --accent-red: #ef4444; - --accent-yellow: #eab308; - --accent-amber: #d4a853; + /* Dashboard-specific aliases (for backward compatibility) */ + --bg-dark: var(--bg-primary); + --bg-panel: var(--bg-secondary); + --bg-card: var(--bg-tertiary); + /* Use tokens for shared values, keep custom values for dashboard-specific */ --grid-line: rgba(74, 158, 255, 0.08); - --radar-cyan: #4a9eff; - --radar-bg: #0f1218; + --radar-cyan: var(--accent-cyan); + --radar-bg: var(--bg-secondary); } body { diff --git a/static/css/ais_dashboard.css b/static/css/ais_dashboard.css index 3d4d268..c14f5e7 100644 --- a/static/css/ais_dashboard.css +++ b/static/css/ais_dashboard.css @@ -1,5 +1,8 @@ -/* AIS Dashboard - Vessel Tracking Interface */ -/* Styled to match ADSB Dashboard */ +/** + * AIS Dashboard Styles - Vessel Tracking Interface + * Imports design tokens for consistency, with dashboard-specific overrides + */ +@import url('./core/variables.css'); * { margin: 0; @@ -8,23 +11,14 @@ } :root { - --bg-dark: #0a0c10; - --bg-panel: #0f1218; - --bg-card: #151a23; - --border-color: #1f2937; - --border-glow: #4a9eff; - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --accent-green: #22c55e; - --accent-cyan: #4a9eff; - --accent-orange: #f59e0b; - --accent-red: #ef4444; - --accent-yellow: #eab308; - --accent-amber: #d4a853; + /* Dashboard-specific aliases (for backward compatibility) */ + --bg-dark: var(--bg-primary); + --bg-panel: var(--bg-secondary); + --bg-card: var(--bg-tertiary); + /* Use tokens for shared values, keep custom values for dashboard-specific */ --grid-line: rgba(74, 158, 255, 0.08); - --radar-cyan: #4a9eff; - --radar-bg: #0f1218; + --radar-cyan: var(--accent-cyan); + --radar-bg: var(--bg-secondary); } body { diff --git a/static/css/core/base.css b/static/css/core/base.css new file mode 100644 index 0000000..4569214 --- /dev/null +++ b/static/css/core/base.css @@ -0,0 +1,329 @@ +/** + * INTERCEPT Base Styles + * Reset, typography, and foundational element styles + * Requires: variables.css to be imported first + */ + +/* ============================================ + CSS RESET + ============================================ */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + tab-size: 4; +} + +body { + font-family: var(--font-sans); + font-size: var(--text-base); + line-height: var(--leading-normal); + color: var(--text-primary); + background: var(--bg-primary); + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ============================================ + TYPOGRAPHY + ============================================ */ +h1, h2, h3, h4, h5, h6 { + font-weight: var(--font-semibold); + line-height: var(--leading-tight); + color: var(--text-primary); +} + +h1 { font-size: var(--text-4xl); } +h2 { font-size: var(--text-3xl); } +h3 { font-size: var(--text-2xl); } +h4 { font-size: var(--text-xl); } +h5 { font-size: var(--text-lg); } +h6 { font-size: var(--text-base); } + +p { + margin-bottom: var(--space-4); +} + +a { + color: var(--accent-cyan); + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--accent-cyan-hover); +} + +a:focus-visible { + outline: 2px solid var(--border-focus); + outline-offset: 2px; +} + +strong, b { + font-weight: var(--font-semibold); +} + +small { + font-size: var(--text-sm); +} + +code, kbd, pre, samp { + font-family: var(--font-mono); + font-size: 0.9em; +} + +code { + background: var(--bg-tertiary); + padding: 2px 6px; + border-radius: var(--radius-sm); +} + +pre { + background: var(--bg-tertiary); + padding: var(--space-4); + border-radius: var(--radius-md); + overflow-x: auto; +} + +pre code { + background: none; + padding: 0; +} + +/* ============================================ + FORM ELEMENTS + ============================================ */ +button, +input, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; +} + +button { + cursor: pointer; + border: none; + background: none; +} + +button:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +input, +select, +textarea { + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + color: var(--text-primary); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +input:focus, +select:focus, +textarea:focus { + outline: none; + border-color: var(--accent-cyan); + box-shadow: 0 0 0 3px var(--accent-cyan-dim); +} + +input::placeholder, +textarea::placeholder { + color: var(--text-dim); +} + +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 8px center; + padding-right: 28px; +} + +input[type="checkbox"], +input[type="radio"] { + width: 16px; + height: 16px; + padding: 0; + cursor: pointer; + accent-color: var(--accent-cyan); +} + +label { + display: block; + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-secondary); + margin-bottom: var(--space-1); +} + +/* ============================================ + TABLES + ============================================ */ +table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-sm); +} + +th, +td { + padding: var(--space-2) var(--space-3); + text-align: left; + border-bottom: 1px solid var(--border-color); +} + +th { + font-weight: var(--font-semibold); + color: var(--text-secondary); + background: var(--bg-secondary); + text-transform: uppercase; + font-size: var(--text-xs); + letter-spacing: 0.05em; +} + +tr:hover td { + background: var(--bg-tertiary); +} + +/* ============================================ + LISTS + ============================================ */ +ul, ol { + padding-left: var(--space-6); + margin-bottom: var(--space-4); +} + +li { + margin-bottom: var(--space-1); +} + +/* ============================================ + UTILITY CLASSES + ============================================ */ + +/* Text colors */ +.text-primary { color: var(--text-primary); } +.text-secondary { color: var(--text-secondary); } +.text-muted { color: var(--text-muted); } +.text-cyan { color: var(--accent-cyan); } +.text-green { color: var(--accent-green); } +.text-red { color: var(--accent-red); } +.text-orange { color: var(--accent-orange); } +.text-amber { color: var(--accent-amber); } + +/* Font utilities */ +.font-mono { font-family: var(--font-mono); } +.font-medium { font-weight: var(--font-medium); } +.font-semibold { font-weight: var(--font-semibold); } +.font-bold { font-weight: var(--font-bold); } + +/* Text sizes */ +.text-xs { font-size: var(--text-xs); } +.text-sm { font-size: var(--text-sm); } +.text-base { font-size: var(--text-base); } +.text-lg { font-size: var(--text-lg); } +.text-xl { font-size: var(--text-xl); } + +/* Display */ +.hidden { display: none !important; } +.block { display: block; } +.inline-block { display: inline-block; } +.flex { display: flex; } +.inline-flex { display: inline-flex; } +.grid { display: grid; } + +/* Flexbox */ +.items-center { align-items: center; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.flex-1 { flex: 1; } +.gap-1 { gap: var(--space-1); } +.gap-2 { gap: var(--space-2); } +.gap-3 { gap: var(--space-3); } +.gap-4 { gap: var(--space-4); } + +/* Spacing */ +.m-0 { margin: 0; } +.mt-2 { margin-top: var(--space-2); } +.mt-4 { margin-top: var(--space-4); } +.mb-2 { margin-bottom: var(--space-2); } +.mb-4 { margin-bottom: var(--space-4); } +.p-2 { padding: var(--space-2); } +.p-3 { padding: var(--space-3); } +.p-4 { padding: var(--space-4); } + +/* Borders */ +.rounded { border-radius: var(--radius-md); } +.rounded-lg { border-radius: var(--radius-lg); } +.border { border: 1px solid var(--border-color); } + +/* Truncate text */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Screen reader only */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* ============================================ + SCROLLBAR STYLING + ============================================ */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-light); + border-radius: var(--radius-full); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-dim); +} + +/* Firefox scrollbar */ +* { + scrollbar-width: thin; + scrollbar-color: var(--border-light) var(--bg-secondary); +} + +/* ============================================ + SELECTION + ============================================ */ +::selection { + background: var(--accent-cyan-dim); + color: var(--text-primary); +} diff --git a/static/css/core/components.css b/static/css/core/components.css new file mode 100644 index 0000000..14d1696 --- /dev/null +++ b/static/css/core/components.css @@ -0,0 +1,590 @@ +/** + * INTERCEPT UI Components + * Reusable component styles for buttons, cards, badges, etc. + * Requires: variables.css and base.css + */ + +/* ============================================ + BUTTONS + ============================================ */ + +/* Base button */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + font-size: var(--text-sm); + font-weight: var(--font-medium); + border-radius: var(--radius-md); + border: 1px solid transparent; + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; + text-decoration: none; +} + +.btn:focus-visible { + outline: 2px solid var(--border-focus); + outline-offset: 2px; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Button variants */ +.btn-primary { + background: var(--accent-cyan); + color: var(--text-inverse); + border-color: var(--accent-cyan); +} + +.btn-primary:hover:not(:disabled) { + background: var(--accent-cyan-hover); + border-color: var(--accent-cyan-hover); +} + +.btn-secondary { + background: var(--bg-tertiary); + color: var(--text-primary); + border-color: var(--border-color); +} + +.btn-secondary:hover:not(:disabled) { + background: var(--bg-elevated); + border-color: var(--border-light); +} + +.btn-ghost { + background: transparent; + color: var(--text-secondary); + border-color: transparent; +} + +.btn-ghost:hover:not(:disabled) { + background: var(--bg-tertiary); + color: var(--text-primary); +} + +.btn-danger { + background: var(--accent-red); + color: white; + border-color: var(--accent-red); +} + +.btn-danger:hover:not(:disabled) { + background: #dc2626; + border-color: #dc2626; +} + +.btn-success { + background: var(--accent-green); + color: white; + border-color: var(--accent-green); +} + +.btn-success:hover:not(:disabled) { + background: #16a34a; + border-color: #16a34a; +} + +/* Button sizes */ +.btn-sm { + padding: var(--space-1) var(--space-2); + font-size: var(--text-xs); +} + +.btn-lg { + padding: var(--space-3) var(--space-6); + font-size: var(--text-base); +} + +/* Icon button */ +.btn-icon { + padding: var(--space-2); + width: 36px; + height: 36px; +} + +.btn-icon.btn-sm { + width: 28px; + height: 28px; + padding: var(--space-1); +} + +/* ============================================ + CARDS / PANELS + ============================================ */ +.card { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.card-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--border-color); + background: var(--bg-secondary); +} + +.card-header-title { + font-size: var(--text-xs); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); +} + +.card-body { + padding: var(--space-4); +} + +.card-footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--border-color); + background: var(--bg-secondary); +} + +/* Panel variant (used in dashboards) */ +.panel { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.panel-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-2) var(--space-3); + border-bottom: 1px solid var(--border-color); + background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%); + font-size: var(--text-xs); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-secondary); +} + +.panel-indicator { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + background: var(--status-offline); +} + +.panel-indicator.active { + background: var(--status-online); + box-shadow: 0 0 8px var(--status-online); +} + +.panel-content { + padding: var(--space-3); +} + +/* ============================================ + BADGES + ============================================ */ +.badge { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + font-size: var(--text-xs); + font-weight: var(--font-medium); + border-radius: var(--radius-full); + background: var(--bg-tertiary); + color: var(--text-secondary); +} + +.badge-primary { + background: var(--accent-cyan-dim); + color: var(--accent-cyan); +} + +.badge-success { + background: var(--accent-green-dim); + color: var(--accent-green); +} + +.badge-warning { + background: var(--accent-orange-dim); + color: var(--accent-orange); +} + +.badge-danger { + background: var(--accent-red-dim); + color: var(--accent-red); +} + +/* ============================================ + STATUS INDICATORS + ============================================ */ +.status-dot { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + background: var(--status-offline); + flex-shrink: 0; +} + +.status-dot.online, +.status-dot.active { + background: var(--status-online); + box-shadow: 0 0 6px var(--status-online); +} + +.status-dot.warning { + background: var(--status-warning); + box-shadow: 0 0 6px var(--status-warning); +} + +.status-dot.error, +.status-dot.offline { + background: var(--status-error); +} + +.status-dot.inactive { + background: var(--status-offline); +} + +/* Pulse animation for active status */ +.status-dot.pulse { + animation: statusPulse 2s ease-in-out infinite; +} + +@keyframes statusPulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +/* ============================================ + EMPTY STATE + ============================================ */ +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-8) var(--space-4); + text-align: center; + color: var(--text-muted); +} + +.empty-state-icon { + width: 48px; + height: 48px; + margin-bottom: var(--space-4); + opacity: 0.5; +} + +.empty-state-title { + font-size: var(--text-base); + font-weight: var(--font-medium); + color: var(--text-secondary); + margin-bottom: var(--space-2); +} + +.empty-state-description { + font-size: var(--text-sm); + color: var(--text-dim); + max-width: 300px; +} + +.empty-state-action { + margin-top: var(--space-4); +} + +/* ============================================ + LOADING STATES + ============================================ */ +.spinner { + width: 20px; + height: 20px; + border: 2px solid var(--border-color); + border-top-color: var(--accent-cyan); + border-radius: var(--radius-full); + animation: spin 0.8s linear infinite; +} + +.spinner-sm { + width: 14px; + height: 14px; + border-width: 2px; +} + +.spinner-lg { + width: 32px; + height: 32px; + border-width: 3px; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* Loading overlay */ +.loading-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-overlay); + z-index: var(--z-modal); +} + +/* Skeleton loader */ +.skeleton { + background: linear-gradient( + 90deg, + var(--bg-tertiary) 25%, + var(--bg-elevated) 50%, + var(--bg-tertiary) 75% + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: var(--radius-sm); +} + +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* ============================================ + STATS STRIP + ============================================ */ +.stats-strip { + display: flex; + align-items: center; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + padding: 0 var(--space-4); + height: var(--stats-strip-height); + overflow-x: auto; + gap: var(--space-1); +} + +.strip-stat { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 var(--space-3); + min-width: fit-content; +} + +.strip-value { + font-family: var(--font-mono); + font-size: var(--text-sm); + font-weight: var(--font-semibold); + color: var(--accent-cyan); + line-height: 1; +} + +.strip-label { + font-size: 9px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.05em; + line-height: 1; + margin-top: 2px; +} + +.strip-divider { + width: 1px; + height: 20px; + background: var(--border-color); + margin: 0 var(--space-2); +} + +/* ============================================ + FORM GROUPS + ============================================ */ +.form-group { + margin-bottom: var(--space-4); +} + +.form-group label { + display: block; + margin-bottom: var(--space-1); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-secondary); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; +} + +.form-help { + margin-top: var(--space-1); + font-size: var(--text-xs); + color: var(--text-dim); +} + +.form-error { + margin-top: var(--space-1); + font-size: var(--text-xs); + color: var(--accent-red); +} + +/* Inline checkbox/radio */ +.form-check { + display: flex; + align-items: center; + gap: var(--space-2); + cursor: pointer; +} + +.form-check input { + width: auto; +} + +.form-check label { + margin-bottom: 0; + cursor: pointer; +} + +/* ============================================ + ALERTS / TOASTS + ============================================ */ +.alert { + display: flex; + align-items: flex-start; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-md); + border: 1px solid; + font-size: var(--text-sm); +} + +.alert-info { + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan); + color: var(--accent-cyan); +} + +.alert-success { + background: var(--accent-green-dim); + border-color: var(--accent-green); + color: var(--accent-green); +} + +.alert-warning { + background: var(--accent-orange-dim); + border-color: var(--accent-orange); + color: var(--accent-orange); +} + +.alert-danger { + background: var(--accent-red-dim); + border-color: var(--accent-red); + color: var(--accent-red); +} + +/* ============================================ + TOOLTIPS + ============================================ */ +[data-tooltip] { + position: relative; +} + +[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + padding: var(--space-1) var(--space-2); + background: var(--bg-elevated); + color: var(--text-primary); + font-size: var(--text-xs); + border-radius: var(--radius-sm); + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity var(--transition-fast), visibility var(--transition-fast); + z-index: var(--z-tooltip); + pointer-events: none; + margin-bottom: var(--space-1); + box-shadow: var(--shadow-md); +} + +[data-tooltip]:hover::after { + opacity: 1; + visibility: visible; +} + +/* ============================================ + ICONS + ============================================ */ +.icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.icon svg { + width: 100%; + height: 100%; +} + +.icon--sm { + width: 16px; + height: 16px; +} + +.icon--lg { + width: 24px; + height: 24px; +} + +/* ============================================ + SECTION HEADERS + ============================================ */ +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + padding-bottom: var(--space-2); + border-bottom: 1px solid var(--border-color); +} + +.section-title { + font-size: var(--text-sm); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); +} + +/* ============================================ + DIVIDERS + ============================================ */ +.divider { + height: 1px; + background: var(--border-color); + margin: var(--space-4) 0; +} + +.divider-vertical { + width: 1px; + height: 100%; + background: var(--border-color); + margin: 0 var(--space-3); +} diff --git a/static/css/core/layout.css b/static/css/core/layout.css new file mode 100644 index 0000000..86e01e6 --- /dev/null +++ b/static/css/core/layout.css @@ -0,0 +1,582 @@ +/** + * INTERCEPT Layout Styles + * Global layout structure: header, navigation, sidebar, main content + * Requires: variables.css, base.css, components.css + */ + +/* ============================================ + APP SHELL + ============================================ */ +.app-shell { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.app-main { + flex: 1; + display: flex; + flex-direction: column; +} + +/* ============================================ + GLOBAL HEADER + ============================================ */ +.app-header { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + padding: 0 var(--space-4); + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + position: sticky; + top: 0; + z-index: var(--z-sticky); +} + +.app-header-left { + display: flex; + align-items: center; + gap: var(--space-4); +} + +.app-header-right { + display: flex; + align-items: center; + gap: var(--space-3); +} + +/* Logo */ +.app-logo { + display: flex; + align-items: center; + gap: var(--space-3); + text-decoration: none; + color: var(--text-primary); +} + +.app-logo-icon { + width: 40px; + height: 40px; + flex-shrink: 0; +} + +.app-logo-text { + display: flex; + flex-direction: column; +} + +.app-logo-title { + font-size: var(--text-lg); + font-weight: var(--font-bold); + line-height: 1.2; + color: var(--text-primary); +} + +.app-logo-tagline { + font-size: var(--text-xs); + color: var(--text-dim); +} + +/* Page title in header */ +.app-header-title { + font-size: var(--text-lg); + font-weight: var(--font-semibold); + color: var(--text-primary); +} + +.app-header-subtitle { + font-size: var(--text-sm); + color: var(--text-secondary); + margin-left: var(--space-2); +} + +/* Header utilities */ +.header-utilities { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.header-clock { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-mono); + font-size: var(--text-sm); + color: var(--text-secondary); +} + +.header-clock-label { + font-size: var(--text-xs); + color: var(--text-dim); +} + +/* ============================================ + GLOBAL NAVIGATION + ============================================ */ +.app-nav { + display: flex; + align-items: center; + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-color); + padding: 0 var(--space-4); + height: var(--nav-height); + gap: var(--space-1); + overflow-x: auto; +} + +.app-nav::-webkit-scrollbar { + height: 0; +} + +/* Nav groups */ +.nav-group { + display: flex; + align-items: center; + position: relative; +} + +/* Dropdown trigger */ +.nav-dropdown-trigger { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-secondary); + background: transparent; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; +} + +.nav-dropdown-trigger:hover { + background: var(--bg-elevated); + color: var(--text-primary); +} + +.nav-dropdown-trigger.active { + background: var(--accent-cyan-dim); + color: var(--accent-cyan); +} + +.nav-dropdown-arrow { + width: 12px; + height: 12px; + transition: transform var(--transition-fast); +} + +.nav-group.open .nav-dropdown-arrow { + transform: rotate(180deg); +} + +/* Dropdown menu */ +.nav-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + padding: var(--space-1); + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: all var(--transition-fast); + z-index: var(--z-dropdown); +} + +.nav-group.open .nav-dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(4px); +} + +/* Nav items */ +.nav-item { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + font-size: var(--text-sm); + color: var(--text-secondary); + text-decoration: none; + border-radius: var(--radius-sm); + cursor: pointer; + transition: all var(--transition-fast); + border: none; + background: none; + width: 100%; + text-align: left; +} + +.nav-item:hover { + background: var(--bg-tertiary); + color: var(--text-primary); +} + +.nav-item.active { + background: var(--accent-cyan-dim); + color: var(--accent-cyan); +} + +.nav-item-icon { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +/* Nav divider */ +.nav-divider { + width: 1px; + height: 24px; + background: var(--border-color); + margin: 0 var(--space-2); +} + +/* Nav utilities (right side) */ +.nav-utilities { + display: flex; + align-items: center; + gap: var(--space-2); + margin-left: auto; + padding-left: var(--space-4); +} + +.nav-tool-btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: transparent; + border: none; + border-radius: var(--radius-md); + color: var(--text-secondary); + cursor: pointer; + transition: all var(--transition-fast); + text-decoration: none; +} + +.nav-tool-btn:hover { + background: var(--bg-elevated); + color: var(--text-primary); +} + +/* ============================================ + MOBILE NAVIGATION + ============================================ */ +.mobile-nav { + display: none; + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-color); + padding: var(--space-2) var(--space-3); + overflow-x: auto; + gap: var(--space-2); +} + +.mobile-nav::-webkit-scrollbar { + height: 0; +} + +.mobile-nav-btn { + display: flex; + align-items: center; + gap: var(--space-1); + padding: var(--space-2) var(--space-3); + font-size: var(--text-xs); + font-weight: var(--font-medium); + color: var(--text-secondary); + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + cursor: pointer; + white-space: nowrap; + text-decoration: none; + transition: all var(--transition-fast); +} + +.mobile-nav-btn:hover, +.mobile-nav-btn.active { + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan); + color: var(--accent-cyan); +} + +/* Hamburger button */ +.hamburger-btn { + display: none; + flex-direction: column; + justify-content: center; + gap: 4px; + width: 32px; + height: 32px; + padding: 6px; + background: transparent; + border: none; + cursor: pointer; +} + +.hamburger-btn span { + display: block; + width: 100%; + height: 2px; + background: var(--text-secondary); + border-radius: 1px; + transition: all var(--transition-fast); +} + +.hamburger-btn.open span:nth-child(1) { + transform: rotate(45deg) translate(4px, 4px); +} + +.hamburger-btn.open span:nth-child(2) { + opacity: 0; +} + +.hamburger-btn.open span:nth-child(3) { + transform: rotate(-45deg) translate(4px, -4px); +} + +/* ============================================ + CONTENT LAYOUTS + ============================================ */ + +/* Main content with optional sidebar */ +.content-wrapper { + display: flex; + flex: 1; + overflow: hidden; +} + +/* Sidebar */ +.app-sidebar { + width: var(--sidebar-width); + background: var(--bg-secondary); + border-right: 1px solid var(--border-color); + overflow-y: auto; + flex-shrink: 0; +} + +.sidebar-section { + padding: var(--space-4); + border-bottom: 1px solid var(--border-color); +} + +.sidebar-section:last-child { + border-bottom: none; +} + +.sidebar-section-title { + font-size: var(--text-xs); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); + margin-bottom: var(--space-3); +} + +/* Main content area */ +.app-content { + flex: 1; + overflow-y: auto; + padding: var(--space-4); +} + +.app-content-full { + flex: 1; + overflow: hidden; + position: relative; +} + +/* ============================================ + DASHBOARD LAYOUTS + ============================================ */ + +/* Full-screen dashboard (maps, etc.) */ +.dashboard-layout { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; +} + +.dashboard-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-2) var(--space-4); + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + flex-shrink: 0; +} + +.dashboard-header-logo { + font-size: var(--text-lg); + font-weight: var(--font-bold); + color: var(--text-primary); +} + +.dashboard-header-logo span { + font-size: var(--text-sm); + font-weight: var(--font-normal); + color: var(--text-dim); + margin-left: var(--space-2); +} + +.dashboard-main { + flex: 1; + display: flex; + overflow: hidden; + position: relative; +} + +.dashboard-map { + flex: 1; + position: relative; +} + +.dashboard-sidebar { + width: 320px; + background: var(--bg-secondary); + border-left: 1px solid var(--border-color); + overflow-y: auto; + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-3); +} + +/* ============================================ + PAGE LAYOUTS + ============================================ */ +.page-container { + max-width: var(--content-max-width); + margin: 0 auto; + padding: var(--space-6); +} + +.page-header { + margin-bottom: var(--space-6); +} + +.page-title { + font-size: var(--text-3xl); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: var(--space-2); +} + +.page-description { + font-size: var(--text-base); + color: var(--text-secondary); +} + +/* ============================================ + RESPONSIVE BREAKPOINTS + ============================================ */ +@media (max-width: 1024px) { + .app-sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: var(--z-fixed); + transform: translateX(-100%); + transition: transform var(--transition-base); + } + + .app-sidebar.open { + transform: translateX(0); + } + + .dashboard-sidebar { + width: 280px; + } +} + +@media (max-width: 768px) { + .app-nav { + display: none; + } + + .mobile-nav { + display: flex; + } + + .hamburger-btn { + display: flex; + } + + .app-header { + padding: 0 var(--space-3); + } + + .app-logo-text { + display: none; + } + + .header-utilities { + gap: var(--space-1); + } + + .page-container { + padding: var(--space-4); + } + + .dashboard-sidebar { + position: fixed; + right: 0; + top: 0; + bottom: 0; + z-index: var(--z-fixed); + transform: translateX(100%); + transition: transform var(--transition-base); + } + + .dashboard-sidebar.open { + transform: translateX(0); + } +} + +/* ============================================ + OVERLAY (for mobile drawers) + ============================================ */ +.drawer-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: calc(var(--z-fixed) - 1); + opacity: 0; + visibility: hidden; + transition: all var(--transition-base); +} + +.drawer-overlay.visible { + opacity: 1; + visibility: visible; +} + +/* ============================================ + BACK LINK + ============================================ */ +.back-link { + display: inline-flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-sm); + color: var(--text-secondary); + text-decoration: none; + transition: color var(--transition-fast); +} + +.back-link:hover { + color: var(--accent-cyan); +} diff --git a/static/css/core/variables.css b/static/css/core/variables.css new file mode 100644 index 0000000..67ffa54 --- /dev/null +++ b/static/css/core/variables.css @@ -0,0 +1,190 @@ +/** + * INTERCEPT Design Tokens + * Single source of truth for colors, spacing, typography, and effects + * Import this file FIRST in any stylesheet that needs design tokens + */ + +:root { + /* ============================================ + COLOR PALETTE - Dark Theme (Default) + ============================================ */ + + /* Backgrounds - layered depth system */ + --bg-primary: #0a0c10; + --bg-secondary: #0f1218; + --bg-tertiary: #151a23; + --bg-card: #121620; + --bg-elevated: #1a202c; + --bg-overlay: rgba(0, 0, 0, 0.7); + + /* Accent colors */ + --accent-cyan: #4a9eff; + --accent-cyan-dim: rgba(74, 158, 255, 0.15); + --accent-cyan-hover: #6bb3ff; + --accent-green: #22c55e; + --accent-green-dim: rgba(34, 197, 94, 0.15); + --accent-red: #ef4444; + --accent-red-dim: rgba(239, 68, 68, 0.15); + --accent-orange: #f59e0b; + --accent-orange-dim: rgba(245, 158, 11, 0.15); + --accent-amber: #d4a853; + --accent-amber-dim: rgba(212, 168, 83, 0.15); + --accent-yellow: #eab308; + --accent-purple: #a855f7; + + /* Text hierarchy */ + --text-primary: #e8eaed; + --text-secondary: #9ca3af; + --text-dim: #4b5563; + --text-muted: #374151; + --text-inverse: #0a0c10; + + /* Borders */ + --border-color: #1f2937; + --border-light: #374151; + --border-glow: rgba(74, 158, 255, 0.2); + --border-focus: var(--accent-cyan); + + /* Status colors */ + --status-online: #22c55e; + --status-warning: #f59e0b; + --status-error: #ef4444; + --status-offline: #6b7280; + --status-info: #3b82f6; + + /* ============================================ + SPACING SCALE + ============================================ */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; + --space-12: 48px; + --space-16: 64px; + + /* ============================================ + TYPOGRAPHY + ============================================ */ + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; + + /* Font sizes */ + --text-xs: 10px; + --text-sm: 12px; + --text-base: 14px; + --text-lg: 16px; + --text-xl: 18px; + --text-2xl: 20px; + --text-3xl: 24px; + --text-4xl: 30px; + + /* Font weights */ + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + + /* Line heights */ + --leading-tight: 1.25; + --leading-normal: 1.5; + --leading-relaxed: 1.75; + + /* ============================================ + BORDERS & RADIUS + ============================================ */ + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-full: 9999px; + + /* ============================================ + SHADOWS + ============================================ */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); + --shadow-glow: 0 0 20px rgba(74, 158, 255, 0.15); + + /* ============================================ + TRANSITIONS + ============================================ */ + --transition-fast: 150ms ease; + --transition-base: 200ms ease; + --transition-slow: 300ms ease; + + /* ============================================ + Z-INDEX SCALE + ============================================ */ + --z-base: 0; + --z-dropdown: 100; + --z-sticky: 200; + --z-fixed: 300; + --z-modal-backdrop: 400; + --z-modal: 500; + --z-toast: 600; + --z-tooltip: 700; + + /* ============================================ + LAYOUT + ============================================ */ + --header-height: 60px; + --nav-height: 44px; + --sidebar-width: 280px; + --stats-strip-height: 36px; + --content-max-width: 1400px; +} + +/* ============================================ + LIGHT THEME OVERRIDES + ============================================ */ +[data-theme="light"] { + --bg-primary: #f8fafc; + --bg-secondary: #f1f5f9; + --bg-tertiary: #e2e8f0; + --bg-card: #ffffff; + --bg-elevated: #f8fafc; + --bg-overlay: rgba(255, 255, 255, 0.9); + + --accent-cyan: #2563eb; + --accent-cyan-dim: rgba(37, 99, 235, 0.1); + --accent-cyan-hover: #1d4ed8; + --accent-green: #16a34a; + --accent-green-dim: rgba(22, 163, 74, 0.1); + --accent-red: #dc2626; + --accent-red-dim: rgba(220, 38, 38, 0.1); + --accent-orange: #d97706; + --accent-orange-dim: rgba(217, 119, 6, 0.1); + --accent-amber: #b45309; + --accent-amber-dim: rgba(180, 83, 9, 0.1); + + --text-primary: #0f172a; + --text-secondary: #475569; + --text-dim: #94a3b8; + --text-muted: #cbd5e1; + --text-inverse: #f8fafc; + + --border-color: #e2e8f0; + --border-light: #cbd5e1; + --border-glow: rgba(37, 99, 235, 0.15); + + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15); + --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.1); +} + +/* ============================================ + REDUCED MOTION + ============================================ */ +@media (prefers-reduced-motion: reduce) { + :root { + --transition-fast: 0ms; + --transition-base: 0ms; + --transition-slow: 0ms; + } +} diff --git a/static/css/index.css b/static/css/index.css index 6bc9d3c..e62208b 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,3 +1,15 @@ +/** + * INTERCEPT Main Styles + * Legacy styles for index.html - will be incrementally refactored + * + * Note: Design tokens are now imported from core/variables.css + * New pages should import core CSS directly in templates + */ + +/* Import design tokens (provides CSS variables) */ +@import url('./core/variables.css'); + +/* Font import - kept for backward compatibility with pages not using base template */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); * { @@ -6,64 +18,6 @@ padding: 0; } -:root { - /* Tactical dark palette */ - --bg-primary: #0a0c10; - --bg-secondary: #0f1218; - --bg-tertiary: #151a23; - --bg-card: #121620; - --bg-elevated: #1a202c; - - /* Accent colors - sophisticated blue/amber */ - --accent-cyan: #4a9eff; - --accent-cyan-dim: rgba(74, 158, 255, 0.15); - --accent-green: #22c55e; - --accent-green-dim: rgba(34, 197, 94, 0.15); - --accent-red: #ef4444; - --accent-red-dim: rgba(239, 68, 68, 0.15); - --accent-orange: #f59e0b; - --accent-amber: #d4a853; - --accent-amber-dim: rgba(212, 168, 83, 0.15); - - /* Text hierarchy */ - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --text-muted: #374151; - - /* Borders */ - --border-color: #1f2937; - --border-light: #374151; - --border-glow: rgba(74, 158, 255, 0.2); - - /* Status colors */ - --status-online: #22c55e; - --status-warning: #f59e0b; - --status-error: #ef4444; - --status-offline: #6b7280; -} - -[data-theme="light"] { - --bg-primary: #f8fafc; - --bg-secondary: #f1f5f9; - --bg-tertiary: #e2e8f0; - --bg-card: #ffffff; - --bg-elevated: #f8fafc; - --accent-cyan: #2563eb; - --accent-cyan-dim: rgba(37, 99, 235, 0.1); - --accent-green: #16a34a; - --accent-red: #dc2626; - --accent-orange: #d97706; - --accent-amber: #b45309; - --text-primary: #0f172a; - --text-secondary: #475569; - --text-dim: #94a3b8; - --text-muted: #cbd5e1; - --border-color: #e2e8f0; - --border-light: #cbd5e1; - --border-glow: rgba(37, 99, 235, 0.15); -} - [data-theme="light"] body { background: var(--bg-primary); } diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css index 02c2790..bc9fa33 100644 --- a/static/css/satellite_dashboard.css +++ b/static/css/satellite_dashboard.css @@ -1,3 +1,9 @@ +/** + * Satellite Dashboard Styles + * Imports design tokens for consistency, with dashboard-specific overrides + */ +@import url('./core/variables.css'); + * { margin: 0; padding: 0; @@ -5,20 +11,11 @@ } :root { - --bg-dark: #0a0c10; - --bg-panel: #0f1218; - --bg-card: #151a23; - --border-color: #1f2937; - --border-glow: #4a9eff; - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --accent-cyan: #4a9eff; - --accent-green: #22c55e; - --accent-orange: #f59e0b; - --accent-red: #ef4444; - --accent-purple: #a855f7; - --accent-amber: #d4a853; + /* Dashboard-specific aliases (for backward compatibility) */ + --bg-dark: var(--bg-primary); + --bg-panel: var(--bg-secondary); + --bg-card: var(--bg-tertiary); + /* Use tokens for shared values, keep custom values for dashboard-specific */ --grid-line: rgba(74, 158, 255, 0.08); } @@ -211,6 +208,7 @@ body { } /* Main dashboard grid */ +/* Header ~60px + Controls bar ~55px = ~115px */ .dashboard { position: relative; z-index: 10; @@ -218,7 +216,8 @@ body { grid-template-columns: 1fr 1fr 340px; grid-template-rows: 1fr auto; gap: 0; - height: calc(100vh - 60px); + height: calc(100dvh - 115px); + height: calc(100vh - 115px); /* Fallback */ min-height: 500px; } @@ -696,7 +695,7 @@ body { display: flex; flex-direction: column; height: auto; - min-height: calc(100vh - 60px); + min-height: calc(100dvh - 115px); } .polar-container, diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html index 2cd93bb..7efc073 100644 --- a/templates/adsb_dashboard.html +++ b/templates/adsb_dashboard.html @@ -1,9 +1,12 @@ - + - AIRCRAFT RADAR // INTERCEPT - See the Invisible + AIRCRAFT RADAR // iNTERCEPT + + + {% if offline_settings.fonts_source == 'local' %} @@ -27,8 +30,10 @@
@@ -42,10 +47,14 @@
Back - Main Dashboard + Main Dashboard
+ + {% set active_mode = 'adsb' %} + {% include 'partials/nav.html' %} +
diff --git a/templates/ais_dashboard.html b/templates/ais_dashboard.html index e964f46..8b0e447 100644 --- a/templates/ais_dashboard.html +++ b/templates/ais_dashboard.html @@ -1,14 +1,17 @@ - + - VESSEL RADAR // INTERCEPT - See the Invisible + VESSEL RADAR // iNTERCEPT + + + {% if offline_settings.fonts_source == 'local' %} {% else %} - + {% endif %} {% if offline_settings.assets_source == 'local' %} @@ -28,8 +31,10 @@
@@ -47,6 +52,10 @@
+ + {% set active_mode = 'ais' %} + {% include 'partials/nav.html' %} +
diff --git a/templates/components/card.html b/templates/components/card.html new file mode 100644 index 0000000..c83088c --- /dev/null +++ b/templates/components/card.html @@ -0,0 +1,24 @@ +{# + Card/Panel Component + Reusable container with optional header and footer + + Variables: + - title: Optional card header title + - indicator: If true, shows status indicator dot in header + - indicator_active: If true, indicator is active/green + - no_padding: If true, removes body padding +#} + +
+ {% if title %} +
+ {{ title }} + {% if indicator %} +
+ {% endif %} +
+ {% endif %} +
+ {{ caller() }} +
+
diff --git a/templates/components/empty_state.html b/templates/components/empty_state.html new file mode 100644 index 0000000..8673707 --- /dev/null +++ b/templates/components/empty_state.html @@ -0,0 +1,38 @@ +{# + Empty State Component + Display when no data is available + + Variables: + - icon: Optional SVG icon (default: generic empty icon) + - title: Main message (default: "No data") + - description: Optional helper text + - action_text: Optional button text + - action_onclick: Optional button onclick handler + - action_href: Optional button link +#} + +
+
+ {% if icon %} + {{ icon|safe }} + {% else %} + + + + + {% endif %} +
+
{{ title|default('No data') }}
+ {% if description %} +
{{ description }}
+ {% endif %} + {% if action_text %} +
+ {% if action_href %} + {{ action_text }} + {% elif action_onclick %} + + {% endif %} +
+ {% endif %} +
diff --git a/templates/components/loading.html b/templates/components/loading.html new file mode 100644 index 0000000..c616b93 --- /dev/null +++ b/templates/components/loading.html @@ -0,0 +1,27 @@ +{# + Loading State Component + Display while data is being fetched + + Variables: + - text: Optional loading text (default: "Loading...") + - size: 'sm', 'md', or 'lg' (default: 'md') + - overlay: If true, renders as full overlay +#} + +{% if overlay %} +
+
+ + {% if text %} +
{{ text }}
+ {% endif %} +
+
+{% else %} +
+ + {% if text %} + {{ text }} + {% endif %} +
+{% endif %} diff --git a/templates/components/stats_strip.html b/templates/components/stats_strip.html new file mode 100644 index 0000000..b70e2db --- /dev/null +++ b/templates/components/stats_strip.html @@ -0,0 +1,47 @@ +{# + Stats Strip Component + Horizontal bar displaying key metrics + + Variables: + - stats: List of stat objects with 'id', 'value', 'label', and optional 'title' + - show_divider: Show divider after stats (default: true) + - status_dot_id: Optional ID for status indicator dot + - status_text_id: Optional ID for status text + - time_id: Optional ID for time display +#} + +
+
+ {% for stat in stats %} +
+ {{ stat.value|default('0') }} + {{ stat.label }} +
+ {% endfor %} + + {% if show_divider|default(true) %} +
+ {% endif %} + + {# Additional content from caller #} + {% if caller is defined %} + {{ caller() }} + {% endif %} + + {% if status_dot_id or status_text_id %} +
+
+ {% if status_dot_id %} +
+ {% endif %} + {% if status_text_id %} + STANDBY + {% endif %} +
+ {% endif %} + + {% if time_id %} +
--:--:-- UTC
+ {% endif %} +
+
diff --git a/templates/components/status_badge.html b/templates/components/status_badge.html new file mode 100644 index 0000000..783aeeb --- /dev/null +++ b/templates/components/status_badge.html @@ -0,0 +1,27 @@ +{# + Status Badge Component + Compact status indicator with dot and text + + Variables: + - status: 'online', 'offline', 'warning', 'error' (default: 'offline') + - text: Status text to display + - id: Optional ID for the text element (for JS updates) + - dot_id: Optional ID for the dot element (for JS updates) + - pulse: If true, adds pulse animation to dot +#} + +{% set status_class = { + 'online': 'online', + 'active': 'online', + 'offline': 'offline', + 'warning': 'warning', + 'error': 'error', + 'inactive': 'inactive' +}.get(status|default('offline'), 'inactive') %} + +
+
+ {{ text|default('Unknown') }} +
diff --git a/templates/layout/base.html b/templates/layout/base.html new file mode 100644 index 0000000..09e97ee --- /dev/null +++ b/templates/layout/base.html @@ -0,0 +1,169 @@ + + + + + + {% block title %}iNTERCEPT{% endblock %} // iNTERCEPT + + + {# Fonts - Conditional CDN/Local loading #} + {% if offline_settings and offline_settings.fonts_source == 'local' %} + + {% else %} + + {% endif %} + + {# Core CSS (Design System) #} + + + + + + {# Responsive styles #} + + + {# Page-specific CSS #} + {% block styles %}{% endblock %} + + {# Page-specific head content #} + {% block head %}{% endblock %} + + +
+ {# Global Header #} + {% block header %} +
+
+ + + {% if version %} + v{{ version }} + {% endif %} +
+
+ {% block header_right %} +
+ UTC + --:--:-- +
+ {% endblock %} +
+
+ {% endblock %} + + {# Global Navigation - opt-in for pages that need it #} + {# Override this block and include 'partials/nav.html' in child templates #} + {% block navigation %}{% endblock %} + + {# Main Content Area #} +
+ {% block main %} +
+ {# Optional Sidebar #} + {% block sidebar %}{% endblock %} + + {# Page Content #} +
+ {% block content %}{% endblock %} +
+
+ {% endblock %} +
+ + {# Toast/Notification Container #} +
+
+ + {# Core JavaScript #} + + + {# Page-specific JavaScript #} + {% block scripts %}{% endblock %} + + diff --git a/templates/layout/base_dashboard.html b/templates/layout/base_dashboard.html new file mode 100644 index 0000000..5714708 --- /dev/null +++ b/templates/layout/base_dashboard.html @@ -0,0 +1,228 @@ +{% extends 'layout/base.html' %} + +{# + Dashboard Base Template + Extended layout for full-screen dashboard pages (ADSB, AIS, Satellite, etc.) + Features: Full-height layout, stats strip, sidebar overlay on mobile + + Variables: + - active_mode: The current mode for nav highlighting (e.g., 'adsb', 'ais', 'satellite') +#} + +{% block styles %} +{{ super() }} + +{% endblock %} + +{% block header %} +
+
+ +
+ + {% block dashboard_title %}DASHBOARD{% endblock %} + + + // iNTERCEPT + +
+
+
+ {% block dashboard_header_center %}{% endblock %} +
+ {% block agent_selector %}{% endblock %} + Back + Main Dashboard +
+
+
+{% endblock %} + +{% block navigation %} +{# Include the unified nav partial with active_mode set #} +{% include 'partials/nav.html' with context %} +{% endblock %} + +{% block main %} +{# Background effects #} +
+ {% block dashboard_bg %} +
+ {% endblock %} +
+
+ +{# Stats strip #} +{% block stats_strip %}{% endblock %} + +{# Dashboard content #} +
+ {% block dashboard_content %}{% endblock %} +
+{% endblock %} + +{% block scripts %} +{{ super() }} + +{% endblock %} diff --git a/templates/partials/nav.html b/templates/partials/nav.html new file mode 100644 index 0000000..a88f02e --- /dev/null +++ b/templates/partials/nav.html @@ -0,0 +1,304 @@ +{# + Global Navigation Partial + Single source of truth for app navigation + + Compatible with: + - index.html (uses switchMode() for mode panels) + - Dashboard pages (uses navigation links) + + Variables: + - active_mode: Current active mode (e.g., 'pager', 'adsb', 'wifi') + - show_mode_switcher: If true (default), shows mode switching nav for index.html + If false, shows simplified dashboard nav +#} + +{% set show_mode_switcher = show_mode_switcher|default(true) %} + +{# Desktop Navigation - uses existing CSS class names for compatibility #} + + +{# Mobile Navigation Bar #} + + +{# JavaScript stub for pages that don't have switchMode defined #} + diff --git a/templates/partials/page_header.html b/templates/partials/page_header.html new file mode 100644 index 0000000..5d13ecd --- /dev/null +++ b/templates/partials/page_header.html @@ -0,0 +1,37 @@ +{# + Page Header Partial + Consistent page title with optional description and actions + + Variables: + - title: Page title (required) + - description: Optional description text + - back_url: Optional back link URL + - back_text: Optional back link text (default: "Back") +#} + +
+ {% if back_url %} + + + + + + + {{ back_text|default('Back') }} + + {% endif %} + +
+
+

{{ title }}

+ {% if description %} +

{{ description }}

+ {% endif %} +
+ {% if caller is defined %} +
+ {{ caller() }} +
+ {% endif %} +
+
diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html index 74d56a9..36c67bf 100644 --- a/templates/satellite_dashboard.html +++ b/templates/satellite_dashboard.html @@ -1,9 +1,12 @@ - + - SATELLITE COMMAND // iNTERCEPT - See the Invisible + SATELLITE COMMAND // iNTERCEPT + + + {% if offline_settings.fonts_source == 'local' %} @@ -27,8 +30,10 @@
@@ -62,10 +67,14 @@ TRACKING
--:--:-- UTC
- Main Dashboard + Main Dashboard
+ + {% set active_mode = 'satellite' %} + {% include 'partials/nav.html' %} +