feat(mobile): declutter mobile driving interface, make map 100% immersive, compact HUD capsule and slide-up controls drawer

css/styles.css

@@ -303,6 +303,31 @@ body {
   transition: border-color var(--transition-normal);
 }
 
+.hud-capsule-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.hud-capsule-actions {
+  display: none;
+}
+
+.hud-collapsible-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.drawer-header {
+  display: none;
+}
+
+.tools-overlay {
+  display: none;
+}
+
 /* HUD Zone Badges */
 .hud-badge {
   display: inline-flex;
@@ -1838,20 +1863,283 @@ body {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* Responsive */
+/* Responsive Mobile Driving Mode (Calm, Uncluttered, Immersive Map) */
 @media (max-width: 768px) {
+  /* Ultra-Compact Site Nav */
+  .site-nav {
+    padding: 6px 12px;
+  }
+  .brand-text .brand-tagline,
+  .badge-live-pulse {
+    display: none;
+  }
+  .brand-title {
+    font-size: 0.92rem;
+  }
+  .nav-mode-switcher {
+    gap: 4px;
+  }
+  .nav-mode-btn {
+    padding: 5px 8px;
+    font-size: 0.72rem;
+  }
+  .user-profile-pill {
+    padding: 4px 8px;
+    font-size: 0.72rem;
+  }
+
+  /* Sleek Floating Top Driving Capsule */
   .driver-hud {
-    width: calc(100% - 40px);
+    position: absolute;
     top: 10px;
-    left: 20px;
-    padding: 14px;
+    left: 10px;
+    right: 10px;
+    width: auto;
+    padding: 8px 12px;
+    border-radius: 16px;
+    background: rgba(10, 14, 23, 0.88);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    gap: 4px;
+    z-index: 1000;
   }
+
+  .hud-capsule-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .hud-badge {
+    padding: 4px 8px;
+    font-size: 0.68rem;
+    gap: 5px;
+    flex-shrink: 0;
+  }
+
+  .hud-metrics-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+  }
+
+  .hud-metric-box {
+    padding: 0;
+    background: transparent;
+    border: none;
+  }
+
+  .hud-metric-number {
+    font-size: 1.15rem;
+    font-weight: 800;
+  }
+
+  .hud-metric-unit {
+    font-size: 0.65rem;
+  }
+
+  .hud-metric-label {
+    display: none;
+  }
+
+  .hud-capsule-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+  }
+
+  .btn-capsule-trigger {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: #f8fafc;
+    border-radius: 8px;
+    padding: 6px 10px;
+    font-size: 0.76rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s ease;
+  }
+
+  .btn-capsule-trigger:active {
+    background: rgba(6, 182, 212, 0.3);
+    border-color: #06b6d4;
+  }
+
+  .btn-expand-details {
+    padding: 6px 8px;
+  }
+
+  .hud-location-bar {
+    font-size: 0.72rem;
+    color: #94a3b8;
+    margin: 2px 0 0;
+    padding: 0;
+    border: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  /* Hidden by default on mobile to ensure 100% map visibility */
+  .hud-collapsible-content {
+    display: none;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    flex-direction: column;
+    gap: 8px;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+
+  .driver-hud.is-expanded .hud-collapsible-content {
+    display: flex;
+  }
+
+  /* Slide-Up Driving Controls Drawer */
   .map-top-controls {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
     top: auto;
-    bottom: 80px;
-    right: 20px;
+    width: 100%;
+    background: rgba(10, 14, 23, 0.97);
+    backdrop-filter: blur(25px);
+    -webkit-backdrop-filter: blur(25px);
+    border-top: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 22px 22px 0 0;
+    padding: 16px 16px 36px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    transform: translateY(105%);
+    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+    z-index: 3000;
+    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.75);
+    max-height: 75vh;
+    overflow-y: auto;
+  }
+
+  .map-top-controls.open-drawer {
+    transform: translateY(0);
+  }
+
+  .drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+    margin-bottom: 6px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .drawer-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #f8fafc;
+  }
+
+  .btn-close-drawer {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: #fff;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-hud-action {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 12px 16px;
+    font-size: 0.88rem;
+    background: rgba(30, 41, 59, 0.7);
+    border-radius: 10px;
+  }
+
+  .tools-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.65);
+    z-index: 2999;
+    backdrop-filter: blur(2px);
+    transition: opacity 0.25s ease;
+    opacity: 0;
+    pointer-events: none;
+    display: block;
+  }
+
+  .tools-overlay.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Compact Floating Action Button on Mobile */
+  .driver-fab-container {
+    position: absolute;
+    bottom: 22px;
+    right: 14px;
+    z-index: 500;
+    margin: 0;
+    pointer-events: auto;
+  }
+
+  .btn-driver-fab {
+    padding: 10px 16px;
+    border-radius: 9999px;
+    gap: 8px;
+    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45);
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+  }
+
+  .fab-icon-glow {
+    font-size: 1.25rem;
+  }
+
+  .fab-main-title {
+    font-size: 0.84rem;
+    font-weight: 700;
+  }
+
+  .fab-sub-title {
+    display: none;
+  }
+
+  /* Minimal Recenter Button on Mobile */
+  .btn-recenter-pill {
+    bottom: 22px;
+    left: 14px;
+    padding: 10px 16px;
+    border-radius: 9999px;
+    font-size: 0.82rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+
+  .map-legend {
+    display: none;
+  }
+
+  /* Leaflet Controls minimal */
+  .leaflet-control-zoom {
+    display: none !important; /* Touch pinch-to-zoom is native */
   }
-  .map-legend { display: none; }
 }
 
 /* --- SLEEK RADAR DARK MODE FOR MAP TILES (Zero API Key, Zero Watermarks, 100% Free) --- */

