Migration nach Antigravity, planung und agent.md angepasst
This commit is contained in:
@@ -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.
|
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.
|
||||||
- Keep commits small and scoped to the edits made in that conversation.
|
|
||||||
- Do not defer commits; commit as soon as the edits are complete.
|
### 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`
|
||||||
@@ -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
|
||||||
Reference in New Issue
Block a user