Claude
2e3c10a6c4
- /api/status liefert ready, sobald Positionen mit Echtzeit berechnet sind - Server holt Echtzeit direkt nach dem Laden des Fahrplans (statt nach ~35 s) - Browser zeigt bis dahin nur 'Züge werden geladen …' - Statuszeile ohne Technik: 'N Züge unterwegs', ggf. 'Verspätungen zurzeit nicht verfügbar' - Autobahn-/Strassenschilder (roads_shields) ausgeblendet Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>TrainPulse</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css">
|
||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
|
||
<script src="https://unpkg.com/pmtiles@4.5.0/dist/pmtiles.js"></script>
|
||
<script src="https://unpkg.com/@protomaps/basemaps@5.7.2/dist/basemaps.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
|
||
<header class="card" id="bar">
|
||
<h1>TrainPulse</h1>
|
||
<div class="seg" role="group" aria-label="Hintergrund">
|
||
<button id="btn-light" aria-pressed="true">Karte</button>
|
||
<button id="btn-dark" aria-pressed="false">Dunkel</button>
|
||
<button id="btn-sat" aria-pressed="false">Satellit</button>
|
||
</div>
|
||
<ul class="legend">
|
||
<li><i style="--c:var(--ok)"></i>pünktlich</li>
|
||
<li><i style="--c:var(--d1)"></i>3–6′</li>
|
||
<li><i style="--c:var(--d2)"></i>6–15′</li>
|
||
<li><i style="--c:var(--d3)"></i>>15′</li>
|
||
<li><i style="--c:var(--na)"></i>ohne Echtzeit</li>
|
||
</ul>
|
||
<p id="status"></p>
|
||
</header>
|
||
|
||
<div class="card" id="loading" role="status">Züge werden geladen …</div>
|
||
|
||
<aside class="card" id="panel" hidden>
|
||
<button id="close" aria-label="Schliessen">×</button>
|
||
<div id="detail"></div>
|
||
</aside>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|