196 lines
11 KiB
HTML
196 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>ÖPNV Navi – Live-Abfahrten für Berlin & Brandenburg</title>
|
||
<meta name="description" content="Live-Abfahrten, Live-Karte und Routenplaner für den VBB-Verbund." />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||
<meta name="apple-mobile-web-app-title" content="ÖPNV Navi" />
|
||
<meta name="theme-color" content="#0C1116" />
|
||
<link rel="manifest" href="manifest.json" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@600&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<header class="app-header">
|
||
<button class="brand" data-tab="departures" aria-label="Zur Startseite">
|
||
<span class="brand__mark">ÖPNV</span><span class="brand__mark brand__mark--accent">NAVI</span>
|
||
</button>
|
||
|
||
<div class="search-box search-box--global">
|
||
<span class="search-box__icon" aria-hidden="true">⌕</span>
|
||
<input type="text" id="station-search" placeholder="Haltestelle, Ort oder Ziel suchen…" autocomplete="off" aria-label="Haltestelle, Ort oder Ziel suchen" />
|
||
<button id="search-clear" class="search-clear" type="button" aria-label="Suche leeren" hidden>×</button>
|
||
<ul id="search-results" class="search-results" hidden></ul>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="tab-nav" aria-label="Hauptnavigation">
|
||
<button class="tab-button is-active" data-tab="departures"><span>🚏</span> Abfahrten</button>
|
||
<button class="tab-button" data-tab="journey"><span>🧭</span> Route</button>
|
||
<button class="tab-button" data-tab="map"><span>🗺</span> Karte</button>
|
||
<button class="tab-button" data-tab="more"><span>☰</span> Mehr</button>
|
||
</nav>
|
||
|
||
<main class="app-main">
|
||
<section class="tab-panel" data-tab-panel="departures">
|
||
<div class="welcome-panel" id="welcome-panel">
|
||
<div class="welcome-panel__eyebrow">LIVE · VBB</div>
|
||
<h1>Was fährt jetzt?</h1>
|
||
<p>Suche eine Haltestelle oder nutze deinen Standort, um die nächsten Abfahrten zu sehen.</p>
|
||
<div class="welcome-actions">
|
||
<button id="welcome-nearby" class="action-card action-card--primary" type="button">
|
||
<span class="action-card__icon">📍</span>
|
||
<span><strong>In meiner Nähe</strong><small>Haltestellen im Umkreis finden</small></span>
|
||
</button>
|
||
<button id="welcome-route" class="action-card" type="button">
|
||
<span class="action-card__icon">🧭</span>
|
||
<span><strong>Route planen</strong><small>Von A nach B mit Bus & Bahn</small></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="favorites-home" class="home-section" hidden>
|
||
<div class="section-heading">
|
||
<div><span class="section-heading__eyebrow">SCHNELLZUGRIFF</span><h2>Meine Haltestellen</h2></div>
|
||
</div>
|
||
<div id="favorite-cards" class="favorite-cards"></div>
|
||
</div>
|
||
|
||
<div id="nearby-home" class="home-section" hidden>
|
||
<div class="section-heading">
|
||
<div><span class="section-heading__eyebrow">OPTIONAL</span><h2>Haltestellen in der Nähe</h2></div>
|
||
<button id="nearby-home-open" class="text-button" type="button">Alle anzeigen</button>
|
||
</div>
|
||
<div id="nearby-home-list" class="nearby-preview"></div>
|
||
</div>
|
||
|
||
<div id="departures-view" hidden>
|
||
<div class="board-header">
|
||
<div>
|
||
<span class="section-heading__eyebrow">LIVE-ABFAHRTEN</span>
|
||
<h1 id="board-station-name" class="board-station-name">Keine Haltestelle ausgewählt</h1>
|
||
</div>
|
||
<button id="favorite-toggle" class="favorite-toggle" hidden>☆ Favorit</button>
|
||
</div>
|
||
<div id="board-status" class="board-status" aria-live="polite"><span class="status-dot"></span> Aktualisierung alle 30 Sekunden</div>
|
||
<div id="departures-mode-filter" class="mode-filter"></div>
|
||
<div id="station-disruption" class="station-disruption" hidden></div>
|
||
<div id="board-empty-state" class="board-empty-state">Suche oben eine Haltestelle, um Live-Abfahrten zu sehen.</div>
|
||
<div id="departure-board" class="departure-board" role="table" aria-label="Abfahrtstafel"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="tab-panel" data-tab-panel="map" hidden>
|
||
<div class="panel-heading"><div><span class="section-heading__eyebrow">LIVE</span><h1>Karte</h1><p>Fahrzeuge, Routen und deine aktuelle Fahrt live verfolgen.</p></div></div>
|
||
<div class="map-controls">
|
||
<div id="map-mode-filter" class="mode-filter"></div>
|
||
<button id="map-locate" class="map-locate-btn" type="button">📍 Mein Standort</button>
|
||
</div>
|
||
<div id="map-isolation-banner" class="map-isolation-banner">
|
||
<span>Verfolge Linie <span id="map-isolation-line" class="map-isolation-banner__line"></span> live</span>
|
||
<button id="map-isolation-reset" type="button">Alle Linien anzeigen</button>
|
||
</div>
|
||
<div id="live-map" class="live-map"></div>
|
||
</section>
|
||
|
||
<section class="tab-panel" data-tab-panel="journey" hidden>
|
||
<div class="panel-heading"><div><span class="section-heading__eyebrow">VERBINDUNG SUCHEN</span><h1>Wohin möchtest du?</h1><p>Starte mit deinem Standort oder suche einen Ausgangspunkt.</p></div></div>
|
||
<div class="journey-card-form">
|
||
<div class="journey-input-row">
|
||
<div class="journey-input-marker journey-input-marker--start">●</div>
|
||
<div class="search-box">
|
||
<input type="text" id="journey-from" placeholder="Mein Standort oder Start…" autocomplete="off" />
|
||
<ul id="journey-from-results" class="search-results" hidden></ul>
|
||
</div>
|
||
<button id="journey-use-location" class="location-btn" title="Meinen Standort verwenden" aria-label="Meinen Standort verwenden">📍</button>
|
||
</div>
|
||
<div class="journey-connector"></div>
|
||
<div class="journey-input-row">
|
||
<div class="journey-input-marker journey-input-marker--end">●</div>
|
||
<div class="search-box">
|
||
<input type="text" id="journey-to" placeholder="Wohin?" autocomplete="off" />
|
||
<ul id="journey-to-results" class="search-results" hidden></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="journey-when">
|
||
<button class="when-choice is-active" data-when="now" type="button">● Jetzt</button>
|
||
<button class="when-choice" data-when="departure" type="button">Abfahrt um</button>
|
||
<button class="when-choice" data-when="arrival" type="button">Ankunft um</button>
|
||
<input type="datetime-local" id="journey-when" class="journey-datetime" hidden />
|
||
</div>
|
||
<div class="journey-options-row">
|
||
<button id="journey-submit" class="journey-submit" type="button">Verbindungen suchen <span>→</span></button>
|
||
</div>
|
||
<p class="journey-source-note">🛰 Routenplanung über unsere selbst gehostete, offene Instanz (VBB-Region)</p>
|
||
<div id="journey-results" class="journey-results"></div>
|
||
</section>
|
||
|
||
<section class="tab-panel" data-tab-panel="nearby" hidden>
|
||
<div class="panel-heading"><div><span class="section-heading__eyebrow">STANDORT</span><h1>In der Nähe</h1><p>Finde Haltestellen rund um deinen aktuellen Standort.</p></div></div>
|
||
<button id="nearby-locate" class="location-btn location-btn--wide">📍 Meinen Standort verwenden</button>
|
||
<div id="nearby-list" class="nearby-list"><div class="board-empty-state">Nutze deinen Standort, um Haltestellen in deiner Nähe zu finden.</div></div>
|
||
</section>
|
||
|
||
<section class="tab-panel" data-tab-panel="disruptions" hidden>
|
||
<div class="panel-heading"><div><span class="section-heading__eyebrow">AKTUELL</span><h1>Störungen</h1><p>Ortsbezogene und netzweite Hinweise.</p></div></div>
|
||
<div class="disruption-section">
|
||
<div class="section-heading"><div><h2>In deiner Nähe</h2></div></div>
|
||
<button id="disruptions-locate" class="location-btn location-btn--wide">📍 Standort verwenden</button>
|
||
<div id="nearby-disruptions-list" class="remarks-list"><div class="board-empty-state">Nutze deinen Standort für ortsbezogene Störungen.</div></div>
|
||
</div>
|
||
<div class="disruption-section">
|
||
<div class="section-heading"><div><h2>Netzweit</h2></div></div>
|
||
<div id="remarks-list" class="remarks-list"><div class="board-empty-state">Störungsmeldungen werden geladen…</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="tab-panel" data-tab-panel="fares" hidden>
|
||
<div class="panel-heading"><div><span class="section-heading__eyebrow">PREISE</span><h1>Tickets</h1><p>Übliche VBB-Fahrpreise auf einen Blick.</p></div></div>
|
||
<div class="disclaimer-banner">⚠ Angaben ohne Gewähr – Preise können sich ändern. <span id="fares-stand"></span></div>
|
||
<div id="fares-content"><div class="board-empty-state">Lade Fahrpreise…</div></div>
|
||
<div class="section-heading"><div><h2>Tickets kaufen</h2></div></div>
|
||
<div id="fares-companies" class="company-links"></div>
|
||
</section>
|
||
|
||
<section class="tab-panel" data-tab-panel="more" hidden>
|
||
<div class="panel-heading"><div><span class="section-heading__eyebrow">WEITERE FUNKTIONEN</span><h1>Mehr</h1><p>Alles, was nicht bei jeder Fahrt gebraucht wird.</p></div></div>
|
||
<div class="more-grid">
|
||
<button class="more-card" data-open-tab="nearby" type="button"><span>📍</span><strong>In der Nähe</strong><small>Haltestellen in deiner Umgebung</small></button>
|
||
<button class="more-card" data-open-tab="disruptions" type="button"><span>⚠</span><strong>Störungen</strong><small>Ortsbezogen & netzweit</small></button>
|
||
<button class="more-card" data-open-tab="fares" type="button"><span>🎫</span><strong>Tickets</strong><small>Preise & wo kaufen</small></button>
|
||
</div>
|
||
<div class="recent-section">
|
||
<div class="section-heading"><div><span class="section-heading__eyebrow">VERLAUF</span><h2>Zuletzt gesucht</h2></div><button id="clear-recent" class="text-button" type="button">Leeren</button></div>
|
||
<div id="recent-searches" class="recent-searches"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="global-disclaimer">ℹ Live-Daten von VBB · Angaben ohne Gewähr</div>
|
||
|
||
<nav class="mobile-nav" aria-label="Hauptnavigation mobil">
|
||
<button class="mobile-nav__item is-active" data-tab="departures"><span>🚏</span><small>Abfahrten</small></button>
|
||
<button class="mobile-nav__item" data-tab="journey"><span>🧭</span><small>Route</small></button>
|
||
<button class="mobile-nav__item" data-tab="map"><span>🗺</span><small>Karte</small></button>
|
||
<button class="mobile-nav__item" data-tab="more"><span>☰</span><small>Mehr</small></button>
|
||
</nav>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="js/config.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/splitflap.js"></script>
|
||
<script src="js/modefilter.js"></script>
|
||
<script src="js/livemap.js"></script>
|
||
<script src="js/tripmodal.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|