feat(mobile): mobile-first driving layout, bottom-sheet dialogs, safe-area insets, and drawer controls

This commit is contained in:
2026-09-12 09:28:04 -07:00
parent f2a8660f10
commit fef8ab6417
3 changed files with 95 additions and 41 deletions
+10 -8
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>FlockRadar | Live ALPR Camera Awareness & National Transparency Directory</title>
<meta name="description" content="A Waze-style real-time ALPR radar navigation app alerting drivers to active Flock camera recorded zones with live proximity alerts, audio warnings, and a 1,439-portal public directory.">
<meta name="keywords" content="Flock Safety, ALPR, camera radar, waze for flock, live radar, license plate readers, police surveillance, camera alerts">
@@ -28,7 +28,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=8">
<link rel="stylesheet" href="css/styles.css?v=9">
</head>
<body>
@@ -56,11 +56,13 @@
<div class="nav-mode-switcher" role="tablist">
<button id="nav-map-btn" class="nav-mode-btn active" role="tab" aria-selected="true">
<span class="mode-icon">🗺️</span>
<span>Live Radar Map</span>
<span class="nav-text-desktop">Live Radar Map</span>
<span class="nav-text-mobile">Radar</span>
</button>
<button id="nav-dir-btn" class="nav-mode-btn" role="tab" aria-selected="false">
<span class="mode-icon">📋</span>
<span>National Directory (1,439)</span>
<span class="nav-text-desktop">National Directory (1,439)</span>
<span class="nav-text-mobile">Directory</span>
</button>
</div>
</div>
@@ -969,10 +971,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=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>
<script src="data/portals.js?v=9"></script>
<script src="js/auth.js?v=9"></script>
<script src="js/radar.js?v=9"></script>
<script src="js/app.js?v=9"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>