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

feat: add 3-way audio mode, viral share API, offline road-ready indicator, multi-app navigation (Google/Apple/Waze), and PWA car HUD install (v25)

Browse Source
This commit is contained in:
Mediusa
2026-09-12 18:00:41 -07:00
parent fbe0bcea9f
commit 6783a0b3ba
4 changed files with 509 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+75 -13
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=24">
<link rel="stylesheet" href="css/styles.css?v=25">
</head>
<body>
@@ -365,6 +365,42 @@
</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>
<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">
@@ -1032,12 +1068,27 @@
<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">
<svg class="flock-svg" 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>
<span>Maps ↗</span>
</a>
<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 -->
@@ -1281,7 +1332,18 @@
<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">
@@ -1313,11 +1375,11 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Data & Application Logic with Cache Busting -->
<script src="data/portals.js?v=24"></script>
<script src="js/icons.js?v=24"></script>
<script src="js/auth.js?v=24"></script>
<script src="js/radar.js?v=24"></script>
<script src="js/app.js?v=24"></script>
<script src="data/portals.js?v=25"></script>
<script src="js/icons.js?v=25"></script>
<script src="js/auth.js?v=25"></script>
<script src="js/radar.js?v=25"></script>
<script src="js/app.js?v=25"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>