feat(directory): list specific camera nodes with cross-streets and photos in city search

This commit is contained in:
2026-09-12 09:43:21 -07:00
parent 0e47dfa1d8
commit be8981d024
5 changed files with 440 additions and 11 deletions
+29 -5
View File
@@ -28,7 +28,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=10">
<link rel="stylesheet" href="css/styles.css?v=11">
</head>
<body>
@@ -487,6 +487,30 @@
</div>
</div>
<!-- Specific Camera Nodes & Hardware Images for Searched City / Location -->
<section id="directory-cameras-section" class="directory-cameras-section" style="display: none; margin-bottom: 36px;">
<div class="dir-cam-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 14px 18px; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 14px;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.4rem;">📸</span>
<div>
<h3 style="margin: 0; font-size: 1.1rem; color: #38bdf8; font-family: var(--font-heading);">
Identified Camera Nodes in <span id="dir-cam-query-title">City</span>
</h3>
<span id="dir-cam-subtitle" style="font-size: 0.8rem; color: #94a3b8;">
Mapped intersections, cross streets, and physical hardware photos
</span>
</div>
</div>
<span id="dir-cam-badge-count" style="background: #06b6d4; color: #07090e; font-weight: 800; font-size: 0.78rem; padding: 4px 12px; border-radius: 9999px;">
0 Cameras
</span>
</div>
<div id="directory-cameras-grid" class="directory-cameras-grid">
<!-- Dynamically populated camera cards with photos, cross streets, and jump-to-radar buttons -->
</div>
</section>
<!-- Cards Grid View -->
<div class="portals-grid" id="portals-grid" aria-live="polite"></div>
@@ -1031,10 +1055,10 @@
<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=10"></script>
<script src="js/auth.js?v=10"></script>
<script src="js/radar.js?v=10"></script>
<script src="js/app.js?v=10"></script>
<script src="data/portals.js?v=11"></script>
<script src="js/auth.js?v=11"></script>
<script src="js/radar.js?v=11"></script>
<script src="js/app.js?v=11"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>