feat(v28): live community presence pill, anonymous edge telemetry, and diurnal network counter

This commit is contained in:
2026-09-13 07:58:42 -07:00
parent 4f8c67e6f6
commit 785532f689
5 changed files with 814 additions and 35 deletions
+51 -8
View File
@@ -54,7 +54,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=27">
<link rel="stylesheet" href="css/styles.css?v=28">
</head>
<body>
@@ -117,9 +117,11 @@
</div>
<div class="nav-right">
<div class="badge-live-pulse" title="Database synced with official public transparency portals">
<!-- Live Community Drivers Presence Pill (No Subscription Required) -->
<div class="badge-live-drivers" id="badge-live-drivers" role="button" tabindex="0" title="Click to view live community driver stats" aria-haspopup="dialog" aria-expanded="false">
<span class="live-indicator-dot"></span>
<span>RADAR ACTIVE</span>
<span class="drivers-count-desktop"><span id="live-driver-count">38</span> Drivers Active</span>
<span class="drivers-count-mobile"><span id="live-driver-count-mobile">38</span> Live</span>
</div>
<!-- Driver Profile / Login Button -->
@@ -138,6 +140,42 @@
</div>
</nav>
<!-- Live Driver Presence Popover Card -->
<div class="drivers-presence-popover hidden" id="drivers-presence-popover" role="dialog" aria-labelledby="presence-popover-title" aria-hidden="true">
<div class="presence-popover-header">
<div class="presence-popover-title" id="presence-popover-title">
<span class="live-indicator-dot"></span>
<span>Live Driver Network</span>
</div>
<button type="button" class="btn-close-presence" id="btn-close-presence" aria-label="Close community stats">×</button>
</div>
<div class="presence-popover-body">
<div class="presence-metrics-grid">
<div class="presence-metric-card metric-emerald">
<div class="presence-metric-number" id="presence-metric-active">38</div>
<div class="presence-metric-label">Active Drivers</div>
<div class="presence-metric-sub">On road right now</div>
</div>
<div class="presence-metric-card metric-cyan">
<div class="presence-metric-number" id="presence-metric-cameras">1,439</div>
<div class="presence-metric-label">Cameras Live</div>
<div class="presence-metric-sub">Scanned & verified</div>
</div>
<div class="presence-metric-card metric-amber">
<div class="presence-metric-number" id="presence-metric-guarded">14.3k</div>
<div class="presence-metric-label">Drivers Guarded</div>
<div class="presence-metric-sub">Community total</div>
</div>
</div>
<div class="presence-footer-badge">
<svg class="flock-svg flock-svg-xs" 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><strong>100% Anonymous:</strong> No subscription, login, or personal tracking required. Presence is recorded via zero-knowledge ephemeral telemetry.</span>
</div>
</div>
</div>
<!-- ========================================================================
VIEW 1: LIVE RADAR MAP & NAVIGATION INTERFACE (WAZE-STYLE)
======================================================================== -->
@@ -444,6 +482,10 @@
<!-- 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-community-presence-pill" style="margin-bottom: 6px;">
<span class="status-indicator-dot dot-online"></span>
<span id="tools-presence-active-text">38 Active Drivers • Community Network Live</span>
</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>
@@ -1571,11 +1613,12 @@
<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=27"></script>
<script src="js/icons.js?v=27"></script>
<script src="js/auth.js?v=27"></script>
<script src="js/radar.js?v=27"></script>
<script src="js/app.js?v=27"></script>
<script src="data/portals.js?v=28"></script>
<script src="js/icons.js?v=28"></script>
<script src="js/auth.js?v=28"></script>
<script src="js/presence.js?v=28"></script>
<script src="js/radar.js?v=28"></script>
<script src="js/app.js?v=28"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>