From 3688c5743e588ed8f50023910d1e2080a1adaf41 Mon Sep 17 00:00:00 2001
From: Serverlele30 <46974281+Serverlele30@users.noreply.github.com>
Date: Tue, 10 Feb 2026 10:49:35 +0100
Subject: [PATCH] Add files via upload
---
CHANGELOG.md | 467 ++++++++++-----------------------------------
CONTRIBUTING.md | 469 ++++++++++++++++++++++++++++++++++++++++++++++
INSTALLATION.md | 310 ++++++++++++++++++++++++++++++
package.json | 2 +-
service-worker.js | 4 +-
5 files changed, 887 insertions(+), 365 deletions(-)
create mode 100644 CONTRIBUTING.md
create mode 100644 INSTALLATION.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3babda1..608218e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,391 +1,132 @@
# Changelog
-All notable changes to this project will be documented in this file.
+Alle wichtigen Änderungen an diesem Projekt werden in dieser Datei dokumentiert.
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+Das Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/),
+und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
+
+## [30.0.0] - 2026-02-10
+
+### 🎉 Major Release - Code-Trennung & Desktop-Optimierung
+
+### Added
+- **Modulare Dateistruktur**: Projekt in separate HTML, CSS und JS Dateien aufgeteilt
+- **Desktop-Optimierungen**: Responsive Layouts für verschiedene Bildschirmgrößen
+ - Tablet/Desktop (768px+): 900px Container
+ - Large Desktop (1200px+): 1100px Container mit 2-Spalten Layout
+ - Extra Large (1600px+): 1400px Container mit 3-Spalten Layout
+- **Hover-Effekte**: Desktop-optimierte Interaktionen
+ - Navigation Items
+ - Buttons und Filter
+ - Abfahrts-Items
+ - Journey Results
+- **Live-Map Desktop-Layout**: Controls links positioniert statt oben
+- **Home View Desktop**: 3-Spalten Navigation auf großen Bildschirmen
+- **README.md**: Umfassende Dokumentation der Projektstruktur
+- **CHANGELOG.md**: Versionsverwaltung und Änderungsprotokoll
+
+### Changed
+- **Dateistruktur**:
+ - `index.html`: Von 4.698 auf 390 Zeilen reduziert
+ - `styles.css`: 2.467 Zeilen (vorher inline)
+ - `script.js`: 1.992 Zeilen (vorher inline)
+- **Container-Breiten**: Desktop-optimierte max-widths
+ - Vorher: 1200px (zu breit)
+ - Jetzt: 900px (Tablet), 1100px (Desktop), 1400px (XL)
+- **Navigation-Menü**: Von 280px auf 320px verbreitert
+- **Header-Schrift**: Desktop-Größen erhöht (36px → 38px)
+- **Detail-Modal**: Responsive Breiten je nach Bildschirmgröße
+ - Tablet: 900px
+ - Desktop: 1100px
+ - Extra Large: 1300px
+
+### Fixed
+- **Z-Index Issue**: Popups und Modals werden jetzt korrekt über dem Header angezeigt
+ - Header: z-index 10000
+ - Detail-Modal: z-index 10005
+ - Detail-Header: z-index 10006
+ - Leaflet-Popups: z-index 10010
+- **Desktop-Layout**: Fehlende Optimierungen für große Bildschirme korrigiert
+- **Live-Map Controls**: Bessere Positionierung auf Desktop
+
+### Technical Details
+- CSS-Dateigröße: 2.467 Zeilen (inkl. Desktop-Optimierungen)
+- JavaScript unverändert: 1.992 Zeilen
+- HTML-Struktur: Sauber getrennt, 390 Zeilen
+- Caching-Vorteile: Browser können CSS/JS separat cachen
---
-## [29.0] - 2025-12-31
+## [29.0.0] - 2026-02-09
-### ✨ Added
-- **GitHub-Integration:** Links zur Repository auf der Home-Page
-- **Changelog GitHub-Link:** "📖 Alle Updates & Code auf GitHub" Button nach neuesten Updates
-- **Footer GitHub-Link:** "⭐ Star on GitHub" unter "Made with ❤️"
-- **Hover-Effekte:** Interaktive Buttons mit Animations
+### Vorherige Version (Monolithisch)
+- Alle Code in einer `index.html` Datei
+- 4.698 Zeilen insgesamt
+- Funktionale PWA mit allen Features
+- Optimiert für Mobile
-### 🎨 Changed
-- GitHub-Links mit BVG-Farbschema (Gelb/Schwarz)
-- Responsive Buttons für Mobile & Desktop
+### Features (bereits vorhanden)
+- ✅ Echtzeit-Abfahrten VBB/BVG
+- ✅ Routenplanung
+- ✅ Live-Fahrzeugverfolgung (Radar)
+- ✅ Service Worker (Offline-Fähigkeit)
+- ✅ PWA Manifest (Installierbar)
+- ✅ HTTPS Development Server
+- ✅ DotMatrix Font Integration
+- ✅ Dark Mode Design
+- ✅ Touch-optimiert für Mobile
+- ✅ Pull-to-Refresh
+- ✅ Leaflet.js Karten-Integration
+- ✅ BVG-Linienfarben
+- ✅ Fahrzeug-Filter (U-Bahn, Bus, Tram, S-Bahn, Regional)
---
-## [28.0] - 2025-12-31
+## Projektinformationen
-### 🐛 Fixed
-- **Bug-Fix:** Abfahrten-View nicht mehr beim ersten Laden sichtbar
-- Home-View ist jetzt korrekt die einzige aktive View beim Start
+**Entwickelt von:** Aaron K. & Claude (Anthropic)
+**Lizenz:** MIT
+**Repository:** https://github.com/Serverlele30/VBB-Status-Web-App
-### ✨ Changed
-- **Header-Title:** "Live-Nahverkehr für Berlin & Brandenburg" statt "ECHTZEIT-ABFAHRTSMONITOR"
-- **Credits:** Aaron K. & Claude (Anthropic) im Header erwähnt
-- **Navigation-Hinweis:** Pfeil entfernt für klareren Text
-- **Font-Credit:** Nur @NikBLN gelb und verlinkt (nicht "DotMatrix by")
-
-### 📝 Added
-- Vollständige README.md für GitHub
-- GitHub-formatiertes CHANGELOG.md
+### Mitwirkende
+- Aaron K. - Projektleitung, Konzept, Testing
+- Claude (Anthropic) - Entwicklung, Code-Optimierung
---
-## [26.0] - 2025-12-31
+## Geplante Features / Roadmap
-### ✨ Added
-- **Kombinierte Hero-Box:** Navigation + Hero in einer Box
-- **Pfeil zeigt nach rechts:** Richtung zum Menü-Button
+### v31.0.0 (geplant)
+- [ ] API-Error Handling verbessern
+- [ ] Favoriten-Stationen speichern
+- [ ] Benachrichtigungen bei Verspätungen
+- [ ] Dunkles/Helles Theme umschaltbar
+- [ ] Historische Daten und Statistiken
-### 🎨 Changed
-- Kompakteres Design durch kombinierte Box
-- Text "oben rechts" statt "hier oben"
+### v32.0.0 (Ideen)
+- [ ] Barrierefreiheit (A11y) Audit
+- [ ] Mehrsprachigkeit (Englisch)
+- [ ] Export von Routen als iCal/PDF
+- [ ] Teilen-Funktion für Verbindungen
+- [ ] Integration mit Kalender-Apps
---
-## [25.0] - 2025-12-31
+## Versionsschema
-### ✨ Added
-- **Home/Landing-Page:** Neue Startseite beim App-Load
-- **Navigation-Hinweis:** Pfeil zeigt zum Menü-Button
-- **Quick-Info Cards:** 3 Feature-Cards (Desktop nebeneinander, Mobile untereinander)
-- **Features-Box:** Detaillierte technische Features
-- **Two-Column Layout:** Updates | Info nebeneinander (Desktop)
+Dieses Projekt verwendet [Semantic Versioning](https://semver.org/lang/de/):
-### 🎨 Changed
-- "Info" statt "Credits" als Box-Titel
-- VBB-Gebiet korrekt: "Berlin & Brandenburg"
-- Kompaktere Paddings und Fonts (~20% kleiner)
+- **MAJOR** (X.0.0): Breaking Changes, große Architekturänderungen
+- **MINOR** (0.X.0): Neue Features, abwärtskompatibel
+- **PATCH** (0.0.X): Bugfixes, kleine Verbesserungen
---
-## [24.0] - 2025-12-31
+## Support & Feedback
-### ✨ Added
-- **Two-Column Layout:** Changelog und Credits nebeneinander
+Bei Fragen oder Problemen:
+1. GitHub Issues: https://github.com/Serverlele30/VBB-Status-Web-App/issues
+2. README konsultieren
+3. Code-Kommentare lesen
-### 🎨 Changed
-- Verbesserte Home-Page mit kompakterem Design
-- Intro-Text statt Feature-Cards
-
----
-
-## [23.0] - 2025-12-31
-
-### ✨ Added
-- **Home-Screen:** Erste Version der Landing-Page
-- **Feature-Übersicht:** 4 Feature-Cards mit Icons
-- **Changelog:** Integriert auf Home-Page
-- **Credits:** Vollständige Attribution
-
----
-
-## [22.0] - 2025-12-31
-
-### ✨ Added
-- **Dynamischer Page-Title:** Browser-Tab zeigt aktive View
- - "VBB Netz Status - Abfahrten"
- - "VBB Netz Status - Route"
- - "VBB Netz Status - Live-Map"
-
----
-
-## [21.0] - 2025-12-31
-
-### ✨ Added
-- **Dynamische Bounds:** Live-Map lädt nur sichtbare Fahrzeuge
-- **API-Optimierung:** Bis zu 69% weniger Daten bei Zoom-in
-- **Auto-Reload beim Map-Bewegen:** Immer aktuelle Fahrzeuge im Sichtbereich
-
-### 🎯 Changed
-- 15% Puffer-Zone um Map-Bounds für smooth UX
-- Effizientere API-Calls
-
----
-
-## [20.0] - 2025-12-31
-
-### ✨ Added
-- **Leaflet Map Integration:** Interaktive Karte statt statischer Einbettung
-- **Custom Marker:** Fahrzeuge als Custom Icons mit Linienfarben
-
-### 🎨 Changed
-- Verbesserte Map-Performance
-- Bessere Mobile-Unterstützung
-
----
-
-## [19.0] - 2025-12-31
-
-### ✨ Added
-- **Echte BVG-Farben:** Authentische Linienfarben für 40+ Linien
- - U-Bahn: U1-U9 Original-Farben
- - S-Bahn: Grün + Ringbahn Orange
- - Tram: Metro-Tram Rot + Tram Gelb
- - Bus: Gelb + Metro-Bus Rot
-- **Linienbezeichnung unter Icon:** Mit echter Farbe
-- **Touch-optimiert:** Keine Zoom-Buttons auf Mobile
-
-### 🎨 Changed
-- Farbschema für alle Verkehrsmittel aktualisiert
-- Bessere visuelle Unterscheidung
-
----
-
-## [18.0] - 2025-12-31
-
-### ✨ Added
-- **Linien-basierte Filterung:** U-Bahn, S-Bahn, Tram, Bus separat
-- **Präzise Station-Line Mappings:** Custom extrahierte Daten für 1000+ Stationen
-
-### 🎨 Changed
-- Verbesserte Filter-Funktionalität
-- Genauere Linien-Zuordnungen
-
----
-
-## [17.0] - 2025-12-31
-
-### ✨ Added
-- **Live-Update Intervall:** 30 Sekunden Auto-Refresh
-- **Manueller Refresh-Button:** In Live-Map View
-
-### 🎨 Changed
-- Optimierte Update-Strategie
-- Bessere Performance bei Live-Updates
-
----
-
-## [16.0] - 2025-12-31
-
-### ✨ Added
-- **Live-Map Feature:** Echtzeit-Fahrzeugverfolgung
- - Dark-Mode Karte (CartoDB)
- - Filter nach Fahrzeugtyp
- - Live-Positions-Updates
-- **3-Tab Navigation:** Abfahrten | Route | Live-Map
-
-### 🎨 Changed
-- Navigation erweitert um Live-Map Tab
-- UI angepasst für 3 Views
-
----
-
-## [15.0] - 2025-12-31
-
-### ✨ Added
-- **Detaillierte Fußwege:** Distanz + Gehzeit für alle Walking-Legs
-- **Robuste Stationserkennung:** Funktioniert auch bei unvollständigen Namen
-
-### 🎨 Changed
-- Verbesserte Journey-Details
-- Klarere Fußweg-Darstellung
-
----
-
-## [14.0] - 2025-12-31
-
-### ✨ Added
-- **Garantierte 5 Min Umstiegszeit:** Alle Routen mit mindestens 5 Min Transfer
-- **Intelligente Route-Berechnung:** API-Parameter optimiert
-
-### 🎨 Changed
-- Realistischere Routenplanung
-- Weniger verpasste Anschlüsse
-
----
-
-## [13.0] - 2025-12-31
-
-### ✨ Added
-- **Routenplaner-View:** Neue Tab für Journey-Planning
-- **Start/Ziel-Suche:** Mit GPS-Unterstützung
-- **Alternative Routen:** Mehrere Optionen anzeigen
-
-### 🎨 Changed
-- 2-Tab Navigation: Abfahrten | Route
-- Optimierte Layout-Struktur
-
----
-
-## [12.0] - 2025-12-31
-
-### ✨ Added
-- **Auto-Refresh Toggle:** An/Aus Schalter im Header
-- **Smart Value Update:** Nur Values ändern, kein Re-Render
-
-### 🎯 Changed
-- Performantere Refresh-Strategie
-- Weniger DOM-Manipulation
-
----
-
-## [11.0] - 2025-12-31
-
-### ✨ Added
-- **30s Auto-Refresh:** Automatische Aktualisierung alle 30 Sekunden
-- **Countdown-Anzeige:** "Auto-Refresh in: 28s"
-
-### 🎨 Changed
-- Immer aktuelle Abfahrten ohne manuellen Refresh
-
----
-
-## [10.0] - 2025-12-31
-
-### ✨ Added
-- **Pull-to-Refresh:** Touch-basiert auf Mobile
-- **Haptic Feedback:** Vibration bei Aktionen (navigator.vibrate)
-- **Loading-Spinner:** Während Refresh
-
-### 🎨 Changed
-- Native App-ähnliches Verhalten
-- Bessere Mobile-UX
-
----
-
-## [9.0] - 2025-12-31
-
-### ✨ Added
-- **Detaillierte Trip-Modal:** Per Tap auf Abfahrt
-- **Alle Zwischenstopps:** Mit Ankunfts-/Abfahrtszeiten
-- **Swipe-to-Close:** Auf Mobile
-
-### 🎨 Changed
-- Mehr Informationen pro Trip
-- Bessere Detail-Ansicht
-
----
-
-## [8.0] - 2025-12-31
-
-### ✨ Added
-- **Autocomplete-Suche:** Live-Vorschläge während Eingabe
-- **Keyboard-Navigation:** ↑↓ + Enter
-- **Touch-optimiert:** Große Tap-Targets
-
-### 🎯 Changed
-- Schnellere Stations-Suche
-- Bessere UX
-
----
-
-## [7.0] - 2025-12-31
-
-### ✅ Added
-- **Offline-Modus:** Gespeicherte Abfahrten anzeigen
-- **Offline-Indikator:** "📵 Offline-Modus" Banner
-- **localStorage Caching:** Letzte Abfahrten speichern
-
-### 🎨 Changed
-- App funktioniert auch ohne Internet
-- Cached Daten als Fallback
-
----
-
-## [6.0] - 2025-12-31
-
-### ✨ Added
-- **Service Worker:** PWA-Funktionalität
-- **Offline-Caching:** Statische Assets cached
-- **Install-Prompt:** "Als App installieren"
-
-### 🎨 Changed
-- App ist jetzt installierbar
-- Funktioniert offline
-
----
-
-## [5.0] - 2025-12-31
-
-### ✨ Added
-- **GPS-Standort:** Automatische Station finden
-- **"Standort verwenden" Button:** Mit Loading-State
-- **Fehlerbehandlung:** Wenn GPS fehlschlägt
-
-### 🎨 Changed
-- Schnellerer Zugriff auf nahegelegene Stationen
-- Weniger manuelle Suche nötig
-
----
-
-## [4.0] - 2025-12-31
-
-### ✨ Added
-- **Kategorie-Filter:** U-Bahn, S-Bahn, Tram, Bus, Fähre
-- **Default: Alle außer Bus/Fähre:** Weniger "noise"
-- **Toggle-Buttons:** An/Aus für jede Kategorie
-
-### 🎨 Changed
-- Übersichtlichere Abfahrten-Liste
-- Fokus auf wichtige Linien
-
----
-
-## [3.0] - 2025-12-31
-
-### ✨ Added
-- **Verspätungen:** Rot markiert mit Delay-Info
-- **Ausfälle:** Durchgestrichen mit "Fällt aus"
-- **Gleis/Steig:** Bei verfügbar angezeigt
-
-### 🎨 Changed
-- Mehr Informationen pro Abfahrt
-- Bessere visuelle Unterscheidung
-
----
-
-## [2.0] - 2025-12-31
-
-### ✨ Added
-- **Live-Abfahrten:** Echtzeit-Daten von VBB API
-- **Relativer Countdown:** "in 3 Min" statt absoluter Zeit
-- **Verkehrsmittel-Icons:** 🚇🚊🚋🚌⛴️
-
-### 🎨 Changed
-- Funktionale Abfahrtsanzeige
-- Echte Daten statt Mockups
-
----
-
-## [1.0] - 2025-12-30
-
-### ✨ Added
-- **Initial Release**
-- **Basic HTML/CSS/JS Structure**
-- **BVG-Styling:** DotMatrix Font + Gelb/Schwarz
-- **Responsive Design:** Mobile-First
-
-### 🎨 Changed
-- Basis-Framework erstellt
-- Design-System etabliert
-
----
-
-## Legende
-
-- ✨ **Added:** Neue Features
-- 🎨 **Changed:** Änderungen an bestehenden Features
-- 🐛 **Fixed:** Bug-Fixes
-- 🎯 **Improved:** Performance/UX-Verbesserungen
-- ✅ **Completed:** Fertiggestellte Features
-- ⚠️ **Deprecated:** Veraltete Features
-- 🗑️ **Removed:** Entfernte Features
-
----
-
-## Contributing
-
-Wenn du einen Bug findest oder ein Feature vorschlagen möchtest, öffne bitte ein [GitHub Issue](https://github.com/Serverlele30/VBB-Status-Web-App/issues).
-
----
-
-Made with ❤️ for Berlin & Brandenburg
+**Viel Erfolg mit der VBB Netz Status App! 🚇🚌🚊**
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..a200e4d
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,469 @@
+# 🤝 Contributing Guide
+
+Danke, dass du zu VBB Netz Status beitragen möchtest! Diese Anleitung hilft dir, loszulegen.
+
+## 📋 Inhaltsverzeichnis
+
+- [Code of Conduct](#code-of-conduct)
+- [Wie kann ich beitragen?](#wie-kann-ich-beitragen)
+- [Entwicklungsumgebung](#entwicklungsumgebung)
+- [Coding Standards](#coding-standards)
+- [Pull Request Prozess](#pull-request-prozess)
+- [Bug Reports](#bug-reports)
+- [Feature Requests](#feature-requests)
+
+---
+
+## 🤝 Code of Conduct
+
+### Unsere Versprechen
+
+- Respektvoller Umgang mit allen Contributors
+- Konstruktive, freundliche Diskussionen
+- Fokus auf das Beste für das Projekt und die Community
+- Akzeptanz von konstruktiver Kritik
+
+### Unerwünschtes Verhalten
+
+- Beleidigungen oder persönliche Angriffe
+- Trolling oder provozierende Kommentare
+- Veröffentlichung privater Informationen
+- Unprofessionelles Verhalten
+
+---
+
+## 💡 Wie kann ich beitragen?
+
+### 1. Code Contributions
+
+- **Bugfixes**: Behebe bekannte Bugs aus Issues
+- **Features**: Implementiere neue Features (nach Diskussion)
+- **Optimierungen**: Verbessere Performance oder Code-Qualität
+- **Tests**: Füge Tests hinzu (falls vorhanden)
+
+### 2. Dokumentation
+
+- **README verbessern**: Ergänze fehlende Informationen
+- **Code-Kommentare**: Dokumentiere komplexe Funktionen
+- **Tutorials**: Erstelle Anleitungen für Nutzer
+- **Übersetzungen**: Hilf bei mehrsprachiger Unterstützung
+
+### 3. Design
+
+- **UI/UX Verbesserungen**: Optimiere Benutzeroberfläche
+- **Icons & Assets**: Erstelle/verbessere Icons
+- **Responsive Design**: Verbessere Mobile/Desktop Layouts
+- **Accessibility**: Erhöhe Barrierefreiheit
+
+### 4. Testing
+
+- **Bug Testing**: Teste auf verschiedenen Geräten
+- **Browser Compatibility**: Prüfe verschiedene Browser
+- **Performance Testing**: Messe Ladezeiten & Optimierungen
+- **User Feedback**: Sammle Rückmeldungen von Nutzern
+
+---
+
+## 🔧 Entwicklungsumgebung
+
+### Setup
+
+1. **Repository forken**
+ ```bash
+ # Auf GitHub: Fork-Button klicken
+ ```
+
+2. **Dein Fork klonen**
+ ```bash
+ git clone https://github.com/DEIN_USERNAME/VBB-Status-Web-App.git
+ cd VBB-Status-Web-App
+ ```
+
+3. **Upstream Repository hinzufügen**
+ ```bash
+ git remote add upstream https://github.com/Serverlele30/VBB-Status-Web-App.git
+ ```
+
+4. **Dependencies installieren**
+ ```bash
+ npm install
+ ```
+
+5. **Development Server starten**
+ ```bash
+ npm start
+ ```
+
+### Entwicklungs-Workflow
+
+1. **Neuen Branch erstellen**
+ ```bash
+ git checkout -b feature/deine-feature-beschreibung
+ # oder
+ git checkout -b fix/bug-beschreibung
+ ```
+
+2. **Änderungen vornehmen**
+ - Editiere `index.html`, `styles.css`, `script.js`
+ - Teste lokal: `https://localhost:3000`
+
+3. **Regelmäßig committen**
+ ```bash
+ git add .
+ git commit -m "feat: Kurze Beschreibung der Änderung"
+ ```
+
+4. **Mit Upstream synchronisieren**
+ ```bash
+ git fetch upstream
+ git rebase upstream/main
+ ```
+
+5. **Push zu deinem Fork**
+ ```bash
+ git push origin feature/deine-feature-beschreibung
+ ```
+
+---
+
+## 📝 Coding Standards
+
+### HTML
+
+```html
+
+
+
+
+
+```
+
+### CSS
+
+```css
+/* ✅ Gut: BEM-ähnliche Konvention, kommentiert */
+/* Departure Item Container */
+.departure-item {
+ padding: 15px;
+ background-color: #0a0a0a;
+}
+
+.departure-item__header {
+ display: flex;
+ justify-content: space-between;
+}
+
+/* ❌ Schlecht: Unklar, keine Kommentare */
+.di {
+ padding: 15px;
+}
+```
+
+### JavaScript
+
+```javascript
+// ✅ Gut: Beschreibende Namen, Kommentare, Error Handling
+async function loadDepartures(stationId) {
+ try {
+ const response = await fetch(`${API_BASE}/stops/${stationId}/departures`);
+ if (!response.ok) throw new Error('API Error');
+
+ const data = await response.json();
+ return data.departures;
+ } catch (error) {
+ console.error('Failed to load departures:', error);
+ showErrorMessage('Abfahrten konnten nicht geladen werden');
+ return [];
+ }
+}
+
+// ❌ Schlecht: Kryptische Namen, kein Error Handling
+async function ld(s) {
+ const r = await fetch(`${API_BASE}/stops/${s}/departures`);
+ return await r.json();
+}
+```
+
+### Commit Messages
+
+Folge [Conventional Commits](https://www.conventionalcommits.org/):
+
+```bash
+# Format: ():
+
+# Typen:
+feat: # Neues Feature
+fix: # Bugfix
+docs: # Dokumentation
+style: # Formatierung (kein Code-Change)
+refactor: # Code-Refactoring
+perf: # Performance-Verbesserung
+test: # Tests hinzufügen
+chore: # Build, Dependencies
+
+# Beispiele:
+git commit -m "feat(live-map): Add vehicle type filter"
+git commit -m "fix(departures): Handle empty API response"
+git commit -m "docs(readme): Update installation instructions"
+git commit -m "style(css): Format departure items"
+git commit -m "perf(api): Cache API responses for 30s"
+```
+
+---
+
+## 🔀 Pull Request Prozess
+
+### 1. Vorbereitung
+
+- [ ] Code funktioniert lokal
+- [ ] Keine Console Errors
+- [ ] Responsive Design getestet
+- [ ] Code kommentiert
+- [ ] CHANGELOG.md aktualisiert (bei größeren Changes)
+
+### 2. Pull Request erstellen
+
+1. Gehe zu deinem Fork auf GitHub
+2. Klicke "Pull Request" → "New Pull Request"
+3. Base: `Serverlele30/VBB-Status-Web-App` → `main`
+4. Compare: `dein-username/VBB-Status-Web-App` → `dein-branch`
+
+### 3. PR Beschreibung
+
+```markdown
+## Beschreibung
+Kurze Zusammenfassung der Änderungen
+
+## Typ der Änderung
+- [ ] Bugfix
+- [ ] Neues Feature
+- [ ] Breaking Change
+- [ ] Dokumentation
+
+## Wie getestet?
+- [ ] Chrome Desktop
+- [ ] Firefox Desktop
+- [ ] Safari Mobile
+- [ ] Chrome Mobile
+
+## Screenshots (falls UI-Änderungen)
+[Screenshot hier einfügen]
+
+## Checklist
+- [ ] Code folgt Style Guide
+- [ ] Selbst-Review durchgeführt
+- [ ] Kommentare hinzugefügt
+- [ ] CHANGELOG.md aktualisiert
+- [ ] Keine neuen Warnings
+```
+
+### 4. Review Prozess
+
+- Maintainer werden deinen PR prüfen
+- Möglicherweise werden Änderungen angefragt
+- Nach Approval: Merge in main branch
+- Branch kann gelöscht werden
+
+---
+
+## 🐛 Bug Reports
+
+### Gutes Bug Report Template:
+
+```markdown
+**Beschreibung des Bugs**
+Kurze, klare Beschreibung was passiert.
+
+**Reproduktion**
+Schritte um den Bug zu reproduzieren:
+1. Gehe zu '...'
+2. Klicke auf '...'
+3. Scrolle nach '...'
+4. Sieh Fehler
+
+**Erwartetes Verhalten**
+Was sollte stattdessen passieren?
+
+**Screenshots**
+Falls zutreffend, füge Screenshots hinzu.
+
+**Umgebung:**
+- Browser: [z.B. Chrome 120, Firefox 121]
+- OS: [z.B. Windows 11, macOS 14, iOS 17]
+- App Version: [z.B. v30.0.0]
+- Mobile/Desktop: [z.B. iPhone 15 Pro]
+
+**Zusätzlicher Kontext**
+Console Errors, Network Logs, etc.
+```
+
+### Bug Issue erstellen:
+
+1. Gehe zu: https://github.com/Serverlele30/VBB-Status-Web-App/issues
+2. Klicke "New Issue"
+3. Label: `bug`
+4. Fülle Template aus
+
+---
+
+## 💡 Feature Requests
+
+### Gutes Feature Request Template:
+
+```markdown
+**Problem/Motivation**
+Welches Problem würde dieses Feature lösen?
+Beispiel: "Es ist schwierig, Favoriten-Stationen zu speichern..."
+
+**Vorgeschlagene Lösung**
+Wie könnte das Feature implementiert werden?
+Beispiel: "Ein 'Favoriten'-Button neben jeder Station..."
+
+**Alternativen**
+Welche anderen Lösungen hast du in Betracht gezogen?
+
+**Mockups/Wireframes**
+Falls vorhanden, füge Design-Ideen hinzu.
+
+**Zusätzlicher Kontext**
+Andere Apps die ähnliche Features haben, etc.
+```
+
+### Feature Request erstellen:
+
+1. Gehe zu Issues
+2. Label: `enhancement`
+3. Diskutiere Feature mit Maintainern
+4. Nach Approval: Implementierung starten
+
+---
+
+## 🎨 Design Guidelines
+
+### Farbschema
+
+```css
+/* Primärfarben */
+--yellow: #FFED00; /* BVG Gelb */
+--black: #000000; /* Hintergrund */
+--white: #FFFFFF; /* Text */
+
+/* Linienfarben (BVG Standard) */
+--u1: #55A823; /* U1 Grün */
+--u2: #C00000; /* U2 Rot */
+--u3: #028D4C; /* U3 Grün */
+/* ... siehe styles.css für alle Linien */
+
+/* Graustufen */
+--gray-dark: #1a1a1a;
+--gray-medium: #333333;
+--gray-light: #666666;
+```
+
+### Typografie
+
+```css
+/* Hauptschrift: DotMatrix (Retro BVG-Look) */
+font-family: 'DotMatrix', 'Courier New', monospace;
+
+/* Größen */
+--text-xs: 10px;
+--text-sm: 12px;
+--text-base: 14px;
+--text-lg: 16px;
+--text-xl: 20px;
+--text-2xl: 24px;
+--text-3xl: 32px;
+```
+
+### Spacing
+
+```css
+/* 4px Base Unit */
+--spacing-1: 4px;
+--spacing-2: 8px;
+--spacing-3: 12px;
+--spacing-4: 16px;
+--spacing-5: 20px;
+--spacing-6: 24px;
+```
+
+---
+
+## 🧪 Testing Checklist
+
+Vor Pull Request:
+
+### Browser Compatibility
+- [ ] Chrome (neueste Version)
+- [ ] Firefox (neueste Version)
+- [ ] Safari (neueste Version)
+- [ ] Edge (neueste Version)
+
+### Geräte
+- [ ] Desktop (1920x1080+)
+- [ ] Laptop (1366x768)
+- [ ] Tablet (768x1024)
+- [ ] Mobile (375x667 - iPhone SE)
+- [ ] Mobile (414x896 - iPhone 11)
+
+### Features
+- [ ] Abfahrten laden funktioniert
+- [ ] Routenplanung funktioniert
+- [ ] Live-Map zeigt Fahrzeuge
+- [ ] Service Worker cached korrekt
+- [ ] PWA Installation funktioniert
+- [ ] Offline-Modus funktioniert
+
+### Performance
+- [ ] Ladezeit < 3s
+- [ ] Keine Memory Leaks
+- [ ] Smooth Scrolling
+- [ ] Keine Layout Shifts
+
+---
+
+## 📚 Ressourcen
+
+### APIs
+- **VBB API**: https://v6.vbb.transport.rest/api.html
+- **BVG Farben**: Siehe `getBVGLineColor()` in script.js
+
+### Libraries
+- **Leaflet.js**: https://leafletjs.com/
+- **Leaflet Docs**: https://leafletjs.com/reference.html
+
+### Tools
+- **Chrome DevTools**: Browser Console, Network Tab
+- **Lighthouse**: Performance Audit
+- **Can I Use**: Browser Compatibility Check
+
+---
+
+## ❓ Fragen?
+
+Bei Fragen:
+
+1. **GitHub Discussions**: (falls aktiviert)
+2. **Issues**: Stelle Fragen als Issue mit Label `question`
+3. **README/Docs**: Prüfe vorhandene Dokumentation
+
+---
+
+## 🎉 Danke!
+
+Vielen Dank für dein Interesse an VBB Netz Status! Jeder Beitrag, egal wie klein, hilft das Projekt zu verbessern.
+
+**Happy Coding! 🚇🚌🚊**
+
+---
+
+**Maintainer:**
+- Aaron K. ([@Serverlele30](https://github.com/Serverlele30))
+- Claude (Anthropic)
+
+**Lizenz:** MIT
diff --git a/INSTALLATION.md b/INSTALLATION.md
new file mode 100644
index 0000000..3f8102d
--- /dev/null
+++ b/INSTALLATION.md
@@ -0,0 +1,310 @@
+# 🚀 Installation & Setup
+
+Diese Anleitung führt dich Schritt für Schritt durch die Installation der VBB Netz Status App.
+
+## 📋 Voraussetzungen
+
+### Erforderlich:
+- **Node.js** v16.0.0 oder höher
+- **npm** v8.0.0 oder höher
+- **OpenSSL** (für HTTPS-Zertifikate)
+
+### Optional:
+- **Git** (zum Klonen des Repositories)
+
+---
+
+## 🔧 Installation
+
+### Option 1: Mit Git
+
+```bash
+# Repository klonen
+git clone https://github.com/Serverlele30/VBB-Status-Web-App.git
+
+# In Projektverzeichnis wechseln
+cd VBB-Status-Web-App
+
+# Abhängigkeiten installieren
+npm install
+```
+
+### Option 2: Download als ZIP
+
+1. Repository als ZIP herunterladen
+2. ZIP entpacken
+3. Terminal/Kommandozeile öffnen
+4. In Projektverzeichnis navigieren
+5. Abhängigkeiten installieren:
+ ```bash
+ npm install
+ ```
+
+---
+
+## ▶️ Server starten
+
+### Entwicklungsserver (HTTPS)
+
+```bash
+npm start
+# oder
+npm run dev
+```
+
+Der Server startet automatisch auf `https://localhost:3000`
+
+### Beim ersten Start:
+
+1. **SSL-Zertifikat wird generiert**
+ - Der Server erstellt automatisch ein selbstsigniertes Zertifikat
+ - Gespeichert in: `./certs/`
+
+2. **Browser-Warnung akzeptieren**
+ - Chrome/Edge: "Erweitert" → "Weiter zu localhost"
+ - Firefox: "Erweitert" → "Ausnahme hinzufügen"
+ - Safari: "Details" → "Diese Website besuchen"
+
+3. **App öffnet sich**
+ - URL: `https://localhost:3000`
+ - Die App lädt automatisch
+
+---
+
+## 📱 Mobile Testing
+
+### Im lokalen Netzwerk testen:
+
+1. **IP-Adresse finden:**
+
+ **Windows:**
+ ```bash
+ ipconfig
+ # Suche nach "IPv4-Adresse"
+ ```
+
+ **Mac/Linux:**
+ ```bash
+ ifconfig
+ # oder
+ ip addr show
+ ```
+
+2. **Auf Mobile-Gerät öffnen:**
+ ```
+ https://DEINE_IP:3000
+ ```
+ Beispiel: `https://192.168.1.100:3000`
+
+3. **Zertifikatswarnung akzeptieren**
+ - Auf dem Smartphone die Warnung bestätigen
+ - "Trotzdem fortfahren" wählen
+
+---
+
+## 🏗️ Projektstruktur
+
+```
+vbb-netz-status/
+├── index.html # HTML-Struktur
+├── styles.css # Alle Styles (Dark Mode, Responsive)
+├── script.js # App-Logik (Abfahrten, Routen, Live-Map)
+├── server.js # HTTPS-Development-Server
+├── service-worker.js # PWA Service Worker (Offline)
+├── manifest.json # PWA Manifest (Installation)
+├── package.json # Node.js Konfiguration
+├── LICENSE # MIT Lizenz
+├── README.md # Projekt-Dokumentation
+├── CHANGELOG.md # Versions-Historie
+├── INSTALLATION.md # Diese Datei
+├── .gitignore # Git-Ignore-Liste
+├── certs/ # SSL-Zertifikate (auto-generiert)
+│ ├── cert.pem
+│ └── key.pem
+└── images/ # App-Assets (Icons, Favicons)
+ └── favicon.png
+```
+
+---
+
+## 🔐 HTTPS & SSL-Zertifikate
+
+### Warum HTTPS?
+
+- **PWA-Anforderung**: Service Worker benötigt HTTPS
+- **Geolocation API**: Browser verlangen sichere Verbindung
+- **Best Practice**: Moderne Web-Standards
+
+### Zertifikate neu generieren:
+
+```bash
+# Alte Zertifikate löschen
+rm -rf certs/
+
+# Server neu starten (generiert automatisch neue)
+npm start
+```
+
+### Manuell generieren (falls OpenSSL verfügbar):
+
+```bash
+mkdir -p certs
+openssl req -x509 -newkey rsa:4096 -keyout certs/key.pem -out certs/cert.pem -days 365 -nodes -subj "/CN=localhost"
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### Problem: "npm: command not found"
+
+**Lösung:** Node.js installieren
+- Download: https://nodejs.org/
+- Empfohlen: LTS-Version
+
+### Problem: "Port 3000 already in use"
+
+**Lösung 1:** Anderen Prozess beenden
+```bash
+# Windows
+netstat -ano | findstr :3000
+taskkill /PID /F
+
+# Mac/Linux
+lsof -ti:3000 | xargs kill -9
+```
+
+**Lösung 2:** Port in `server.js` ändern
+```javascript
+const PORT = 3001; // Statt 3000
+```
+
+### Problem: "OpenSSL not found"
+
+**Lösung (Windows):**
+1. Git Bash verwenden (enthält OpenSSL)
+2. Oder OpenSSL separat installieren: https://slproweb.com/products/Win32OpenSSL.html
+
+**Lösung (Mac):**
+```bash
+brew install openssl
+```
+
+**Lösung (Linux):**
+```bash
+sudo apt-get install openssl
+```
+
+### Problem: "Cannot GET /"
+
+**Lösung:** Stelle sicher, dass alle Dateien vorhanden sind:
+```bash
+ls -la
+# Sollte index.html, styles.css, script.js enthalten
+```
+
+### Problem: Service Worker funktioniert nicht
+
+**Lösung:**
+1. Browser-Cache leeren (Ctrl+Shift+Del)
+2. Service Worker deregistrieren:
+ - Chrome DevTools → Application → Service Workers → Unregister
+3. Seite neu laden (Ctrl+F5)
+
+---
+
+## 🎨 Anpassungen
+
+### Port ändern:
+
+In `server.js`:
+```javascript
+const PORT = 3001; // Dein gewünschter Port
+```
+
+### Cache-Version ändern:
+
+In `service-worker.js`:
+```javascript
+const CACHE_NAME = 'vbb-status-v31'; // Neue Version
+```
+
+### Farben anpassen:
+
+In `styles.css`:
+```css
+/* Hauptfarbe ändern */
+--primary-color: #FFED00; /* BVG Gelb */
+--background-color: #000; /* Schwarz */
+```
+
+---
+
+## 📦 Dependencies
+
+### Produktions-Dependencies:
+- **mime-types** (^2.1.35): MIME-Type Detection für Server
+
+### Keine Dev-Dependencies:
+- Projekt läuft ohne Build-Prozess
+- Keine Transpiler oder Bundler nötig
+
+---
+
+## 🚀 Deployment
+
+### Für Produktion:
+
+1. **Statisches Hosting** (Empfohlen):
+ - GitHub Pages
+ - Netlify
+ - Vercel
+ - Cloudflare Pages
+
+2. **Node.js Server** (Optional):
+ - Heroku
+ - DigitalOcean
+ - AWS
+ - Google Cloud
+
+### GitHub Pages Deployment:
+
+```bash
+# Für GitHub Pages
+git add .
+git commit -m "Deploy to GitHub Pages"
+git push origin main
+
+# Settings → Pages → Source: main branch
+```
+
+---
+
+## 📞 Support
+
+Bei Problemen oder Fragen:
+
+1. **GitHub Issues**: https://github.com/Serverlele30/VBB-Status-Web-App/issues
+2. **README konsultieren**: Enthält zusätzliche Infos
+3. **CHANGELOG prüfen**: Bekannte Probleme und Fixes
+
+---
+
+## ✅ Checkliste nach Installation
+
+- [ ] Node.js installiert (v16+)
+- [ ] npm installiert (v8+)
+- [ ] Repository geklont/heruntergeladen
+- [ ] `npm install` ausgeführt
+- [ ] Server startet ohne Fehler
+- [ ] `https://localhost:3000` öffnet die App
+- [ ] Zertifikatswarnung akzeptiert
+- [ ] Mobile-Testing funktioniert (optional)
+- [ ] PWA installiert (optional)
+
+---
+
+**🎉 Viel Erfolg mit der VBB Netz Status App!**
+
+Entwickelt von Aaron K. & Claude (Anthropic)
+Lizenz: MIT
diff --git a/package.json b/package.json
index 5453bcf..842b9d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vbb-netz-status",
- "version": "29.0.0",
+ "version": "30.0.0",
"description": "Live-Nahverkehr für Berlin & Brandenburg - Progressive Web App (PWA) für Echtzeit-Abfahrten, Routenplanung und Live-Fahrzeugverfolgung im VBB-Gebiet",
"main": "server.js",
"scripts": {
diff --git a/service-worker.js b/service-worker.js
index 4310be2..2953d82 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,7 +1,9 @@
-const CACHE_NAME = 'vbb-status-v29';
+const CACHE_NAME = 'vbb-status-v30';
const urlsToCache = [
'/',
'/index.html',
+ '/styles.css',
+ '/script.js',
'/manifest.json',
'/DotMatrix.ttf',
'/images/favicon.png'