smacks/flixcooks-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4fe45e4e53f4bd7122acb500e8c5f8197314b4a9
flixcooks-website/.agents/TODO.md
T
smacksandClaude Sonnet 4.6 86fbd8e4bb Remove static JSON files and seed step; migrate site settings to Postgres 
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>
2026-06-18 09:53:39 +02:00

8.8 KiB
Raw Blame History

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: Profil & Personalisierung (lokal)
    • Ernährungsziel & Favoriten im Browser (fc-local.js)
    • Newsletter per Mailto
    • Profilseite login.php
  • 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
  • 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.

  • 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 → Playfair Display + Manrope
  • 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.
  • CapitoliumPreloader (Landing Page Ladebildschirm mit Fortschrittsbalken)
  • 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.

  • Profilseite login.php
    • Ernährungsziel wählen und in localStorage speichern (fc-local.js)
    • Gespeicherte Favoriten anzeigen
  • Favoriten-Funktion (Rezept-Bookmarks)
    • Herz-Icon auf Karten, Speicherung in localStorage
    • Mikro-Animationen für das Herz-Icon
  • Newsletter
    • 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.

  • Datenmodell & Admin-Panel Erweiterung
    • Rezeptstruktur um nutrition (calories, protein, carbs, fat) erweitern
    • 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 erweitern, damit jeder Arbeitsschritt (steps) eine optionale video_url (externe MP4-URL) 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
    • Ernährungsziel aus localStorage (fc-local.js) für Karussell-Filter
    • 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, localStorage)
    • 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.

  • DATABASE_URL & Docker Compose
    • docker-compose.dev.yml für lokale Postgres-Instanz
    • init_db() legt Tabellen an; scripts/db-seed.php seedet aus scripts/seed-data.php
  • PHP-Datenzugriff
    • load_recipes() / save_recipe() ohne JSON-Fallback
    • load_recipe_by_slug() in recipe.php

📈 Status-Legende

  • [ ] Noch nicht begonnen
  • [/] In Bearbeitung
  • [x] Erfolgreich abgeschlossen
Reference in New Issue View Git Blame Copy Permalink