further rework to the documentation
This commit is contained in:
Codex Agent
189
docs/archive/wireframes/PWA_Wireframes.txt
Normal file
189
docs/archive/wireframes/PWA_Wireframes.txt
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
# 📱 PWA Wireframes (Markdown)
|
||||
|
||||
## Landingpage
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ Willkommen bei Fotochallenge 🎉 ]
|
||||
|
||||
HAUPTBEREICH
|
||||
Eingabe-Feld: [ QR-Code / Event-PIN ]
|
||||
Button: [ ➡️ Event beitreten ]
|
||||
|
||||
FOOTER
|
||||
(none)
|
||||
--------------------------------------------------
|
||||
|
||||
## Profil-Setup
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ Profil erstellen ]
|
||||
|
||||
HAUPTBEREICH
|
||||
Eingabefeld: [ Dein Name ]
|
||||
Option: Avatar wählen (Rund-Icons)
|
||||
|
||||
Button: [ ✅ Starten ]
|
||||
--------------------------------------------------
|
||||
|
||||
## Startseite (Home)
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ Hochzeit Anna & Tom 🎉 ] (Avatar rechts)
|
||||
📸 Dein Fotospiel zur Hochzeit – mach Aufgaben & teile Momente
|
||||
|
||||
INFO-BAR
|
||||
👥 37 Gäste online | ✅ 142 Aufgaben gelöst
|
||||
|
||||
HAUPTBEREICH
|
||||
[ 🎲 Aufgabe ziehen ] (großer Button, primär)
|
||||
[ 😊 Wie fühlst du dich? ] (großer Button, sekundär)
|
||||
|
||||
(kleiner Link unterhalb:)
|
||||
[ 📸 Einfach ein Foto machen ]
|
||||
|
||||
GALERIE / FEED
|
||||
Filter: [ Neueste ] [ Beliebt ] [ Meine ]
|
||||
|
||||
Foto-Kacheln mit ❤️ Like-Icon
|
||||
--------------------------------------------------
|
||||
FOOTER-NAVI
|
||||
🏠 Start 🎲 Aufgaben 🏆 Achievements 🖼️ Galerie
|
||||
--------------------------------------------------
|
||||
|
||||
## Aufgaben-Picker
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 🎲 Aufgabe ziehen ] (X schließen)
|
||||
|
||||
HAUPTBEREICH
|
||||
Option A: Zufallsaufgabe sofort anzeigen
|
||||
Option B: Stimmung wählen (Emoji-Grid)
|
||||
|
||||
😊 Emotionen (Grid):
|
||||
🤪 Albern 🕺 Energetisch 🤗 Herzlich
|
||||
😎 Cool 🧑🤝🧑 Gemeinsam 🧠 Kreativ
|
||||
😌 Ruhig 🎯 Mutig
|
||||
|
||||
Optional:
|
||||
Slider "Energie-Level"
|
||||
[ 🔋 niedrig | 🔋 mittel | 🔋 hoch ]
|
||||
|
||||
BUTTON
|
||||
[ 👉 Aufgabe anzeigen ]
|
||||
--------------------------------------------------
|
||||
|
||||
## Aufgaben-Detail (Karte)
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 🤪 Albern ] (X schließen)
|
||||
|
||||
AUFGABEN-KARTE
|
||||
📸 Aufgabe:
|
||||
"Mach ein Selfie, bei dem alle in die falsche Richtung schauen."
|
||||
|
||||
⏱️ Dauer: < 1 Min 👥 Gruppengröße: 2–5
|
||||
|
||||
BUTTONS
|
||||
[ 📷 Los geht’s ] (Foto machen/hochladen)
|
||||
[ ↻ Neue Aufgabe ] (gleiche Stimmung)
|
||||
[ 😊 Andere Stimmung wählen ] (zurück zum Picker)
|
||||
--------------------------------------------------
|
||||
|
||||
## Kamera/Upload
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 📷 Foto aufnehmen ]
|
||||
|
||||
HAUPTBEREICH
|
||||
[ Kamera öffnen ] oder [ Foto hochladen ]
|
||||
|
||||
Nach Upload:
|
||||
✅ „Foto erfolgreich hochgeladen 🎉“
|
||||
|
||||
BUTTON
|
||||
[ Galerie ansehen ]
|
||||
--------------------------------------------------
|
||||
|
||||
## Galerie (Übersicht)
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 📸 Galerie ] (Filter oben)
|
||||
|
||||
FILTER
|
||||
[ Neueste ] [ Beliebt ] [ Meine ]
|
||||
|
||||
FOTOS (Kachel- oder Feed-Ansicht)
|
||||
[ ❤️ 12 ] Foto 1
|
||||
[ ❤️ 5 ] Foto 2
|
||||
[ ❤️ 21 ] Foto 3
|
||||
...
|
||||
|
||||
Tap → öffnet Foto-Detail
|
||||
--------------------------------------------------
|
||||
|
||||
## Foto-Detailansicht
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ X Schließen ]
|
||||
|
||||
HAUPTBEREICH
|
||||
📷 Foto im Vollbild
|
||||
|
||||
UNTER DEM FOTO
|
||||
❤️ 23 Likes 🎉 4 Reaktionen
|
||||
📸 Aufgabe: "Gruppenfoto mit mindestens 5 Personen"
|
||||
👤 Hochgeladen von: „Lisa“
|
||||
|
||||
BUTTON
|
||||
[ ❤️ Like ]
|
||||
--------------------------------------------------
|
||||
|
||||
## Achievements / Erfolge
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 🏆 Meine Erfolge ]
|
||||
|
||||
HAUPTBEREICH
|
||||
Badges:
|
||||
🎊 Erstes Foto
|
||||
🏅 5 Aufgaben erledigt
|
||||
🔥 Beliebtestes Foto
|
||||
👯 Gruppenfoto-König
|
||||
|
||||
Fortschritt-Balken: (xx / yy Aufgaben)
|
||||
--------------------------------------------------
|
||||
|
||||
## Optionale Seiten
|
||||
|
||||
### Slideshow / Präsentation
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 📽️ Slideshow-Modus ]
|
||||
|
||||
HAUPTBEREICH
|
||||
- Vollbild-Diashow der Galerie
|
||||
- Automatischer Wechsel alle 5 Sek.
|
||||
- Anzeige: Likes & Aufgabe
|
||||
--------------------------------------------------
|
||||
|
||||
### Admin-Panel
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 👑 Admin-Panel ]
|
||||
|
||||
HAUPTBEREICH
|
||||
- Fotos moderieren (löschen, hervorheben)
|
||||
- Teilnehmer-Übersicht
|
||||
--------------------------------------------------
|
||||
|
||||
### Event-Abschluss
|
||||
--------------------------------------------------
|
||||
HEADER
|
||||
[ 🎉 Danke fürs Mitmachen! ]
|
||||
|
||||
HAUPTBEREICH
|
||||
- Zusammenfassung: Anzahl Fotos, Aufgaben, Likes
|
||||
- QR-Code oder Link zur Online-Galerie
|
||||
- „Bis bald ❤️“
|
||||
--------------------------------------------------
|
||||
187
docs/archive/wireframes/guest-pwa.md
Normal file
187
docs/archive/wireframes/guest-pwa.md
Normal file
@@ -0,0 +1,187 @@
|
||||
# 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 |
|
||||
+--------------------------------------------------+
|
||||
```
|
||||
Reference in New Issue
Block a user