147 lines
4.4 KiB
HTML
147 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>TeslaCam Video Player</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/style.css') }}"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="brand">
|
|
<span class="logo" aria-hidden="true">
|
|
<img
|
|
src="{{ url_for('static', filename='img/apple-touch-icon.png') }}"
|
|
alt="Logo"
|
|
/>
|
|
</span>
|
|
<div>
|
|
Driving Footage
|
|
<small>TeslaCam Archive</small>
|
|
</div>
|
|
</div>
|
|
<!-- Region filter bar -->
|
|
<nav class="region-bar" id="regionBar">
|
|
<span class="region-label">Jump:</span>
|
|
<button
|
|
class="region-btn"
|
|
id="firstBtn"
|
|
title="First clip"
|
|
aria-label="First clip"
|
|
>
|
|
Start
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Layout: single column, centered -->
|
|
<div class="layout">
|
|
<!-- Video Player -->
|
|
<section class="player-panel">
|
|
{% set phidden = 'hidden' if not default_url else '' %}
|
|
<div class="now-playing" id="nowPlaying" {{phidden}}>
|
|
<button
|
|
class="nav-btn"
|
|
id="prevBtn"
|
|
title="Previous clip (←)"
|
|
aria-label="Previous clip"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<polyline points="15 18 9 12 15 6" />
|
|
</svg>
|
|
</button>
|
|
<span
|
|
>Now Playing:
|
|
<strong id="npName"
|
|
>{% if default_url %}Front — oldest clip{% else %}—{% endif
|
|
%}</strong
|
|
></span
|
|
>
|
|
<span class="ts" id="npTime">—</span>
|
|
<span class="loc" id="npLocation"></span>
|
|
<button
|
|
class="nav-btn"
|
|
id="nextBtn"
|
|
title="Next clip (→)"
|
|
aria-label="Next clip"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<polyline points="9 18 15 12 9 6" />
|
|
</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 -->
|
|
<section class="cam-selector">
|
|
<h2 class="cs-heading">Camera Angles</h2>
|
|
<div class="cs-grid">
|
|
{% for col in camera_list %}
|
|
<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 }}"
|
|
data-url="{{ cam.first_url or '' }}"
|
|
{{
|
|
disabled
|
|
}}
|
|
title="{{ cam.display }}{% if not cam.first_url %} — no footage{% endif %}"
|
|
>
|
|
<span class="cs-btn-label">{{ cam.display }}</span>
|
|
</button>
|
|
{% if cam.key=='front' %} {% endif %} {% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Camera metadata loaded via /api/videos by app.js -->
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html>
|