Claude
b013753fc3
- Server liefert pro Zug Positionen alle 2 s für die nächsten 10 s, der Browser fährt Kurven nach und dreht die Spitze weich (~0,3 s) - Richtung unter ~2 m Bewegung ignoriert (kein Umklappen am Halt) - Eigene Icon-Namen (tp-*), die Protomaps-Sprites hatten arrow/dot schon - Modi Karte / Dunkel / Satellit; im Satellit weisse Schrift mit dunklem Rand Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
42 lines
1.4 KiB
HTML
42 lines
1.4 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">Lade …</p>
|
||
</header>
|
||
|
||
<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>
|