952 lines
48 KiB
HTML
952 lines
48 KiB
HTML
<!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-admin-manage-pins" class="btn-hud-action" title="Admin: Manage and remove cameras you placed (the 1,439 official municipal portals are protected)">
|
||
<span>🗑️</span>
|
||
<span>Admin: Placed Pins</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: 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">📸</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">✕</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>
|
||
|
||
<!-- 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;">
|
||
<span>🛡️</span>
|
||
<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;">
|
||
🗑️ Clear All Placed Pins (Keep Real Locations)
|
||
</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>
|
||
|
||
<!-- 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;">
|
||
<span>📸</span>
|
||
<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;">✕</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">✕</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">🛡️</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">👍</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">📸</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">⚠️</span>
|
||
<span>Contest</span>
|
||
</button>
|
||
|
||
<a id="btn-proof-navigate" href="#" target="_blank" rel="noopener noreferrer" class="btn-proof-action btn-nav-maps" title="Open navigation in Apple/Google Maps">
|
||
<span class="btn-icon">🧭</span>
|
||
<span>Maps ↗</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Public Transparency Portal Link -->
|
||
<div id="proof-portal-link-box" style="margin-top: 16px; text-align: center;">
|
||
<button id="btn-proof-open-portal" class="btn-secondary" style="width: 100%; padding: 12px;">
|
||
Inspect Official Transparency Portal & Policy Records ↗
|
||
</button>
|
||
</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;">
|
||
<span>🗑️</span>
|
||
<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">✕</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;">
|
||
<span>📷</span>
|
||
<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;">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="proof-consensus-banner" style="margin-bottom: 20px;">
|
||
<div class="consensus-icon">⚖️</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>
|
||
|
||
<!-- 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 -->
|
||
<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>
|