1528 lines
96 KiB
HTML
1528 lines
96 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<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">
|
||
<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=15">
|
||
<link rel="alternate icon" href="favicon.ico?v=15">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?v=15">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png?v=15">
|
||
<link rel="icon" type="image/png" sizes="512x512" href="icon-512.png?v=15">
|
||
<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=15">
|
||
<meta property="og:image:secure_url" content="https://flockradar.org/og-image.png?v=15">
|
||
<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=15">
|
||
<meta name="twitter:image:alt" content="FlockRadar - Live ALPR Driving Radar & National Transparency Directory">
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@500;600;700;800&display=swap" rel="stylesheet">
|
||
|
||
<!-- Leaflet Map CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||
|
||
<!-- PWA & Mobile Web App Meta -->
|
||
<link rel="manifest" href="manifest.json">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="FlockRadar">
|
||
|
||
<!-- Main Stylesheet -->
|
||
<link rel="stylesheet" href="css/styles.css?v=26">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ========================================================================
|
||
SITE NAVIGATION & APP BAR
|
||
======================================================================== -->
|
||
<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" 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>
|
||
<span class="brand-tagline">ALPR Awareness Network</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- View Mode Switcher Pills -->
|
||
<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">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="9"/>
|
||
<circle cx="12" cy="12" r="5"/>
|
||
<path d="M12 3v9l5.5 3.5"/>
|
||
</svg>
|
||
</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">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/>
|
||
<line x1="9" y1="22" x2="9" y2="18"/>
|
||
<line x1="15" y1="22" x2="15" y2="18"/>
|
||
<line x1="9" y1="18" x2="15" y2="18"/>
|
||
<line x1="8" y1="6" x2="8.01" y2="6"/>
|
||
<line x1="16" y1="6" x2="16.01" y2="6"/>
|
||
<line x1="8" y1="10" x2="8.01" y2="10"/>
|
||
<line x1="16" y1="10" x2="16.01" y2="10"/>
|
||
</svg>
|
||
</span>
|
||
<span class="nav-text-desktop">National Directory (1,439)</span>
|
||
<span class="nav-text-mobile">Directory</span>
|
||
</button>
|
||
<button id="nav-support-btn" class="nav-mode-btn nav-support-btn" role="tab" aria-selected="false" title="Help support developer ($10/mo, $10, $20, $50)">
|
||
<span class="mode-icon support-heart-icon">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="currentColor" stroke="none">
|
||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||
</svg>
|
||
</span>
|
||
<span class="nav-text-desktop">Help Support Developer</span>
|
||
<span class="nav-text-mobile">Support</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-right">
|
||
<div class="badge-live-pulse" title="Database synced with official public transparency portals">
|
||
<span class="live-indicator-dot"></span>
|
||
<span>RADAR ACTIVE</span>
|
||
</div>
|
||
|
||
<!-- Driver Profile / Login Button -->
|
||
<button id="driver-profile-btn" class="user-profile-pill" title="Driver Profile & Settings">
|
||
<span id="user-profile-pill">
|
||
<span class="avatar-dot">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="12" cy="7" r="4"/>
|
||
</svg>
|
||
</span>
|
||
<span>Driver Login</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ========================================================================
|
||
VIEW 1: LIVE RADAR MAP & NAVIGATION INTERFACE (WAZE-STYLE)
|
||
======================================================================== -->
|
||
<section id="radar-view" class="radar-view-container">
|
||
<!-- Leaflet Map Canvas -->
|
||
<div id="radar-map" class="radar-map-canvas" aria-label="Interactive Radar Map"></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>
|
||
</div>
|
||
<span class="hud-metric-label" id="hud-speed-label">
|
||
<span id="hud-compass-needle" class="hud-compass-icon" title="Vehicle Heading Needle">▲</span>
|
||
<span id="hud-heading-val">IDLE</span>
|
||
</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>
|
||
<span class="hud-metric-label">Nearest</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header Quick Triggers (Audio Toggle, Tools, Search) -->
|
||
<div class="hud-capsule-actions">
|
||
<button type="button" id="btn-hud-sound-toggle" class="btn-capsule-trigger btn-sound-trigger" title="Toggle Audio Radar Alerts (Sound ON/OFF)">
|
||
<span id="hud-sound-icon">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
|
||
</span>
|
||
<span class="capsule-sound-label">Audio</span>
|
||
</button>
|
||
<button type="button" id="btn-toggle-tools" class="btn-capsule-trigger" title="Open Driving Controls Menu">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
<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">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
</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">
|
||
<svg class="flock-svg flock-svg-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
</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>
|
||
<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>
|
||
|
||
<!-- 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)">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="9" y1="22" x2="9" y2="18"/><line x1="15" y1="22" x2="15" y2="18"/><line x1="9" y1="18" x2="15" y2="18"/><line x1="8" y1="6" x2="8.01" y2="6"/><line x1="16" y1="6" x2="16.01" y2="6"/><line x1="8" y1="10" x2="8.01" y2="10"/><line x1="16" y1="10" x2="16.01" y2="10"/><line x1="8" y1="14" x2="8.01" y2="14"/><line x1="16" y1="14" x2="16.01" y2="14"/></svg>
|
||
<span>City (1k ft)</span>
|
||
</button>
|
||
<button id="btn-sens-hwy" class="sens-btn" title="Alert within 2,500 ft (Optimal for freeway/SR-14 speeds)">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="8" y2="3"/><line x1="20" y1="21" x2="16" y2="3"/><line x1="12" y1="5" x2="12" y2="8"/><line x1="12" y1="12" x2="12" y2="15"/><line x1="12" y1="19" x2="12" y2="21"/></svg>
|
||
<span>Highway (2.5k ft)</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Live Auto-Spotted Status Badge -->
|
||
<div id="hud-spotted-badge" class="hud-spotted-badge" title="Location auto-detected via network & GPS">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 10a7.33 7.33 0 0 0 10 10l1-3.5L8.5 10z"/><path d="M21 3l-8.5 8.5"/><path d="M15 6l2 2"/></svg>
|
||
<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">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
||
<span>Auto-Detect (GPS)</span>
|
||
</button>
|
||
<button id="btn-loc-palmdale" class="loc-chip" title="Jump to Palmdale Blvd & 10th St W">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<span>Palmdale</span>
|
||
</button>
|
||
<button id="btn-loc-lancaster" class="loc-chip" title="Jump to Lancaster ALPR Grid">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<span>Lancaster</span>
|
||
</button>
|
||
<button id="btn-loc-palmdale-east" class="loc-chip" title="Jump to East Palmdale">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<span>East AV</span>
|
||
</button>
|
||
<button id="btn-loc-palmdale-south" class="loc-chip" title="Jump to South Palmdale">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<span>South AV</span>
|
||
</button>
|
||
<button id="btn-loc-rancho" class="loc-chip" title="Jump to West AV">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<span>West AV</span>
|
||
</button>
|
||
<button id="btn-loc-overview" class="loc-chip" title="Zoom out to see all Antelope Valley cameras">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
||
<span>Overview (All AV)</span>
|
||
</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>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Floating Navigation & Driving Controls (Drawer on Mobile, Top-Right on Desktop) -->
|
||
<!-- Floating Navigation & Driving Controls (Desktop Single-Row Bar + Categorized Tools Dropdown / Mobile Drawer) -->
|
||
<div class="map-top-controls" id="map-top-controls">
|
||
<!-- Mobile Drawer Header -->
|
||
<div class="drawer-header" id="drawer-header">
|
||
<span class="drawer-title" style="display: flex; align-items: center; gap: 8px;">
|
||
<svg class="flock-svg flock-svg-md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
Driving Controls & Tools
|
||
</span>
|
||
<button type="button" id="btn-close-tools" class="btn-close-drawer" aria-label="Close controls">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Primary 1-Click Driving Bar (Desktop) -->
|
||
<div class="controls-primary-bar" id="controls-primary-bar">
|
||
<button id="btn-live-gps" class="btn-hud-action btn-action-gps" title="Start continuous real-time GPS tracking on your device">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
|
||
<span id="btn-live-gps-text">Live GPS Drive</span>
|
||
</button>
|
||
|
||
<button id="btn-follow-car" class="btn-hud-action active" title="Automatically keep map centered on your vehicle">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
||
<span>Follow Car: ON</span>
|
||
</button>
|
||
|
||
<button id="btn-map-layer" class="btn-hud-action" title="Toggle between Dark Canvas and Satellite View">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
||
<span>Satellite / Dark</span>
|
||
</button>
|
||
|
||
<button id="btn-corridor-heatmap" class="btn-hud-action" title="Toggle Surveillance Density Corridor Heatmap">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07l14.14-14.14"/></svg>
|
||
<span>Heatmap</span>
|
||
</button>
|
||
|
||
<button id="btn-fullscreen-mount" class="btn-hud-action" title="Toggle Fullscreen Dashboard Mount Mode">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||
<span>Fullscreen</span>
|
||
</button>
|
||
|
||
<!-- Desktop Tools Dropdown Trigger -->
|
||
<button type="button" id="btn-desktop-tools-menu" class="btn-hud-action btn-tools-dropdown-trigger" title="Open Simulation, Pins & Audio Tools">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
<span>Tools ▾</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Categorized Dropdown (Desktop) / Slide-Up Drawer (Mobile) -->
|
||
<div class="controls-tools-menu" id="controls-tools-menu">
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">SIMULATION & DRIVES</div>
|
||
<button id="btn-sim-drive" class="btn-hud-action btn-tool-item" title="Simulate driving through Palmdale camera corridors">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
<span>Simulate Palmdale Drive</span>
|
||
</button>
|
||
<button id="btn-reset-sim" class="btn-hud-action btn-tool-item" title="Reset drive position">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
|
||
<span>Reset Car</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">RADAR TESTING & PINS</div>
|
||
<button id="btn-test-camera" class="btn-hud-action btn-tool-item" title="Drop a test camera 400ft ahead of your current location to test proximity alerts">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||
<span>Place Camera 400ft Ahead</span>
|
||
</button>
|
||
<button id="btn-admin-manage-pins" class="btn-hud-action btn-tool-item" title="Admin: Manage and remove cameras you placed">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
||
<span>Admin: Placed Pins</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Driving Audio Alert Mode Selector -->
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">AUDIO ALERT STYLE</div>
|
||
<div class="audio-mode-selector" id="audio-mode-selector">
|
||
<button type="button" class="btn-audio-mode active" id="btn-audio-mode-full" data-mode="full" title="Chimes and spoken voice warnings">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
|
||
<span>Voice+Chime</span>
|
||
</button>
|
||
<button type="button" class="btn-audio-mode" id="btn-audio-mode-chime" data-mode="chime" title="Subtle radar beeps only (no speech)">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
|
||
<span>Chime Only</span>
|
||
</button>
|
||
<button type="button" class="btn-audio-mode" id="btn-audio-mode-silent" data-mode="silent" title="Visual HUD alerts only (mute audio)">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="1" y1="1" x2="23" y2="23"/><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/></svg>
|
||
<span>Silent HUD</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Offline Status & Viral Sharing -->
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">ROAD READINESS & SHARING</div>
|
||
<div class="tools-offline-status-pill" id="tools-offline-status-pill">
|
||
<span class="status-indicator-dot dot-online" id="offline-dot"></span>
|
||
<span id="tools-offline-status-text">36 Cameras Cached • Ready for Dead Zones</span>
|
||
</div>
|
||
<button type="button" id="btn-share-radar-tools" class="btn-hud-action btn-tool-item btn-share-accent" title="Share FlockRadar with other drivers">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
|
||
<span>Share Radar with Drivers</span>
|
||
</button>
|
||
<button type="button" id="btn-install-hud-app" class="btn-hud-action btn-tool-item" title="Add FlockRadar to Home Screen as a Car HUD App">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||
<span id="install-app-label">Install Car HUD App</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Pre-Trip Surveillance Commute Scanner -->
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">PRE-TRIP ROUTE SCANNER</div>
|
||
<div class="route-scanner-container">
|
||
<select id="route-corridor-select" class="route-corridor-select" title="Select corridor to scan camera exposure">
|
||
<option value="">Choose Corridor to Scan...</option>
|
||
<option value="palmdale-blvd">Palmdale Blvd (SR-14 to 50th E) • 10 Cams</option>
|
||
<option value="10th-st-west">10th St West (Ave S to Ave L) • 8 Cams</option>
|
||
<option value="sierra-hwy">Sierra Hwy (Palmdale to Lancaster) • 5 Cams</option>
|
||
<option value="avenue-s">Avenue S (Cross-Town Corridor) • 4 Cams</option>
|
||
<option value="avenue-r-clean">Avenue R (Surveillance-Free Bypass) • 0 Cams</option>
|
||
</select>
|
||
<div id="route-scan-result" class="route-scan-result hidden">
|
||
<div class="scan-score-header">
|
||
<span class="scan-score-badge" id="scan-score-badge">EXPOSURE: HIGH</span>
|
||
<span class="scan-camera-count" id="scan-camera-count">10 Cameras</span>
|
||
</div>
|
||
<p class="scan-summary-text" id="scan-summary-text"></p>
|
||
<div class="scan-detour-box" id="scan-detour-box">
|
||
<strong class="detour-title">🟢 RECOMMENDED BYPASS:</strong>
|
||
<p id="scan-detour-text" class="detour-desc"></p>
|
||
<button type="button" id="btn-apply-route-bypass" class="btn-detour-apply">Show Clean Detour on Map</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Civic Privacy & SB 34 Plate Audit -->
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">CIVIC PRIVACY & LEGAL AUDIT</div>
|
||
<button type="button" id="btn-open-pra-generator" class="btn-hud-action btn-tool-item btn-pra-accent" title="Generate formal California Public Records Act demand for license plate read logs">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
<span>Audit My Plate (CA SB 34 Request)</span>
|
||
</button>
|
||
<button type="button" id="btn-toggle-bg-audio" class="btn-hud-action btn-tool-item" title="Keep radar audio active when using Apple Maps or with locked screen">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg>
|
||
<span id="bg-audio-label">Background Audio Guard: OFF</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Open Data Export -->
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">OPEN CIVIC DATA EXPORT</div>
|
||
<div class="export-btn-grid">
|
||
<button type="button" id="btn-export-geojson" class="btn-hud-action btn-tool-item" title="Download camera nodes as GeoJSON for Google Earth / QGIS">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
<span>Export GeoJSON</span>
|
||
</button>
|
||
<button type="button" id="btn-export-csv" class="btn-hud-action btn-tool-item" title="Download camera nodes as CSV spreadsheet">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||
<span>Export CSV</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tools-group">
|
||
<div class="tools-group-label">DIAGNOSTICS & SYSTEM</div>
|
||
<button id="btn-test-alert" class="btn-hud-action btn-tool-item" title="Immediately test voice alert and radar siren">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
|
||
<span>Test Alert Voice</span>
|
||
</button>
|
||
<button id="btn-mobile-connect" class="btn-hud-action btn-tool-item" title="Show mobile network link to open on phone in car">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||
<span>Phone Link</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<span class="legend-pulse-dot"></span>
|
||
<span>RADAR ZONE LEGEND</span>
|
||
</div>
|
||
<div class="legend-content">
|
||
<div class="legend-item">
|
||
<span class="legend-sample-zone"></span>
|
||
<span>Camera Detection Zone (280-450m)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-sample-pin"></span>
|
||
<span>ALPR Camera Node</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-sample-car"></span>
|
||
<span>Your Vehicle Heading</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Recenter Pill (Appears when map is dragged away from car) -->
|
||
<button id="btn-recenter-car" class="btn-recenter-pill hidden" title="Re-center map on your vehicle">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
|
||
<span>Recenter on Vehicle</span>
|
||
</button>
|
||
|
||
<!-- Giant 1-Tap Floating Action Button: Snap & Log Flock Camera (Bottom-Right) -->
|
||
<div class="driver-fab-container">
|
||
<button id="btn-quick-log-cam" class="btn-driver-fab" title="Snap camera photo on pole & log at GPS location">
|
||
<div class="fab-icon-glow">
|
||
<svg class="flock-svg flock-svg-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
|
||
</div>
|
||
<div class="fab-text-group">
|
||
<span class="fab-main-title">+ SNAP & LOG CAMERA</span>
|
||
<span class="fab-sub-title">Opens Camera for Photo Proof</span>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========================================================================
|
||
VIEW 2: NATIONAL DIRECTORY (ORIGINAL PORTAL DATABASE)
|
||
======================================================================== -->
|
||
<div id="directory-view" style="display: none;">
|
||
<!-- Hero & Aggregate KPI Metrics -->
|
||
<header class="hero-section">
|
||
<div class="container">
|
||
<div class="hero-pill">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
<span>CIVIC SURVEILLANCE TRANSPARENCY</span>
|
||
</div>
|
||
|
||
<h1 class="hero-title">
|
||
The Public Directory of <span class="gradient-text">Flock Safety Transparency Portals</span>
|
||
</h1>
|
||
|
||
<p class="hero-subtitle">
|
||
Search 1,439+ official police transparency portals detailing camera counts, 30-day vehicle detection volumes, database queries, and inter-agency sharing networks.
|
||
</p>
|
||
|
||
<!-- Stats Grid -->
|
||
<div class="stats-grid" id="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-portals">1,439</div>
|
||
<div class="stat-label">Public Portals</div>
|
||
<div class="stat-subtext">Across 45 U.S. States</div>
|
||
</div>
|
||
<div class="stat-card radar-card">
|
||
<div class="stat-number" id="stat-cameras">37,250+</div>
|
||
<div class="stat-label">Cameras Reported</div>
|
||
<div class="stat-subtext">Active Roadway ALPR Nodes</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-vehicles">346.7M</div>
|
||
<div class="stat-label">Vehicles Tracked</div>
|
||
<div class="stat-subtext">Rolling 30-Day Detections</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-searches">256,957</div>
|
||
<div class="stat-label">Police Searches</div>
|
||
<div class="stat-subtext">Database Queries Executed</div>
|
||
</div>
|
||
<div class="stat-card radar-card">
|
||
<div class="stat-number" id="stat-hits">10.2M+</div>
|
||
<div class="stat-label">Hotlist Hits</div>
|
||
<div class="stat-subtext">Alerts Pushed to Cruisers</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Directory Content -->
|
||
<main class="container" id="directory-section">
|
||
<!-- State Quick Jump Bar -->
|
||
<div class="state-chips-wrapper">
|
||
<div class="state-chips-header">
|
||
<span class="chips-title">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
|
||
</svg>
|
||
Quick Filter by Top States
|
||
</span>
|
||
<button class="btn-secondary" id="btn-reset-all" style="padding: 4px 10px; font-size: 0.75rem;">Reset All Filters</button>
|
||
</div>
|
||
<div class="state-chips-scroll" id="state-chips-scroll"></div>
|
||
</div>
|
||
|
||
<!-- Search & Controls Panel -->
|
||
<div class="controls-panel">
|
||
<div class="search-input-wrapper">
|
||
<span class="search-icon" aria-hidden="true">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
</svg>
|
||
</span>
|
||
<input
|
||
type="text"
|
||
id="search-input"
|
||
class="search-input"
|
||
placeholder="Search by city, county, agency name, or state (e.g. Lexington, Cobb County, Fort Worth)..."
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
>
|
||
<button id="clear-search-btn" class="clear-search-btn" title="Clear search">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
<span class="search-shortcut">/</span>
|
||
</div>
|
||
|
||
<div class="filter-controls-grid">
|
||
<div class="control-group">
|
||
<label for="state-filter" class="control-label">State</label>
|
||
<select id="state-filter" class="select-custom">
|
||
<option value="ALL">All States (45)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="type-filter" class="control-label">Agency Type</label>
|
||
<select id="type-filter" class="select-custom">
|
||
<option value="ALL">All Agency Types</option>
|
||
<option value="PD">Police Department (PD)</option>
|
||
<option value="SO">Sheriff's Office (SO)</option>
|
||
<option value="OTHER">Campus / Airport / Other</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="sort-select" class="control-label">Sort Order</label>
|
||
<select id="sort-select" class="select-custom">
|
||
<option value="cameras-desc">Most Cameras Reported</option>
|
||
<option value="vehicles-desc">Most Vehicles Tracked</option>
|
||
<option value="searches-desc">Most Police Searches</option>
|
||
<option value="hits-desc">Most Hotlist Alerts</option>
|
||
<option value="alpha-asc">Agency Name (A to Z)</option>
|
||
<option value="alpha-desc">Agency Name (Z to A)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="checkbox-toggle-label">
|
||
<input type="checkbox" id="audit-toggle">
|
||
<span class="toggle-switch"></span>
|
||
<span>Public Audit Available Only</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-controls-row">
|
||
<div class="results-counter" id="results-counter">
|
||
Showing <strong id="showing-count">0</strong> of <strong id="total-count">1,439</strong> portals
|
||
</div>
|
||
|
||
<div class="view-actions-group">
|
||
<button class="btn-secondary" id="btn-export-csv" title="Download filtered dataset as CSV">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||
<polyline points="7 10 12 15 17 10"></polyline>
|
||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
</svg>
|
||
Export CSV
|
||
</button>
|
||
|
||
<div class="view-toggle-btns" role="radiogroup" aria-label="View Switcher">
|
||
<button class="view-btn active" id="view-cards-btn" title="Card View" aria-checked="true" role="radio">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="3" width="7" height="7"></rect>
|
||
<rect x="14" y="3" width="7" height="7"></rect>
|
||
<rect x="14" y="14" width="7" height="7"></rect>
|
||
<rect x="3" y="14" width="7" height="7"></rect>
|
||
</svg>
|
||
</button>
|
||
<button class="view-btn" id="view-table-btn" title="Table View" aria-checked="false" role="radio">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="8" y1="6" x2="21" y2="6"></line>
|
||
<line x1="8" y1="12" x2="21" y2="12"></line>
|
||
<line x1="8" y1="18" x2="21" y2="18"></line>
|
||
<line x1="3" y1="6" x2="3.01" y2="6"></line>
|
||
<line x1="3" y1="12" x2="3.01" y2="12"></line>
|
||
<line x1="3" y1="18" x2="3.01" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Specific Camera Nodes & Hardware Images for Searched City / Location -->
|
||
<section id="directory-cameras-section" class="directory-cameras-section" style="display: none; margin-bottom: 36px;">
|
||
<div class="dir-cam-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 14px 18px; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 14px;">
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<span class="dir-cam-header-icon-box" style="display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(6, 182, 212, 0.15); color: #38bdf8;">
|
||
<svg class="flock-svg flock-svg-md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
|
||
</span>
|
||
<div>
|
||
<h3 style="margin: 0; font-size: 1.1rem; color: #38bdf8; font-family: var(--font-heading);">
|
||
Identified Camera Nodes in <span id="dir-cam-query-title">City</span>
|
||
</h3>
|
||
<span id="dir-cam-subtitle" style="font-size: 0.8rem; color: #94a3b8;">
|
||
Mapped intersections, cross streets, and physical hardware photos
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span id="dir-cam-badge-count" style="background: #06b6d4; color: #07090e; font-weight: 800; font-size: 0.78rem; padding: 4px 12px; border-radius: 9999px;">
|
||
0 Cameras
|
||
</span>
|
||
</div>
|
||
|
||
<div id="directory-cameras-grid" class="directory-cameras-grid">
|
||
<!-- Dynamically populated camera cards with photos, cross streets, and jump-to-radar buttons -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cards Grid View -->
|
||
<div class="portals-grid" id="portals-grid" aria-live="polite"></div>
|
||
|
||
<!-- Table View -->
|
||
<div class="table-container" id="table-container">
|
||
<table class="portals-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Agency / Department</th>
|
||
<th>State</th>
|
||
<th>Cameras</th>
|
||
<th>30d Vehicles</th>
|
||
<th>Searches</th>
|
||
<th>Hotlist Alerts</th>
|
||
<th>Sharing</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-body"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="pagination-wrapper" id="pagination-controls"></div>
|
||
</main>
|
||
|
||
<!-- Educational & Civil Liberties Section -->
|
||
<section class="education-section" id="education-section">
|
||
<div class="container">
|
||
<div class="education-header">
|
||
<h2 class="education-title">What You Need to Know About Flock Surveillance</h2>
|
||
<p class="education-desc">
|
||
Automated License Plate Readers (ALPR) represent one of the fastest-growing mass surveillance networks in United States history. Understanding how the technology works is essential for civic transparency.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="education-grid">
|
||
<article class="edu-card">
|
||
<div class="edu-card-icon" aria-hidden="true">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
|
||
<circle cx="12" cy="13" r="4"></circle>
|
||
</svg>
|
||
</div>
|
||
<h3 class="edu-card-title">Beyond Plates: "Vehicle Fingerprint"</h3>
|
||
<p class="edu-card-text">
|
||
Flock cameras do not merely log plate numbers. Their computer vision models extract a full visual profile on every passing car:
|
||
</p>
|
||
<ul class="edu-card-list">
|
||
<li>Make, model, color, and trim styling</li>
|
||
<li>Bumper stickers, window decals, and roof racks</li>
|
||
<li>Dents, damage, aftermarket wheels, and missing hubcaps</li>
|
||
<li>Temporary and dealer paper tags</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="edu-card">
|
||
<div class="edu-card-icon" aria-hidden="true" style="background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--accent-radar);">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="edu-card-title">Fourth Amendment & Warrantless Tracking</h3>
|
||
<p class="edu-card-text">
|
||
Civil liberties advocates argue that interconnected ALPR grids violate constitutional protections against warrantless dragnet tracking:
|
||
</p>
|
||
<ul class="edu-card-list">
|
||
<li><strong>Carpenter v. United States (2018):</strong> Individuals maintain a reasonable expectation of privacy in the whole of their physical movements.</li>
|
||
<li><strong>United States v. Jones (2012):</strong> Prolonged automated surveillance exceeds traditional visual police monitoring.</li>
|
||
<li><strong>Cross-County Sharing:</strong> Inter-agency networks allow out-of-town agencies to track movements across jurisdictions without warrants.</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="edu-card">
|
||
<div class="edu-card-icon" aria-hidden="true" style="background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||
</svg>
|
||
</div>
|
||
<h3 class="edu-card-title">How Transparency Portals Work</h3>
|
||
<p class="edu-card-text">
|
||
Transparency Portals provide valuable aggregate metrics, but have critical limitations that the public should understand:
|
||
</p>
|
||
<ul class="edu-card-list">
|
||
<li><strong>Portals Are Voluntary:</strong> Police departments are not required to publish them. Many agencies keep deployments confidential.</li>
|
||
<li><strong>Aggregate Only:</strong> Portals show monthly sums, not individual license plate queries.</li>
|
||
<li><strong>Private HOA Feeds:</strong> Cameras purchased by private homeowners associations and linked to police are often unlisted.</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="site-footer">
|
||
<div class="container footer-content">
|
||
<div class="footer-disclaimer">
|
||
<strong>About This Directory:</strong> Independent public interest directory aggregating publicly accessible Flock Safety transparency portals. Data is sourced from municipal portals and civic surveillance watchdogs.
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="https://transparency.flocksafety.com" target="_blank" rel="noopener noreferrer" class="footer-link">Flock Transparency</a>
|
||
<a href="https://eyesonflock.com" target="_blank" rel="noopener noreferrer" class="footer-link">Eyes On Flock</a>
|
||
<a href="https://haveibeenflocked.com" target="_blank" rel="noopener noreferrer" class="footer-link">Audit Search</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 1: DEEP AGENCY INSPECTION MODAL (<dialog>)
|
||
======================================================================== -->
|
||
<dialog id="agency-modal" class="agency-dialog" aria-labelledby="modal-agency-name">
|
||
<div class="modal-header">
|
||
<div class="modal-header-titles">
|
||
<h2 id="modal-agency-name" class="modal-agency-name">Agency Name</h2>
|
||
<div class="modal-agency-meta">
|
||
<span id="modal-agency-location">City, ST</span>
|
||
<span>•</span>
|
||
<span id="modal-agency-slug" style="font-family: var(--font-mono); color: var(--accent-cyan);">slug</span>
|
||
</div>
|
||
</div>
|
||
<button id="modal-close-btn" class="close-modal-btn" aria-label="Close modal">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="modal-cta-box">
|
||
<div class="modal-cta-text">
|
||
<h4>Official Flock Transparency Portal</h4>
|
||
<p>Access the live, unedited municipal transparency dashboard directly on Flock’s servers.</p>
|
||
</div>
|
||
<a href="#" id="modal-portal-url" target="_blank" rel="noopener noreferrer" class="btn-open-flock">
|
||
<span>Open Official Portal</span>
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||
<polyline points="15 3 21 3 21 9"></polyline>
|
||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="modal-stats-grid">
|
||
<div class="modal-stat-box">
|
||
<div class="modal-stat-num" id="modal-stat-cameras">0</div>
|
||
<div class="modal-stat-label">Cameras Reported</div>
|
||
</div>
|
||
<div class="modal-stat-box">
|
||
<div class="modal-stat-num" id="modal-stat-vehicles">0</div>
|
||
<div class="modal-stat-label">30-Day Captures</div>
|
||
</div>
|
||
<div class="modal-stat-box">
|
||
<div class="modal-stat-num" id="modal-stat-searches">0</div>
|
||
<div class="modal-stat-label">Searches Conducted</div>
|
||
</div>
|
||
<div class="modal-stat-box">
|
||
<div class="modal-stat-num" id="modal-stat-hits">0</div>
|
||
<div class="modal-stat-label">Hotlist Alerts</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-section" id="modal-reasons-section">
|
||
<h3 class="modal-section-title">Reported Search Justifications</h3>
|
||
<div class="reasons-list" id="modal-reasons-list"></div>
|
||
</div>
|
||
|
||
<div class="modal-section">
|
||
<h3 class="modal-section-title">
|
||
Inter-Agency Sharing Network (<span id="modal-sharing-count">0</span> Departments)
|
||
</h3>
|
||
<p class="policy-text" style="margin-bottom: 12px; font-size: 0.8rem;">
|
||
Outside law enforcement agencies that can search vehicles logged by this agency's cameras.
|
||
</p>
|
||
<input type="text" id="modal-sharing-search" class="sharing-search-input" placeholder="Filter partner agencies...">
|
||
<div class="sharing-partners-box" id="modal-sharing-box"></div>
|
||
</div>
|
||
|
||
<div class="modal-section">
|
||
<h3 class="modal-section-title">Department Policy & Prohibited Uses</h3>
|
||
<p class="policy-text" id="modal-prohibited-text">Standard policy restrictions apply.</p>
|
||
</div>
|
||
|
||
<div class="modal-section">
|
||
<h3 class="modal-section-title">Public Records & Civic Research</h3>
|
||
<div class="research-tools-row">
|
||
<a href="#" id="modal-google-contract-link" target="_blank" rel="noopener noreferrer" class="btn-research">
|
||
Search City Council Contract & Minutes ↗
|
||
</a>
|
||
<button id="modal-copy-link-btn" class="btn-research">Copy Direct Portal Link</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 2: WAZE-STYLE DRIVER LOGIN & PROFILE MODAL (<dialog>)
|
||
======================================================================== -->
|
||
<dialog id="login-modal" class="agency-dialog" aria-labelledby="login-modal-title">
|
||
<div class="modal-header">
|
||
<div class="modal-header-titles">
|
||
<h2 id="login-modal-title" class="modal-agency-name">Driver Profile & Scout Login</h2>
|
||
<div class="modal-agency-meta">Join the community awareness grid to contribute camera sightings</div>
|
||
</div>
|
||
<button id="login-close-btn" class="close-modal-btn" aria-label="Close modal">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="login-form">
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="login-username" style="display:block; margin-bottom: 6px;">Driver Handle / Callsign</label>
|
||
<input type="text" id="login-username" class="search-input" style="padding: 12px;" placeholder="e.g. NightRider, HighwayScout" required>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="login-vehicle" style="display:block; margin-bottom: 6px;">Vehicle Description (For Scout Profile)</label>
|
||
<input type="text" id="login-vehicle" class="search-input" style="padding: 12px;" placeholder="e.g. 2022 Honda Civic (Blue)" value="Sedan (Silver)">
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 24px;">
|
||
<label class="checkbox-toggle-label" style="margin-top: 0;">
|
||
<input type="checkbox" id="login-sound" checked>
|
||
<span class="toggle-switch"></span>
|
||
<span>Enable Audio Chimes on Zone Entry</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
||
<button type="submit" class="btn-open-flock" style="flex: 1; justify-content: center; cursor: pointer; border: none;">
|
||
Save Profile & Connect
|
||
</button>
|
||
<button type="button" id="login-guest-btn" class="btn-secondary" style="padding: 10px 18px;">
|
||
Continue as Guest Scout
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Admin Camera Management Section -->
|
||
<div class="admin-profile-section" style="margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle);">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||
<h4 style="font-size: 0.9rem; color: #f8fafc; display: flex; align-items: center; gap: 6px;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||
<span>Admin: Manage Placed Cameras</span>
|
||
</h4>
|
||
<span id="admin-placed-count" style="font-size: 0.75rem; color: #38bdf8; background: rgba(56, 189, 248, 0.15); padding: 2px 8px; border-radius: 10px;">0 Placed</span>
|
||
</div>
|
||
<p style="font-size: 0.76rem; color: #94a3b8; margin-bottom: 12px;">
|
||
Manage and remove any cameras you placed or tested. The 1,439 official municipal transparency portals remain permanent and protected.
|
||
</p>
|
||
<div id="admin-placed-cams-list" style="max-height: 160px; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px;">
|
||
<!-- Rendered via JS -->
|
||
</div>
|
||
<button type="button" id="btn-admin-clear-all-placed" class="btn-secondary" style="width: 100%; padding: 10px; color: #f87171; border-color: rgba(239, 68, 68, 0.4); justify-content: center; display: flex; align-items: center; gap: 8px;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
||
<span>Clear All Placed Pins (Keep Real Locations)</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 3: CROWDSOURCED CAMERA REPORT MODAL (<dialog>)
|
||
======================================================================== -->
|
||
<dialog id="report-modal" class="agency-dialog" aria-labelledby="report-modal-title">
|
||
<div class="modal-header">
|
||
<div class="modal-header-titles">
|
||
<h2 id="report-modal-title" class="modal-agency-name">Report Flock Camera Sighting</h2>
|
||
<div class="modal-agency-meta">Help alert the driver network to new ALPR surveillance installations</div>
|
||
</div>
|
||
<button id="report-close-btn" class="close-modal-btn" aria-label="Close modal">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="report-form">
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="report-mount-type" style="display:block; margin-bottom: 6px;">Camera Installation Type</label>
|
||
<select id="report-mount-type" class="select-custom" style="width: 100%;">
|
||
<option value="Solar Pole Mount">Solar Pole Mount (Standard Falcon)</option>
|
||
<option value="Traffic Signal Mount">Traffic Signal / Utility Pole Mount</option>
|
||
<option value="Raven Audio Node">Raven Audio Sensor + Camera Combo</option>
|
||
<option value="Mobile Trailer ALPR">Mobile Surveillance Trailer</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="report-intersection" style="display:block; margin-bottom: 6px;">Intersection / Highway Marker</label>
|
||
<input type="text" id="report-intersection" class="search-input" style="padding: 12px;" placeholder="e.g. Main St & 4th Ave, Mile Marker 104" required>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="report-notes" style="display:block; margin-bottom: 6px;">Observations / Direction Facing</label>
|
||
<input type="text" id="report-notes" class="search-input" style="padding: 12px;" placeholder="e.g. Northbound lanes, black solar panel on pole">
|
||
</div>
|
||
|
||
<!-- Optional Photo Proof in Report Modal -->
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" style="display:block; margin-bottom: 6px;">Physical Hardware Photo Proof (Recommended)</label>
|
||
<div class="photo-proof-upload-zone" id="report-photo-zone">
|
||
<button type="button" id="btn-report-add-photo" class="btn-secondary" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px;">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
|
||
<span id="report-photo-btn-text">Snap Camera on Pole (+100 pts)</span>
|
||
</button>
|
||
<div id="report-photo-preview-box" class="photo-preview-box hidden" style="margin-top: 10px; position: relative;">
|
||
<img id="report-photo-preview-img" src="" alt="Camera preview" style="width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--accent-cyan);">
|
||
<button type="button" id="btn-report-remove-photo" style="position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px;">
|
||
<div>
|
||
<label class="control-label" for="report-lat" style="display:block; margin-bottom: 6px;">Latitude</label>
|
||
<input type="number" step="0.00001" id="report-lat" class="search-input" style="padding: 10px;" required>
|
||
</div>
|
||
<div>
|
||
<label class="control-label" for="report-lng" style="display:block; margin-bottom: 6px;">Longitude</label>
|
||
<input type="number" step="0.00001" id="report-lng" class="search-input" style="padding: 10px;" required>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-open-flock" style="width: 100%; justify-content: center; cursor: pointer; border: none;">
|
||
Broadcast Camera Alert to Network (+50 pts)
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 4: SURVEILLANCE ZONE HARDWARE PROOF & COMMUNITY VOTING (<dialog>)
|
||
======================================================================== -->
|
||
<dialog id="camera-detail-modal" class="agency-dialog hardware-proof-dialog" aria-labelledby="cam-detail-title">
|
||
<div class="modal-header">
|
||
<div class="modal-header-titles">
|
||
<div class="cam-verification-badge" id="cam-detail-verify-badge">
|
||
<span class="badge-dot dot-clear"></span>
|
||
<span id="cam-detail-verify-text">CHECKING VERIFICATION...</span>
|
||
</div>
|
||
<h2 id="cam-detail-title" class="modal-agency-name" style="margin-top: 6px;">Flock Camera Location</h2>
|
||
<div class="modal-agency-meta" id="cam-detail-meta">Managing Agency & Hardware Registry</div>
|
||
</div>
|
||
<button id="cam-detail-close-btn" class="close-modal-btn" aria-label="Close modal">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- Hardware Photo Proof Area -->
|
||
<div class="proof-photo-container" id="cam-proof-container">
|
||
<!-- Populated dynamically via JS: either real driver photo or upload prompt -->
|
||
</div>
|
||
|
||
<!-- Hardware Specifications Grid -->
|
||
<div class="modal-section" style="margin-top: 20px;">
|
||
<h3 class="modal-section-title">Hardware Telemetry & Location</h3>
|
||
<div class="proof-specs-grid">
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">INSTALLATION TYPE</span>
|
||
<span class="spec-val" id="spec-mount-type">Solar Pole Mount</span>
|
||
</div>
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">MANAGING ENTITY</span>
|
||
<span class="spec-val" id="spec-agency">Local Law Enforcement</span>
|
||
</div>
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">EST. 30-DAY LOGS</span>
|
||
<span class="spec-val" id="spec-captures">300,000+ Reads</span>
|
||
</div>
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">COORDINATES</span>
|
||
<span class="spec-val" id="spec-coords">34.6019, -118.1484</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Community Consensus & Anti-Sabotage Rule Banner -->
|
||
<div class="proof-consensus-banner">
|
||
<div class="consensus-icon">
|
||
<svg class="flock-svg flock-svg-md" style="color: #38bdf8;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||
</div>
|
||
<div class="consensus-text">
|
||
<strong>Democratic Checks & Balances Active</strong>
|
||
<p>Flock cameras are permanent municipal installations. To prevent law enforcement or bad actors from deleting active surveillance zones, locations are protected by community consensus.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Voting & Action Bar -->
|
||
<div class="proof-actions-row">
|
||
<button id="btn-vote-confirm-cam" class="btn-proof-action btn-confirm-vote" title="Confirm camera is still bolted to pole">
|
||
<span class="btn-icon">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
|
||
</span>
|
||
<span id="btn-vote-confirm-text">Confirm Active (1)</span>
|
||
</button>
|
||
|
||
<button id="btn-proof-add-photo" class="btn-proof-action btn-add-photo" title="Snap or upload a photo of the camera on the pole">
|
||
<span class="btn-icon">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
|
||
</span>
|
||
<span id="btn-proof-photo-text">Add Photo Proof</span>
|
||
</button>
|
||
|
||
<button id="btn-proof-contest" class="btn-proof-action btn-contest-vote" title="Report camera removed or inaccurate">
|
||
<span class="btn-icon">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
</span>
|
||
<span>Contest</span>
|
||
</button>
|
||
|
||
<div class="proof-nav-apps-block">
|
||
<div class="proof-nav-label">RE-ROUTE AROUND CAMERA:</div>
|
||
<div class="proof-nav-btn-grid">
|
||
<a id="btn-proof-nav-google" href="#" target="_blank" rel="noopener noreferrer" class="btn-nav-app-link nav-google" title="Open in Google Maps">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a8 8 0 0 0-8 8c0 5.25 8 12 8 12s8-6.75 8-12a8 8 0 0 0-8-8z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<span>Google</span>
|
||
</a>
|
||
<a id="btn-proof-nav-apple" href="#" target="_blank" rel="noopener noreferrer" class="btn-nav-app-link nav-apple" title="Open in Apple Maps">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
|
||
<span>Apple Maps</span>
|
||
</a>
|
||
<a id="btn-proof-nav-waze" href="#" target="_blank" rel="noopener noreferrer" class="btn-nav-app-link nav-waze" title="Open in Waze">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
|
||
<span>Waze</span>
|
||
</a>
|
||
<button type="button" id="btn-proof-share-cam" class="btn-nav-app-link nav-share" title="Share this camera pin">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
|
||
<span>Share Pin</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Specific Agency Directory Records & Surveillance Policy -->
|
||
<div class="modal-section proof-directory-records-section" id="proof-directory-records-section" style="margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle);">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
|
||
<h3 class="modal-section-title" style="margin: 0; font-size: 0.95rem; color: #38bdf8; display: flex; align-items: center; gap: 6px;">
|
||
<svg class="flock-svg flock-svg-md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
|
||
<span>Agency Surveillance & Policy Records</span>
|
||
</h3>
|
||
<span id="proof-dir-source-badge" style="font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3);">
|
||
Official Transparency Data
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 4-Box Key Stats (Cameras, Volume, Searches, Retention) -->
|
||
<div class="proof-specs-grid" style="margin-bottom: 14px;">
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">CAMERAS IN FLEET</span>
|
||
<span class="spec-val" id="proof-dir-cameras" style="color: #38bdf8;">--</span>
|
||
</div>
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">30-DAY DETECTIONS</span>
|
||
<span class="spec-val" id="proof-dir-volume" style="color: #34d399;">--</span>
|
||
</div>
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">POLICE SEARCHES</span>
|
||
<span class="spec-val" id="proof-dir-searches">--</span>
|
||
</div>
|
||
<div class="proof-spec-card">
|
||
<span class="spec-label">DATA RETENTION</span>
|
||
<span class="spec-val" id="proof-dir-retention" style="color: #fbbf24;">30 Days Auto-Purge</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inter-Agency Data Sharing Network -->
|
||
<div class="proof-sharing-section" style="margin-bottom: 14px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 12px; padding: 12px 14px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
|
||
<strong style="font-size: 0.8rem; color: #e2e8f0; display: flex; align-items: center; gap: 6px;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||
<span>Inter-Agency Surveillance Sharing:</span>
|
||
</strong>
|
||
<span id="proof-dir-sharing-count" style="font-size: 0.75rem; color: #38bdf8; font-weight: 700;">Regional Law Enforcement</span>
|
||
</div>
|
||
<p style="font-size: 0.74rem; color: #94a3b8; margin: 0 0 8px; line-height: 1.4;">
|
||
Plate reads from this camera are broadcast to regional and federal law enforcement partners:
|
||
</p>
|
||
<div id="proof-dir-sharing-tags" style="display: flex; flex-wrap: wrap; gap: 5px; max-height: 90px; overflow-y: auto;">
|
||
<!-- Sharing tags rendered dynamically -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Top Search Justifications -->
|
||
<div id="proof-dir-reasons-box" style="margin-bottom: 14px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 12px; padding: 12px 14px;">
|
||
<strong style="font-size: 0.8rem; color: #e2e8f0; display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
<span>Primary Search Audit Reasons:</span>
|
||
</strong>
|
||
<div id="proof-dir-reasons-list" style="display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: #cbd5e1;">
|
||
<!-- Rendered dynamically -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Official City Portal Link (Opens in New Tab - Never leaves the radar map) -->
|
||
<div id="proof-portal-link-box" style="margin-top: 12px;">
|
||
<a id="btn-proof-official-portal" href="#" target="_blank" rel="noopener noreferrer" class="btn-secondary" style="width: 100%; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-color: #06b6d4; color: #38bdf8; font-weight: 600;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||
<span id="btn-proof-portal-text">Open Official Transparency Portal ↗</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Removal Control (Only Active for Custom Placed Pins) -->
|
||
<div id="cam-admin-control-box" class="admin-control-box" style="margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(239, 68, 68, 0.3); text-align: center; display: none;">
|
||
<button type="button" id="btn-admin-delete-cam" class="btn-admin-delete" style="width: 100%; padding: 11px; background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; color: #f87171; border-radius: var(--radius-md); font-weight: 600; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
||
<span>Admin: Delete This Placed Camera</span>
|
||
</button>
|
||
<span style="display: block; font-size: 0.7rem; color: #94a3b8; margin-top: 5px;">
|
||
(Only available for custom placed pins. The 1,439 official municipal portals are permanent & protected.)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 5: CONTEST CAMERA / REPORT REMOVAL MODAL (<dialog>)
|
||
======================================================================== -->
|
||
<dialog id="contest-modal" class="agency-dialog" aria-labelledby="contest-modal-title">
|
||
<div class="modal-header">
|
||
<div class="modal-header-titles">
|
||
<h2 id="contest-modal-title" class="modal-agency-name">Contest Camera Location</h2>
|
||
<div class="modal-agency-meta">Community Checks & Balances to Prevent Misinformation</div>
|
||
</div>
|
||
<button id="contest-close-btn" class="close-modal-btn" aria-label="Close modal">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="contest-form">
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="contest-reason" style="display:block; margin-bottom: 6px;">Reason for Contesting</label>
|
||
<select id="contest-reason" class="select-custom" style="width: 100%;">
|
||
<option value="Camera / Solar Panel physically removed from pole">Camera / Solar Panel physically removed from pole</option>
|
||
<option value="Not a Flock ALPR (Standard CCTV / traffic light sensor)">Not a Flock ALPR (Standard CCTV / traffic sensor)</option>
|
||
<option value="Incorrect intersection or misplaced GPS pin">Incorrect intersection or misplaced GPS pin</option>
|
||
<option value="Spam or fraudulent pin">Spam or fraudulent pin</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 16px;">
|
||
<label class="control-label" for="contest-notes" style="display:block; margin-bottom: 6px;">Observations / Verification Notes</label>
|
||
<textarea id="contest-notes" class="search-input" style="padding: 12px; height: 80px; resize: vertical;" placeholder="Describe why this pin is inaccurate or what was found on the pole..." required></textarea>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 20px;">
|
||
<label class="control-label" style="display:block; margin-bottom: 6px;">Photo Proof of Empty Pole (Optional)</label>
|
||
<button type="button" id="btn-contest-add-photo" class="btn-secondary" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px;">
|
||
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
|
||
<span id="contest-photo-btn-text">Snap Empty Pole</span>
|
||
</button>
|
||
<div id="contest-photo-preview-box" class="photo-preview-box hidden" style="margin-top: 10px; position: relative;">
|
||
<img id="contest-photo-preview-img" src="" alt="Contest photo" style="width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--accent-amber);">
|
||
<button type="button" id="btn-contest-remove-photo" style="position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="proof-consensus-banner" style="margin-bottom: 20px;">
|
||
<div class="consensus-icon">
|
||
<svg class="flock-svg flock-svg-md" style="color: #f59e0b;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg>
|
||
</div>
|
||
<div class="consensus-text">
|
||
<strong>Consensus Safeguard:</strong>
|
||
<p>A single report does not delete a verified camera. Once 3 trusted scouts flag a location or photo proof of an empty pole is verified, the camera is archived.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-open-flock" style="width: 100%; justify-content: center; cursor: pointer; border: none; background: linear-gradient(135deg, #f59e0b, #d97706);">
|
||
Submit Contest Report
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 6: DEVELOPER SUPPORT & STRIPE INTEGRATION (<dialog>)
|
||
======================================================================== -->
|
||
<dialog id="support-modal" class="agency-dialog support-dialog" aria-labelledby="support-modal-title">
|
||
<div class="modal-header support-modal-header">
|
||
<div class="modal-header-titles">
|
||
<div class="support-dev-pill">
|
||
<span class="support-heart-icon">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||
</span>
|
||
<span>Independent Developer Support</span>
|
||
</div>
|
||
<h2 id="support-modal-title" class="modal-agency-name">Help Support This Developer</h2>
|
||
<div class="modal-agency-meta">Fuel real-time camera tracking, nationwide scrapers, and independent ALPR transparency</div>
|
||
</div>
|
||
<button id="support-close-btn" class="close-modal-btn" aria-label="Close modal">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body support-modal-body">
|
||
<p class="support-intro-text">
|
||
FlockRadar is 100% independently coded, researched, and maintained. Your direct support pays for continuous municipal portal scraping, real-time audio radar servers, GPS algorithms, and hardware photo hosting.
|
||
</p>
|
||
|
||
<!-- Recurring Monthly Growth Sustainer Banner Card -->
|
||
<a href="https://buy.stripe.com/dRmeVdbYbcdoeFd9BbeME0t" target="_blank" rel="noopener noreferrer" class="monthly-sub-banner">
|
||
<div class="monthly-sub-left">
|
||
<div class="monthly-badge">
|
||
<span class="pulse-sub-dot"></span>
|
||
<span>Recurring Monthly Support</span>
|
||
</div>
|
||
<div class="monthly-title">Monthly Growth Sustainer</div>
|
||
<div class="monthly-desc">
|
||
Ongoing monthly support to power server infrastructure, continuous municipal portal scraping, and app development. Cancel anytime with 1 click.
|
||
</div>
|
||
</div>
|
||
<div class="monthly-sub-right">
|
||
<div class="monthly-price-wrap">
|
||
<span class="monthly-price">$10</span>
|
||
<span class="monthly-cadence">/ month</span>
|
||
</div>
|
||
<div class="btn-subscribe-monthly">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||
<span>Subscribe $10/mo</span>
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<div class="support-divider">
|
||
<span>OR CHOOSE A ONE-TIME CONTRIBUTION</span>
|
||
</div>
|
||
|
||
<div class="support-tiers-grid">
|
||
<!-- $10 Tier -->
|
||
<a href="https://buy.stripe.com/5kQ14ne6j0uG8gPeVveME0p" target="_blank" rel="noopener noreferrer" class="support-tier-card">
|
||
<div class="tier-badge-label">Radar Coffee</div>
|
||
<div class="tier-amount">$10</div>
|
||
<div class="tier-desc">Covers daily portal scrapers and keeps server infrastructure running smoothly.</div>
|
||
<div class="btn-support-tier">
|
||
<span>Support $10</span>
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- $20 Tier (Popular) -->
|
||
<a href="https://buy.stripe.com/bJeaEX2nB5P02Wv5kVeME0q" target="_blank" rel="noopener noreferrer" class="support-tier-card tier-featured">
|
||
<div class="tier-popular-ribbon">Most Popular</div>
|
||
<div class="tier-badge-label">Active Contributor</div>
|
||
<div class="tier-amount">$20</div>
|
||
<div class="tier-desc">Directly funds real-time audio radar alerts, walking/driving GPS tracking, and mobile updates.</div>
|
||
<div class="btn-support-tier btn-featured">
|
||
<span>Support $20</span>
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- $50 Tier -->
|
||
<a href="https://buy.stripe.com/aFabJ12nB1yK8gPeVveME0r" target="_blank" rel="noopener noreferrer" class="support-tier-card">
|
||
<div class="tier-badge-label">Champion Sponsor</div>
|
||
<div class="tier-amount">$50</div>
|
||
<div class="tier-desc">Sponsors nationwide ALPR expansion, verified camera hardware proof storage, and full-time coding.</div>
|
||
<div class="btn-support-tier">
|
||
<span>Support $50</span>
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Custom Amount -->
|
||
<a href="https://buy.stripe.com/bJe9AT1jxfpA2Wv28JeME0s" target="_blank" rel="noopener noreferrer" class="support-tier-card tier-custom">
|
||
<div class="tier-badge-label">Custom Amount</div>
|
||
<div class="tier-amount">Any $</div>
|
||
<div class="tier-desc">Choose your own custom contribution amount to support development ($5 min).</div>
|
||
<div class="btn-support-tier btn-custom">
|
||
<span>Choose Amount</span>
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Viral Share Alternative -->
|
||
<div class="support-share-banner">
|
||
<div class="share-banner-text">
|
||
<span class="share-banner-title">Can't donate today? Help us grow!</span>
|
||
<p class="share-banner-desc">Share FlockRadar with 3 local drivers or friends to spread surveillance transparency.</p>
|
||
</div>
|
||
<button type="button" id="btn-support-share-app" class="btn-support-share" title="Share FlockRadar with drivers">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
|
||
<span>Share FlockRadar</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="support-security-footer">
|
||
<div class="security-badges-row">
|
||
<div class="sec-item">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
<span>Secured by <strong>Stripe</strong></span>
|
||
</div>
|
||
<div class="sec-item">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<span>Apple Pay & Google Pay Supported</span>
|
||
</div>
|
||
<div class="sec-item">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 14 14"/></svg>
|
||
<span>Instant 1-Click Contribution</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- ========================================================================
|
||
MODAL 5: CALIFORNIA SB 34 PUBLIC RECORDS ACT (CPRA) REQUEST GENERATOR
|
||
======================================================================== -->
|
||
<dialog id="pra-modal" class="agency-dialog pra-dialog" aria-labelledby="pra-modal-title">
|
||
<div class="modal-header pra-modal-header">
|
||
<div class="modal-header-left">
|
||
<span class="modal-badge badge-pra">CALIFORNIA SB 34 COMPLIANCE</span>
|
||
<h2 id="pra-modal-title" class="modal-agency-name">License Plate Audit Request Generator</h2>
|
||
<p class="modal-location-text">Exercise your legal right under Cal. Civil Code § 1798.90.5 & Gov. Code § 7920 to discover all police searches of your vehicle.</p>
|
||
</div>
|
||
<button class="modal-close-btn" id="pra-modal-close-btn" aria-label="Close Audit Generator">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body pra-modal-body">
|
||
<!-- Input Parameters -->
|
||
<div class="pra-input-grid">
|
||
<div class="form-group">
|
||
<label for="pra-plate-input" class="form-label">License Plate #:</label>
|
||
<input type="text" id="pra-plate-input" class="form-input" placeholder="e.g. 8ABC123" maxlength="8" style="text-transform: uppercase;">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pra-state-input" class="form-label">Registration State:</label>
|
||
<input type="text" id="pra-state-input" class="form-input" value="CA" maxlength="2" style="text-transform: uppercase;">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pra-agency-select" class="form-label">Target Law Enforcement Agency:</label>
|
||
<select id="pra-agency-select" class="form-select">
|
||
<option value="palmdale">City of Palmdale / Los Angeles County Sheriff's Dept (LASD)</option>
|
||
<option value="lancaster">City of Lancaster / LASD Lancaster Station</option>
|
||
<option value="bakersfield">Bakersfield Police Department</option>
|
||
<option value="chp">California Highway Patrol (CHP)</option>
|
||
<option value="riverside">Riverside County Sheriff / DA</option>
|
||
<option value="other">Other California Municipal Agency</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pra-requester-name" class="form-label">Your Name / Title:</label>
|
||
<input type="text" id="pra-requester-name" class="form-input" placeholder="Registered Vehicle Owner">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pra-actions-bar">
|
||
<button type="button" id="btn-generate-pra" class="btn-pra-generate">
|
||
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
<span>Generate Formal CPRA Letter</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Generated Letter Preview Area -->
|
||
<div class="pra-letter-container" id="pra-letter-container">
|
||
<div class="pra-letter-header">
|
||
<span class="pra-letter-tag">FORMAL LEGAL NOTICE</span>
|
||
<div class="pra-letter-actions">
|
||
<button type="button" id="btn-copy-pra-letter" class="btn-letter-action" title="Copy letter to clipboard">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||
<span>Copy Letter</span>
|
||
</button>
|
||
<a id="btn-email-pra-letter" href="#" class="btn-letter-action btn-letter-email" title="Open in your default email app">
|
||
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||
<span>Email Agency</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<textarea id="pra-letter-text" class="pra-letter-textarea" readonly placeholder="Click 'Generate Formal CPRA Letter' above to view your ready-to-send records request letter..."></textarea>
|
||
</div>
|
||
|
||
<!-- Legal Summary Callout -->
|
||
<div class="pra-legal-notice">
|
||
<strong>LEGAL MANDATE:</strong> Under California Government Code § 7922.535, public agencies must respond within 10 calendar days. Under California SB 34 (Civ. Code § 1798.90.55), agencies are strictly prohibited from selling, sharing, or transferring ALPR surveillance data to out-of-state or federal immigration authorities.
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- Hidden Native Camera / File Input for Mobile Evidence Snapping -->
|
||
<input type="file" id="camera-photo-file-input" accept="image/*" capture="environment" style="display: none;">
|
||
|
||
<!-- Toast Container -->
|
||
<div id="toast-container" class="toast-container" aria-live="assertive"></div>
|
||
|
||
<!-- Leaflet Map JS -->
|
||
<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=26"></script>
|
||
<script src="js/icons.js?v=26"></script>
|
||
<script src="js/auth.js?v=26"></script>
|
||
<script src="js/radar.js?v=26"></script>
|
||
<script src="js/app.js?v=26"></script>
|
||
|
||
<!-- Service Worker Instant Cache Invalidation -->
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.getRegistrations().then(registrations => {
|
||
registrations.forEach(r => r.update());
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|