diff --git a/AGENT.md b/AGENT.md index 2b8f5ce..dad1936 100644 --- a/AGENT.md +++ b/AGENT.md @@ -1,5 +1,28 @@ -## Workflow +## Branching & Conflict Resolution Strategy (GitHub Flow) -- After every chat response that includes code or content changes, make a git commit describing the work. -- Keep commits small and scoped to the edits made in that conversation. -- Do not defer commits; commit as soon as the edits are complete. +This project strictly follows the **GitHub Flow**. All development happens in short-lived feature branches branched off from `main`. Direct commits to `main` are prohibited. + +### 1. Development Workflow +1. **Branch Creation:** Create a descriptive branch from the latest `main` state: + `git checkout main && git pull && git checkout -b feature/your-feature-name` +2. **Atomic Commits:** Make small, logical, and self-contained commits. +3. **Push & Pull Request:** Push the branch and open a Pull Request (PR) against `main` for review. + +### 2. Merge Conflict Policy +When multiple features are developed simultaneously, `main` might advance before your PR is merged, causing a merge conflict. **The author of the pending PR is solely responsible for resolving conflicts.** + +#### Resolution Procedure: +Never force-push blindly or overwrite other developers' work without understanding it. Follow these exact steps to resolve a conflict: + +1. **Fetch Latest Main:** Update your local repository's main branch: + ```bash + git checkout main + git pull origin main + +### 3. Documentation Update + +.md Files die nichts an der Integrität oder Impact der Codebase beiwirken sollen als einfacher Commit in Main behandelt werden. + +## Project Management + +- The Current Development Progress is tracked and marked down and always updated in the File `TODO.md` \ No newline at end of file diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..5421adc --- /dev/null +++ b/TODO.md @@ -0,0 +1,142 @@ +# 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 + +- [ ] **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 +- [ ] **Phase 2: Authentifizierung & Firebase Integration** + - Firebase-Projekt Setup & Anbindung + - Newsletter-System (Firebase Firestore) + - Benutzerprofile (Registrierung, Login, Favoriten) +- [ ] **Phase 3: Nährwerte & Rezepterweiterung** + - Datenmodell & Admin.php Erweiterung + - Visuelles Nährwert-Widget (Floema-Präzision) + - Makro-/Diät-Filter & Kategorisierung +- [ ] **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 +- [ ] **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 + +--- + +## 🛠️ 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. + +- [ ] **Globale Token-Etablierung** + - [ ] 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`). + - [ ] Schriftarten einbinden (Serifen-Pracht für Überschriften, cleanes Inter für Lesbarkeit) in `partials/head.php`. +- [ ] **Atmosphärische Grundlagen** + - [ ] `AuraMarbleBackground` implementieren: Dezente Stein-Textur mit Mix-Blend-Mode und optionalem SVG-Papier-Rauschen (Noise) auf allen PHP/HTML Seiten im Hintergrund verankern. + - [ ] Skalierungen für alle Paddings, Margins und Schriften mittels CSS `clamp()` definieren, um stufenlose Responsivität (Mobile bis 4K) zu garantieren. +- [ ] **Asymmetrisches Layout-Raster** + - [ ] Das modulare 24-Spalten-Raster (`FloemaLayoutGrid`) in den Haupt-Templates (`index.php`, `recipe.php`) integrieren. + - [ ] Bestehende Rezeptkarten und Detailblöcke an das neue Grid anpassen. +- [ ] **High-End Navigation & Header** + - [ ] Den bestehenden Header zu `LiquidOverlayMenu` umbauen: Hamburger-Button morpht weich zum Schließen-Kreuz. + - [ ] Vollbild-Navigationsmenü mit geschmeidigem `clip-path` (von oben nach unten gleitend) implementieren. + - [ ] Menü-Links mit dem animierten `SlideUpTextHover` (Text verdoppelt und verschiebt sich beim Hover) ausstatten. +- [ ] **Flüssige Scroll-Erfahrung** + - [ ] `LenisSmoothScroll` (CDN) im Footer/Head einbinden und initialisieren für samtweiches Scrollverhalten. + - [ ] Seitliche Fortschrittsanzeige (`IndexSectionIndicator`) auf `index.php` integrieren, um aktuelle Scroll-Position und Sektionsnamen elegant anzuzeigen. +- [ ] **Premium Mikro-Interaktionen** + - [ ] Primäre Buttons auf den Reveal-Effekt von `CapitoliumRevealButton` umstellen (von unten aufsteigende Gold-Fläche + Spationierungseffekt beim Hover). + - [ ] Textlinks mit der anwachsenden Unterstreichung von `UnderlineExpandHover` versehen. + +--- + +### 🔒 Phase 2: Authentifizierung & Firebase Integration +Das Fundament für Personalisierung und Newsletter-Abos über eine sichere Firebase-Anbindung (Auth & Firestore). + +- [ ] **Firebase Setup & Initialisierung** + - [ ] Firebase SDK Client-Side Einbindung in `partials/head.php` oder separaten Helper + - [ ] Firebase Config in umweltabhängigen Settings/Variablen auslagern + - [ ] Firestore-Datenbank initialisieren (`subscribers` und `users` Collections) +- [ ] **Premium Login- & Registrierungsseite** + - [ ] Erstellung der Seite `login.php` (und optional `signup.php`) im neuen Design-System-Stil + - [ ] Firebase Authentication (Email/Passwort Login & Registrierung) implementieren + - [ ] Responsive UI mit sanften Error- & Success-Meldungen und Eingabefeldern im Glasmorphismus-Look + - [ ] Client-seitige und Server-seitige Session-Synchronisation (z.B. Firebase Session Tokens an PHP-Session via Ajax senden) +- [ ] **Favoriten-Funktion (Rezept-Bookmarks)** + - [ ] Firestore-Collection `user_favorites` anlegen (Format: `userId` -> Liste von `recipeSlugs`) + - [ ] "Rezept speichern" Button (Herz-Icon) auf den Rezeptkarten und Rezept-Details mit dynamischem Login-Check + - [ ] Mikro-Animationen für das Herz-Icon (Scale up/down, Fülleffekte mit `var(--ease-overshoot)`) +- [ ] **Firebase-gestütztes Newsletter-Abo** + - [ ] Newsletter-Eingabefeld im Footer (`partials/footer.php`) implementieren + - [ ] AJAX-Submit-Handler: E-Mail-Adresse prüfen und in Firestore Collection `subscribers` speichern + - [ ] Elegantes Feedback-UI (Erfolgsmeldung ohne Page-Reload) + +--- + +### 🥗 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. + +- [ ] **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)`) + - [ ] 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. + +- [ ] **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 +- [ ] **Fullscreen Cooking-Mode Overlay** + - [ ] Trigger-Button "Kochmodus starten" (`CapitoliumRevealButton` Stil) auf `recipe.php` einbauen + - [ ] Fullscreen Overlay mit flüssigem `clip-path` Öffnungseffekt (analog zu `LiquidOverlayMenu`) + - [ ] Lenis Scroll-Lock während der Kochmodus aktiv ist, um störendes Scrollen im Hintergrund zu verhindern +- [ ] **Interaktives Koch-Interface** + - [ ] Schritt-für-Schritt Slider/Karussell (Tastatur- & Touch-Navigation) + - [ ] Fortschrittsanzeige (z.B. "Schritt 3 von 8" + Fortschrittsbalken) + - [ ] 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 + +--- + +### 🎡 Phase 5: Sleek Swipe Discovery (Empfehlungskarussell) +Ein hochgradig interaktives, touch-freundliches Karussell direkt auf der Startseite, das Nutzern Rezepte basierend auf ihren Zielen empfiehlt. + +- [ ] **Karussell-Architektur & Integration** + - [ ] Touch-Swipe Karussell Container direkt unter der Landing-Page (vor `#basics`) auf `index.php` einbetten + - [ ] CSS-Klammern (`clamp()`) für responsive Skalierung der Karten + - [ ] Flüssiges Einblenden per Scroll-Reveal (`reveal-target`) mit Anbindung an `LenisSmoothScroll` +- [ ] **Personalisiertes Goal-Matching** + - [ ] Falls der Benutzer eingeloggt ist, sein Ernährungsziel aus den Firebase-Profildaten abrufen + - [ ] Rezepte dynamisch filtern (z.B. High-Protein Rezepte bei Ziel "Muskelaufbau", Low-Carb Rezepte bei Ziel "Abnehmen") + - [ ] Personalisierte "Für dich empfohlen"-Badge auf den Karten anzeigen +- [ ] **Mikro-Interaktionen & Quick-Save** + - [ ] Touch-Gesten-Unterstützung (Wischen zum Blättern mit sanftem Trägheits-Feedback) + - [ ] Quick-Save Button direkt auf den Karussell-Karten (Herzeffekt mit direktem Firebase Firestore Sync) + - [ ] Hover-Reveal-Effekte für Rezeptdetails (Zutaten-Vorschau oder Kochzeit-Highlight schiebt sich weich hoch) + +--- + +## 📈 Status-Legende +- `[ ]` Noch nicht begonnen +- `[/]` In Bearbeitung +- `[x]` Erfolgreich abgeschlossen