feat: initial release of FlockRadar driving app and national transparency directory for flockradar.org
This commit is contained in:
+757
@@ -0,0 +1,757 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="FlockRadar | Live ALPR Camera Awareness & Directory">
|
||||
<meta property="og:description" content="Drive with real-time awareness of Flock camera recorded zones with live proximity HUD alerts, audio warnings, and public portal data.">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- 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">
|
||||
</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">
|
||||
<div class="radar-icon-box" aria-hidden="true">
|
||||
<div class="pulse-dot"></div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="m12 12 5-5"></path>
|
||||
</svg>
|
||||
</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">🗺️</span>
|
||||
<span>Live Radar Map</span>
|
||||
</button>
|
||||
<button id="nav-dir-btn" class="nav-mode-btn" role="tab" aria-selected="false">
|
||||
<span class="mode-icon">📋</span>
|
||||
<span>National Directory (1,439)</span>
|
||||
</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">👤</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 (Top-Left) -->
|
||||
<aside class="driver-hud" aria-live="polite">
|
||||
<!-- 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">Vehicle Speed</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 Camera</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graduated Radar Detector Signal Gauge (Escort / Valentine One Style) -->
|
||||
<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>
|
||||
|
||||
<!-- Current Agency / Street Monitoring -->
|
||||
<div class="hud-location-bar">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
<polyline points="11 12 12 12 12 16 13 16"></polyline>
|
||||
</svg>
|
||||
<span id="hud-cam-agency">Monitoring Roadway Grid</span>
|
||||
</div>
|
||||
|
||||
<!-- Alert Sensitivity Selector (City Mode vs Highway Mode) -->
|
||||
<div class="hud-sensitivity-row">
|
||||
<span class="sensitivity-label">RADAR RANGE:</span>
|
||||
<div class="sensitivity-toggle-group">
|
||||
<button id="btn-sens-city" class="sens-btn active" title="Alert within 1,000 ft (Optimal for city driving)">🏙️ City (1k ft)</button>
|
||||
<button id="btn-sens-hwy" class="sens-btn" title="Alert within 2,500 ft (Optimal for freeway/SR-14 speeds)">🛣️ Highway (2.5k ft)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- High-Priority Pulsing Warning Banner -->
|
||||
<div id="hud-banner-alert" class="hud-banner-alert">
|
||||
<span class="banner-pulse-icon">⚠️</span>
|
||||
<div>
|
||||
<strong>FLOCK CAMERA ACTIVE ZONE</strong>
|
||||
<p>Vehicle Profile & Plate Logging Active</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Auto-Spotted Status Badge -->
|
||||
<div id="hud-spotted-badge" class="hud-spotted-badge" title="Location auto-detected via network & GPS">
|
||||
<span>🛰️</span>
|
||||
<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">
|
||||
<span>🎯</span> Auto-Detect (GPS)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale" class="loc-chip" title="Jump to Palmdale Blvd & 10th St W">
|
||||
<span>📍</span> Palmdale (Center)
|
||||
</button>
|
||||
<button id="btn-loc-lancaster" class="loc-chip" title="Jump to Lancaster ALPR Grid (Ave L & 10th St W)">
|
||||
<span>📍</span> Lancaster (Center)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale-east" class="loc-chip" title="Jump to East Palmdale (Ave R & 47th St E)">
|
||||
<span>📍</span> East AV (Ave R)
|
||||
</button>
|
||||
<button id="btn-loc-palmdale-south" class="loc-chip" title="Jump to South Palmdale (Ave S)">
|
||||
<span>📍</span> South AV (Ave S)
|
||||
</button>
|
||||
<button id="btn-loc-rancho" class="loc-chip" title="Jump to West AV / Rancho Vista Blvd & Mall">
|
||||
<span>📍</span> West AV (Mall)
|
||||
</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>
|
||||
</aside>
|
||||
|
||||
<!-- Floating Navigation & Drive Simulator Controls (Top-Right) -->
|
||||
<div class="map-top-controls">
|
||||
<button id="btn-follow-car" class="btn-hud-action active" title="Automatically keep map centered on your vehicle">
|
||||
<span>🎯</span>
|
||||
<span>Follow Car: ON</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-live-gps" class="btn-hud-action" title="Start continuous real-time GPS tracking on your device">
|
||||
<span>📡</span>
|
||||
<span>Live GPS Drive</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-map-layer" class="btn-hud-action" title="Toggle between Dark Canvas and Satellite View">
|
||||
<span>🛰️</span>
|
||||
<span>Satellite / Dark</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-fullscreen-mount" class="btn-hud-action" title="Toggle Fullscreen Dashboard Mount Mode">
|
||||
<span>⛶</span>
|
||||
<span>Dashboard Fullscreen</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-test-camera" class="btn-hud-action" title="Drop a test camera 400ft ahead of your current location to test proximity alerts">
|
||||
<span>⚡</span>
|
||||
<span>Place Camera 400ft Ahead</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-test-alert" class="btn-hud-action" title="Immediately test voice alert and radar siren">
|
||||
<span>🔊</span>
|
||||
<span>Test Alert Voice</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-sim-drive" class="btn-hud-action" title="Simulate driving through Palmdale camera corridors">
|
||||
<span>▶</span>
|
||||
<span>Simulate Palmdale Drive</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-reset-sim" class="btn-hud-action" title="Reset drive position">
|
||||
<span>↺</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-mute-sound" class="btn-hud-action" title="Toggle audio alert chime and voice">
|
||||
<span>🔔</span>
|
||||
<span>Sound: ON</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-mobile-connect" class="btn-hud-action" title="Show mobile network link to open on phone in car">
|
||||
<span>📱</span>
|
||||
<span>Phone Link</span>
|
||||
</button>
|
||||
</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">
|
||||
<span>🎯</span>
|
||||
<span>Recenter on Vehicle</span>
|
||||
</button>
|
||||
|
||||
<!-- Giant 1-Tap Floating Action Button: Log Flock Camera (Bottom-Right) -->
|
||||
<div class="driver-fab-container">
|
||||
<button id="btn-quick-log-cam" class="btn-driver-fab" title="1-Tap: Log a Flock camera at your exact current GPS location">
|
||||
<div class="fab-icon-glow">📸</div>
|
||||
<div class="fab-text-group">
|
||||
<span class="fab-main-title">+ LOG FLOCK CAMERA</span>
|
||||
<span class="fab-sub-title">1-Tap Pin at GPS Location</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">✕</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>
|
||||
|
||||
<!-- 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">✕</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">✕</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>
|
||||
</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">✕</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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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 -->
|
||||
<script src="data/portals.js"></script>
|
||||
<script src="js/auth.js"></script>
|
||||
<script src="js/radar.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user