Mediusa/FlockRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mediusa
2026-09-12 10:02:51 -07:00
parent 19a1108384
commit 31fdb8b7be
14 changed files with 237 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

assets/img/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

assets/img/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

assets/img/logo.svg
+86
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

assets/img/og-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

css/styles.css
+38 -22
View File
@@ -117,32 +117,46 @@ body {
color: var(--text-main);
}
.radar-icon-box {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
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);
.brand-logo-emblem {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: var(--shadow-radar);
flex-shrink: 0;
}
.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;
height: 8px;
background-color: var(--accent-radar);
top: -2px;
right: -2px;
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 {
0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
70% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
@keyframes brand-ping {
0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.8); }
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(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;
background: linear-gradient(to right, #ffffff, #94a3b8);
letter-spacing: 0.04em;
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.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

favicon.svg
+44
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

index.html
+39 -16
View File
@@ -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/">
<!-- Favicon Suite & App Icons -->
<link rel="icon" type="image/svg+xml" href="favicon.svg?v=14">
<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 -->
<meta property="og:title" content="FlockRadar | Live ALPR Camera Awareness & Directory">
<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.">
<!-- 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">
<div class="radar-icon-box" aria-hidden="true">
<div class="pulse-dot"></div>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="m12 12 5-5"></path>
</svg>
<a href="#" class="brand-wrapper" id="brand-link" title="FlockRadar Home">
<div class="brand-logo-emblem" aria-hidden="true">
<img src="favicon.svg?v=14" alt="FlockRadar Emblem" width="40" height="40" class="brand-logo-img">
<span class="brand-radar-ping"></span>
</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="js/icons.js?v=13"></script>
<script src="js/auth.js?v=13"></script>
<script src="js/radar.js?v=13"></script>
<script src="js/app.js?v=13"></script>
<script src="data/portals.js?v=14"></script>
<script src="js/icons.js?v=14"></script>
<script src="js/auth.js?v=14"></script>
<script src="js/radar.js?v=14"></script>
<script src="js/app.js?v=14"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>
manifest.json
+16 -3
View File
@@ -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",
"sizes": "192x192 512x512",
"type": "image/svg+xml"
"src": "favicon.svg",
"sizes": "any",
"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"
}
]
}
og-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

sw.js
+14 -7
View File
@@ -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',
'./js/icons.js?v=13',
'./js/app.js?v=13',
'./js/auth.js?v=13',
'./js/radar.js?v=13',
'./data/portals.js?v=13',
'./css/styles.css?v=14',
'./js/icons.js?v=14',
'./js/app.js?v=14',
'./js/auth.js?v=14',
'./js/radar.js?v=14',
'./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'
];