Add files via upload
This commit is contained in:
Serverlele30 authored and GitHub committed
1 parent
6ca6d44ce4
commit
e79d3b4cdf
10 files changed
+2840
No files matched your search
+176
@@ -0,0 +1,176 @@
|
||||
<!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">
|
||||
<div id="journey-mode-filter" class="mode-filter"></div>
|
||||
<button id="journey-submit" class="journey-submit" type="button">Verbindungen suchen <span>→</span></button>
|
||||
</div>
|
||||
<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>Aktuelle Hinweise und Einschränkungen im Netz.</p></div></div>
|
||||
<div id="remarks-list" class="remarks-list"><div class="board-empty-state">Störungsmeldungen werden geladen…</div></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>Aktuelle Hinweise im VBB-Netz</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>
|
||||
|
||||
<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>
|
||||
Reference in new issue
Block a user