index.html

@@ -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,8 +89,10 @@
     <!-- 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">
+    <!-- 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>
@@ -104,7 +106,7 @@
               <span class="hud-metric-number" id="hud-speed-val">0</span>
               <span class="hud-metric-unit">MPH</span>
             </div>
-          <span class="hud-metric-label">Vehicle Speed</span>
+            <span class="hud-metric-label">Speed</span>
           </div>
 
           <div class="hud-metric-box">
@@ -112,11 +114,44 @@
               <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 Camera</span>
+            <span class="hud-metric-label">Nearest</span>
           </div>
         </div>
 
-      <!-- Graduated Radar Detector Signal Gauge (Escort / Valentine One Style) -->
+        <!-- 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="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>
+        </svg>
+        <span id="hud-cam-agency">Monitoring Roadway Grid</span>
+      </div>
+
+      <!-- High-Priority Pulsing Warning Banner -->
+      <div id="hud-banner-alert" class="hud-banner-alert">
+        <span class="banner-pulse-icon">⚠️</span>
+        <div>
+          <strong>FLOCK CAMERA ACTIVE ZONE</strong>
+          <p>Vehicle Profile & Plate Logging Active</p>
+        </div>
+      </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>
@@ -131,16 +166,6 @@
           </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">
-          <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>
-        </svg>
-        <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>
@@ -150,15 +175,6 @@
           </div>
         </div>
 
-      <!-- High-Priority Pulsing Warning Banner -->
-      <div id="hud-banner-alert" class="hud-banner-alert">
-        <span class="banner-pulse-icon">⚠️</span>
-        <div>
-          <strong>FLOCK CAMERA ACTIVE ZONE</strong>
-          <p>Vehicle Profile & Plate Logging Active</p>
-        </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>
@@ -172,19 +188,19 @@
               <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)
+              <span>📍</span> Palmdale
             </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 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 (Ave R & 47th St E)">
