feat(branding): add high-res logo emblem, multi-platform favicon suite, and Open Graph social sharing card

assets/img/logo.svg

@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <!-- Background Gradient -->
+    <radialGradient id="bgGrad" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#0e1726"/>
+      <stop offset="100%" stop-color="#05070a"/>
+    </radialGradient>
+
+    <!-- Cyan Glow Gradient -->
+    <linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+
+    <!-- Radar Sweep Gradient -->
+    <linearGradient id="sweepGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#06b6d4" stop-opacity="0.65"/>
+      <stop offset="50%" stop-color="#0284c7" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#06b6d4" stop-opacity="0"/>
+    </linearGradient>
+
+    <!-- Crimson Alert Gradient -->
+    <linearGradient id="redGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f43f5e"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+
+    <!-- Glow Filters -->
+    <filter id="glowCyan" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+    
+    <filter id="glowRed" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+
+  <!-- Squircle App Icon Base -->
+  <rect x="16" y="16" width="480" height="480" rx="108" ry="108" fill="url(#bgGrad)" stroke="rgba(56, 189, 248, 0.25)" stroke-width="4"/>
+
+  <!-- Radar Grid Background -->
+  <g opacity="0.3" stroke="#38bdf8" stroke-width="1.5">
+    <!-- Concentric Range Rings -->
+    <circle cx="256" cy="256" r="210" fill="none" stroke-dasharray="6,6"/>
+    <circle cx="256" cy="256" r="160" fill="none"/>
+    <circle cx="256" cy="256" r="110" fill="none" stroke-dasharray="4,4"/>
+    <circle cx="256" cy="256" r="60" fill="none"/>
+
+    <!-- Crosshair Axes -->
+    <line x1="256" y1="46" x2="256" y2="466"/>
+    <line x1="46" y1="256" x2="466" y2="256"/>
+    <line x1="108" y1="108" x2="404" y2="404" stroke-dasharray="3,3"/>
+    <line x1="108" y1="404" x2="404" y2="108" stroke-dasharray="3,3"/>
+  </g>
+
+  <!-- Active 90-Degree Radar Sweep Cone -->
+  <path d="M 256 256 L 404 108 A 210 210 0 0 0 256 46 Z" fill="url(#sweepGrad)" filter="url(#glowCyan)"/>
+
+  <!-- Outer Protective Shield Ring -->
+  <circle cx="256" cy="256" r="190" fill="none" stroke="url(#cyanGrad)" stroke-width="6" stroke-linecap="round" stroke-dasharray="140 25 80 25" filter="url(#glowCyan)"/>
+
+  <!-- Camera Aperture Hexagon / ALPR Lens Rim -->
+  <polygon points="256,136 360,196 360,316 256,376 152,316 152,196" fill="rgba(6, 182, 212, 0.08)" stroke="url(#cyanGrad)" stroke-width="5" stroke-linejoin="round"/>
+
+  <!-- ALPR Precision Optical Crosshair Brackets -->
+  <path d="M 216 196 L 196 196 L 196 216" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round"/>
+  <path d="M 296 196 L 316 196 L 316 216" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round"/>
+  <path d="M 216 316 L 196 316 L 196 296" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round"/>
+  <path d="M 296 316 L 316 316 L 316 296" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round"/>
+
+  <!-- Pulsing Alert Beacon Halo -->
+  <circle cx="256" cy="256" r="48" fill="rgba(244, 63, 94, 0.2)" stroke="#f43f5e" stroke-width="2" stroke-opacity="0.6"/>
+  <circle cx="256" cy="256" r="32" fill="url(#redGrad)" filter="url(#glowRed)"/>
+  
+  <!-- Optical Camera Core Sensor Center -->
+  <circle cx="256" cy="256" r="14" fill="#ffffff"/>
+  <circle cx="261" cy="251" r="4" fill="#ffffff" opacity="0.8"/>
+
+  <!-- Detected Surveillance Blips on Radar Sweep -->
+  <circle cx="340" cy="145" r="8" fill="#f43f5e" filter="url(#glowRed)"/>
+  <circle cx="340" cy="145" r="16" fill="none" stroke="#f43f5e" stroke-width="2" opacity="0.6"/>
+  <circle cx="375" cy="210" r="5" fill="#38bdf8" filter="url(#glowCyan)"/>
+  <circle cx="165" cy="330" r="6" fill="#38bdf8" opacity="0.8"/>
+</svg>

css/styles.css

@@ -117,32 +117,46 @@ body {
   color: var(--text-main);
 }
 
