Refactor CSS styles for improved layout; update logo and heading in login page; shorten camera view names in video player

static/css/style.css

@@ -303,14 +303,14 @@ header {
 .cs-grid {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  gap: 8px;
+  gap: 2px;
   align-items: center;
 }
 
 .cs-col {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 2px;
 }
 
 .cs-col:first-child {
@@ -329,7 +329,7 @@ header {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 0.4rem 0.75rem;
+  padding: 0.2rem 0.75rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
   border-radius: 999px;
@@ -343,7 +343,7 @@ header {
     color 0.25s ease,
     border-color 0.25s ease;
   white-space: nowrap;
-  min-width: 110px;
+  min-width: 64px;
   justify-content: center;
 }
 
@@ -366,22 +366,6 @@ header {
   cursor: not-allowed;
 }
 
-.cs-btn-label {
-  flex: 1;
-}
-
-.cs-btn-count {
-  background: rgba(255, 255, 255, 0.12);
-  padding: 1px 8px;
-  border-radius: 20px;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.cs-btn.active .cs-btn-count {
-  background: rgba(0, 0, 0, 0.25);
-}
-
 /* =============================================
    Login Page
    ============================================= */
@@ -412,8 +396,8 @@ header {
 }
 
 .login-brand .logo {
-  width: 48px;
-  height: 48px;
+  width: 290px;
+  height: 158px;
   display: grid;
   place-items: center;
 }

templates/index.html

@@ -133,8 +133,7 @@
             >
               <span class="cs-btn-label">{{ cam.display }}</span>
             </button>
-            {% if cam.key=='front' %}
-            {% endif %} {% endfor %}
+            {% if cam.key=='front' %} {% endif %} {% endfor %}
           </div>
           {% endfor %}
         </div>

templates/login.html

@@ -14,11 +14,11 @@
       <div class="login-brand">
         <span class="logo" aria-hidden="true">
           <img
-            src="{{ url_for('static', filename='img/apple-touch-icon.png') }}"
+            src="{{ url_for('static', filename='img/open_mic_odyssey.png') }}"
             alt="Logo"
           />
         </span>
-        <h1>TeslaCam Player</h1>
+        <h1>Driving Footage</h1>
       </div>
 
       <form method="POST" action="{{ url_for('login') }}" class="login-form">

videoplayer.py

@@ -45,18 +45,18 @@ VIDEO_FILENAME_REGEX = re.compile(
 # Friendly display names for camera views
 CAMERA_VIEW_MAPPING = {
     'front': 'Front',
-    'left_repeater': 'Left Repeater',
-    'right_repeater': 'Right Repeater',
+    'left_repeater': 'L Rep.',
+    'right_repeater': 'R Rep.',
     'back': 'Back',
-    'left_pillar': 'Left Pillar',
-    'right_pillar': 'Right Pillar'
+    'left_pillar': 'L Pillar',
+    'right_pillar': 'R Pillar'
 }
 
 # Camera button layout order: three columns around the car graphic
 CAMERA_LAYOUT = [
-    ['left_repeater', 'left_pillar'],
+    ['left_pillar', 'left_repeater'],
     ['front', 'back'],
-    ['right_repeater', 'right_pillar'],
+    ['right_pillar', 'right_repeater'],
 ]
 
 # In-memory scan cache. Scanning a large TeslaCam tree on every request is