Abfahrtstafel- und Favoriten-Polling (je 30s) liefen bisher die gesamte
Seitenlebensdauer weiter, egal ob der Tab überhaupt sichtbar war -
anders als LiveMap, das schon länger korrekt über den aktiven Tab
gesteuert wird. Über die Page Visibility API werden beide Intervalle
jetzt pausiert, sobald der Tab in den Hintergrund geht, und beim
Zurückkehren mit einer sofortigen Aktualisierung neu gestartet. Der
Fahrtalarm bleibt bewusst unangetastet, da er sicherheitsrelevant ist.
Zusätzlich: beim Entfernen eines Favoriten wird jetzt auch dessen
gemerkter Störungs-Stand aus dem localStorage entfernt (sonst bleibt
er dort für immer hängen - analog zum seenDisruptions-Leck, das
letzte Runde schon im Backend gefixt wurde).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Ein langes Label ("Meine Haltestellen") ist in der 6-spaltigen mobilen
Navigationsleiste auf zwei Zeilen umgebrochen und hat dadurch die ganze
Leiste höher gemacht, als die reservierte body-padding-bottom (84px)
vorgesehen hat - die Leiste hat sich sichtbar über die letzte Abfahrts-
zeile gelegt.
- Labels in der mobilen Navi-Leiste sind jetzt zwangsweise einzeilig
(nowrap + ellipsis) statt umzubrechen, damit alle 6 Items exakt
gleich hoch bleiben
- Sicherheitsabstand unten leicht erhöht (84px -> 92px), inkl. der
abhängigen Toast-/Disclaimer-Offsets
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Zwei konkrete Punkte aus dem Feedback zum neuen Design:
- Die segmentierte Pillen-Navigation (schwebende Karte mit rundem
Amber-Button) passte stilistisch nicht zum sonst flachen, scharf-
kantigen Brutalist-Look. Ersetzt durch eine randlose Signage-Leiste
direkt unter dem Header: Reiter liegen flach auf der Fläche, der
aktive Reiter bekommt nur eine dezente Amber-Unterlinie plus
sanften Flächenton statt eines separaten schwebenden Verlaufs-
Buttons - wirkt mehr wie eine Zugtafel mit Reitern, weniger wie
ein UI-Widget.
- Auf dem Handy hatte die Suche praktisch keinen Platz mehr: Marke
(Icon + "ÖPNV NAVI"-Schriftzug) + Suchfeld + 3 Icon-Buttons mussten
sich eine Zeile teilen, und die Wortmarke trug durch einen bisher
nur ab 701px zurückgesetzten Button-Rahmen zusätzlich nativen
Browser-Rahmen/-Innenabstand. Behoben: Wortmarke ab 700px Breite
ausgeblendet (nur das Icon bleibt als Home-Button), Button-Reset
gilt jetzt für alle Breiten, Icon-Buttons und Abstände auf dem
Handy weiter verkleinert - die Sucheingabe bekommt dadurch wieder
echten Platz statt auf ein paar Pixel zusammengequetscht zu sein.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Die letzten Politur-Runden waren dem Nutzer zu ähnlich zur alten
dunklen Glas-Optik ("beeindruckt mich jetzt nicht... muss keine
verwandschaft haben"). Statt weiterer Feinjustierung daher ein
komplett neues Theme ohne visuelle Verwandtschaft zum Vorgänger:
- Helles, cremefarbenes Papier statt dunklem "Bahnsteig bei Nacht"
(--bg-void/--panel/--ink im Root komplett invertiert)
- Kräftiger Terrakotta-Akzent (#C1440E) statt hellem Signal-Amber -
gleichzeitig kontraststärker als Fließtext auf hellem Grund
- Dicke 2px-Konturen (--border-w) statt dünner 1px-Linien
- Scharfe 2-4px-Radien statt runder 13-22px-Ecken; Pillen (999px)
wurden zu rechteckigen Stempeln/Badges
- Harte, unscharfe Versatzschatten (z.B. 5px 5px 0 var(--line))
statt weicher, geblurrter Schatten
- Kein backdrop-filter/Glassmorphismus mehr (Header, Toasts, mobile
Navigationsleiste sind jetzt opake, flache Flächen) - passt zum
bewusst plakativen, flachen Poster-Look
- Alle hartcodierten rgba()-Tints der alten Akzentfarben (Amber/Rot/
Grün/Blau) auf die neuen, dunkleren (kontraststärkeren) Töne
umgerechnet, damit kein Bruch zwischen Token- und Literal-Farben
entsteht
- Feines Punktraster als Hintergrundtextur statt weicher Farbschein-
Gradienten
- theme-color/manifest.json auf die neue helle Fläche abgestimmt
Named angelehnt an Bauhaus-Fahrplantafeln/Vintage-Reiseplakate -
passt inhaltlich zu einer Berlin-Verkehrs-App, ohne die bisherige
"Solari-Anzeigetafel"-Bildsprache fortzusetzen.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Die letzten beiden Commits waren zu zaghaft, um wirklich aufzufallen - unter
anderem, weil zwei der Änderungen durch spätere, unconditioneller stehende
Regeln in der Cascade wieder überschrieben wurden (die Desktop-Breite von
.app-main und die Raster-Spalten von .favorite-cards/.more-grid/
.nearby-preview haben durch die Reihenfolge in der Datei praktisch nichts
bewirkt). Diesmal echte strukturelle Änderungen statt nur zusätzlicher
Schatten, an den tatsächlich wirksamen Stellen im Stylesheet:
- Navigation umgestellt von Unterstrichen-Tabs auf eine segmentierte
Pill-Leiste (Desktop) - aktiver Tab bekommt den vollen Amber-Verlauf als
Hintergrund statt nur eine andere Textfarbe.
- Mobile Bottom-Nav ist jetzt eine freischwebende Glas-Leiste (abgesetzt vom
Rand, abgerundet, Weichzeichner-Hintergrund wie Header/Toasts) statt eines
am Bildschirmrand klebenden Balkens. Aktiver Eintrag bekommt eine
Hintergrund-Pille statt nur Textfarbe. Bottom-Offsets von Toast/Footer
entsprechend angepasst.
- Abfahrtstafel: Uhrzeit deutlich größer/fetter (Kernaussage der Zeile),
Linien-Badge etwas kräftiger, dickerer farbiger Rand pro Zeile.
- Logo/Marke: kleines Icon-Badge davor, größer und fetter - dabei einen
echten Bug gefunden und behoben (eine spätere `.brand { font: inherit }`
-Regel hat die Typografie der Marke bisher komplett überschrieben, sie lief
also die ganze Zeit in der Browser-Standardschrift statt der eigentlich
vorgesehenen).
- Eckenradius global etwas großzügiger (10→13px / 18→22px).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Zweite Polish-Runde nach dem letzten Commit, wieder additiv:
- Primäre Aktion auf der Startseite ("In meiner Nähe") hebt sich jetzt mit
Amber-Verlauf + Glow von der sekundären ab, statt nur per Rahmenfarbe -
klarere visuelle Hierarchie auf den ersten Blick.
- Glocken-Badge pulsiert dezent, solange ungelesene Benachrichtigungen
vorliegen, statt ein statischer Punkt zu sein.
- Favoriten-Stern-Button: aktiver Zustand jetzt mit Hintergrund-Tönung statt
nur Rahmenfarbe, plus Hover für den inaktiven Zustand.
- Such-Ergebniszeilen mit sanftem Hover-Verschieben statt hartem Wechsel.
- Einstellungen/Verbindungstest-Karten bekommen denselben Amber-Akzentbalken
wie die Panel-Überschriften - konsistent mit dem Rest der App statt wie
ein Fremdkörper aus der letzten Runde.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Baut auf dem vorhandenen Design (dunkles "Solari-Anzeigetafel"-Theme) auf,
statt es zu ersetzen - die Grundlage war schon gut, es fehlte vor allem die
Nutzung des Platzes auf breiten Bildschirmen:
- Neuer Breakpoint ab 960px: Karten-Raster (Favoriten, Mehr, In der Nähe)
bekommen mehr Spalten statt als eine schmale Spalte in der Bildschirmmitte
zu wirken, Content-Bereich und Formulare etwas großzügiger gepolstert.
- Hover-/Elevation-Effekte für journey-card, notification-item und
remark-card ergänzt (nutzt dieselben --shadow-Tokens wie die bereits
vorhandenen Favoriten-/Mehr-Karten) - macht die Maus-Bedienung auf dem
Desktop greifbarer, ohne Mobile/Touch zu beeinträchtigen.
- Mode-Filter-Chips bekommen jetzt auch im inaktiven Zustand ein Hover.
- Dezentes Fade-in beim Tab-Wechsel statt hartem Springen (respektiert
prefers-reduced-motion wie der Rest der App).
- Themenfarbener Scrollbalken (Chrome/Firefox) statt Browser-Standardgrau,
scroll-behavior: smooth für Anker-/Fokussprünge.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Phase 2-4 der WebApp-Angleichung an die iOS-App:
- Navigation: Favoriten und Störungen sind jetzt eigene Top-Level-Tabs
(Desktop-Tableiste + mobile Bottom-Nav) statt nur über das Mehr-Grid bzw.
den Stern im Header erreichbar. Neue Header-Icons für Einstellungen (⚙)
und Benachrichtigungen (🔔, mit rotem Punkt bei ungelesenen Einträgen).
"Mehr" ist jetzt schlanker (In der Nähe, Tickets, Verlauf, App-Info mit
Verbindungstest gegen /health/full) und die Sprachauswahl in einen neuen
eigenen "Einstellungen"-Tab umgezogen.
- Benachrichtigungscenter (js/notifications.js, neu): persistenter
Verlauf über IndexedDB, sowohl vom Service Worker (eingehende Web-Push-
Nachrichten, auch bei geschlossenem Tab) als auch von der Seite selbst
(Störungs-Matches bei Favoriten, Fahrtalarm) beschrieben. Neuer
"Benachrichtigungen"-Tab zeigt den Verlauf, Badge am Glocken-Icon zeigt
ungelesene Einträge, per postMessage vom Service Worker live aktualisiert.
- Einfacher Modus: neuer Toggle im Einstellungen-Tab, persistiert in
localStorage, setzt eine .simple-mode-Klasse auf <html> - moderat
größere Schrift plus Ausblenden von Verkehrsmittel-Filter/Fahrrad-Option/
"Zwischenhalt hinzufügen" im Routenplaner, analog zur iOS-App (bewusst
keine Accessibility-Schriftgrößenstufe, die ist für Screenreader gedacht).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Löst die WebApp aus der eigenen OTP2-Instanz heraus und nutzt dieselbe
HAFAS-Anbindung (VBB + Deutsche Bahn) wie die iOS-App, damit beide Clients
gegen dasselbe Backend-Feature-Set laufen:
- js/api.js: getJourneys() ruft jetzt /journeys statt /otp/journeys auf,
inkl. via0-2 (Lat/Lon/Name/WaitMinutes), modes, bike, earlierRef/laterRef.
Gibt die volle Antwort zurück statt nur { journeys }.
- js/app.js: bis zu 3 Zwischenhalte mit eigener Ortssuche und Aufenthaltszeit,
Verkehrsmittel-Filter (ModeFilter-Komponente wiederverwendet), Fahrrad-
Toggle, Früher/Später-Buttons zum Nachladen. Share-Link-Format um
Vias/Modes/Bike erweitert, alter Umstiegszeit-Puffer entfernt (von HAFAS
nicht unterstützt).
- index.html/styles.css: neue Formularelemente für Zwischenhalte, Filter
und Paginierung.
- js/i18n.js: neue Übersetzungsschlüssel in DE/EN, alten sourceNote-String
korrigiert (& wurde per textContent gesetzt und wäre literal
angezeigt worden statt als &).
- README.md: Feature-Beschreibung aktualisiert.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Claude