feat(mobile): declutter mobile driving interface, make map 100% immersive, compact HUD capsule and slide-up controls drawer
This commit is contained in:
+106
-80
@@ -28,7 +28,7 @@
|
||||
<meta name="apple-mobile-web-app-title" content="FlockRadar">
|
||||
|
||||
<!-- Main Stylesheet -->
|
||||
<link rel="stylesheet" href="css/styles.css?v=7">
|
||||
<link rel="stylesheet" href="css/styles.css?v=8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -89,51 +89,50 @@
|
||||
<!-- Leaflet Map Canvas -->
|
||||
<div id="radar-map" class="radar-map-canvas" aria-label="Interactive Radar Map"></div>
|
||||
|
||||
<!-- Floating Driver HUD (Top-Left) -->
|
||||
<aside class="driver-hud" aria-live="polite">
|
||||
<!-- Status Badge -->
|
||||
<div id="hud-zone-badge" class="hud-badge badge-clear">
|
||||
<span class="badge-dot dot-clear"></span>
|
||||
<span>ALL CLEAR</span>
|
||||
</div>
|
||||
<!-- Floating Driver HUD (Compact Capsule on Mobile, Full on Desktop) -->
|
||||
<aside class="driver-hud" id="driver-hud" aria-live="polite">
|
||||
<!-- Top Driver Capsule Header -->
|
||||
<div class="hud-capsule-header">
|
||||
<!-- Status Badge -->
|
||||
<div id="hud-zone-badge" class="hud-badge badge-clear">
|
||||
<span class="badge-dot dot-clear"></span>
|
||||
<span>ALL CLEAR</span>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Row: Speed + Nearest Distance -->
|
||||
<div class="hud-metrics-row">
|
||||
<div class="hud-metric-box">
|
||||
<div class="hud-val-group">
|
||||
<span class="hud-metric-number" id="hud-speed-val">0</span>
|
||||
<span class="hud-metric-unit">MPH</span>
|
||||
<!-- Metrics Row: Speed + Nearest Distance -->
|
||||
<div class="hud-metrics-row">
|
||||
<div class="hud-metric-box">
|
||||
<div class="hud-val-group">
|
||||
<span class="hud-metric-number" id="hud-speed-val">0</span>
|
||||
<span class="hud-metric-unit">MPH</span>
|
||||
</div>
|
||||
<span class="hud-metric-label">Speed</span>
|
||||
</div>
|
||||
<span class="hud-metric-label">Vehicle Speed</span>
|
||||
</div>
|
||||
|
||||
<div class="hud-metric-box">
|
||||
<div class="hud-val-group">
|
||||
<span class="hud-metric-number" id="hud-dist-val">—</span>
|
||||
<span class="hud-metric-unit" id="hud-dist-sub">FT</span>
|
||||
<div class="hud-metric-box">
|
||||
<div class="hud-val-group">
|
||||
<span class="hud-metric-number" id="hud-dist-val">—</span>
|
||||
<span class="hud-metric-unit" id="hud-dist-sub">FT</span>
|
||||
</div>
|
||||
<span class="hud-metric-label">Nearest</span>
|
||||
</div>
|
||||
<span class="hud-metric-label">Nearest Camera</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graduated Radar Detector Signal Gauge (Escort / Valentine One Style) -->
|
||||
<div class="hud-radar-gauge-container">
|
||||
<div class="hud-radar-gauge-header">
|
||||
<span class="hud-gauge-title">SURVEILLANCE RADAR SIGNAL</span>
|
||||
<span id="hud-gauge-state" class="hud-gauge-status status-green">ALL CLEAR</span>
|
||||
</div>
|
||||
<div class="hud-signal-meter" id="hud-signal-meter">
|
||||
<div class="signal-bar bar-1 active-green" title="Signal Level 1"></div>
|
||||
<div class="signal-bar bar-2" title="Signal Level 2"></div>
|
||||
<div class="signal-bar bar-3" title="Signal Level 3"></div>
|
||||
<div class="signal-bar bar-4" title="Signal Level 4"></div>
|
||||
<div class="signal-bar bar-5" title="Signal Level 5"></div>
|
||||
<!-- Mobile Header Quick Triggers -->
|
||||
<div class="hud-capsule-actions">
|
||||
<button type="button" id="btn-toggle-tools" class="btn-capsule-trigger" title="Open Driving Controls Menu">
|
||||
<span>⚙️</span>
|
||||
<span class="capsule-btn-text">Tools</span>
|
||||
</button>
|
||||
<button type="button" id="btn-toggle-hud-details" class="btn-capsule-trigger btn-expand-details" title="Toggle Search & Locations">
|
||||
<span id="hud-details-arrow">🔍</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Agency / Street Monitoring -->
|
||||
<div class="hud-location-bar">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
<polyline points="11 12 12 12 12 16 13 16"></polyline>
|
||||
@@ -141,15 +140,6 @@
|
||||
<span id="hud-cam-agency">Monitoring Roadway Grid</span>
|
||||
</div>
|
||||
|
||||
<!-- Alert Sensitivity Selector (City Mode vs Highway Mode) -->
|
||||
<div class="hud-sensitivity-row">
|
||||
<span class="sensitivity-label">RADAR RANGE:</span>
|
||||
<div class="sensitivity-toggle-group">
|
||||
<button id="btn-sens-city" class="sens-btn active" title="Alert within 1,000 ft (Optimal for city driving)">🏙️ City (1k ft)</button>
|
||||
<button id="btn-sens-hwy" class="sens-btn" title="Alert within 2,500 ft (Optimal for freeway/SR-14 speeds)">🛣️ Highway (2.5k ft)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- High-Priority Pulsing Warning Banner -->
|
||||
<div id="hud-banner-alert" class="hud-banner-alert">
|
||||
<span class="banner-pulse-icon">⚠️</span>
|
||||
@@ -159,43 +149,75 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Auto-Spotted Status Badge -->
|
||||
<div id="hud-spotted-badge" class="hud-spotted-badge" title="Location auto-detected via network & GPS">
|
||||
<span>🛰️</span>
|
||||
<span id="hud-spotted-text">Spotting Antelope Valley Location...</span>
|
||||
</div>
|
||||
<!-- Collapsible Detailed Section (Collapsed on mobile to keep map 100% visible) -->
|
||||
<div class="hud-collapsible-content" id="hud-collapsible-content">
|
||||
<!-- Graduated Radar Detector Signal Gauge -->
|
||||
<div class="hud-radar-gauge-container">
|
||||
<div class="hud-radar-gauge-header">
|
||||
<span class="hud-gauge-title">SURVEILLANCE RADAR SIGNAL</span>
|
||||
<span id="hud-gauge-state" class="hud-gauge-status status-green">ALL CLEAR</span>
|
||||
</div>
|
||||
<div class="hud-signal-meter" id="hud-signal-meter">
|
||||
<div class="signal-bar bar-1 active-green" title="Signal Level 1"></div>
|
||||
<div class="signal-bar bar-2" title="Signal Level 2"></div>
|
||||
<div class="signal-bar bar-3" title="Signal Level 3"></div>
|
||||
<div class="signal-bar bar-4" title="Signal Level 4"></div>
|
||||
<div class="signal-bar bar-5" title="Signal Level 5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Antelope Valley Selector Bar -->
|
||||
<div class="hud-location-selector">
|
||||
<div class="location-quick-chips">
|
||||
<button id="btn-locate-me" class="loc-chip active" title="Re-detect your location via IP & GPS">
|
||||
<span>🎯</span> Auto-Detect (GPS)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale" class="loc-chip" title="Jump to Palmdale Blvd & 10th St W">
|
||||
<span>📍</span> Palmdale (Center)
|
||||
</button>
|
||||
<button id="btn-loc-lancaster" class="loc-chip" title="Jump to Lancaster ALPR Grid (Ave L & 10th St W)">
|
||||
<span>📍</span> Lancaster (Center)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale-east" class="loc-chip" title="Jump to East Palmdale (Ave R & 47th St E)">
|
||||
<span>📍</span> East AV (Ave R)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale-south" class="loc-chip" title="Jump to South Palmdale (Ave S)">
|
||||
<span>📍</span> South AV (Ave S)
|
||||
</button>
|
||||
<button id="btn-loc-rancho" class="loc-chip" title="Jump to West AV / Rancho Vista Blvd & Mall">
|
||||
<span>📍</span> West AV (Mall)
|
||||
</button>
|
||||
<!-- Alert Sensitivity Selector (City Mode vs Highway Mode) -->
|
||||
<div class="hud-sensitivity-row">
|
||||
<span class="sensitivity-label">RADAR RANGE:</span>
|
||||
<div class="sensitivity-toggle-group">
|
||||
<button id="btn-sens-city" class="sens-btn active" title="Alert within 1,000 ft (Optimal for city driving)">🏙️ City (1k ft)</button>
|
||||
<button id="btn-sens-hwy" class="sens-btn" title="Alert within 2,500 ft (Optimal for freeway/SR-14 speeds)">🛣️ Highway (2.5k ft)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Auto-Spotted Status Badge -->
|
||||
<div id="hud-spotted-badge" class="hud-spotted-badge" title="Location auto-detected via network & GPS">
|
||||
<span>🛰️</span>
|
||||
<span id="hud-spotted-text">Spotting Antelope Valley Location...</span>
|
||||
</div>
|
||||
|
||||
<!-- Quick Antelope Valley Selector Bar -->
|
||||
<div class="hud-location-selector">
|
||||
<div class="location-quick-chips">
|
||||
<button id="btn-locate-me" class="loc-chip active" title="Re-detect your location via IP & GPS">
|
||||
<span>🎯</span> Auto-Detect (GPS)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale" class="loc-chip" title="Jump to Palmdale Blvd & 10th St W">
|
||||
<span>📍</span> Palmdale
|
||||
</button>
|
||||
<button id="btn-loc-lancaster" class="loc-chip" title="Jump to Lancaster ALPR Grid">
|
||||
<span>📍</span> Lancaster
|
||||
</button>
|
||||
<button id="btn-loc-palmdale-east" class="loc-chip" title="Jump to East Palmdale">
|
||||
<span>📍</span> East AV
|
||||
</button>
|
||||
<button id="btn-loc-palmdale-south" class="loc-chip" title="Jump to South Palmdale">
|
||||
<span>📍</span> South AV
|
||||
</button>
|
||||
<button id="btn-loc-rancho" class="loc-chip" title="Jump to West AV">
|
||||
<span>📍</span> West AV
|
||||
</button>
|
||||
</div>
|
||||
<form id="map-search-form" class="map-search-box">
|
||||
<input type="text" id="map-search-input" placeholder="🔍 Search Antelope Valley street or address..." autocomplete="off">
|
||||
<button type="submit" id="btn-search-go">Jump</button>
|
||||
</form>
|
||||
</div>
|
||||
<form id="map-search-form" class="map-search-box">
|
||||
<input type="text" id="map-search-input" placeholder="🔍 Search Antelope Valley street or address..." autocomplete="off">
|
||||
<button type="submit" id="btn-search-go">Jump</button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Floating Navigation & Drive Simulator Controls (Top-Right) -->
|
||||
<div class="map-top-controls">
|
||||
<!-- Floating Navigation & Driving Controls (Drawer on Mobile, Top-Right on Desktop) -->
|
||||
<div class="map-top-controls" id="map-top-controls">
|
||||
<div class="drawer-header" id="drawer-header">
|
||||
<span class="drawer-title">⚙️ Driving Controls & Settings</span>
|
||||
<button type="button" id="btn-close-tools" class="btn-close-drawer" aria-label="Close controls">✕</button>
|
||||
</div>
|
||||
|
||||
<button id="btn-follow-car" class="btn-hud-action active" title="Automatically keep map centered on your vehicle">
|
||||
<span>🎯</span>
|
||||
<span>Follow Car: ON</span>
|
||||
@@ -238,6 +260,7 @@
|
||||
|
||||
<button id="btn-reset-sim" class="btn-hud-action" title="Reset drive position">
|
||||
<span>↺</span>
|
||||
<span>Reset Car</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-mute-sound" class="btn-hud-action" title="Toggle audio alert chime and voice">
|
||||
@@ -251,6 +274,9 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Backdrop Overlay for Mobile Drawer -->
|
||||
<div id="tools-overlay" class="tools-overlay hidden"></div>
|
||||
|
||||
<!-- Floating Map Legend (Bottom-Left) -->
|
||||
<div class="map-legend">
|
||||
<div class="legend-header">
|
||||
@@ -943,10 +969,10 @@
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
|
||||
<!-- Data & Application Logic with Cache Busting -->
|
||||
<script src="data/portals.js?v=7"></script>
|
||||
<script src="js/auth.js?v=7"></script>
|
||||
<script src="js/radar.js?v=7"></script>
|
||||
<script src="js/app.js?v=7"></script>
|
||||
<script src="data/portals.js?v=8"></script>
|
||||
<script src="js/auth.js?v=8"></script>
|
||||
<script src="js/radar.js?v=8"></script>
|
||||
<script src="js/app.js?v=8"></script>
|
||||
|
||||
<!-- Service Worker Instant Cache Invalidation -->
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user