Refactor layout and styles in CSS; remove unused car SVG from assets

static/css/style.css

@@ -43,14 +43,14 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 24px;
+  padding: 10px 24px;
   backdrop-filter: blur(18px);
   background: rgba(18, 13, 10, 0.7);
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 50;
-  gap: 16px;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
@@ -82,44 +82,43 @@ header {
   text-transform: uppercase;
 }
 
-/* Layout: single column, centered */
+/* Layout: row with golden-ratio split, collapse on small */
 .layout {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
-  gap: 24px;
+  gap: 20px;
-  padding: 24px;
+  padding: 20px 24px;
   flex: 1;
-  max-width: 960px;
+  max-width: 100%;
   margin: 0 auto;
   width: 100%;
 }
 
 /* Region filter bar */
 .region-bar {
-  width: 100%;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   flex-wrap: wrap;
-  padding: 0 4px;
 }
 
 .region-label {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
+  margin-right: 2px;
 }
 
 .region-btn {
-  padding: 5px 14px;
+  padding: 4px 12px;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: var(--surface);
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: 12px;
   cursor: pointer;
   transition:
     background 0.15s,
@@ -140,10 +139,11 @@ header {
 
 /* Video Player Section */
 .player-panel {
-  width: 100%;
+  flex: 1 1 80%;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  min-width: 0;
 }
 
 .video-stage {
@@ -153,7 +153,6 @@ header {
   overflow: hidden;
   box-shadow: var(--shadow);
   border: 1px solid var(--border);
-  aspect-ratio: 16 / 9;
   width: 100%;
 }
 .video-stage video {
@@ -283,33 +282,35 @@ header {
    Camera Selector: 3-column grid + car graphic
    ============================================= */
 .cam-selector {
-  width: 100%;
+  flex: 1 1 20%;
+  min-width: 240px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 20px 24px;
+  padding: 14px 18px;
+  align-self: flex-start;
 }
 
 .cs-heading {
-  font-size: 11px;
+  font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-muted);
-  margin-bottom: 16px;
+  margin-bottom: 10px;
   text-align: center;
 }
 
 .cs-grid {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  gap: 16px;
+  gap: 8px;
   align-items: center;
 }
 
 .cs-col {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
 }
 
 .cs-col:first-child {
@@ -327,13 +328,13 @@ header {
 .cs-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
-  padding: 0.65rem 1rem;
+  padding: 0.4rem 0.75rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
   border-radius: 999px;
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition:
@@ -342,7 +343,7 @@ header {
     color 0.25s ease,
     border-color 0.25s ease;
   white-space: nowrap;
-  min-width: 140px;
+  min-width: 110px;
   justify-content: center;
 }
 
@@ -381,18 +382,6 @@ header {
   background: rgba(0, 0, 0, 0.25);
 }
 
-/* Model Y Top-Down Car Graphic */
-.car-graphic {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.car-svg {
-  width: 60px;
-  height: 200px;
-}
-
 /* =============================================
    Login Page
    ============================================= */
@@ -507,9 +496,24 @@ header {
    Responsive
    ============================================= */
 @media (max-width: 700px) {
+  .layout {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .player-panel {
+    flex: none;
+    width: 100%;
+  }
+
+  .cam-selector {
+    flex: none;
+    width: 100%;
+  }
+
   .cs-grid {
     grid-template-columns: 1fr;
-    gap: 10px;
+    gap: 6px;
   }
 
   .cs-col:first-child,
@@ -522,31 +526,22 @@ header {
 
   .cs-col:nth-child(2) {
     flex-direction: row;
-    gap: 10px;
+    gap: 6px;
-  }
-
-  .car-graphic {
-    order: -1;
-  }
-
-  .car-svg {
-    width: 40px;
-    height: 140px;
   }
 
   .cs-btn {
-    min-width: 120px;
+    min-width: 100px;
-    font-size: 12px;
+    font-size: 11px;
-    padding: 8px 12px;
+    padding: 6px 10px;
   }
 }
 
 @media (max-width: 560px) {
   header {
-    padding: 12px 16px;
+    padding: 10px 16px;
   }
   .layout {
-    padding: 14px 16px;
+    padding: 12px 16px;
   }
   .brand small {
     display: none;

static/img/car.svg

@@ -1,102 +0,0 @@
-<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

@@ -24,13 +24,9 @@
           <small>TeslaCam Archive</small>
         </div>
       </div>
-    </header>
-
-    <!-- Main Layout: single column, centered -->
-    <div class="layout">
       <!-- Region filter bar -->
       <nav class="region-bar" id="regionBar">
-        <span class="region-label">Shortcuts:</span>
+        <span class="region-label">Jump:</span>
         <button
           class="region-btn"
           id="firstBtn"
@@ -40,36 +36,12 @@
           Start
         </button>
       </nav>
+    </header>
 
+    <!-- Main Layout: single column, centered -->
+    <div class="layout">
       <!-- Video Player -->
       <section class="player-panel">
-        <div class="video-stage">
-          {% set src = "src='" ~ default_url ~ "'" if default_url else '' %} {%
-          set hidden = 'hidden' if not default_url else '' %}
-          <video
-            id="player"
-            controls
-            preload="metadata"
-            playsinline
-            {{src}}
-          ></video>
-          <canvas id="noiseCanvas" class="noise-canvas"></canvas>
-          <div class="video-badge" id="videoBadge">
-            <span class="dot"></span><span id="badgeText">Front</span>
-          </div>
-          <div class="video-placeholder" id="videoPlaceholder" {{hidden}}>
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <rect x="2" y="6" width="14" height="12" rx="2" />
-              <path d="M16 10l6-3v10l-6-3" />
-            </svg>
-            <div>No front camera footage found</div>
-          </div>
-        </div>
         {% set phidden = 'hidden' if not default_url else '' %}
         <div class="now-playing" id="nowPlaying" {{phidden}}>
           <button
@@ -112,6 +84,33 @@
             </svg>
           </button>
         </div>
+        <div class="video-stage">
+          {% set src = "src='" ~ default_url ~ "'" if default_url else '' %} {%
+          set hidden = 'hidden' if not default_url else '' %}
+          <video
+            id="player"
+            controls
+            preload="metadata"
+            playsinline
+            {{src}}
+          ></video>
+          <canvas id="noiseCanvas" class="noise-canvas"></canvas>
+          <div class="video-badge" id="videoBadge">
+            <span class="dot"></span><span id="badgeText">Front</span>
+          </div>
+          <div class="video-placeholder" id="videoPlaceholder" {{hidden}}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <rect x="2" y="6" width="14" height="12" rx="2" />
+              <path d="M16 10l6-3v10l-6-3" />
+            </svg>
+            <div>No front camera footage found</div>
+          </div>
+        </div>
       </section>
 
       <!-- Camera Angle Selector: 3-column grid around Model Y graphic -->
@@ -135,15 +134,6 @@
               <span class="cs-btn-label">{{ cam.display }}</span>
             </button>
             {% 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 %}