391 lines
17 KiB
HTML
391 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta name="theme-color" content="#000000">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<title>VBB Netz Status</title>
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||
<link rel="apple-touch-icon" href="images/favicon.png">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
|
||
<!-- Leaflet CSS für Live-Map -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||
crossorigin=""/>
|
||
|
||
<!-- Leaflet JS für Live-Map -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||
crossorigin=""></script>
|
||
</head>
|
||
<body>
|
||
<div class="offline-indicator" id="offlineIndicator">
|
||
📵 Offline-Modus - Zeige gespeicherte Daten
|
||
</div>
|
||
|
||
<div class="ptr-container" id="ptrContainer">
|
||
<div class="ptr-spinner"></div>
|
||
</div>
|
||
|
||
<div class="header">
|
||
<div class="header-content">
|
||
<div class="header-title">
|
||
<h1>VBB NETZ STATUS</h1>
|
||
<div class="subtitle">Live-Nahverkehr für Berlin & Brandenburg</div>
|
||
<div class="author">by Aaron K. & Claude (Anthropic)</div>
|
||
</div>
|
||
<button class="menu-btn" id="menuBtn" aria-label="Menü öffnen">
|
||
☰
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation Menu -->
|
||
<div class="nav-menu" id="navMenu">
|
||
<div class="nav-header">
|
||
<h3>Funktionen</h3>
|
||
<button class="nav-close" id="navClose">×</button>
|
||
</div>
|
||
<div class="nav-items">
|
||
<button class="nav-item" data-view="home">
|
||
<span class="nav-icon">🏠</span>
|
||
<span class="nav-label">Start</span>
|
||
</button>
|
||
<button class="nav-item" data-view="departures">
|
||
<span class="nav-icon">🚇</span>
|
||
<span class="nav-label">Abfahrten</span>
|
||
</button>
|
||
<button class="nav-item" data-view="journey">
|
||
<span class="nav-icon">🗺️</span>
|
||
<span class="nav-label">Routenplaner</span>
|
||
</button>
|
||
<button class="nav-item" data-view="livemap">
|
||
<span class="nav-icon">🌍</span>
|
||
<span class="nav-label">Live-Map</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="nav-overlay" id="navOverlay"></div>
|
||
|
||
<!-- View: Home -->
|
||
<div class="view-container active" id="view-home">
|
||
<div class="home-container">
|
||
|
||
<!-- Combined Hero + Navigation Box -->
|
||
<div class="home-hero-combined">
|
||
<!-- Navigation Hint OHNE Pfeil -->
|
||
<div class="home-nav-hint">
|
||
<div class="home-hint-text">
|
||
Tippe <strong>oben rechts auf "≡"</strong> um das Menü zu öffnen.<br>
|
||
Wähle dann <strong>Abfahrten</strong>, <strong>Routenplaner</strong> oder <strong>Live-Map</strong>.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Section -->
|
||
<div class="home-hero-title">
|
||
<h1>VBB NETZ STATUS</h1>
|
||
<p>Live-Nahverkehr für Berlin & Brandenburg</p>
|
||
<div class="home-version">v29.0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Info Cards -->
|
||
<div class="home-quick-info">
|
||
<div class="home-info-card">
|
||
<div class="home-info-icon">🚇</div>
|
||
<div class="home-info-text">
|
||
<strong>Live-Abfahrten</strong>
|
||
<p>Echtzeit für alle VBB-Stationen</p>
|
||
</div>
|
||
</div>
|
||
<div class="home-info-card">
|
||
<div class="home-info-icon">🗺️</div>
|
||
<div class="home-info-text">
|
||
<strong>Routenplaner</strong>
|
||
<p>Schnellste Verbindungen finden</p>
|
||
</div>
|
||
</div>
|
||
<div class="home-info-card">
|
||
<div class="home-info-icon">🌍</div>
|
||
<div class="home-info-text">
|
||
<strong>Live-Map</strong>
|
||
<p>Fahrzeuge in Echtzeit verfolgen</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Two Column Layout: Changelog | Credits -->
|
||
<div class="home-columns">
|
||
<!-- Changelog Box -->
|
||
<div class="home-box">
|
||
<h2 class="home-box-title">📝 Updates</h2>
|
||
|
||
<!-- Latest Update -->
|
||
<div class="home-update home-update-latest">
|
||
<div class="home-update-header">
|
||
<span class="home-update-version">v29.0</span>
|
||
<span class="home-update-date">31.12.2025</span>
|
||
</div>
|
||
<h3>GitHub-Integration</h3>
|
||
<ul>
|
||
<li>GitHub-Link im Changelog-Bereich</li>
|
||
<li>"Star on GitHub" im Footer</li>
|
||
<li>Direkter Zugriff auf Code & Updates</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- GitHub Link -->
|
||
<div class="home-github-link">
|
||
<a href="https://github.com/Serverlele30/VBB-Status-Web-App/blob/main/CHANGELOG.md" target="_blank" class="home-github-btn">
|
||
📖 Alle Updates & Code auf GitHub
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Older Updates (Collapsible) -->
|
||
<details class="home-details">
|
||
<summary class="home-summary">Ältere Updates</summary>
|
||
|
||
<div class="home-update">
|
||
<div class="home-update-header">
|
||
<span class="home-update-version">v28.0</span>
|
||
<span class="home-update-date">31.12.2025</span>
|
||
</div>
|
||
<h3>Bug-Fix + GitHub Docs</h3>
|
||
<ul>
|
||
<li>Bug: Abfahrten beim Start nicht mehr sichtbar</li>
|
||
<li>Vollständige README.md für GitHub</li>
|
||
<li>GitHub CHANGELOG.md hinzugefügt</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="home-update">
|
||
<div class="home-update-header">
|
||
<span class="home-update-version">v21.0</span>
|
||
</div>
|
||
<h3>API-Optimierung</h3>
|
||
<ul>
|
||
<li>Nur sichtbare Fahrzeuge laden</li>
|
||
<li>Bis zu 69% weniger Daten</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="home-update">
|
||
<div class="home-update-header">
|
||
<span class="home-update-version">v19.0</span>
|
||
</div>
|
||
<h3>Echte BVG-Farben</h3>
|
||
<ul>
|
||
<li>Authentische Linienfarben</li>
|
||
<li>Touch-optimiert</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="home-update">
|
||
<div class="home-update-header">
|
||
<span class="home-update-version">v16.0</span>
|
||
</div>
|
||
<h3>Live-Map Feature</h3>
|
||
<ul>
|
||
<li>Echtzeit-Fahrzeuge auf Karte</li>
|
||
<li>Dark-Mode Design</li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<!-- Credits Box -->
|
||
<div class="home-box">
|
||
<h2 class="home-box-title">ℹ️ Info</h2>
|
||
|
||
<div class="home-credit">
|
||
<strong>Open Source</strong>
|
||
<p>Kostenlos • Werbefrei • MIT Lizenz</p>
|
||
</div>
|
||
|
||
<div class="home-credit">
|
||
<strong>Daten-Quelle</strong>
|
||
<p><a href="https://v6.vbb.transport.rest" target="_blank">VBB Transport REST API v6</a></p>
|
||
</div>
|
||
|
||
<div class="home-credit">
|
||
<strong>Kartendaten</strong>
|
||
<p>OpenStreetMap & CartoDB</p>
|
||
</div>
|
||
|
||
<div class="home-credit">
|
||
<strong>Entwicklung</strong>
|
||
<p>by Aaron K. & Claude (Anthropic)</p>
|
||
</div>
|
||
|
||
<div class="home-credit">
|
||
<strong>Schriftart</strong>
|
||
<p>DotMatrix by <a href="https://github.com/NikBLN" target="_blank">@NikBLN</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features List -->
|
||
<div class="home-features-box">
|
||
<h3>✨ Funktionen im Detail</h3>
|
||
<ul>
|
||
<li><strong>GPS-Standort:</strong> Automatische Station finden</li>
|
||
<li><strong>Offline-Modus:</strong> Gespeicherte Daten anzeigen</li>
|
||
<li><strong>PWA:</strong> Als App installierbar</li>
|
||
<li><strong>Dark-Mode:</strong> Schont die Augen</li>
|
||
<li><strong>Auto-Refresh:</strong> Immer aktuelle Daten</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="home-footer">
|
||
<p><strong>Inoffizielle App</strong> – Nicht von VBB/BVG betrieben</p>
|
||
<p class="home-footer-small">Made with ❤️ for Berlin & Brandenburg</p>
|
||
<p class="home-footer-github">
|
||
<a href="https://github.com/Serverlele30/VBB-Status-Web-App" target="_blank">
|
||
⭐ Star on GitHub
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View: Abfahrten -->
|
||
<div class="view-container" id="view-departures">
|
||
<div class="container">
|
||
<div class="controls">
|
||
<div class="search-row">
|
||
<div class="search-container">
|
||
<input
|
||
type="text"
|
||
id="stationSearch"
|
||
class="search-input"
|
||
placeholder="Station suchen..."
|
||
autocomplete="off"
|
||
>
|
||
<button class="clear-btn" id="clearBtn">×</button>
|
||
<div class="suggestions" id="suggestions"></div>
|
||
</div>
|
||
<button class="location-btn-side" id="locationBtn" title="Nächste Station per GPS finden">
|
||
📍
|
||
</button>
|
||
</div>
|
||
<div class="button-group">
|
||
<button class="btn" id="refreshBtn" disabled>🔄 Aktualisieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="departuresContainer" class="departures-container"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View: Routenplaner -->
|
||
<div class="view-container" id="view-journey">
|
||
<div class="container">
|
||
<div class="controls">
|
||
<div class="journey-inputs">
|
||
<div class="journey-input-group">
|
||
<label class="journey-label">🔵 Von</label>
|
||
<div class="search-row">
|
||
<div class="search-container">
|
||
<input
|
||
type="text"
|
||
id="journeyFrom"
|
||
class="search-input"
|
||
placeholder="Startstation..."
|
||
autocomplete="off"
|
||
>
|
||
<button class="clear-btn" id="clearFromBtn">×</button>
|
||
<div class="suggestions" id="suggestionsFrom"></div>
|
||
</div>
|
||
<button class="location-btn-side" id="locationFromBtn" title="Aktuellen Standort nutzen">
|
||
📍
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="swap-btn" id="swapBtn" title="Start und Ziel tauschen">
|
||
⇅
|
||
</button>
|
||
|
||
<div class="journey-input-group">
|
||
<label class="journey-label">🔴 Nach</label>
|
||
<div class="search-row">
|
||
<div class="search-container">
|
||
<input
|
||
type="text"
|
||
id="journeyTo"
|
||
class="search-input"
|
||
placeholder="Zielstation..."
|
||
autocomplete="off"
|
||
>
|
||
<button class="clear-btn" id="clearToBtn">×</button>
|
||
<div class="suggestions" id="suggestionsTo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<div style="font-size: 12px; opacity: 0.7; text-align: center; margin-bottom: 10px; color: #FFED00;">
|
||
Garantiert mind. 5 Min Umstiegszeit
|
||
</div>
|
||
<button class="btn btn-full-width" id="searchJourneyBtn" disabled>🔍 Route suchen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="journeyContainer" class="journey-container"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View: Live-Map -->
|
||
<div class="view-container" id="view-livemap">
|
||
<div class="livemap-container">
|
||
<div class="livemap-controls">
|
||
<div class="livemap-info">
|
||
<span id="vehicleCount">🚇 Lade Fahrzeuge...</span>
|
||
</div>
|
||
<div class="livemap-filters">
|
||
<button class="filter-btn active" data-type="all">🌐 Alle</button>
|
||
<button class="filter-btn" data-type="subway">🚇 U-Bahn</button>
|
||
<button class="filter-btn" data-type="suburban">🚆 S-Bahn</button>
|
||
<button class="filter-btn" data-type="tram">🚊 Tram</button>
|
||
<button class="filter-btn" data-type="bus">🚌 Bus</button>
|
||
</div>
|
||
</div>
|
||
<div id="liveMap"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detail Modal -->
|
||
<div class="detail-modal" id="detailModal">
|
||
<div class="detail-header">
|
||
<button class="detail-back-btn" id="detailBackBtn">←</button>
|
||
<div class="detail-title" id="detailTitle">Fahrzeug-Details</div>
|
||
<div style="width: 34px;"></div>
|
||
</div>
|
||
<div class="detail-content" id="detailContent">
|
||
<div class="loading-detail">⏳ Lade Details...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Journey Detail Modal -->
|
||
<div class="detail-modal" id="journeyDetailModal">
|
||
<div class="detail-header">
|
||
<button class="detail-back-btn" id="journeyDetailBackBtn">←</button>
|
||
<div class="detail-title" id="journeyDetailTitle">Routen-Details</div>
|
||
<div style="width: 34px;"></div>
|
||
</div>
|
||
<div class="detail-content" id="journeyDetailContent">
|
||
<div class="loading-detail">⏳ Lade Details...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|