# WetSlip Webfrontend – Neon Fidelity v0.4.1

Gemeinsamer Web-Demo-Code für `m.wetslip.net` und (nach separater nativer
Integration) die offline startbare Android-WebView. Synthetische Daten aus
`web/catalog.json`. **Keine echte Anmeldung, Bestellübertragung oder Push.**

## Lokal starten

```bash
cd frontend/web
python3 -m http.server 8088 --bind 127.0.0.1
```

Im Browser mit HTTPS oder über `http://127.0.0.1:8088/` öffnen. Die Service
Worker-Funktion erfordert einen sicheren Ursprung; den ersten Offline-Test erst
nach vollständigem Online-Laden und SW-Aktivierung ausführen. `file://` nicht
verwenden. Im eingebetteten Android-WebView muss später die Origin-/Asset-
Loader- und API-CORS-Strategie getrennt implementiert werden.

## Qualitätssicherung

```bash
node --check frontend/web/app.js
node --check frontend/web/sw.js
python3 frontend/tests/verify_files.py
```

Optional: `python3 frontend/tests/test_v03.py` mit installiertem Playwright,
Chromium und Python-Abhängigkeiten. Der isolierte UI-Test benötigt keinen
Netzzugriff und ersetzt keine Tests in Firefox/Chrome auf Android.

## Projekt-Komponenten (bis v0.4.1)

- `.app-shell` / `.page-scroll` – genau **ein** scrollender Hauptbereich.
- `#nav-root` – nicht `fixed`, sondern unteres Flex-Kind des Viewports;
  berücksichtigt Android-Webseiten-Safe-Area; keine transformierten Eltern.
- `#overlay-root` – Modal liegt darüber; sperrt Interaktion mit Navigation
  und Hauptseite. Dialoginhalt hat eigenen (nur bei geöffnetem Dialog
  aktiven) Scrollbereich.
- `.seller-card` / `.listing-card` – Mockup-inspirierte Neon-Komponenten.
- Artikeldetail-Demo mit lokalen Optionen (Optionen sind **nicht** preiswirksam).
- Demo-Wäschekorb mit Mengen und lokal gespeicherten Favoriten.
- Service Worker cachet nur explizite statische Dateien und Demo-Daten.

## Noch offen

- Realgeräte-Test der Browserleisten-Dynamik in Firefox/Chrome und WebView.
- Feinarbeit: Typografie, Bildverhältnisse, rechtsseitige Texte bei 320px,
  detaillierter Foto-Crop bei Artikelupload, optimierte breite Desktopansicht.
- Service-Worker-/Offline-Funklochtest, persistenter Cache-Reset bei Updates.
- Gesicherte Laravel-API, echte Accounts, Altersschutz, Medienschutz.
- Für echten Betrieb Browsercache/Lokalspeicherung privater Inhalte zuerst
  in einem Datenschutz- und Geräteschutzkonzept festlegen.

## Aktueller Stand v0.4.1

- v0.4: Kompakte Shopkarten, Bottom-Sheet mit Galaxie-Hintergrund, separates Avatar-/Ring-/Statussystem.
- v0.4.1: Bereinigtes Avatar-Foto `avatar-portrait-v041.png`, separater Ring und Statuspunkt, Service-Worker-Cache 0.4.1.
- Übergeordnete Deployment-Anleitung: `../README.md`.