# WetSlip Web-Frontend v0.2 – Navigation und Mockup-Fidelity

Status: **Design-/Funktionsprototyp; noch kein Produktiv-Checkout.**

## Änderung gegenüber dem Offline-Spike v0.1

- `#nav-root` ist ein Geschwisterelement von `#app`, nicht Teil der scrollenden Seite.
- Navigation ist dauerhaft `position: fixed; bottom: 0`, ohne GPU-intensive `backdrop-filter`-Überlagerung; berücksichtigt `env(safe-area-inset-bottom)` und füllt den unteren Rand.
- `#overlay-root` ist getrennt und überlagert auch die Navigation mit Dialogen.
- Zusätzliche Gestaltung in `frontend/web/fidelity-v02.css`: feinere Neon-Borders, geordnete Karten und mehr Textfläche, kompakter Filter und optionales Sortieren.
- Die Sortierung wechselt zyklisch Standard / Preis aufsteigend / Preis absteigend. Demo-Artikel bleiben synthetisch.
- Service Worker mit neuem Cache-Namen `wetslip-mobile-shell-0.2.0` und neuer statischer CSS-Datei.

## Mobile Tests / Abnahme

1. Seite bei `m.wetslip.net` laden. Zwischen Anfang und Ende der Shopliste mehrfach schnell scrollen.
2. Die Navbar muss sich **ohne Zucken** an der unteren sichtbaren Browserfläche halten; Android-Systemleiste selbst gehört nicht zum Website-Viewport.
3. Browser-Adressleiste ein- und ausblenden, Hoch-/Querformat, kleines Smartphone und Tablet prüfen.
4. Tab `Über mich` und `Bewertungen` im gescrollten Zustand testen: kein automatisches Springen zum Anfang.
5. Wäschekorb-Dialog muss Navbar vollständig überdecken; Schließen, Menge und Favoriten testen.
6. `Sortieren` und `Suche & Filter` bedienen. Keine horizontale Überbreite oder verdeckten Buttons.
7. Webanwendung online laden, Service Worker aktualisieren lassen, erneut laden; danach Offline-Modus und Reload testen. Keine echten API-/Privatdaten cachen.

## Teststand

- Node.js `--check`: App/Service Worker ohne Syntaxfehler.
- Chromium/Playwright Inline-Probe bei 320/390/430/820/1280 px: keine horizontale Überbreite, Navigation `bottom=viewport`, Position beim Dokument-Scroll unverändert; Shop-Tabs, Sortierung, Wäschekorb und Event-Umschaltung geprüft.
- Test auf einem **realen Android-Gerät** steht aus; besonders das dynamische Ein- und Ausblenden der Browser-Chrome lässt sich in dieser Laufumgebung nicht vollständig simulieren.
- Server-/Service-Worker-Offlineprobe durch Testumgebungsbeschränkung noch nicht bestätigt.

## Grenzen / nächste Schritte

- Näher an der freigegebenen Mockup-Vorlage, aber **nicht pixelidentisch**. Weiterer Pass: Typografie, Karte/CTA-Größen, Profilkomposition, funktionales Bild-Cropping beim Upload.
- Später: Backend-gesteuerte Event-Konfiguration, Laravel-API-Vertrag, geschützte Medien, WebView-Bündelung sowie FCM/HMS und lokale Benachrichtigungen.
- Kein Zugriff der Browser-App auf die MySQL-Datenbank; HTTP(S)-API nur mit strengen serverseitigen Berechtigungen.

## Sichere Übernahme

Vor dem Überschreiben des bestehenden Testhosts eine Sicherung des aktuell veröffentlichten Webverzeichnisses anlegen. Inhalt von `frontend/web/` (nicht den Ordner selbst) in das `m.wetslip.net`-Webroot kopieren. Nach Änderung des Service Workers ggf. zweimal laden/neu laden, damit der aktualisierte Service Worker den alten Shell-Cache ersetzt. Kein Upload nach Production ohne Gerätetest.