further rework to the documentation

This commit is contained in:
Codex Agent
2025-11-20 12:31:21 +01:00
parent 6afa44d947
commit 9afcaa7836
90 changed files with 1721 additions and 29 deletions

View 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: 25
BUTTONS
[ 📷 Los gehts ] (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 ❤️“
--------------------------------------------------

View 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 “Youre 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: 25 |
| [ Los gehts ] [ 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 |
+--------------------------------------------------+
```