Claude
8865e7abcf
Einteilung nach Gattung (Schweiz: route_desc, Deutschland: Präfix der Linie): ICE, IC, EC, ECE, EN, NJ, RJ(X), TGV, IR, … = Fernverkehr. Auswahl bleibt im Browser gespeichert. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
49 lines
1.7 KiB
HTML
49 lines
1.7 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>
|
||
<div class="seg" role="group" aria-label="Züge">
|
||
<button id="flt-all" aria-pressed="true">Alle</button>
|
||
<button id="flt-local" aria-pressed="false">Nahverkehr</button>
|
||
<button id="flt-long" aria-pressed="false">Fernverkehr</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>
|