diff --git a/css/styles.css b/css/styles.css index 447db65..d172395 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1343,8 +1343,16 @@ body { } .dir-cam-placeholder-icon { - font-size: 2.2rem; - opacity: 0.8; + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(6, 182, 212, 0.1); + border: 1px solid rgba(6, 182, 212, 0.25); + display: flex; + align-items: center; + justify-content: center; + color: #38bdf8; + margin-bottom: 2px; } .dir-cam-badge { @@ -1357,6 +1365,9 @@ body { border-radius: 9999px; backdrop-filter: blur(8px); z-index: 2; + display: inline-flex; + align-items: center; + gap: 5px; } .dir-cam-badge.verified { @@ -2857,18 +2868,67 @@ body { font-size: 0.72rem; } +/* Professional Vector SVG Icon System */ +.flock-svg { + width: 1.15em; + height: 1.15em; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + fill: none; + display: inline-block; + vertical-align: -0.15em; + flex-shrink: 0; +} + +.flock-svg-sm { + width: 0.9em; + height: 0.9em; +} + +.flock-svg-md { + width: 1.25rem; + height: 1.25rem; +} + +.flock-svg-lg { + width: 1.8rem; + height: 1.8rem; +} + +.flock-svg-xl { + width: 2.2rem; + height: 2.2rem; +} + +.flock-svg-hero { + width: 28px; + height: 28px; +} + /* Empty Photo Prompt State */ .proof-empty-box { - padding: 24px 20px; + padding: 26px 20px; text-align: center; - border: 1px dashed rgba(148, 163, 184, 0.25); + border: 1px dashed rgba(6, 182, 212, 0.35); border-radius: var(--radius-md); - background: rgba(15, 23, 42, 0.5); + background: rgba(15, 23, 42, 0.65); + backdrop-filter: blur(12px); } .proof-empty-icon { - font-size: 2.2rem; - margin-bottom: 8px; + width: 58px; + height: 58px; + margin: 0 auto 12px auto; + border-radius: 50%; + background: rgba(6, 182, 212, 0.12); + border: 1px solid rgba(6, 182, 212, 0.35); + display: flex; + align-items: center; + justify-content: center; + color: #38bdf8; + box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); } .proof-empty-title { diff --git a/index.html b/index.html index c11ec74..6338dcb 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ - + @@ -55,12 +55,29 @@
@@ -76,7 +93,12 @@ @@ -123,11 +145,13 @@
@@ -144,7 +168,9 @@
- +
FLOCK CAMERA ACTIVE ZONE

Vehicle Profile & Plate Logging Active

@@ -172,14 +198,20 @@
RADAR RANGE:
- - + +
- πŸ›°οΈ + Spotting Antelope Valley Location...
@@ -187,26 +219,32 @@
@@ -216,62 +254,67 @@
- βš™οΈ Driving Controls & Settings - + + + Driving Controls & Settings + +
@@ -303,14 +346,16 @@
+ /
@@ -491,7 +538,9 @@
@@ -749,7 +802,7 @@

- πŸ›‘οΈ + Admin: Manage Placed Cameras

0 Placed @@ -760,8 +813,9 @@
-
@@ -777,7 +831,9 @@
Help alert the driver network to new ALPR surveillance installations
- +
@@ -806,12 +862,14 @@
@@ -847,7 +905,9 @@
- +
@@ -880,7 +940,9 @@
-
πŸ›‘οΈ
+
+ +
Democratic Checks & Balances Active

Flock cameras are permanent municipal installations. To prevent law enforcement or bad actors from deleting active surveillance zones, locations are protected by community consensus.

@@ -890,22 +952,30 @@
- 🧭 + + + Maps β†—
@@ -914,7 +984,7 @@