188 lines
6.2 KiB
Markdown
188 lines
6.2 KiB
Markdown
# Guest PWA — Wireframes (Low-Fi)
|
||
|
||
Navigation Flow
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A[Scan QR / Open Link] --> B[Token Validate]
|
||
B -->|ok| C[Terms / Optional PIN]
|
||
B -->|invalid| Z[Error: Event Closed]
|
||
C --> D[Gallery]
|
||
D --> E[Upload Picker]
|
||
E --> F[Upload Queue]
|
||
D --> G[Photo Lightbox]
|
||
D --> H[Filters]
|
||
D --> I[Settings Sheet]
|
||
F --> D
|
||
G --> D
|
||
```
|
||
|
||
Gallery (mobile)
|
||
|
||
Settings open in-place via a sheet launched from the header gear; the sheet focuses on legal text and cache management while the theme toggle remains in the header.
|
||
|
||
```
|
||
+--------------------------------------------------+
|
||
| Toolbar: [Scan?] [Filter] [Upload] [Menu] |
|
||
+--------------------------------------------------+
|
||
| ▢ ▢▢ ▢ ▢▢▢ ▢▢ ▢ ▢▢ Masonry grid |
|
||
| ▢▢ ▢ ▢▢ ▢ ▢ ▢▢ ▢ |
|
||
| ▢ ▢▢ ▢ ▢▢ ▢▢ ▢ ▢ |
|
||
+--------------------------------------------------+
|
||
| Pull to refresh ▲ new items |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Upload Queue (mobile)
|
||
|
||
```
|
||
+---------------- Uploads -------------------------+
|
||
| [ ] IMG_1234.jpg 75% ||||||||||\____ [X] |
|
||
| [!] IMG_1235.jpg retry network error [↻] |
|
||
| [ ] IMG_0002.jpg queued |
|
||
| |
|
||
| Background sync: (On) • Pause • Clear all |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Lightbox
|
||
|
||
```
|
||
+------------------ Photo -------------------------+
|
||
| < back ❤ 128 likes Share ⤴ |
|
||
| |
|
||
| [ image ] |
|
||
| |
|
||
| Emotion: 🎉 Party Task: Jump shot |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
States & Messages
|
||
- Empty gallery: “Be the first to upload a photo!” + CTA button.
|
||
- Event closed: explain and provide contact hint.
|
||
- Offline: banner “You’re offline — viewing cached photos. Uploads will resume automatically.”
|
||
|
||
Notes
|
||
- Keep wireframes platform-agnostic; exact visuals handled by design system.
|
||
- Photos only; video capture/upload is not supported.
|
||
|
||
Additional Screens (from PWA_Wireframes.txt)
|
||
|
||
Landing / Einstieg
|
||
|
||
```
|
||
+---------------- Landing -------------------------+
|
||
| Willkommen bei Fotochallenge 🎉 |
|
||
| |
|
||
| [ QR/PIN eingeben ] [ Event beitreten ] |
|
||
| |
|
||
| Fehler: Ungültiger Code / Event geschlossen |
|
||
+-------------------------------------------------+
|
||
```
|
||
|
||
Profil-Setup
|
||
|
||
```
|
||
+---------------- Profil --------------------------+
|
||
| Profil erstellen |
|
||
| [ Dein Name ] |
|
||
| ( ) Avatar wählen (Rund-Icons) |
|
||
| [ Starten ] [ Überspringen ] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Home / Feed (mit Info-Bar)
|
||
|
||
```
|
||
+---------------- Home ----------------------------+
|
||
| Eventtitel |
|
||
| Dein Fotospiel zur Hochzeit |
|
||
| ———————————————————————————————— |
|
||
| X Gäste online ✅ Y Aufgaben gelöst |
|
||
| |
|
||
| [ Aufgabe ziehen ] [ Wie fühlst du dich? ] |
|
||
| (klein) Einfach ein Foto machen |
|
||
| |
|
||
| [Masonry Feed …] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Aufgaben-Picker (Emotionen)
|
||
|
||
```
|
||
+-------------- Stimmung wählen -------------------+
|
||
| Albern Energetisch Herzlich Cool Gemeinsam |
|
||
| Kreativ Ruhig Mutig |
|
||
| [ Aufgabe anzeigen ] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Aufgaben-Detail (Karte)
|
||
|
||
```
|
||
+---------------- Aufgabe -------------------------+
|
||
| Stimmung: Albern [X] |
|
||
| Aufgabe: Selfie in falsche Richtung |
|
||
| Dauer: <1 Min Gruppe: 2–5 |
|
||
| [ Los geht’s ] [ Neue Aufgabe ] [ Stimmung ] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Kamera / Upload
|
||
|
||
```
|
||
+--------------- Kamera/Upload --------------------+
|
||
| [ Kamera öffnen ] [ Foto hochladen ] |
|
||
| ✔ Foto erfolgreich hochgeladen |
|
||
| [ Galerie ansehen ] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Galerie / Filter
|
||
|
||
```
|
||
+---------------- Galerie -------------------------+
|
||
| [ Neueste ] [ Beliebt ] [ Meine ] |
|
||
| ❤️12 [Foto] |
|
||
| ❤️ 5 [Foto] |
|
||
| ❤️21 [Foto] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Foto-Detailansicht
|
||
|
||
```
|
||
+--------------- Foto-Detail ----------------------+
|
||
| [X] |
|
||
| [ Vollbild-Foto ] |
|
||
| ❤️ 23 🎉 4 Reaktionen |
|
||
| Aufgabe: Gruppenfoto (>=5) |
|
||
| Hochgeladen von: Lisa |
|
||
| [ ❤️ Like ] |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Erfolge / Achievements
|
||
|
||
```
|
||
+--------------- Erfolge --------------------------+
|
||
| Erstes Foto 5 Aufgaben Beliebtestes Foto |
|
||
| Gruppenfoto-König |
|
||
| Fortschritt: [██████▁▁▁] (6/10) |
|
||
+--------------------------------------------------+
|
||
```
|
||
|
||
Optionale: Slideshow & Abschluss
|
||
|
||
```
|
||
+------------- Slideshow (optional) ---------------+
|
||
| Vollbild-Wechsel alle 5s, Likes & Aufgabe-Overlay|
|
||
+--------------------------------------------------+
|
||
|
||
+--------------- Event-Abschluss ------------------+
|
||
| Danke fürs Mitmachen! |
|
||
| Fotos: 120 Aufgaben: 45 Likes: 900 |
|
||
| QR/Link zur Online-Galerie |
|
||
+--------------------------------------------------+
|
||
```
|