smacksandClaude Sonnet 4.6
86fbd8e4bb
All content (recipes + imprint/privacy settings) now lives exclusively in Postgres. The app no longer requires a seed step on first deploy. Changes: - helpers.php: load_site_settings() returns defaults when site_settings table is empty instead of throwing DatabaseUnavailableException; removes legacy JSONB migration path - data/recipes.json, data/site.json: deleted (content already in DB) - scripts/db-seed.php: deleted (no longer needed) - docker-compose.yml: remove RUN_DB_SEED env var and data/ volume mount - docker/entrypoint.sh: remove RUN_DB_SEED seed block - docs/COOLIFY.md: update deployment guide to reflect seedless workflow - .claude/launch.json: add dev server configurations for preview tool Fresh deploys now start with placeholder legal pages and an empty recipe list; the admin fills in real content via /admin.php without any CLI step. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
152 lines
8.8 KiB
Markdown
152 lines
8.8 KiB
Markdown
# FlixCooks Development Roadmap & Tasks
|
||
|
||
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.
|
||
|
||
---
|
||
|
||
## 🚀 Übersicht der Entwicklungsphasen
|
||
|
||
- [x] **Phase 1: UI/UX Rebase & Globales Design-System (Fundament)**
|
||
- Globale CSS-Tokens & Farbpaletten-Setup
|
||
- Atmosphärischer Stein-Hintergrund (`AuraMarbleBackground`)
|
||
- Fullscreen Overlay-Navigation (`LiquidOverlayMenu` & `SlideUpTextHover`)
|
||
- Geschmeidiges Scrollverhalten (`LenisSmoothScroll` & `IndexSectionIndicator`)
|
||
- Layout-Raster (`FloemaLayoutGrid`) & Premium-Buttons
|
||
- [x] **Phase 2: Profil & Personalisierung (lokal)**
|
||
- Ernährungsziel & Favoriten im Browser (`fc-local.js`)
|
||
- Newsletter per Mailto
|
||
- Profilseite `login.php`
|
||
- [x] **Phase 3: Nährwerte & Rezepterweiterung**
|
||
- Datenmodell & Admin.php Erweiterung
|
||
- Visuelles Nährwert-Widget (Floema-Präzision)
|
||
- Makro-/Diät-Filter & Kategorisierung
|
||
- [x] **Phase 4: Interaktiver Step-by-Step Rezept-Assistent**
|
||
- Admin-Erweiterung für Step-Videos
|
||
- Fullscreen Cooking-Mode Overlay (mit Lenis scroll lock)
|
||
- Timers & Looping Video Players pro Zubereitungsschritt
|
||
- [x] **Phase 5: Sleek Swipe Discovery (Personalisiertes Empfehlungskarussell)**
|
||
- Touch-Swipe-Karussell direkt auf index.php (unter Landing-Page)
|
||
- Filteralgorithmus nach Benutzer-Ernährungszielen
|
||
- Mikro-Animationen & Quick-Save Funktion
|
||
- [x] **Phase 6: PostgreSQL Datenbank**
|
||
- `DATABASE_URL` in `.env`, Docker Compose für lokale Dev-DB
|
||
- `init_db()` / `save_recipe()` / `save_site_settings()` in `helpers.php`
|
||
- Kein JSON-Fallback; Rezepte und Site-Daten liegen in Postgres
|
||
|
||
---
|
||
|
||
## 🛠️ 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] **Globale Token-Etablierung**
|
||
- [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)
|
||
|
||
---
|
||
|
||
### 🔒 Phase 2: Profil & Personalisierung (lokal)
|
||
Favoriten, Ernährungsziel und Newsletter ohne Cloud-Backend.
|
||
|
||
- [x] **Profilseite `login.php`**
|
||
- [x] Ernährungsziel wählen und in `localStorage` speichern (`fc-local.js`)
|
||
- [x] Gespeicherte Favoriten anzeigen
|
||
- [x] **Favoriten-Funktion (Rezept-Bookmarks)**
|
||
- [x] Herz-Icon auf Karten, Speicherung in `localStorage`
|
||
- [x] Mikro-Animationen für das Herz-Icon
|
||
- [x] **Newsletter**
|
||
- [x] Footer-Formular mit `mailto:`-Weiterleitung
|
||
|
||
---
|
||
|
||
### 🥗 Phase 3: Nährwerte & Rezepterweiterung
|
||
Jedes Rezept erhält präzise Makronährstoffe (Kalorien, Proteine, Kohlenhydrate, Fette), die vom Admin gepflegt und dem Nutzer edel präsentiert werden.
|
||
|
||
- [x] **Datenmodell & Admin-Panel Erweiterung**
|
||
- [x] Rezeptstruktur um `nutrition` (`calories`, `protein`, `carbs`, `fat`) erweitern
|
||
- [x] `admin.php` Formular erweitern:
|
||
- [x] Eingabefeld für Kalorien (kcal)
|
||
- [x] Eingabefeld für Eiweiß / Protein (g)
|
||
- [x] Eingabefeld für Kohlenhydrate (g)
|
||
- [x] Eingabefeld für Fett (g)
|
||
- [x] Validierung & Speicherung der Nährwertdaten in `admin.php` absichern
|
||
- [x] **Premium Nährwert-Widget (`recipe.php`)**
|
||
- [x] Layout-Integration basierend auf dem `FloemaLayoutGrid` (24-Spalten-Asymmetrie)
|
||
- [x] Visuelle Visualisierung der Makroverteilung (z. B. feine kreisförmige SVG-Fortschrittsanzeigen oder elegante horizontale Balken in Gold `var(--color-accent-gold)`)
|
||
- [x] Hover- und Lade-Mikroanimationen für die Diagramme (Wachstumseffekt mit `var(--ease-out-expo)`)
|
||
- [x] Tooltips mit Prozentangaben am Tagesbedarf
|
||
|
||
---
|
||
|
||
### ⏱️ Phase 4: Interaktiver Step-by-Step Rezept-Assistent
|
||
Ein immersiver Kochmodus, der Anwendern Schritt-für-Schritt durch die Zubereitung führt – inklusive Videoanleitungen und integrierten Timern.
|
||
|
||
- [x] **Video-Verknüpfung im Admin-Panel**
|
||
- [x] Rezeptstruktur erweitern, damit jeder Arbeitsschritt (`steps`) eine optionale `video_url` (externe MP4-URL) besitzen kann
|
||
- [x] `admin.php` erweitern, um Video-URLs pro Einzelschritt einzugeben
|
||
- [x] **Fullscreen Cooking-Mode Overlay**
|
||
- [x] Trigger-Button "Kochmodus starten" (`CapitoliumRevealButton` Stil) auf `recipe.php` einbauen
|
||
- [x] Fullscreen Overlay mit flüssigem `clip-path` Öffnungseffekt (analog zu `LiquidOverlayMenu`)
|
||
- [x] Lenis Scroll-Lock während der Kochmodus aktiv ist, um störendes Scrollen im Hintergrund zu verhindern
|
||
- [x] **Interaktives Koch-Interface**
|
||
- [x] Schritt-für-Schritt Slider/Karussell (Tastatur- & Touch-Navigation)
|
||
- [x] Fortschrittsanzeige (z.B. "Schritt 3 von 8" + Fortschrittsbalken)
|
||
- [x] Autolooping Video-Player: Zeigt das Kurzvideo zum aktuellen Zubereitungsschritt, stummgeschaltet und nahtlos wiederholend
|
||
- [x] Integrierte Koch-Timer: Falls im Schritt eine Zeit angegeben ist, wird automatisch ein interaktiver Timer mit Start/Pause/Reset und akustischem Endsignal eingebunden
|
||
|
||
---
|
||
|
||
### 🎡 Phase 5: Sleek Swipe Discovery (Empfehlungskarussell)
|
||
Ein hochgradig interaktives, touch-freundliches Karussell direkt auf der Startseite, das Nutzern Rezepte basierend auf ihren Zielen empfiehlt.
|
||
|
||
- [x] **Karussell-Architektur & Integration**
|
||
- [x] Touch-Swipe Karussell Container direkt unter der Landing-Page (vor `#basics`) auf `index.php` einbetten
|
||
- [x] CSS-Klammern (`clamp()`) für responsive Skalierung der Karten
|
||
- [x] Flüssiges Einblenden per Scroll-Reveal (`reveal-target`) mit Anbindung an `LenisSmoothScroll`
|
||
- [x] **Personalisiertes Goal-Matching**
|
||
- [x] Ernährungsziel aus `localStorage` (`fc-local.js`) für Karussell-Filter
|
||
- [x] Rezepte dynamisch filtern (z.B. High-Protein Rezepte bei Ziel "Muskelaufbau", Low-Carb Rezepte bei Ziel "Abnehmen")
|
||
- [x] Personalisierte "Für dich empfohlen"-Badge auf den Karten anzeigen
|
||
- [x] **Mikro-Interaktionen & Quick-Save**
|
||
- [x] Touch-Gesten-Unterstützung (Wischen zum Blättern mit sanftem Trägheits-Feedback)
|
||
- [x] Quick-Save Button direkt auf den Karussell-Karten (Herzeffekt, `localStorage`)
|
||
- [x] Hover-Reveal-Effekte für Rezeptdetails (Zutaten-Vorschau oder Kochzeit-Highlight schiebt sich weich hoch)
|
||
|
||
---
|
||
|
||
### 🔥 Phase 6: PostgreSQL Datenbank
|
||
Rezepte und Site-Daten in normalisierten Postgres-Tabellen, optional lokal per Docker.
|
||
|
||
- [x] **`DATABASE_URL` & Docker Compose**
|
||
- [x] `docker-compose.dev.yml` für lokale Postgres-Instanz
|
||
- [x] `init_db()` legt Tabellen an; `scripts/db-seed.php` seedet aus `scripts/seed-data.php`
|
||
- [x] **PHP-Datenzugriff**
|
||
- [x] `load_recipes()` / `save_recipe()` ohne JSON-Fallback
|
||
- [x] `load_recipe_by_slug()` in `recipe.php`
|
||
|
||
---
|
||
|
||
## 📈 Status-Legende
|
||
- `[ ]` Noch nicht begonnen
|
||
- `[/]` In Bearbeitung
|
||
- `[x]` Erfolgreich abgeschlossen
|