Claude
816de80afb
Umfassende Überarbeitung für produktionsreife Anwendung: 🔧 Initialisierung & Ladereihenfolge: - Asynchrone App-Initialisierung mit waitForLeaflet() - DOMContentLoaded-Handler für sichere DOM-Manipulation - Leaflet-Verfügbarkeitsprüfung mit Timeout - Initial Loading Screen während Initialisierung - Graceful Degradation bei Fehlern 🔄 Error Recovery & Retry-Logik: - Automatische Wiederholungsversuche (3x) bei Netzwerkfehlern - Exponentieller Backoff (5s Verzögerung) - Differenzierte Fehlerbehandlung (Timeout, Network, Generic) - User-Feedback bei Fehlern mit Retry-Counter - Try-Catch für Marker-Erstellung 🛡️ Sicherheit (XSS-Prevention): - escapeHtml() Funktion für alle User-Inputs - HTML-Escaping in Marker-Labels - HTML-Escaping in Popups (Liniennamen, Richtung, Haltestellen) - Sichere Datenvalidierung vor Rendering 🧹 Memory Management: - Cleanup-Funktion für Intervals - beforeunload Event-Handler - visibilitychange Handler (pausiert Updates bei verstecktem Tab) - Proper Interval-Management mit null-Checks 📱 User Experience: - Initial Loading Screen mit Spinner - Noscript-Fallback für Browser ohne JavaScript - Detaillierte Geolocation-Fehlermeldungen - Visuelle Error-Messages im UI - Auto-Resume bei Tab-Wechsel 🔍 Code-Qualität: - Modulare Initialisierungsfunktionen - Bessere Fehler-Logging - Null-Checks für alle DOM-Operationen - Map-Existenz-Prüfung vor Operationen - Error Boundaries für kritische Funktionen 🎯 Performance: - Tab Visibility API zur Ressourcenschonung - Cleanup bei Page Unload - Optimierte Event-Listener - Debounced Map Movement Handler 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🚇 Berlin Live Transit
Echtzeit-Dashboard zur Visualisierung aller öffentlichen Verkehrsmittel in Berlin – perfekt als animierter Background oder Wallpaper.
✨ Features
- 🗺️ Live-Tracking aller Verkehrsmittel (U-Bahn, S-Bahn, Bus, Tram, Fähre)
- 🌙 Dark Mode mit animierten Fahrzeugmarkern
- ⏰ Echtzeit-Uhr mit deutschem Datum
- 📍 Standorterkennung (optional)
- ✨ Smooth Animationen zwischen Position-Updates
- 💫 Kein Cursor - perfekt als Hintergrund
🚀 Installation & Start
Option 1: GitHub Pages (Empfohlen)
Einfach die GitHub Pages aktivieren:
- Fork/Clone das Repo
- GitHub → Settings → Pages → Source:
mainbranch - Fertig! URL:
https://username.github.io/berlin-live-transit
Option 2: Lokaler Start
# Repository klonen
git clone https://github.com/username/berlin-live-transit.git
cd berlin-live-transit
# Starten mit Node.js
npm start
# ODER mit Python
python -m http.server 8000
Dann öffne: http://localhost:8000
Option 3: Direkt öffnen
Einfach index.html im Browser öffnen – funktioniert sofort!
🎨 Verkehrsmittel-Farben
| Typ | Farbe | Icon |
|---|---|---|
| U-Bahn | 🔵 Blau | U |
| S-Bahn | 🟢 Grün | S |
| Straßenbahn | 🔴 Rot | T |
| Bus | 🟣 Lila | B |
| Fähre | 🔵 Cyan | F |
| Regional | 🟠 Orange | R |
⚙️ Konfiguration
Anpassbare Parameter in index.html:
// Zoom-Level (Standard: 16)
map.setView([lat, lon], 16);
// Update-Intervall in ms (Standard: 15s)
setInterval(() => { loadRadarData(); }, 15000);
// Max. Fahrzeuge pro Request
&results=150
🛠️ Technologien
- Leaflet.js - Karten
- VBB Transport REST API - Live-Daten
- CartoDB Dark Matter - Dark Mode Tiles
- Vanilla JS - Keine Dependencies
📝 Nutzung als Wallpaper
- Im Browser öffnen
F11für Vollbild- Optional: Als Browser-Startseite setzen
- Auf zweitem Monitor laufen lassen
🌍 Browser-Support
✅ Chrome/Edge | ✅ Firefox | ✅ Safari | ✅ Opera
📡 API-Details
- Quelle: VBB Transport REST API
- Update: Alle 15 Sekunden
- Limit: 150 Fahrzeuge pro Request
- Kostenlos: Ja, mit Rate-Limit
📄 Lizenz & Credits
- Kartendaten: © OpenStreetMap
- Kartenstil: © CartoDB
- Verkehrsdaten: © VBB
- Code: Open Source
Made with ❤️ for Berlin | Report Bug | Request Feature