robin
cf491d83b6
- 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
117 lines
4.4 KiB
Plaintext
117 lines
4.4 KiB
Plaintext
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).
|
|
|
|
Tech Stack: React, Tailwind CSS, Lucide - React Icons.
|
|
1. Globales Design - System(Anwenden auf alle Views)
|
|
|
|
Branding: App Name ist "DramLog".
|
|
|
|
Farben:
|
|
|
|
Background: #0F1014(Deep Rich Black)
|
|
|
|
Surface: #1A1B20(Card Backgrounds)
|
|
|
|
Primary Accent: #C89D46(Whisky Amber / Gold)
|
|
|
|
Text - Secondary: #8F9096
|
|
|
|
Typografie:
|
|
|
|
Importiere und nutze Playfair Display(Serif) für: Überschriften(h1 - h3), Whisky - Namen auf Cards.
|
|
|
|
Nutze Inter(Sans) für: UI - Elemente, Labels, Fließtext, Daten.
|
|
|
|
Shape: rounded - 2xl für Cards, rounded - full für Buttons.
|
|
|
|
2. Spezifische Component Refactorings
|
|
|
|
A.Dashboard(Home View):
|
|
|
|
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.
|
|
|
|
Benenne "Dein Bestand" um in "Collection".
|
|
|
|
Mache die Listen - Einträge unter "Tasting Sessions" interaktiv.Entferne die sichtbaren Trash / Edit Buttons und nutze ein sauberes Listen - Layout.
|
|
|
|
B.Whisky Card(Collection Grid):
|
|
|
|
Redesign der Card - Komponente.
|
|
|
|
Bild: Muss bis an den Rand gehen(w - full, kein Padding).
|
|
|
|
Overlay: Lege einen bg - gradient - to - t from - black via - black / 80 to - transparent über das untere Drittel des Bildes.
|
|
|
|
Text: Platziere Name(Serif) und Destillerie(Sans, Uppercase, Gold) weiß auf dem Bild im unteren Bereich(über dem Gradient).
|
|
|
|
Tags: Mache Tags minimalistisch(bg - white / 10 backdrop - blur - sm text - xs border border - white / 10).
|
|
|
|
3. Die "Floating" Navigation(Core Feature)
|
|
|
|
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
|
|
|
|
// Reference Implementation for BottomNavigation.jsx
|
|
import { Home, Grid, Scan, User, Search } from 'lucide-react';
|
|
|
|
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" >
|
|
|
|
<div className="flex justify-between items-end px-6 h-16" >
|
|
|
|
{/* 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>
|
|
|
|
< 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>
|
|
|
|
{/* Spacer für den Center Button */ }
|
|
<div className="w-16" />
|
|
|
|
{/* 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>
|
|
|
|
< 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>
|
|
|
|
{/* 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>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Aufgabe:
|
|
|
|
Implementiere das globale Styling(Fonts / Colors).
|
|
|
|
Baue die BottomNavigation ein(ersetze alte Navs).
|
|
|
|
Passe die Dashboard View an den neuen "Clean Look" an.
|
|
|
|
Passe die WhiskyCard an den neuen "Editorial Look" an. |