Claude
650f8dca8c
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
56 lines
2.3 KiB
HTML
56 lines
2.3 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="Verkehrsmittel">
|
||
<button id="flt-all" aria-pressed="true">Alle</button>
|
||
<button id="flt-long" aria-pressed="false" title="Fernverkehr (ICE, IC, TGV …)">Fern</button>
|
||
<button id="flt-regio" aria-pressed="false" title="Regionalzüge (RE, RB, TER, Sprinter …)">Regio</button>
|
||
<button id="flt-sbahn" aria-pressed="false">S-Bahn</button>
|
||
<button id="flt-tram" aria-pressed="false">Tram</button>
|
||
<button id="flt-subway" aria-pressed="false">U-Bahn</button>
|
||
</div>
|
||
<div id="search">
|
||
<input id="q" type="search" placeholder="Zug suchen, z. B. S5, ICE 11, 2318" autocomplete="off"
|
||
aria-label="Zug suchen" aria-controls="results">
|
||
<ul id="results" role="listbox" hidden></ul>
|
||
</div>
|
||
<ul class="legend">
|
||
<li class="scale" aria-label="Verspätung: grün pünktlich, gelb 10, orange 20, rot 30, lila ab 40 Minuten, ab 50 blinkend">
|
||
<span class="bar"></span><span class="ticks"><b>0</b><b>10</b><b>20</b><b>30</b><b>40</b><b>50′+</b></span></li>
|
||
<li><i style="--c:var(--na)"></i>ohne Echtzeit</li>
|
||
</ul>
|
||
<p id="status"></p>
|
||
<p id="hint" hidden>Trams und U-Bahnen erscheinen beim Hineinzoomen.</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>
|