-            <span>📍</span> East AV (Ave R)
+            <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 (Ave S)">
-            <span>📍</span> South AV (Ave S)
+            <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 / Rancho Vista Blvd & Mall">
-            <span>📍</span> West AV (Mall)
+            <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">
@@ -192,10 +208,16 @@
             <button type="submit" id="btn-search-go">Jump</button>
           </form>
         </div>
+      </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>

js/radar.js

@@ -206,7 +206,16 @@
     adminPlacedCount: document.getElementById('admin-placed-count'),
     adminPlacedCamsList: document.getElementById('admin-placed-cams-list'),
     btnAdminClearAllPlaced: document.getElementById('btn-admin-clear-all-placed'),
-    btnAdminManagePins: document.getElementById('btn-admin-manage-pins')
+    btnAdminManagePins: document.getElementById('btn-admin-manage-pins'),
+
+    // Mobile Driving Controls & Drawer
+    driverHud: document.getElementById('driver-hud'),
+    btnToggleTools: document.getElementById('btn-toggle-tools'),
+    btnToggleHudDetails: document.getElementById('btn-toggle-hud-details'),
+    hudDetailsArrow: document.getElementById('hud-details-arrow'),
+    mapTopControls: document.getElementById('map-top-controls'),
+    btnCloseTools: document.getElementById('btn-close-tools'),
+    toolsOverlay: document.getElementById('tools-overlay')
   };
 
   // --- INITIALIZATION ---
@@ -1887,6 +1896,53 @@
       });
     }
 
+    // Mobile Driving Controls Drawer
+    function openToolsDrawer() {
+      if (el.mapTopControls) el.mapTopControls.classList.add('open-drawer');
+      if (el.toolsOverlay) el.toolsOverlay.classList.add('visible');
+    }
+
+    function closeToolsDrawer() {
+      if (el.mapTopControls) el.mapTopControls.classList.remove('open-drawer');
+      if (el.toolsOverlay) el.toolsOverlay.classList.remove('visible');
+    }
+
+    if (el.btnToggleTools) {
+      el.btnToggleTools.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (el.mapTopControls && el.mapTopControls.classList.contains('open-drawer')) {
+          closeToolsDrawer();
+        } else {
+          openToolsDrawer();
+        }
+      });
+    }
+
+    if (el.btnCloseTools) el.btnCloseTools.addEventListener('click', closeToolsDrawer);
+    if (el.toolsOverlay) el.toolsOverlay.addEventListener('click', closeToolsDrawer);
+
+    // Auto-close tools drawer on mobile when clicking any action button
+    if (el.mapTopControls) {
+      el.mapTopControls.querySelectorAll('.btn-hud-action').forEach(btn => {
+        btn.addEventListener('click', () => {
+          if (window.innerWidth <= 768) {
+            closeToolsDrawer();
+          }
+        });
+      });
+    }
+
+    // Toggle HUD Expanded Details on Mobile
+    if (el.btnToggleHudDetails) {
+      el.btnToggleHudDetails.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (el.driverHud) {
+          const isExpanded = el.driverHud.classList.toggle('is-expanded');
+          if (el.hudDetailsArrow) el.hudDetailsArrow.textContent = isExpanded ? '▲' : '🔍';
+        }
+      });
+    }
+
     // Sync radar when reports updated
     window.addEventListener('flock_reports_updated', () => {
       loadAllCameraData();

sw.js

@@ -1,13 +1,13 @@
 // Service Worker for FlockRadar Offline Driving & Live Updates
-const CACHE_NAME = 'flockradar-v6';
+const CACHE_NAME = 'flockradar-v8';
 const ASSETS_TO_CACHE = [
   './',
   './index.html',
-  './css/styles.css?v=6',
-  './js/app.js?v=6',
-  './js/auth.js?v=6',
-  './js/radar.js?v=6',
-  './data/portals.js?v=6',
+  './css/styles.css?v=8',
+  './js/app.js?v=8',
+  './js/auth.js?v=8',
+  './js/radar.js?v=8',
+  './data/portals.js?v=8',
   './manifest.json'
 ];