Update styles and replace SVG logos with image assets

static/css/style.css

@@ -1,17 +1,17 @@
 :root {
-  --bg-primary: #0a0a0c;
+  --black: #120d0a;
-  --bg-secondary: #17171a;
+  --deep-burgundy: #231611;
-  --bg-tertiary: #202024;
+  --burnt-maroon: #351f16;
-  --bg-elevated: #2a2a2f;
+  --rust: #ff9b54;
-  --accent: #e31937; /* Tesla Red */
+  --golden-amber: #ffbe78;
-  --accent-hover: #ff2b4d;
+  --neon-yellow: #ffbe78;
-  --text-primary: #f4f4f5;
+  --text-main: #f5e7d0;
-  --text-secondary: #a1a1aa;
+  --text-muted: #d7c5aa;
-  --text-muted: #6b6b73;
+  --surface: rgba(35, 22, 17, 0.82);
-  --border: #303036;
+  --border: rgba(255, 212, 164, 0.18);
-  --radius: 12px;
+  --shadow: rgba(0, 0, 0, 0.28);
-  --radius-sm: 8px;
+  --radius: 24px;
-  --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+  --radius-sm: 18px;
   --font:
     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;
@@ -26,8 +26,8 @@
 html,
 body {
   height: 100%;
-  background: var(--bg-primary);
+  background: var(--black);
-  color: var(--text-primary);
+  color: var(--text-main);
   font-family: var(--font);
   -webkit-font-smoothing: antialiased;
 }
@@ -44,7 +44,8 @@ header {
   align-items: center;
   justify-content: space-between;
   padding: 14px 24px;
-  background: linear-gradient(180deg, #131316 0%, var(--bg-secondary) 100%);
+  backdrop-filter: blur(18px);
+  background: rgba(18, 13, 10, 0.7);
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
@@ -66,12 +67,11 @@ header {
   height: 30px;
   display: grid;
   place-items: center;
-  color: var(--accent);
 }
-.brand .logo svg {
+.brand .logo img {
   width: 100%;
   height: 100%;
-  fill: var(--accent);
+  object-fit: contain;
 }
 .brand small {
   display: block;
@@ -117,8 +117,8 @@ header {
   padding: 5px 14px;
   border: 1px solid var(--border);
   border-radius: 20px;
-  background: var(--bg-secondary);
+  background: var(--surface);
-  color: var(--text-secondary);
+  color: var(--text-muted);
   font-size: 13px;
   cursor: pointer;
   transition:
@@ -129,14 +129,13 @@ header {
 }
 
 .region-btn:hover {
-  border-color: var(--accent);
+  border-color: var(--text-main);
-  color: var(--text-primary);
 }
 
 .region-btn.active {
-  background: var(--accent);
+  background: var(--rust);
   color: #fff;
-  border-color: var(--accent);
+  border-color: var(--rust);
 }
 
 /* Video Player Section */
@@ -217,13 +216,13 @@ header {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--rust);
-  box-shadow: 0 0 8px var(--accent);
+  box-shadow: 0 0 8px var(--rust);
 }
 
 .now-playing {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   padding: 0 4px;
   display: flex;
   justify-content: flex-start;
@@ -232,10 +231,9 @@ header {
   flex-wrap: wrap;
 }
 .now-playing strong {
-  color: var(--text-primary);
+  color: var(--text-main);
 }
 .now-playing .ts {
-  color: var(--accent);
   font-variant-numeric: tabular-nums;
 }
 .now-playing .loc {
@@ -256,9 +254,9 @@ header {
   width: 28px;
   height: 28px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 999px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-secondary);
+  color: var(--text-muted);
   cursor: pointer;
   transition:
     background 0.15s,
@@ -272,12 +270,12 @@ header {
   height: 16px;
 }
 .nav-btn:hover {
-  background: var(--bg-elevated);
+  background: rgba(255, 255, 255, 0.08);
-  color: var(--text-primary);
+  color: var(--text-main);
-  border-color: var(--accent);
+  border-color: var(--text-main);
 }
 .nav-btn:active {
-  background: var(--accent);
+  background: var(--rust);
   color: #fff;
 }
 
@@ -286,7 +284,7 @@ header {
    ============================================= */
 .cam-selector {
   width: 100%;
-  background: var(--bg-secondary);
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 20px 24px;
@@ -330,30 +328,36 @@ header {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 16px;
+  padding: 0.65rem 1rem;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: 999px;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.15s;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease,
+    color 0.25s ease,
+    border-color 0.25s ease;
   white-space: nowrap;
   min-width: 140px;
   justify-content: center;
 }
 
 .cs-btn:hover:not(:disabled) {
-  background: var(--bg-elevated);
+  background: rgba(255, 255, 255, 0.08);
-  color: var(--text-primary);
+  color: var(--text-main);
-  border-color: #444;
+  border-color: var(--golden-amber);
+  transform: translateY(-2px);
 }
 
 .cs-btn.active {
-  background: var(--accent);
+  background: linear-gradient(135deg, var(--rust), #ff6b35);
-  border-color: var(--accent);
+  border-color: var(--rust);
-  color: #fff;
+  color: #170d0a;
+  box-shadow: 0 10px 22px rgba(255, 155, 84, 0.16);
 }
 
 .cs-btn:disabled {
@@ -397,18 +401,14 @@ header {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: radial-gradient(
+  background: radial-gradient(ellipse at 50% 30%, #1a1a22 0%, var(--black) 70%);
-    ellipse at 50% 30%,
-    #1a1a22 0%,
-    var(--bg-primary) 70%
-  );
 }
 
 .login-card {
   width: 100%;
   max-width: 380px;
   padding: 40px 36px;
-  background: var(--bg-secondary);
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
@@ -427,20 +427,20 @@ header {
   height: 48px;
   display: grid;
   place-items: center;
-  color: var(--accent);
 }
 
-.login-brand .logo svg {
+.login-brand .logo img {
   width: 100%;
   height: 100%;
-  fill: var(--accent);
+  object-fit: contain;
 }
 
 .login-brand h1 {
   font-size: 20px;
   font-weight: 700;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.08em;
-  color: var(--text-primary);
+  text-transform: uppercase;
+  color: var(--text-main);
 }
 
 .login-form {
@@ -452,7 +452,7 @@ header {
 .login-form label {
   font-size: 13px;
   font-weight: 600;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.8px;
 }
@@ -460,10 +460,10 @@ header {
 .login-form input[type="password"] {
   width: 100%;
   padding: 12px 16px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: 999px;
-  color: var(--text-primary);
+  color: var(--text-main);
   font-size: 15px;
   outline: none;
   transition:
@@ -472,14 +472,14 @@ header {
 }
 
 .login-form input[type="password"]:focus {
-  border-color: var(--accent);
+  border-color: var(--text-main);
   box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.15);
 }
 
 .login-form button {
   width: 100%;
   padding: 12px;
-  background: var(--accent);
+  background: var(--rust);
   border: none;
   border-radius: var(--radius-sm);
   color: #fff;
@@ -491,12 +491,12 @@ header {
 }
 
 .login-form button:hover {
-  background: var(--accent-hover);
+  background: #cc2a3e;
 }
 
 .login-error {
   font-size: 13px;
-  color: var(--accent);
+
   text-align: center;
   padding: 8px;
   background: rgba(227, 25, 55, 0.08);

static/img/car.svg

@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400" class="car-svg">
+<style>
+:root { --accent: #ff0000; --text-muted: #888888; }
+</style>
+<!-- Car body -->
+<rect
+    x="55"
+    y="80"
+    width="90"
+    height="240"
+    rx="30"
+    ry="30"
+    fill="none"
+    stroke="var(--text-muted)"
+    stroke-width="2"
+/>
+<!-- Windshield -->
+<line
+    x1="65"
+    y1="110"
+    x2="135"
+    y2="110"
+    stroke="var(--text-muted)"
+    stroke-width="1.5"
+/>
+<!-- Back view -->
+<line
+    x1="65"
+    y1="290"
+    x2="135"
+    y2="290"
+    stroke="var(--text-muted)"
+    stroke-width="1.5"
+/>
+<!-- Front view camera dot -->
+<circle cx="100" cy="78" r="5" fill="var(--accent)" />
+<!-- Back view camera dot -->
+<circle cx="100" cy="322" r="5" fill="var(--accent)" />
+<!-- Left repeater dot -->
+<circle cx="53" cy="130" r="4" fill="var(--accent)" />
+<!-- Right repeater dot -->
+<circle cx="147" cy="130" r="4" fill="var(--accent)" />
+<!-- Left pillar dot -->
+<circle cx="53" cy="200" r="4" fill="var(--accent)" />
+<!-- Right pillar dot -->
+<circle cx="147" cy="200" r="4" fill="var(--accent)" />
+<!-- Labels -->
+<text
+    x="100"
+    y="68"
+    text-anchor="middle"
+    fill="var(--text-muted)"
+    font-size="9"
+>
+    Front
+</text>
+<text
+    x="100"
+    y="342"
+    text-anchor="middle"
+    fill="var(--text-muted)"
+    font-size="9"
+>
+    Back
+</text>
+<text
+    x="42"
+    y="134"
+    text-anchor="end"
+    fill="var(--text-muted)"
+    font-size="8"
+>
+    L Rep
+</text>
+<text
+    x="158"
+    y="134"
+    text-anchor="start"
+    fill="var(--text-muted)"
+    font-size="8"
+>
+    R Rep
+</text>
+<text
+    x="42"
+    y="204"
+    text-anchor="end"
+    fill="var(--text-muted)"
+    font-size="8"
+>
+    L Pil
+</text>
+<text
+    x="158"
+    y="204"
+    text-anchor="start"
+    fill="var(--text-muted)"
+    font-size="8"
+>
+    R Pil
+</text>
+</svg>

templates/index.html

@@ -14,15 +14,14 @@
     <header>
       <div class="brand">
         <span class="logo" aria-hidden="true">
-          <svg viewBox="0 0 24 24">
+          <img
-            <path
+            src="{{ url_for('static', filename='img/apple-touch-icon.png') }}"
-              d="M12 3C7 3 3.2 4.4 3.2 4.4l.9 1.7s3.1-1 5-.9l.7 1.3C7.9 7.7 6 9 6 9s.6 2.4 3 4.6c2.5-2.2 3-4.6 3-4.6s-1.9-1.3-3.7-1.5l.6-1.3c1.9-.1 5 .9 5 .9l.9-1.7S17 3 12 3z"
+            alt="Logo"
-            />
+          />
-          </svg>
         </span>
         <div>
-          TeslaCam Player
+          Driving Footage
-          <small>Dashcam &amp; Sentry Archive</small>
+          <small>TeslaCam Archive</small>
         </div>
       </div>
     </header>
@@ -123,6 +122,7 @@
           <div class="cs-col">
             {% for cam in col %} {% set disabled = 'disabled' if not
             cam.first_url else '' %}
+
             <button
               class="cs-btn{% if cam.key == 'front' %} active{% endif %}"
               data-cam="{{ cam.key }}"
@@ -133,115 +133,21 @@
               title="{{ cam.display }}{% if not cam.first_url %} — no footage{% endif %}"
             >
               <span class="cs-btn-label">{{ cam.display }}</span>
-              <span class="cs-btn-count">{{ cam.count }}</span>
             </button>
-            {% endfor %}
+            {% if cam.key=='front' %}
+            <!-- Model Y Top-Down SVG -->
+            <div class="car-graphic" aria-hidden="true">
+              <img
+                src="{{ url_for('static', filename='img/car.svg') }}"
+                alt="Model Y Top-Down View"
+                height="400"
+                width="200"
+              />
+            </div>
+            {% endif %} {% endfor %}
           </div>
           {% endfor %}
         </div>
-
-        <!-- Model Y Top-Down SVG -->
-        <div class="car-graphic" aria-hidden="true">
-          <svg viewBox="0 0 200 400" class="car-svg">
-            <!-- Car body -->
-            <rect
-              x="55"
-              y="80"
-              width="90"
-              height="240"
-              rx="30"
-              ry="30"
-              fill="none"
-              stroke="var(--text-muted)"
-              stroke-width="2"
-            />
-            <!-- Windshield -->
-            <line
-              x1="65"
-              y1="110"
-              x2="135"
-              y2="110"
-              stroke="var(--text-muted)"
-              stroke-width="1.5"
-            />
-            <!-- Back view -->
-            <line
-              x1="65"
-              y1="290"
-              x2="135"
-              y2="290"
-              stroke="var(--text-muted)"
-              stroke-width="1.5"
-            />
-            <!-- Front view camera dot -->
-            <circle cx="100" cy="78" r="5" fill="var(--accent)" />
-            <!-- Back view camera dot -->
-            <circle cx="100" cy="322" r="5" fill="var(--accent)" />
-            <!-- Left repeater dot -->
-            <circle cx="53" cy="130" r="4" fill="var(--accent)" />
-            <!-- Right repeater dot -->
-            <circle cx="147" cy="130" r="4" fill="var(--accent)" />
-            <!-- Left pillar dot -->
-            <circle cx="53" cy="200" r="4" fill="var(--accent)" />
-            <!-- Right pillar dot -->
-            <circle cx="147" cy="200" r="4" fill="var(--accent)" />
-            <!-- Labels -->
-            <text
-              x="100"
-              y="68"
-              text-anchor="middle"
-              fill="var(--text-muted)"
-              font-size="9"
-            >
-              Front
-            </text>
-            <text
-              x="100"
-              y="342"
-              text-anchor="middle"
-              fill="var(--text-muted)"
-              font-size="9"
-            >
-              Back
-            </text>
-            <text
-              x="42"
-              y="134"
-              text-anchor="end"
-              fill="var(--text-muted)"
-              font-size="8"
-            >
-              L Rep
-            </text>
-            <text
-              x="158"
-              y="134"
-              text-anchor="start"
-              fill="var(--text-muted)"
-              font-size="8"
-            >
-              R Rep
-            </text>
-            <text
-              x="42"
-              y="204"
-              text-anchor="end"
-              fill="var(--text-muted)"
-              font-size="8"
-            >
-              L Pil
-            </text>
-            <text
-              x="158"
-              y="204"
-              text-anchor="start"
-              fill="var(--text-muted)"
-              font-size="8"
-            >
-              R Pil
-            </text>
-          </svg>
-        </div>
       </section>
     </div>
 

templates/login.html

@@ -13,11 +13,10 @@
     <div class="login-card">
       <div class="login-brand">
         <span class="logo" aria-hidden="true">
-          <svg viewBox="0 0 24 24">
+          <img
-            <path
+            src="{{ url_for('static', filename='img/apple-touch-icon.png') }}"
-              d="M12 3C7 3 3.2 4.4 3.2 4.4l.9 1.7s3.1-1 5-.9l.7 1.3C7.9 7.7 6 9 6 9s.6 2.4 3 4.6c2.5-2.2 3-4.6 3-4.6s-1.9-1.3-3.7-1.5l.6-1.3c1.9-.1 5 .9 5 .9l.9-1.7S17 3 12 3z"
+            alt="Logo"
-            />
+          />
-          </svg>
         </span>
         <h1>TeslaCam Player</h1>
       </div>