robin
b57f5dc2ad
- Reverted theme from gold to amber and restored legacy typography. - Refactored ScanAndTasteFlow and TastingEditor for robust desktop scrolling. - Hotfixed sw.js to completely bypass Supabase Auth/API requests to fix 'Failed to fetch' in production. - Integrated full tasting note persistence (tags, buddies, sessions).
111 lines
3.8 KiB
Plaintext
111 lines
3.8 KiB
Plaintext
|
|
Rolle: Du bist ein Senior Frontend Engineer und UX - Experte mit Spezialisierung auf "Mobile-First" - Webanwendungen.Dein Fokus liegt auf High - End Ästhetik(Dark Mode), flüssigen Animationen und reibungsloser User Experience.
|
|
|
|
Aufgabe: Wir bauen den Core - Flow einer bestehenden Whisky - Tasting - App um.Implementiere den neuen "Scan & Taste" Flow.Ziel ist eine Single - Page - App - Experience(SPA) ohne Reloads, die sich nativ anfühlt.
|
|
|
|
Tech Stack(Anpassen falls nötig):
|
|
|
|
Framework: Next.js(Bitte nutze den bestehenden Stack der App)
|
|
|
|
Styling: Tailwind CSS
|
|
|
|
Icons: Lucide - React oder HeroIcons
|
|
|
|
Charts: Recharts oder Chart.js(für das Radar Chart)
|
|
|
|
Animation: Framer Motion(für Transitions)
|
|
|
|
1. Design System & Vibe
|
|
|
|
Theme: Strict Dark Mode.
|
|
|
|
Background: #0F1014(Deep Anthracite / Black)
|
|
|
|
Surface / Cards: #1A1B20(Lighter Anthracite)
|
|
|
|
Primary Accent: #C89D46(Whisky Gold / Amber)
|
|
|
|
Text: Sans - Serif(Inter) für UI, Serif(Playfair Display) für Überschriften / Namen.
|
|
|
|
Stil: "Premium & Warm".Runde Ecken(rounded - 2xl), Glassmorphism für Overlays(backdrop - blur - md, bg - white / 5), feine Borders(border - white / 10).
|
|
|
|
2. Der Flow(Schritt für Schritt Implementierung)
|
|
|
|
Bitte implementiere folgende Views / Components als zusammenhängenden Flow:
|
|
A.Der Entry Point(Floating Action Button)
|
|
|
|
Erstelle einen prominenten, schwebenden Button(unten mittig, fixed), der über dem Dashboard liegt.
|
|
|
|
Icon: Kamera - Symbol.
|
|
|
|
Interaction: Beim Klick simulieren wir einen Kamera - Scan(nutze vorerst ein Mock - Timeout von 2s mit einer Lade - Animation "Analysiere Etikett..."), danach Transition zu View B.
|
|
|
|
B.Der Tasting Editor(Main Component)
|
|
|
|
Dies ist der wichtigste Screen.Layout - Struktur:
|
|
|
|
Top Bar(Sticky):
|
|
|
|
Zeige einen "Context Indicator".
|
|
|
|
Logik: Zeige Text "Trinkst du in Gesellschaft? + Session wählen".
|
|
|
|
Interaction: Klick öffnet ein Bottom Sheet(siehe C).Wenn eine Session gewählt wurde, zeige: "Session: [Name]".
|
|
|
|
Hero Section:
|
|
|
|
Zeige das(gemockte) Foto der Flasche links.
|
|
|
|
Rechts daneben: Name(Serif, Gold), Alter, ABV. (Mock Data: "Lagavulin 16, Islay, 43%").
|
|
|
|
Form Section(Scrollable):
|
|
|
|
Slider: Erstelle eine Custom - Komponente für "Nose", "Taste", "Finish".Nutze keine Zahlen - Inputs, sondern Range - Slider(0 - 100).
|
|
|
|
Smart Tags(Wichtig!): Implementiere eine Chip - Auswahl.
|
|
|
|
Design: "Ghost Button" Style(transparenter BG, feiner Border).
|
|
|
|
Active State: Füllt sich mit #C89D46(Gold), Text wird dunkel.
|
|
|
|
Data: Mocke AI - Vorschläge wie["Rauch", "Torf", "Jod", "Vanille"].
|
|
|
|
Sticky Footer:
|
|
|
|
Ein Button "Save Tasting"(Full Width), der immer sichtbar unten schwebt(z - index: 50).
|
|
|
|
C.Das Session Bottom Sheet(Overlay)
|
|
|
|
Wenn man in View B auf die Top Bar klickt, fährt von unten ein Sheet hoch(Höhe: 50vh).
|
|
|
|
Inhalt: Input Feld für "Neue Session" und Liste "Aktuelle Sessions".
|
|
|
|
Beim Auswählen schließt sich das Sheet und aktualisiert den State in View B(Context Bar).
|
|
|
|
D.Die Result Card(The Reward)
|
|
|
|
Nach dem Speichern(Transition: Fade out Editor -> Fade in Card):
|
|
|
|
Zeige eine "Trading Card" im 9: 16 Verhältnis, zentriert.
|
|
|
|
Inhalt:
|
|
|
|
Großes Foto der Flasche mit Vignette.
|
|
|
|
Ein Radar Chart(Spider Web) für die 5 Geschmacksprofile(Nose, Taste, Finish, Balance, Complexity).
|
|
|
|
Ein "Badge" oben rechts mit dem Score(z.B. 8.5).
|
|
|
|
Action: Ein Button "Share Image" unter der Karte. (Logik: Bereite navigator.share vor).
|
|
|
|
3. Technische Anforderungen & State
|
|
|
|
Nutze einen lokalen State(oder Context), um die Daten zwischen Editor und Result zu halten.
|
|
|
|
Mocke die "AI Response"(Flaschenerkennung) mit einem festen Datensatz(JSON), damit wir das UI testen können.
|
|
|
|
Achte auf Mobile - Viewport - Height(dvh), damit Safari - Bars nichts verdecken.
|
|
|
|
Wenn du etwas schon hast pass es an und integriere es in den neuen Flow
|
|
|