DramLog UI Overhaul: Rebranding, Navigation Improvements, and Scan Workflow Fixes
- Renamed app to DramLog and updated branding to Gold (#C89D46) - Implemented new BottomNavigation with Floating Scan Button - Fixed 'black screen' race condition in ScanAndTasteFlow - Refactored TastingEditor and StatsDashboard for a cleaner editorial look - Standardized colors and typography across the application
This commit is contained in:
149
.aiideas
149
.aiideas
@@ -1,110 +1,117 @@
|
||||
Rolle: Du bist ein Senior Frontend Engineer(React / Tailwind) und UI / UX Designer.Ziel: Wir machen ein umfassendes UI - Overhaul einer bestehenden Whisky - App("WhiskyVault") und benennen sie um in "DramLog".Das Ziel ist eine Premium - Mobile - Experience(Dark Mode, Gold Akzente, Serif Fonts).
|
||||
|
||||
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.
|
||||
Tech Stack: React, Tailwind CSS, Lucide - React Icons.
|
||||
1. Globales Design - System(Anwenden auf alle Views)
|
||||
|
||||
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.
|
||||
Branding: App Name ist "DramLog".
|
||||
|
||||
Tech Stack(Anpassen falls nötig):
|
||||
Farben:
|
||||
|
||||
Framework: Next.js(Bitte nutze den bestehenden Stack der App)
|
||||
Background: #0F1014(Deep Rich Black)
|
||||
|
||||
Styling: Tailwind CSS
|
||||
Surface: #1A1B20(Card Backgrounds)
|
||||
|
||||
Icons: Lucide - React oder HeroIcons
|
||||
Primary Accent: #C89D46(Whisky Amber / Gold)
|
||||
|
||||
Charts: Recharts oder Chart.js(für das Radar Chart)
|
||||
Text - Secondary: #8F9096
|
||||
|
||||
Animation: Framer Motion(für Transitions)
|
||||
Typografie:
|
||||
|
||||
1. Design System & Vibe
|
||||
Importiere und nutze Playfair Display(Serif) für: Überschriften(h1 - h3), Whisky - Namen auf Cards.
|
||||
|
||||
Theme: Strict Dark Mode.
|
||||
Nutze Inter(Sans) für: UI - Elemente, Labels, Fließtext, Daten.
|
||||
|
||||
Background: #0F1014(Deep Anthracite / Black)
|
||||
Shape: rounded - 2xl für Cards, rounded - full für Buttons.
|
||||
|
||||
Surface / Cards: #1A1B20(Lighter Anthracite)
|
||||
2. Spezifische Component Refactorings
|
||||
|
||||
Primary Accent: #C89D46(Whisky Gold / Amber)
|
||||
A.Dashboard(Home View):
|
||||
|
||||
Text: Sans - Serif(Inter) für UI, Serif(Playfair Display) für Überschriften / Namen.
|
||||
Entferne die grauen Hintergründe der 4 oberen Statistik - Boxen.Zeige die Werte(Zahlen) groß in Playfair Display(Weiß) und die Labels klein darunter(Grau).Ordne sie in einem Grid oder einer flex - row mit justify - between an.
|
||||
|
||||
Stil: "Premium & Warm".Runde Ecken(rounded - 2xl), Glassmorphism für Overlays(backdrop - blur - md, bg - white / 5), feine Borders(border - white / 10).
|
||||
Benenne "Dein Bestand" um in "Collection".
|
||||
|
||||
2. Der Flow(Schritt für Schritt Implementierung)
|
||||
Mache die Listen - Einträge unter "Tasting Sessions" interaktiv.Entferne die sichtbaren Trash / Edit Buttons und nutze ein sauberes Listen - Layout.
|
||||
|
||||
Bitte implementiere folgende Views / Components als zusammenhängenden Flow:
|
||||
A.Der Entry Point(Floating Action Button)
|
||||
B.Whisky Card(Collection Grid):
|
||||
|
||||
Erstelle einen prominenten, schwebenden Button(unten mittig, fixed), der über dem Dashboard liegt.
|
||||
Redesign der Card - Komponente.
|
||||
|
||||
Icon: Kamera - Symbol.
|
||||
Bild: Muss bis an den Rand gehen(w - full, kein Padding).
|
||||
|
||||
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.
|
||||
Overlay: Lege einen bg - gradient - to - t from - black via - black / 80 to - transparent über das untere Drittel des Bildes.
|
||||
|
||||
B.Der Tasting Editor(Main Component)
|
||||
Text: Platziere Name(Serif) und Destillerie(Sans, Uppercase, Gold) weiß auf dem Bild im unteren Bereich(über dem Gradient).
|
||||
|
||||
Dies ist der wichtigste Screen.Layout - Struktur:
|
||||
Tags: Mache Tags minimalistisch(bg - white / 10 backdrop - blur - sm text - xs border border - white / 10).
|
||||
|
||||
Top Bar(Sticky):
|
||||
3. Die "Floating" Navigation(Core Feature)
|
||||
|
||||
Zeige einen "Context Indicator".
|
||||
Erstelle eine neue Komponente BottomNavigation.Sie ersetzt alle bisherigen Menüs.Sie muss am unteren Bildschirmrand fixiert sein.WICHTIG: Implementiere exakt dieses Layout - Pattern für den schwebenden Button:
|
||||
JavaScript
|
||||
|
||||
Logik: Zeige Text "Trinkst du in Gesellschaft? + Session wählen".
|
||||
// Reference Implementation for BottomNavigation.jsx
|
||||
import { Home, Grid, Scan, User, Search } from 'lucide-react';
|
||||
|
||||
Interaction: Klick öffnet ein Bottom Sheet(siehe C).Wenn eine Session gewählt wurde, zeige: "Session: [Name]".
|
||||
export const BottomNavigation = () => {
|
||||
return (
|
||||
<div className= "fixed bottom-0 left-0 w-full z-50" >
|
||||
{/* Background Container mit Glassmorphism */ }
|
||||
< div className = "relative bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/10 pb-safe pt-2" >
|
||||
|
||||
Hero Section:
|
||||
<div className="flex justify-between items-end px-6 h-16" >
|
||||
|
||||
Zeige das(gemockte) Foto der Flasche links.
|
||||
{/* Left Actions */ }
|
||||
< button className = "flex flex-col items-center gap-1 text-[#C89D46] w-12" >
|
||||
<Home size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Home </span>
|
||||
</button>
|
||||
|
||||
Rechts daneben: Name(Serif, Gold), Alter, ABV. (Mock Data: "Lagavulin 16, Islay, 43%").
|
||||
< button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
|
||||
<Grid size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Shelf </span>
|
||||
</button>
|
||||
|
||||
Form Section(Scrollable):
|
||||
{/* Spacer für den Center Button */ }
|
||||
<div className="w-16" />
|
||||
|
||||
Slider: Erstelle eine Custom - Komponente für "Nose", "Taste", "Finish".Nutze keine Zahlen - Inputs, sondern Range - Slider(0 - 100).
|
||||
{/* Right Actions */ }
|
||||
< button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
|
||||
<Search size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Search </span>
|
||||
</button>
|
||||
|
||||
Smart Tags(Wichtig!): Implementiere eine Chip - Auswahl.
|
||||
< button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
|
||||
<User size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Profile </span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Design: "Ghost Button" Style(transparenter BG, feiner Border).
|
||||
{/* THE FLOATING MAGIC BUTTON */ }
|
||||
<div className="absolute -top-8 left-1/2 -translate-x-1/2" >
|
||||
<button
|
||||
className="flex items-center justify-center w-16 h-16 rounded-full
|
||||
bg - gradient - to - tr from - [#C89D46] to - [#E0B456]
|
||||
shadow - [0_0_20px_rgba(200, 157, 70, 0.4)]
|
||||
border - 4 border - [#0F1014]
|
||||
active: scale - 95 transition - transform duration - 200"
|
||||
aria - label="Scan Bottle"
|
||||
>
|
||||
<Scan color="#0F1014" size = { 32} strokeWidth = { 2} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Active State: Füllt sich mit #C89D46(Gold), Text wird dunkel.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Data: Mocke AI - Vorschläge wie["Rauch", "Torf", "Jod", "Vanille"].
|
||||
Aufgabe:
|
||||
|
||||
Sticky Footer:
|
||||
Implementiere das globale Styling(Fonts / Colors).
|
||||
|
||||
Ein Button "Save Tasting"(Full Width), der immer sichtbar unten schwebt(z - index: 50).
|
||||
Baue die BottomNavigation ein(ersetze alte Navs).
|
||||
|
||||
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
|
||||
Passe die Dashboard View an den neuen "Clean Look" an.
|
||||
|
||||
Passe die WhiskyCard an den neuen "Editorial Look" an.
|
||||
Reference in New Issue
Block a user