Update styles and replace SVG logos with image assets

This commit is contained in:
zwitschi committed 2026-07-28 10:37:10 +02:00
1 parent 7af3673d8a
commit 36040d4ddd
7 files changed
+192 -185

No files matched your search

+18 -112
View File
@@ -14,15 +14,14 @@
<header>
<div class="brand">
<span class="logo" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
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"
/>
</svg>
<img
src="{{ url_for('static', filename='img/apple-touch-icon.png') }}"
alt="Logo"
/>
</span>
<div>
TeslaCam Player
<small>Dashcam &amp; Sentry Archive</small>
Driving Footage
<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>
+4 -5
View File
@@ -13,11 +13,10 @@
<div class="login-card">
<div class="login-brand">
<span class="logo" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
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"
/>
</svg>
<img
src="{{ url_for('static', filename='img/apple-touch-icon.png') }}"
alt="Logo"
/>
</span>
<h1>TeslaCam Player</h1>
</div>