Add files via upload

2026-02-10 10:23:54 +01:00
1 parent 2ce0531216
commit fbd97dc9d5
@@ -1,404 +1,70 @@
-# VBB Netz Status
+# VBB Netz Status - Getrennte Dateien

-> **Live-Nahverkehr für Berlin & Brandenburg**  
-> Eine Progressive Web App (PWA) für Echtzeit-Abfahrten, Routenplanung und Live-Fahrzeugverfolgung im VBB-Gebiet
+## 📁 Dateistruktur

-[![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Version](https://img.shields.io/badge/Version-29.0-blue.svg)](https://github.com/Serverlele30/VBB-Status-Web-App)
-
-**Live-Demo:** [VBB-Status-Web-App](https://github.com/Serverlele30/VBB-Status-Web-App)
-
---
-
-## 📱 Features
-
-### 🚇 **Echtzeit-Abfahrten**
- **Live-Daten** für alle Stationen im VBB-Netz (Berlin + Brandenburg)
- **GPS-Standort** - Automatische Stationserkennung
- **Intelligente Suche** mit Autocomplete
- **Detaillierte Infos** - Verspätungen, Ausfälle, Gleis/Steig
- **Auto-Refresh** - Alle 30 Sekunden (optional)
- **Offline-Modus** - Gespeicherte Daten anzeigen
-
-### 🗺️ **Intelligenter Routenplaner**
- **Start/Ziel-Suche** mit GPS-Unterstützung
- **5 Min. Umstiegszeit** garantiert
- **Detaillierte Fußwege** mit Gehzeit
- **Alternative Routen** - Mehrere Optionen
- **Robuste Stationserkennung** - Funktioniert auch bei unvollständigen Eingaben
-
-### 🌍 **Live-Map**
- **Echtzeit-Fahrzeugverfolgung** auf Dark-Mode Karte
- **Authentische BVG-Farben** für alle Linien (U-Bahn, S-Bahn, Tram, Bus)
- **Dynamische Bounds** - Nur sichtbare Fahrzeuge laden (bis zu 69% weniger Daten)
- **Filter nach Fahrzeugtyp** - U-Bahn, S-Bahn, Tram, Bus, Fähre
- **API-optimiert** - Intelligentes Caching
-
-### 📱 **Progressive Web App (PWA)**
- **Installierbar** - Als App auf Home-Screen
- **Offline-Fähig** - Service Worker mit Caching
- **Touch-optimiert** - Pull-to-Refresh, Wischgesten
- **Responsive** - Funktioniert auf Mobile & Desktop
- **Dark-Mode** - Schont die Augen
-
---
-
-## 🚀 Quick Start
-
-### **Option 1: Direkt nutzen**
-Öffne die App einfach im Browser - keine Installation nötig!
-
-### **Option 2: Als PWA installieren**
-
-**Mobile (iOS/Android):**
-1. Öffne die App im Browser
-2. Tippe auf "Teilen" → "Zum Home-Bildschirm"
-3. Fertig! App ist jetzt auf deinem Home-Screen
-
-**Desktop (Chrome/Edge):**
-1. Öffne die App im Browser
-2. Klicke auf das Install-Icon in der Adressleiste
-3. Fertig! App ist jetzt in deinen Apps
-
---
-
-## 🛠️ Installation (für Entwickler)
-
-### **Voraussetzungen**
- Node.js (v16+)
- npm oder yarn
- HTTPS-Server (für PWA-Features)
-
-### **Setup**
-
-```bash
-# Repository klonen
-git clone https://github.com/Serverlele30/VBB-Status-Web-App.git
-cd VBB-Status-Web-App
-
-# Dependencies installieren
-npm install
-
-# HTTPS-Server starten
-npm start
-```
-
-Die App ist jetzt verfügbar unter: `https://localhost:3000`
-
-### **HTTPS-Server**
-
-Die App benötigt HTTPS für PWA-Features (Service Worker, GPS, etc.).
-
-**Server-Skript (`server.js`):**
-```javascript
-const https = require('https');
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const mimeTypes = require('mime-types');
-
-// Auto-generiert SSL-Zertifikate falls nicht vorhanden
-// Nutzt OpenSSL für self-signed certificates
-```
-
-**SSL-Zertifikate werden automatisch generiert!**
-
---
-
-## 📂 Projekt-Struktur
+Die App wurde jetzt in separate Dateien aufgeteilt:

 ```
-VBB-Status-Web-App/
-├── index.html              # Haupt-HTML (Single-Page App)
+vbb-netz-status/
+├── index.html          # HTML-Struktur
+├── styles.css          # Alle CSS-Styles
+├── script.js           # Alle JavaScript-Funktionen
+├── server.js           # HTTPS-Entwicklungsserver
 ├── service-worker.js   # PWA Service Worker
 ├── manifest.json       # PWA Manifest
-├── server.js               # HTTPS Development Server
 ├── package.json        # Node.js Dependencies
-├── icons/                  # App-Icons (verschiedene Größen)
-│   ├── icon-192.png
-│   ├── icon-512.png
-│   └── icon-maskable.png
-├── fonts/                  # Custom Fonts
-│   └── DotMatrix.ttf       # BVG-Schriftart
-└── data/                   # Statische Daten
-    └── station_lines.json  # Station-zu-Linie Mappings
+└── LICENSE             # MIT Lizenz
 ```

---
+## 🚀 Installation & Start

-## 🎨 Design
+1. **Abhängigkeiten installieren:**
+   ```bash
+   npm install
+   ```

-### **Farbschema**
- **Primär:** `#FFED00` (BVG-Gelb)
- **Background:** `#000000` (Schwarz)
- **Sekundär:** `#1a1a1a` (Dunkelgrau)
- **Text:** `#ffffff` / `#cccccc`
- **Borders:** `#333333`
+2. **Server starten:**
+   ```bash
+   npm start
+   ```

-### **Typografie**
- **Haupt-Font:** DotMatrix (BVG-Stil)
- **Fallback:** Courier New, monospace
+3. **Browser öffnen:**
+   ```
+   https://localhost:3000
+   ```

-### **Icons & Emojis**
- 🚇 U-Bahn
- 🚊 S-Bahn
- 🚋 Tram
- 🚌 Bus
- ⛴️ Fähre
+## 📝 Änderungen

-### **BVG-Linienfarben**
-Authentische Farben für alle 40+ Linien:
- **U-Bahnen:** U1-U9 mit Original-Farben
- **S-Bahnen:** S-Bahn Grün + Ringbahn Orange
- **Trams:** Metro-Tram Rot + Tram Gelb
- **Busse:** Gelb + Metro-Bus Rot
+**Vorher:**
+- Alles in einer `index.html` (4698 Zeilen)
+
+**Nachher:**
+- `index.html` - Nur HTML-Struktur (~380 Zeilen)
+- `styles.css` - Alle CSS-Regeln (~2300 Zeilen)
+- `script.js` - Alle JavaScript-Funktionen (~1990 Zeilen)
+
+## ✅ Vorteile der Trennung
+
+- 📦 **Bessere Organisation** - Jede Datei hat einen klaren Zweck
+- 🔧 **Einfachere Wartung** - CSS und JS können unabhängig bearbeitet werden
+- ⚡ **Caching** - Browser können CSS/JS separat cachen
+- 🎨 **Entwicklung** - Einfacher zu debuggen und zu bearbeiten
+- 👥 **Teamarbeit** - Mehrere Entwickler können parallel arbeiten
+
+## 🛠️ Technische Details
+
+- **CSS**: Enthält alle Styles inkl. Dark Mode, Responsive Design, Animationen
+- **JavaScript**: Enthält alle Funktionen für Abfahrten, Routen, Live-Map
+- **HTML**: Referenziert CSS (`<link>`) und JS (`<script src>`)
+
+## 📱 PWA Unterstützung
+
+Die App funktioniert weiterhin als Progressive Web App:
+- Service Worker für Offline-Funktionalität
+- Manifest für Installation auf dem Homescreen
+- HTTPS-Server für sichere Verbindung

 ---

-## 🔧 Technische Details
-
-### **APIs**
- **VBB Transport REST API v6**
-  - Endpoint: `https://v6.vbb.transport.rest`
-  - Rate Limit: 100 Requests/Minute
-  - [Dokumentation](https://v6.vbb.transport.rest/api.html)
-
-### **Libraries**
- **Leaflet.js** - Interaktive Karten
- **CartoDB Dark Matter** - Karten-Tiles (Dark-Mode)
- Vanilla JavaScript (kein Framework!)
-
-### **Browser-Support**
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile Browser (iOS Safari, Chrome Mobile)
-
-### **Performance**
- **First Contentful Paint:** < 1s
- **Time to Interactive:** < 2s
- **Lighthouse Score:** 95+
- **Bundle Size:** ~150KB (unkomprimiert)
-
---
-
-## 🗺️ Datenquellen
-
-### **Station-Line Mappings**
-Präzise Station-zu-Linie Zuordnungen für 1000+ Stationen:
- Extrahiert via custom Node.js Script
- Analysiert echte Trip-Routen statt generische Location-Searches
- Deckt alle U-Bahn, S-Bahn, Tram und Metro-Linien ab
-
-**Extraktion:**
-```bash
-node extract_station_lines.js
-```
-
-Generiert `data/station_lines.json` mit Format:
-```json
-{
-  "900000017101": {
-    "name": "U Spichernstr.",
-    "lines": ["U3", "U9"]
-  }
-}
-```
-
---
-
-## 📱 PWA-Features
-
-### **Manifest.json**
-```json
-{
-  "name": "VBB Netz Status",
-  "short_name": "VBB Status",
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#FFED00",
-  "background_color": "#000000",
-  "icons": [...]
-}
-```
-
-### **Service Worker**
- **Cache-First-Strategie** für statische Assets
- **Network-First** für API-Calls
- **Offline-Fallback** für alle Seiten
- **Auto-Update** bei neuer Version
-
-**Cache-Versioning:**
-```javascript
-const CACHE_NAME = 'vbb-status-v27';
-```
-
-### **Offline-Features**
- ✅ Gespeicherte Abfahrten anzeigen
- ✅ Letzte Suchanfragen speichern
- ✅ Offline-Indikator
- ✅ Cached Karten-Tiles
-
---
-
-## 🎯 Features im Detail
-
-### **GPS-Standort**
-```javascript
-navigator.geolocation.getCurrentPosition(
-  (position) => {
-    const { latitude, longitude } = position.coords;
-    findNearbyStops(latitude, longitude);
-  }
-);
-```
-
-### **Auto-Refresh**
- **Standard:** 30 Sekunden
- **Togglebar:** An/Aus im Header
- **Smart:** Nur sichtbare Values aktualisieren (kein Re-Render)
-
-### **Pull-to-Refresh**
-```javascript
-// Touch-basiert, nur auf Mobile
-// Haptic Feedback via navigator.vibrate()
-```
-
-### **Autocomplete-Suche**
- **Debounced:** 300ms Verzögerung
- **Min. 2 Zeichen** für Suche
- **Keyboard-Navigation:** ↑↓ + Enter
- **Touch-optimiert:** Große Tap-Targets
-
-### **Modal-Details**
- **Trip-Details** per Tap auf Abfahrt
- **Route-Details** mit Zwischenstopps
- **Fußweg-Anleitung** mit Distanz/Zeit
- **Swipe-to-Close** auf Mobile
-
---
-
-## 🔒 Datenschutz
-
- ✅ **Keine Cookies**
- ✅ **Kein Tracking**
- ✅ **Keine Werbung**
- ✅ **Kein Analytics**
- ✅ **GPS nur auf Anfrage** (Browser-Permission)
- ✅ **Lokale Speicherung** (localStorage, keine Server)
-
-**Alle Daten bleiben auf deinem Gerät!**
-
---
-
-## 🐛 Bekannte Probleme
-
-### **API-Limits**
- VBB API: 100 Requests/Minute
- Bei Überschreitung: 429 Error → Retry nach 60s
-
-### **GPS-Genauigkeit**
- Abhängig von Gerät & Standort
- Indoor oft ungenau
- Fallback: Manuelle Suche
-
-### **Browser-Kompatibilität**
- Service Worker: Nur HTTPS
- GPS: Nur Secure Context (HTTPS oder localhost)
- Ältere Browser: Eingeschränkte Features
-
---
-
-## 🤝 Contributing
-
-Contributions sind willkommen! 🎉
-
-### **Workflow**
-1. Fork das Repository
-2. Erstelle einen Feature-Branch (`git checkout -b feature/AmazingFeature`)
-3. Commit deine Änderungen (`git commit -m 'Add some AmazingFeature'`)
-4. Push zum Branch (`git push origin feature/AmazingFeature`)
-5. Öffne einen Pull Request
-
-### **Code-Style**
- **Vanilla JavaScript** (kein TypeScript)
- **Kommentare** für komplexe Logik
- **Konsistente Formatierung** (2 Spaces, Semikolons)
- **BVG-Farbschema** beibehalten
-
---
-
-## 📝 Changelog
-
-Siehe [CHANGELOG.md](CHANGELOG.md) für Details zu allen Updates.
-
-**Latest:** v27.0 - Credits & Header Update
-
---
-
-## 📄 Lizenz
-
-Dieses Projekt ist unter der **MIT License** lizenziert - siehe [LICENSE](LICENSE) für Details.
-
-**Das bedeutet:**
- ✅ Kostenlos nutzbar
- ✅ Für private & kommerzielle Projekte
- ✅ Modifizierbar
- ✅ Weitergabe erlaubt
-
-**Aber:**
- ⚠️ Ohne Garantie
- ⚠️ Auf eigene Verantwortung
-
---
-
-## 🙏 Credits
-
-### **Entwicklung**
- **Aaron K.** - Initial Development & Design
- **Claude (Anthropic)** - AI-Assisted Development
-
-### **Daten & APIs**
- **VBB Transport REST API v6** - [v6.vbb.transport.rest](https://v6.vbb.transport.rest)
- **OpenStreetMap Contributors** - Kartendaten
- **CartoDB** - Dark Matter Map Tiles
-
-### **Schriftart**
- **DotMatrix** by [@NikBLN](https://github.com/NikBLN)
-
-### **Inspiration**
- **BVG** - Design & Farbschema
- **VBB** - Verkehrsverbund Berlin-Brandenburg
-
---
-
-## 📬 Kontakt
-
-**Repository:** [github.com/Serverlele30/VBB-Status-Web-App](https://github.com/Serverlele30/VBB-Status-Web-App)
-
-**Issues:** [GitHub Issues](https://github.com/Serverlele30/VBB-Status-Web-App/issues)
-
---
-
-## ⚠️ Disclaimer
-
-Diese App ist ein **inoffizielles Projekt** und wird **nicht** von VBB oder BVG betrieben oder unterstützt.
-
-Alle Daten stammen von der öffentlichen VBB Transport REST API.
-
-**Keine Garantie für:**
- Richtigkeit der Daten
- Verfügbarkeit der API
- Fehlerfreien Betrieb
-
-**Nutze die App auf eigene Verantwortung!**
-
---
-
-<div align="center">
-
-Made with ❤️ for Berlin & Brandenburg
-
-**[⬆ Back to Top](#vbb-netz-status)**
-
-</div>
+**Entwickelt von:** Aaron K. & Claude (Anthropic)  
+**Lizenz:** MIT