190 lines
4.3 KiB
Plaintext
190 lines
4.3 KiB
Plaintext
|
||
# 📱 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 ❤️“
|
||
--------------------------------------------------
|