diff --git a/static/css/style.css b/static/css/style.css index 8c4e7bc..1d8c2cb 100644 --- a/static/css/style.css +++ b/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; - align-items: center; - gap: 24px; - padding: 24px; + flex-direction: row; + align-items: flex-start; + gap: 20px; + 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; - padding: 0.65rem 1rem; + gap: 6px; + 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; - } - - .car-graphic { - order: -1; - } - - .car-svg { - width: 40px; - height: 140px; + gap: 6px; } .cs-btn { - min-width: 120px; - font-size: 12px; - padding: 8px 12px; + min-width: 100px; + font-size: 11px; + 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; diff --git a/static/img/car.svg b/static/img/car.svg deleted file mode 100644 index ed2a15f..0000000 --- a/static/img/car.svg +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - Front - - - Back - - - L Rep - - - R Rep - - - L Pil - - - R Pil - - \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 1832014..67fa83a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -24,13 +24,9 @@ TeslaCam Archive - - - -
+ + +
-
- {% set src = "src='" ~ default_url ~ "'" if default_url else '' %} {% - set hidden = 'hidden' if not default_url else '' %} - - -
- Front -
-
- - - - -
No front camera footage found
-
-
{% set phidden = 'hidden' if not default_url else '' %}
+
+ {% set src = "src='" ~ default_url ~ "'" if default_url else '' %} {% + set hidden = 'hidden' if not default_url else '' %} + + +
+ Front +
+
+ + + + +
No front camera footage found
+
+
@@ -135,15 +134,6 @@ {{ cam.display }} {% if cam.key=='front' %} - - {% endif %} {% endfor %}
{% endfor %}