-.radar-icon-box {
+.brand-logo-emblem {
-  width: 36px;
+  position: relative;
-  height: 36px;
+  width: 40px;
-  border-radius: var(--radius-md);
+  height: 40px;
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(6, 182, 212, 0.2));
-  border: 1px solid rgba(239, 68, 68, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
+  flex-shrink: 0;
-  box-shadow: var(--shadow-radar);
 }
 
-.pulse-dot {
+.brand-logo-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  box-shadow: 0 0 16px rgba(6, 182, 212, 0.35), 0 0 4px rgba(56, 189, 248, 0.5);
+  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
+}
+
+.brand-wrapper:hover .brand-logo-img {
+  transform: scale(1.08) rotate(2deg);
+  box-shadow: 0 0 24px rgba(6, 182, 212, 0.6), 0 0 8px rgba(244, 63, 94, 0.5);
+}
+
+.brand-radar-ping {
   position: absolute;
-  width: 8px;
+  top: -2px;
-  height: 8px;
+  right: -2px;
-  background-color: var(--accent-radar);
+  width: 9px;
+  height: 9px;
+  background: #f43f5e;
+  border: 1.5px solid #07090e;
   border-radius: 50%;
-  animation: radar-pulse 2s infinite;
+  box-shadow: 0 0 8px #f43f5e;
+  animation: brand-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 
-@keyframes radar-pulse {
+@keyframes brand-ping {
-  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.8); }
-  70% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+  70% { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
-  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
 }
 
 .brand-text {
@@ -152,19 +166,21 @@ body {
 
 .brand-title {
   font-family: var(--font-heading);
-  font-size: 1.15rem;
+  font-size: 1.22rem;
   font-weight: 800;
-  letter-spacing: -0.02em;
+  letter-spacing: 0.04em;
-  background: linear-gradient(to right, #ffffff, #94a3b8);
+  background: linear-gradient(135deg, #ffffff 0%, #38bdf8 55%, #06b6d4 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  text-shadow: 0 2px 14px rgba(56, 189, 248, 0.2);
 }
 
 .brand-tagline {
-  font-size: 0.7rem;
+  font-size: 0.66rem;
   color: var(--accent-cyan);
   font-family: var(--font-mono);
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
+  font-weight: 600;
   text-transform: uppercase;
 }
 

favicon.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <radialGradient id="favBg" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#0e1726"/>
+      <stop offset="100%" stop-color="#05070a"/>
+    </radialGradient>
+    <linearGradient id="favCyan" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+    <linearGradient id="favRed" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f43f5e"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+    <linearGradient id="favSweep" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#06b6d4" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#0284c7" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+
+  <!-- High-contrast rounded dark base for browser tab readability -->
+  <rect x="16" y="16" width="480" height="480" rx="108" fill="url(#favBg)" stroke="#38bdf8" stroke-width="8"/>
+
+  <!-- Radar sweep quadrant -->
+  <path d="M 256 256 L 416 96 A 226 226 0 0 0 256 30 Z" fill="url(#favSweep)"/>
+
+  <!-- Concentric Rings -->
+  <circle cx="256" cy="256" r="226" fill="none" stroke="url(#favCyan)" stroke-width="12" stroke-linecap="round" stroke-dasharray="160 30 90 30"/>
+  <circle cx="256" cy="256" r="140" fill="none" stroke="#38bdf8" stroke-width="6" opacity="0.6"/>
+  <circle cx="256" cy="256" r="70" fill="none" stroke="#38bdf8" stroke-width="4" stroke-dasharray="8 8" opacity="0.5"/>
+
+  <!-- ALPR Optical Crosshair Axes -->
+  <line x1="256" y1="30" x2="256" y2="482" stroke="#38bdf8" stroke-width="4" opacity="0.4"/>
+  <line x1="30" y1="256" x2="482" y2="256" stroke="#38bdf8" stroke-width="4" opacity="0.4"/>
+
+  <!-- Surveillance Camera Alert Core -->
+  <circle cx="256" cy="256" r="54" fill="url(#favRed)"/>
+  <circle cx="256" cy="256" r="22" fill="#ffffff"/>
+  <circle cx="263" cy="249" r="6" fill="#ffffff" opacity="0.9"/>
+
+  <!-- Radar Blip Detection -->
+  <circle cx="360" cy="130" r="14" fill="#f43f5e"/>
+  <circle cx="360" cy="130" r="26" fill="none" stroke="#f43f5e" stroke-width="4" opacity="0.7"/>
+</svg>

index.html

@@ -7,11 +7,37 @@
   <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">
   <meta name="author" content="Public ALPR Transparency Project">
+  <link rel="canonical" href="https://flockradar.org/">
 
-  <!-- Open Graph -->
+  <!-- Favicon Suite & App Icons -->
-  <meta property="og:title" content="FlockRadar | Live ALPR Camera Awareness & Directory">
+  <link rel="icon" type="image/svg+xml" href="favicon.svg?v=14">
-  <meta property="og:description" content="Drive with real-time awareness of Flock camera recorded zones with live proximity HUD alerts, audio warnings, and public portal data.">
+  <link rel="alternate icon" href="favicon.ico?v=14">
+  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?v=14">
+  <link rel="icon" type="image/png" sizes="192x192" href="icon-192.png?v=14">
+  <link rel="icon" type="image/png" sizes="512x512" href="icon-512.png?v=14">
+  <meta name="theme-color" content="#07090e">
+  <meta name="msapplication-TileColor" content="#07090e">
+  
+  <!-- Open Graph / iMessage / WhatsApp / Facebook Preview Card -->
   <meta property="og:type" content="website">
+  <meta property="og:url" content="https://flockradar.org/">
+  <meta property="og:site_name" content="FlockRadar">
+  <meta property="og:title" content="FlockRadar | Live ALPR Camera Awareness & National Directory">
+  <meta property="og:description" content="Drive with real-time awareness of Flock camera surveillance zones. Instant proximity HUD alerts, audio warnings, and 1,439 official municipal transparency portals mapped.">
+  <meta property="og:image" content="https://flockradar.org/og-image.png?v=14">
+  <meta property="og:image:secure_url" content="https://flockradar.org/og-image.png?v=14">
+  <meta property="og:image:type" content="image/png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="FlockRadar - Live ALPR Driving Radar & National Transparency Directory">
+
+  <!-- Twitter / X Preview Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://flockradar.org/">
+  <meta name="twitter:title" content="FlockRadar | Live ALPR Camera Awareness & National Directory">
+  <meta name="twitter:description" content="Drive with real-time awareness of Flock camera surveillance zones. Instant proximity HUD alerts, audio warnings, and 1,439 official municipal portals mapped.">
+  <meta name="twitter:image" content="https://flockradar.org/og-image.png?v=14">
+  <meta name="twitter:image:alt" content="FlockRadar - Live ALPR Driving Radar & National Transparency Directory">
   
   <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -28,7 +54,7 @@
   <meta name="apple-mobile-web-app-title" content="FlockRadar">
   
   <!-- Main Stylesheet -->
-  <link rel="stylesheet" href="css/styles.css?v=13">
+  <link rel="stylesheet" href="css/styles.css?v=14">
 </head>
 <body>
 
@@ -38,13 +64,10 @@
   <nav class="site-nav" aria-label="Main Navigation">
     <div class="container nav-content">
       <div class="nav-left">
-        <a href="#" class="brand-wrapper" id="brand-link">
+        <a href="#" class="brand-wrapper" id="brand-link" title="FlockRadar Home">
-          <div class="radar-icon-box" aria-hidden="true">
+          <div class="brand-logo-emblem" aria-hidden="true">
-            <div class="pulse-dot"></div>
+            <img src="favicon.svg?v=14" alt="FlockRadar Emblem" width="40" height="40" class="brand-logo-img">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <span class="brand-radar-ping"></span>
-              <circle cx="12" cy="12" r="10"></circle>
-              <path d="m12 12 5-5"></path>
-            </svg>
           </div>
           <div class="brand-text">
             <span class="brand-title">FLOCKRADAR</span>
@@ -1133,11 +1156,11 @@
   <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=13"></script>
+  <script src="data/portals.js?v=14"></script>
-  <script src="js/icons.js?v=13"></script>
+  <script src="js/icons.js?v=14"></script>
-  <script src="js/auth.js?v=13"></script>
+  <script src="js/auth.js?v=14"></script>
-  <script src="js/radar.js?v=13"></script>
+  <script src="js/radar.js?v=14"></script>
-  <script src="js/app.js?v=13"></script>
+  <script src="js/app.js?v=14"></script>
 
   <!-- Service Worker Instant Cache Invalidation -->
   <script>

manifest.json

@@ -9,9 +9,22 @@
   "theme_color": "#07090e",
   "icons": [
     {
-      "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%2307090e'/%3E%3Ccircle cx='50' cy='50' r='38' fill='%23ef4444' opacity='0.25'/%3E%3Ccircle cx='50' cy='50' r='20' fill='%23ef4444'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23ffffff'/%3E%3C/svg%3E",
+      "src": "favicon.svg",
-      "sizes": "192x192 512x512",
+      "sizes": "any",
-      "type": "image/svg+xml"
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
 }

sw.js

@@ -1,14 +1,21 @@
 // Service Worker for FlockRadar Offline Driving & Live Updates
-const CACHE_NAME = 'flockradar-v13';
+const CACHE_NAME = 'flockradar-v14';
 const ASSETS_TO_CACHE = [
   './',
   './index.html',
-  './css/styles.css?v=13',
+  './css/styles.css?v=14',
-  './js/icons.js?v=13',
+  './js/icons.js?v=14',
-  './js/app.js?v=13',
+  './js/app.js?v=14',
-  './js/auth.js?v=13',
+  './js/auth.js?v=14',
-  './js/radar.js?v=13',
+  './js/radar.js?v=14',
-  './data/portals.js?v=13',
+  './data/portals.js?v=14',
+  './favicon.svg?v=14',
+  './favicon.ico?v=14',
+  './apple-touch-icon.png?v=14',
+  './icon-192.png?v=14',
+  './icon-512.png?v=14',
+  './og-image.png?v=14',
+  './assets/img/logo.svg',
   './assets/img/flock_pole_cam_palmdale.jpg',
   './manifest.json'
 ];