Dieses Dokument enthält den aktuellen Entwicklungsstand und detaillierte Aufgabenlisten für die neuen Premium-Features von **FlixCooks**. Die Entwicklung erfolgt in Phasen, aufgeteilt in atomare, überprüfbare Arbeitsschritte.
- Touch-Swipe-Karussell direkt auf index.php (unter Landing-Page)
- Filteralgorithmus nach Benutzer-Ernährungszielen
- Mikro-Animationen & Quick-Save Funktion
---
## 🛠️ Detaillierte Checklisten
### 🎨 Phase 1: UI/UX Rebase & Globales Design-System
Das visuelle Fundament der Website. Die Etablierung des Premium-Designs stellt sicher, dass alle darauffolgenden Phasen direkt im finalen Look entwickelt werden können.
- [x] CSS-Variablen in `assets/style.css` auf Basis der edlen Capitolium- & Floema-Farbpalette definieren (Creme-Elfenbein `--color-bg-light`, Steinkohle-Braun `--color-bg-dark`, Gold `--color-accent-gold`, Terracotta `--color-terracotta`).
- [x] Schriftarten einbinden (Serifen-Pracht für Überschriften, cleanes Inter für Lesbarkeit) in `partials/head.php` → Playfair Display + Manrope
- [x]**Atmosphärische Grundlagen**
- [x]`AuraMarbleBackground` implementieren: Dezente Stein-Textur mit Mix-Blend-Mode und optionalem SVG-Papier-Rauschen (Noise) auf allen PHP/HTML Seiten im Hintergrund verankern.
- [x] Skalierungen für alle Paddings, Margins und Schriften mittels CSS `clamp()` definieren, um stufenlose Responsivität (Mobile bis 4K) zu garantieren.
- [x]**Asymmetrisches Layout-Raster**
- [x] Das modulare 24-Spalten-Raster (`FloemaLayoutGrid`) in den Haupt-Templates (`index.php`, `recipe.php`) integrieren.
- [x] Bestehende Rezeptkarten und Detailblöcke an das neue Grid anpassen.
- [x]**High-End Navigation & Header**
- [x] Den bestehenden Header zu `LiquidOverlayMenu` umbauen: Hamburger-Button morpht weich zum Schließen-Kreuz.
- [x] Vollbild-Navigationsmenü mit geschmeidigem `clip-path` (von oben nach unten gleitend) implementieren.
- [x] Menü-Links mit dem animierten `SlideUpTextHover` (Text verdoppelt und verschiebt sich beim Hover) ausstatten.
- [x]**Flüssige Scroll-Erfahrung**
- [x]`LenisSmoothScroll` (CDN) im Footer/Head einbinden und initialisieren für samtweiches Scrollverhalten.
- [x] Seitliche Fortschrittsanzeige (`IndexSectionIndicator`) auf `index.php` integrieren, um aktuelle Scroll-Position und Sektionsnamen elegant anzuzeigen.
- [x]**Premium Mikro-Interaktionen**
- [x] Primäre Buttons auf den Reveal-Effekt von `CapitoliumRevealButton` umstellen (von unten aufsteigende Gold-Fläche + Spationierungseffekt beim Hover).
- [x] Textlinks mit der anwachsenden Unterstreichung von `UnderlineExpandHover` versehen.
- [x]**CapitoliumPreloader** (Landing Page Ladebildschirm mit Fortschrittsbalken)
- [x]**Recipe Showcase Stage** (GSAP ScrollTrigger Bühnenpräsentation: Bilder von rechts → Mitte → links)
Jedes Rezept erhält präzise Makronährstoffe (Kalorien, Proteine, Kohlenhydrate, Fette), die vom Admin gepflegt und dem Nutzer edel präsentiert werden.
- [ ]**Datenmodell & Admin-Panel Erweiterung**
- [ ]`data/recipes.json` Struktur anpassen: Hinzufügen von `nutrition` (`calories`, `protein`, `carbs`, `fat`)
- [ ]`admin.php` Formular erweitern:
- [ ] Eingabefeld für Kalorien (kcal)
- [ ] Eingabefeld für Eiweiß / Protein (g)
- [ ] Eingabefeld für Kohlenhydrate (g)
- [ ] Eingabefeld für Fett (g)
- [ ] Validierung & Speicherung der Nährwertdaten in `admin.php` absichern
- [ ]**Premium Nährwert-Widget (`recipe.php`)**
- [ ] Layout-Integration basierend auf dem `FloemaLayoutGrid` (24-Spalten-Asymmetrie)
- [ ] Visuelle Visualisierung der Makroverteilung (z. B. feine kreisförmige SVG-Fortschrittsanzeigen oder elegante horizontale Balken in Gold `var(--color-accent-gold)`)
- [ ] Hover- und Lade-Mikroanimationen für die Diagramme (Wachstumseffekt mit `var(--ease-out-expo)`)
Ein immersiver Kochmodus, der Anwendern Schritt-für-Schritt durch die Zubereitung führt – inklusive Videoanleitungen und integrierten Timern.
- [ ]**Video-Verknüpfung im Admin-Panel**
- [ ] Rezeptstruktur in `data/recipes.json` erweitern, damit jeder Arbeitsschritt (`steps`) eine optionale `video_url` (MP4 aus Firebase Storage oder extern) besitzen kann
- [ ]`admin.php` erweitern, um Video-URLs pro Einzelschritt einzugeben
- [ ] Autolooping Video-Player: Zeigt das Kurzvideo zum aktuellen Zubereitungsschritt, stummgeschaltet und nahtlos wiederholend
- [ ] Integrierte Koch-Timer: Falls im Schritt eine Zeit angegeben ist, wird automatisch ein interaktiver Timer mit Start/Pause/Reset und akustischem Endsignal eingebunden
