smacks/flixcooks-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(phase-1): Premium design system, CapitoliumPreloader, IndexSectionIndicator, Recipe Showcase Stage

Browse Source 
- Full CSS rewrite: Warm Ivory/Gold/Steinkohle design tokens, Floema grid, easing library
- AuraMarbleBackground: fixed grain texture layer
- CapitoliumPreloader: fullscreen counter animation with slide-up exit
- LiquidOverlayMenu: fixed hamburger → fullscreen clip-path overlay with SlideUpTextHover nav links
- IndexSectionIndicator: fixed left-side section tracker with animated fill line
- Recipe Showcase Stage: GSAP ScrollTrigger pinned stage (images enter from right, exit left)
  with parallax inner-image effect, intro title, progress dots, hint line
- LenisSmoothScroll: CDN integration synced with GSAP ticker
- CapitoliumRevealButton: scaleY fill reveal on hover for all CTAs
- SlideUpTextHover: overlay nav links
- UnderlineExpandHover: footer + overlay footer links
- head.php: GSAP 3.12.5 + ScrollTrigger + Lenis 1.0.42 CDN; Playfair Display + Manrope fonts
- recipe.php: updated to new design system (btn-reveal, pill--gold, Lenis init)
- impressum.php / datenschutz.php: migrated to shared head.php partial
This commit is contained in:
smacks
2026-05-21 11:52:40 +02:00
parent 025f41fd18
commit 6c00e1a00d
8 changed files with 2145 additions and 1176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+562 -133
View File
@@ -3,65 +3,96 @@ require __DIR__ . '/helpers.php';
// Language & inputs
$lang = strtolower((string) (filter_input(INPUT_GET, 'lang', FILTER_SANITIZE_FULL_SPECIAL_CHARS) ?: 'en')) === 'de' ? 'de' : 'en';
$q = trim((string) (filter_input(INPUT_GET, 'q', FILTER_UNSAFE_RAW) ?? ''));
$tag = trim((string) (filter_input(INPUT_GET, 'tag', FILTER_UNSAFE_RAW) ?? ''));
$q = trim((string) (filter_input(INPUT_GET, 'q', FILTER_UNSAFE_RAW) ?? ''));
$tag = trim((string) (filter_input(INPUT_GET, 'tag', FILTER_UNSAFE_RAW) ?? ''));
// Language copy
$copy = [
'en' => [
'home' => 'Home',
'latest' => 'Latest',
'basics' => 'Basics',
'eyebrow' => 'Seasonal, unfussy, ridiculously tasty.',
'headline' => 'Cook better <span>weeknights</span> and brighter <span>weekends</span>.',
'subhead' => 'Search for a craving, filter by vibe, or jump into this week\'s featured recipe.',
'home' => 'Home',
'latest' => 'Latest',
'basics' => 'Basics',
'eyebrow' => 'Seasonal · Unfussy · Ridiculously tasty.',
'search_placeholder' => 'Search for pasta, brunch, sauce...',
'search_button' => 'Search',
'tag_clear' => 'Clear',
'featured' => 'Featured',
'latest_drops' => 'Latest drops',
'count_suffix_default' => ' recipes ready to cook.',
'search_button' => 'Search',
'tag_clear' => 'Clear',
'featured' => 'Featured',
'latest_drops' => 'Latest drops',
'count_suffix_default' => ' recipes ready to cook.',
'count_suffix_filtered' => ' recipes matching your filter.',
'kitchen_basics' => 'Kitchen basics',
'basics_sub' => 'Quick wins that upgrade everything else.',
'servings' => 'servings',
'cook_it' => 'Cook it',
'coming_features' => 'Coming soon',
'coming_features_sub' => 'Features I’m shipping next.',
'kitchen_basics' => 'Kitchen basics',
'basics_sub' => 'Quick wins that upgrade everything else.',
'servings' => 'servings',
'cook_it' => 'Cook it',
'coming_features' => 'Coming soon',
'coming_features_sub'=> 'Features I\'m shipping next.',
'discover_title' => 'Find your next easy favorite.',
'discover_text' => 'Search, filter by tag, and jump into a recipe.',
'browse_tags' => 'Browse tags',
'quick_start_title' => 'Quick start',
'library_title' => 'Recipe library',
'library_text' => 'Every recipe, searchable and filterable.',
'stats_recipes' => 'live recipes',
'stats_average' => 'avg. total time',
'stats_tags' => 'browseable tags',
'empty_title' => 'No recipes found',
'empty_text' => 'Try another search term or clear the active tag.',
'view_recipe' => 'View recipe',
'stage_eyebrow' => 'Our Recipes',
'stage_title_1' => 'Handcrafted',
'stage_title_2' => 'dishes.',
'stage_scroll' => 'scroll',
'stage_of' => 'of',
],
'de' => [
'home' => 'Start',
'latest' => 'Neueste',
'basics' => 'Basics',
'eyebrow' => 'Saisonal, unkompliziert, richtig lecker.',
'headline' => 'Besser kochen unter der Woche, glänzen am Wochenende.',
'subhead' => 'Suche nach einem Gericht, filtere nach Stimmung oder starte mit dem Highlight der Woche.',
'home' => 'Start',
'latest' => 'Neueste',
'basics' => 'Basics',
'eyebrow' => 'Saisonal · Unkompliziert · Richtig lecker.',
'search_placeholder' => 'Suche nach Pasta, Brunch, Sauce...',
'search_button' => 'Suchen',
'tag_clear' => 'Zurücksetzen',
'featured' => 'Highlight',
'latest_drops' => 'Frisch dazugekommen',
'count_suffix_default' => ' Rezepte bereit zum Kochen.',
'search_button' => 'Suchen',
'tag_clear' => 'Zurücksetzen',
'featured' => 'Highlight',
'latest_drops' => 'Frisch dazugekommen',
'count_suffix_default' => ' Rezepte bereit zum Kochen.',
'count_suffix_filtered' => ' Rezepte passend zum Filter.',
'kitchen_basics' => 'Küchenbasics',
'basics_sub' => 'Kleine Tricks, die alles besser machen.',
'servings' => 'Portionen',
'cook_it' => 'Nachkochen',
'coming_features' => 'Demnächst',
'coming_features_sub' => 'Features, an denen ich gerade baue.',
'kitchen_basics' => 'Küchenbasics',
'basics_sub' => 'Kleine Tricks, die alles besser machen.',
'servings' => 'Portionen',
'cook_it' => 'Nachkochen',
'coming_features' => 'Demnächst',
'coming_features_sub'=> 'Features, an denen ich gerade baue.',
'discover_title' => 'Finde schnell dein nächstes Lieblingsrezept.',
'discover_text' => 'Suchen, nach Tag filtern und ins Rezept springen.',
'browse_tags' => 'Tags entdecken',
'quick_start_title' => 'Schnell starten',
'library_title' => 'Rezeptübersicht',
'library_text' => 'Alle Rezepte, durchsuchbar und filterbar.',
'stats_recipes' => 'Rezepte online',
'stats_average' => 'Ø Gesamtzeit',
'stats_tags' => 'durchsuchbare Tags',
'empty_title' => 'Keine Rezepte gefunden',
'empty_text' => 'Probiere einen anderen Suchbegriff oder entferne den aktiven Tag.',
'view_recipe' => 'Rezept ansehen',
'stage_eyebrow' => 'Unsere Rezepte',
'stage_title_1' => 'Handgefertigte',
'stage_title_2' => 'Gerichte.',
'stage_scroll' => 'scrollen',
'stage_of' => 'von',
],
];
$t = $copy[$lang];
$allRecipes = load_recipes();
$localizedAll = localize_recipes($allRecipes, $lang);
$recipes = filter_recipes($allRecipes, $q ?: null, $tag ?: null, $lang);
$recipes = array_values(array_filter($recipes, fn($r) => empty($r['coming_soon']))); // hide coming soon from main list
// Data
$allRecipes = load_recipes();
$localizedAll = localize_recipes($allRecipes, $lang);
$recipes = filter_recipes($allRecipes, $q ?: null, $tag ?: null, $lang);
$recipes = array_values(array_filter($recipes, fn($r) => empty($r['coming_soon'])));
$comingSoon = array_values(array_filter($localizedAll, fn($r) => !empty($r['coming_soon'])));
$comingSoon = array_values(array_filter($localizedAll, fn($r) => !empty($r['coming_soon'])));
$placeholderTitle = $lang === 'de' ? 'Bald verfügbar' : 'Coming soon';
$comingSoonDisplay = array_pad($comingSoon, 5, [
'hero' => '/assets/placeholder.svg',
'hero' => '/assets/placeholder.svg',
'title' => $placeholderTitle,
]);
@@ -78,11 +109,12 @@ $featured = $featured ? localize_recipe($featured, $lang) : null;
// Build tag cloud
$allTags = [];
foreach ($localizedAll as $recipe) {
foreach ($recipe['tags'] ?? [] as $tTag) {
$allTags[] = $tTag;
}
foreach ($recipe['tags'] ?? [] as $tTag) { $allTags[] = $tTag; }
}
$allTags = array_values(array_unique($allTags));
$allTags = array_values(array_unique($allTags));
// Stage recipes (only fully published, non-coming-soon)
$stageRecipes = array_values(array_filter($localizedAll, fn($r) => empty($r['coming_soon']) && !empty($r['title'])));
$comingFeatures = $lang === 'de'
? [
@@ -96,68 +128,66 @@ $comingFeatures = $lang === 'de'
'Step-by-step recipe assistant with videos',
];
$pageTitle = $lang === 'de'
// Meta
$pageTitle = $lang === 'de'
? 'FlixCooks | Moderner Foodblog für schnelle Alltagsküche'
: 'FlixCooks | Modern food blog for busy home cooks';
$description = $lang === 'de'
? 'Frische, schnelle Rezepte mit klaren Schritten und großem Geschmack. Gebaut für Hetzner Webhosting in einfachem PHP.'
: 'Fresh, fast recipes with clear steps, smart prep notes, and big flavor. Built for Hetzner web hosting in plain PHP.';
? 'Frische, schnelle Rezepte mit klaren Schritten und großem Geschmack.'
: 'Fresh, fast recipes with clear steps, smart prep notes, and big flavor.';
$langSwitchLabel = $lang === 'de' ? 'DE' : 'EN';
$langSwitchHref = lang_url($lang === 'de' ? 'en' : 'de');
$navHome = $t['home'];
$navLatest = $t['latest'];
$navBasics = $t['basics'];
$langSwitchHref = lang_url($lang === 'de' ? 'en' : 'de');
$navHome = $t['home'];
$navLatest = $t['latest'];
$navBasics = $t['basics'];
$quickStartRecipes = array_slice($recipes, 0, 3);
$latestRecipes = array_slice($recipes, 0, 6);
$recipeCount = count($recipes);
$totalMinutes = array_sum(array_map(fn($recipe) => (int) ($recipe['total_time'] ?? 0), $recipes));
$averageMinutes = $recipeCount > 0 ? (int) ceil($totalMinutes / $recipeCount) : 0;
$activeTag = $tag !== '' ? $tag : null;
$tagCount = count($allTags);
$copy['en'] += [
'discover_title' => 'Find your next easy favorite.',
'discover_text' => 'Everything below the landing area is simplified for smaller screens: search, tap a tag, and jump into a recipe without cramped text blocks.',
'browse_tags' => 'Browse tags',
'quick_start_title' => 'Quick start',
'quick_start_text' => 'Open one of the recipes with the shortest path from craving to plate.',
'library_title' => 'Recipe library',
'library_text' => 'Clean cards, shorter descriptions, and tap-friendly actions for mobile browsing.',
'stats_recipes' => 'live recipes',
'stats_average' => 'avg. total time',
'stats_tags' => 'browseable tags',
'empty_title' => 'No recipes found yet',
'empty_text' => 'Try another search term or clear the active tag to see every recipe again.',
'view_recipe' => 'View recipe',
];
$copy['de'] += [
'discover_title' => 'Finde schnell dein nächstes Lieblingsrezept.',
'discover_text' => 'Alles unterhalb der Landingpage ist für kleine Screens vereinfacht: suchen, Tag antippen und ohne gequetschte Textblöcke ins Rezept springen.',
'browse_tags' => 'Tags entdecken',
'quick_start_title' => 'Schnell starten',
'quick_start_text' => 'Öffne eines der Rezepte mit dem kürzesten Weg von Appetit zu Teller.',
'library_title' => 'Rezeptübersicht',
'library_text' => 'Saubere Karten, kürzere Beschreibungen und gut tappbare Aktionen für Mobile.',
'stats_recipes' => 'Rezepte online',
'stats_average' => 'Ø Gesamtzeit',
'stats_tags' => 'durchsuchbare Tags',
'empty_title' => 'Noch keine Rezepte gefunden',
'empty_text' => 'Probiere einen anderen Suchbegriff oder entferne den aktiven Tag, um wieder alle Rezepte zu sehen.',
'view_recipe' => 'Rezept ansehen',
];
$t = $copy[$lang];
$recipeCount = count($recipes);
$totalMinutes = array_sum(array_map(fn($r) => (int)($r['total_time'] ?? 0), $recipes));
$averageMinutes = $recipeCount > 0 ? (int)ceil($totalMinutes / $recipeCount) : 0;
$activeTag = $tag !== '' ? $tag : null;
$tagCount = count($allTags);
// Small helpers for URLs
$langQuery = ['lang' => $lang];
$recipeUrl = fn(array $recipe) => '/recipe.php?' . http_build_query(['slug' => $recipe['slug']] + $langQuery);
$tagUrl = fn(string $tagValue) => '/index.php?' . http_build_query(['tag' => $tagValue] + $langQuery);
$tagUrl = fn(string $tagValue) => '/index.php?' . http_build_query(['tag' => $tagValue] + $langQuery);
include __DIR__ . '/partials/head.php';
?>
<?php // ── LANDING SECTION ─────────────────────────────────────────────────── ?>
<section class="landing" id="landing" aria-label="Landing">
<!-- ╔══════════════════════════════════════════════════════════════╗
║ CAPITOLIUM PRELOADER ║
╚══════════════════════════════════════════════════════════════╝ -->
<div class="preloader" id="preloader" aria-hidden="true" role="presentation">
<div class="preloader-content">
<p class="preloader-logo">Flix<span>Cooks</span></p>
<div class="preloader-bar">
<div class="preloader-fill" id="preloaderFill"></div>
</div>
<p class="preloader-text">
<?php echo $lang === 'de' ? 'Wird zubereitet' : 'Preparing'; ?> &nbsp;
<span class="preloader-perc" id="preloaderPerc">0</span>%
</p>
</div>
</div>
<?php include __DIR__ . '/partials/header.php'; ?>
<!-- ╔══════════════════════════════════════════════════════════════╗
║ INDEX SECTION INDICATOR ║
╚══════════════════════════════════════════════════════════════╝ -->
<div class="section-indicator" id="sectionIndicator" aria-hidden="true">
<div class="indicator-index" id="indicatorIndex">01</div>
<div class="indicator-line-wrapper">
<div class="indicator-line-fill" id="indicatorLineFill"></div>
</div>
<div class="indicator-name" id="indicatorName"><?php echo $lang === 'de' ? 'Start' : 'Start'; ?></div>
</div>
<!-- ╔══════════════════════════════════════════════════════════════╗
║ LANDING SECTION ║
╚══════════════════════════════════════════════════════════════╝ -->
<section class="landing" id="landing" data-section-name="<?php echo $lang === 'de' ? 'Start' : 'Home'; ?>" aria-label="Landing">
<div class="landing__blobs" aria-hidden="true">
<div class="blob blob--a"></div>
<div class="blob blob--b"></div>
@@ -182,11 +212,7 @@ include __DIR__ . '/partials/head.php';
</div>
</div>
<div class="landing__copy">
<p class="landing__eyebrow">
<?php echo $lang === 'de'
? 'Saisonal &nbsp;·&nbsp; Unkompliziert &nbsp;·&nbsp; Richtig lecker'
: 'Seasonal &nbsp;·&nbsp; Unfussy &nbsp;·&nbsp; Ridiculously tasty'; ?>
</p>
<p class="landing__eyebrow"><?php echo e($t['eyebrow']); ?></p>
<h1 class="landing__headline">
<?php if ($lang === 'de'): ?>
<span class="line line--1">Besser&nbsp;<em>kochen</em></span>
@@ -198,30 +224,108 @@ include __DIR__ . '/partials/head.php';
<span class="line line--3">Brighter&nbsp;<em>weekends.</em></span>
<?php endif; ?>
</h1>
<p class="landing__sub"><?php echo e($t['subhead']); ?></p>
<a href="#recipes-start" class="landing__cta" id="landingCta">
<p class="landing__sub"><?php echo $lang === 'de' ? 'Suche nach einem Gericht, filtere nach Stimmung oder entdecke das Highlight der Woche.' : 'Search for a craving, filter by vibe, or jump into this week\'s featured recipe.'; ?></p>
<a href="#recipe-stage" class="landing__cta" id="landingCta">
<span><?php echo $lang === 'de' ? 'Rezepte entdecken' : 'Explore recipes'; ?></span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
</a>
</div>
<div class="landing__scroll-nudge" aria-hidden="true">
<div class="scroll-line"></div>
<span>scroll</span>
<span><?php echo $lang === 'de' ? 'scrollen' : 'scroll'; ?></span>
</div>
</section>
<?php include __DIR__ . '/partials/header.php'; ?>
<div id="recipes-start">
<script>
document.getElementById('landingCta').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('recipes-start').scrollIntoView({ behavior: 'smooth' });
});
</script>
<!-- ╔══════════════════════════════════════════════════════════════╗
║ RECIPE SHOWCASE STAGE (GSAP pinned ScrollTrigger) ║
╚══════════════════════════════════════════════════════════════╝ -->
<?php if (!empty($stageRecipes)): ?>
<section class="recipe-stage" id="recipe-stage" data-section-name="<?php echo $lang === 'de' ? 'Rezepte' : 'Recipes'; ?>" aria-label="<?php echo $lang === 'de' ? 'Rezept-Showcase' : 'Recipe showcase'; ?>">
<!-- Stage intro (visible before first slide enters) -->
<div class="recipe-stage__intro" id="stageIntro">
<p class="recipe-stage__intro-eyebrow"><?php echo e($t['stage_eyebrow']); ?></p>
<h2 class="recipe-stage__intro-title">
<?php echo e($t['stage_title_1']); ?><br><em><?php echo e($t['stage_title_2']); ?></em>
</h2>
<div class="recipe-stage__intro-line"></div>
</div>
<!-- Slides -->
<div class="recipe-stage__slides" id="stageSlides">
<?php foreach ($stageRecipes as $i => $sr): ?>
<div class="recipe-stage__slide" id="stageSlide<?php echo $i; ?>" aria-label="<?php echo e($sr['title']); ?>">
<div class="recipe-stage__slide-image">
<img src="<?php echo e($sr['hero']); ?>" alt="<?php echo e($sr['title']); ?>" loading="<?php echo $i === 0 ? 'eager' : 'lazy'; ?>">
</div>
<div class="recipe-stage__slide-copy">
<p class="recipe-stage__slide-num">
<?php printf('%02d %s %02d', $i + 1, '/', count($stageRecipes)); ?>
</p>
<?php if (!empty($sr['category'])): ?>
<p class="recipe-stage__slide-category"><?php echo e($sr['category']); ?></p>
<?php elseif (!empty($sr['tags'][0])): ?>
<p class="recipe-stage__slide-category"><?php echo e($sr['tags'][0]); ?></p>
<?php endif; ?>
<h3 class="recipe-stage__slide-title"><?php echo e($sr['title']); ?></h3>
<?php if (!empty($sr['description'])): ?>
<p class="recipe-stage__slide-desc"><?php echo e(mb_substr($sr['description'], 0, 160)); ?><?php echo mb_strlen($sr['description']) > 160 ? '…' : ''; ?></p>
<?php endif; ?>
<div class="recipe-stage__slide-meta">
<?php if (!empty($sr['total_time'])): ?>
<span class="recipe-stage__slide-meta-item">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<strong><?php echo format_minutes((int)$sr['total_time']); ?></strong>
</span>
<?php endif; ?>
<?php if (!empty($sr['servings'])): ?>
<span class="recipe-stage__slide-meta-item">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong><?php echo e($sr['servings']); ?></strong> <?php echo $lang === 'de' ? 'Port.' : 'serv.'; ?>
</span>
<?php endif; ?>
<?php if (!empty($sr['difficulty'])): ?>
<span class="recipe-stage__slide-meta-item">
<strong><?php echo e($sr['difficulty']); ?></strong>
</span>
<?php endif; ?>
</div>
<a href="<?php echo e($recipeUrl($sr)); ?>" class="recipe-stage__slide-cta">
<span><?php echo $lang === 'de' ? 'Zum Rezept' : 'View recipe'; ?></span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Progress dots -->
<div class="recipe-stage__progress" aria-hidden="true" id="stageProgress">
<?php foreach ($stageRecipes as $i => $sr): ?>
<div class="recipe-stage__progress-dot<?php echo $i === 0 ? ' active' : ''; ?>" data-index="<?php echo $i; ?>"></div>
<?php endforeach; ?>
</div>
<!-- Scroll hint -->
<div class="recipe-stage__hint" aria-hidden="true">
<span><?php echo $lang === 'de' ? 'scrollen' : 'scroll'; ?></span>
<div class="recipe-stage__hint-line"></div>
</div>
</section>
<?php endif; ?>
<!-- ╔══════════════════════════════════════════════════════════════╗
║ MAIN CONTENT (Search, Featured, Grid) ║
╚══════════════════════════════════════════════════════════════╝ -->
<div id="recipes-start" data-section-name="<?php echo $lang === 'de' ? 'Suche' : 'Search'; ?>">
<?php if (!empty($comingSoon)): ?>
<div class="coming-strip" aria-label="Coming soon recipes">
<div class="coming-strip reveal-target" aria-label="Coming soon recipes">
<div class="coming-strip__head">
<p class="pill pill--ghost"><?php echo e($lang === 'de' ? 'Bald verfügbar' : 'Coming soon'); ?></p>
<p class="pill pill--gold"><?php echo e($lang === 'de' ? 'Bald verfügbar' : 'Coming soon'); ?></p>
<small><?php echo count($comingSoon); ?> <?php echo $lang === 'de' ? 'in Arbeit' : 'in progress'; ?></small>
</div>
<div class="coming-strip__row">
@@ -237,18 +341,21 @@ document.getElementById('landingCta').addEventListener('click', function(e){
</div>
<?php endif; ?>
<section class="discover-shell" id="basics">
<!-- Discover Shell: Search + Stats + Tags | Featured -->
<section class="discover-shell reveal-target" id="basics" data-section-name="<?php echo $lang === 'de' ? 'Entdecken' : 'Discover'; ?>" aria-label="<?php echo $lang === 'de' ? 'Rezepte entdecken' : 'Discover recipes'; ?>">
<div class="discover-shell__main">
<div class="section-header section-header--stack">
<p class="eyebrow"><?php echo e($t['basics']); ?></p>
<p class="eyebrow"><?php echo e($lang === 'de' ? 'Basics' : 'Basics'); ?></p>
<h2><?php echo e($t['discover_title']); ?></h2>
<p><?php echo e($t['discover_text']); ?></p>
</div>
<form class="search discover-search" method="get" action="/index.php">
<form class="search discover-search" method="get" action="/index.php" role="search">
<input type="hidden" name="lang" value="<?php echo e($lang); ?>">
<label class="sr-only" for="recipe-search"><?php echo e($t['search_placeholder']); ?></label>
<input id="recipe-search" type="text" name="q" placeholder="<?php echo e($t['search_placeholder']); ?>" value="<?php echo e($q); ?>">
<input id="recipe-search" type="text" name="q"
placeholder="<?php echo e($t['search_placeholder']); ?>"
value="<?php echo e($q); ?>">
<?php if ($tag): ?>
<input type="hidden" name="tag" value="<?php echo e($tag); ?>">
<?php endif; ?>
@@ -257,7 +364,7 @@ document.getElementById('landingCta').addEventListener('click', function(e){
<div class="discover-stats" aria-label="Recipe overview">
<div class="discover-stat">
<strong><?php echo e((string) $recipeCount); ?></strong>
<strong><?php echo e((string)$recipeCount); ?></strong>
<span><?php echo e($t['stats_recipes']); ?></span>
</div>
<div class="discover-stat">
@@ -265,7 +372,7 @@ document.getElementById('landingCta').addEventListener('click', function(e){
<span><?php echo e($t['stats_average']); ?></span>
</div>
<div class="discover-stat">
<strong><?php echo e((string) $tagCount); ?></strong>
<strong><?php echo e((string)$tagCount); ?></strong>
<span><?php echo e($t['stats_tags']); ?></span>
</div>
</div>
@@ -279,7 +386,8 @@ document.getElementById('landingCta').addEventListener('click', function(e){
</div>
<div class="tag-row tag-row--panel">
<?php foreach ($allTags as $tTag): ?>
<a class="tag<?php echo strtolower($tTag) === strtolower($activeTag ?? '') ? ' active' : ''; ?>" href="<?php echo e($tagUrl($tTag)); ?>#basics">#<?php echo e($tTag); ?></a>
<a class="tag<?php echo strtolower($tTag) === strtolower($activeTag ?? '') ? ' active' : ''; ?>"
href="<?php echo e($tagUrl($tTag)); ?>#basics">#<?php echo e($tTag); ?></a>
<?php endforeach; ?>
</div>
</div>
@@ -289,31 +397,36 @@ document.getElementById('landingCta').addEventListener('click', function(e){
<aside class="discover-shell__feature hero-card">
<img src="<?php echo e($featured['hero']); ?>" alt="<?php echo e($featured['title']); ?>">
<div class="hero-card__body">
<p class="pill"><?php echo e($t['featured']); ?></p>
<p class="pill pill--gold"><?php echo e($t['featured']); ?></p>
<h3><?php echo e($featured['title']); ?></h3>
<p><?php echo e($featured['description']); ?></p>
<div class="meta">
<span>⏱ <?php echo format_minutes((int) ($featured['total_time'] ?? 0)); ?></span>
<span>⏱ <?php echo format_minutes((int)($featured['total_time'] ?? 0)); ?></span>
<span>🍽 <?php echo e($featured['servings']); ?> <?php echo e($t['servings']); ?></span>
</div>
<a class="button" href="<?php echo e($recipeUrl($featured)); ?>"><?php echo e($t['cook_it']); ?></a>
<a class="btn-reveal" href="<?php echo e($recipeUrl($featured)); ?>">
<span class="btn-reveal-text"><?php echo e($t['cook_it']); ?></span>
<span class="btn-reveal-arrow">→</span>
</a>
</div>
</aside>
<?php endif; ?>
</section>
<section class="latest" id="latest">
<!-- Recipe Grid -->
<section class="latest reveal-target" id="latest" data-section-name="<?php echo $lang === 'de' ? 'Rezepte' : 'Recipes'; ?>" aria-label="<?php echo $lang === 'de' ? 'Alle Rezepte' : 'All recipes'; ?>">
<div class="section-header section-header--stack">
<h2><?php echo e($t['library_title']); ?></h2>
<p><?php echo $recipeCount; ?><?php echo $q || $tag ? $t['count_suffix_filtered'] : $t['count_suffix_default']; ?></p>
</div>
<?php if (!empty($latestRecipes)): ?>
<?php if (!empty($recipes)): ?>
<div class="grid">
<?php foreach ($latestRecipes as $recipe): ?>
<article class="card">
<?php foreach ($recipes as $recipe): ?>
<article class="card reveal-target">
<a href="<?php echo e($recipeUrl($recipe)); ?>" class="card__image">
<img src="<?php echo e($recipe['hero']); ?>" alt="<?php echo e($recipe['title']); ?>">
<img src="<?php echo e($recipe['hero']); ?>" alt="<?php echo e($recipe['title']); ?>" loading="lazy">
<?php if (!empty($recipe['category'])): ?>
<span class="pill pill--ghost"><?php echo e($recipe['category']); ?></span>
<?php endif; ?>
@@ -322,7 +435,7 @@ document.getElementById('landingCta').addEventListener('click', function(e){
<h3><a href="<?php echo e($recipeUrl($recipe)); ?>"><?php echo e($recipe['title']); ?></a></h3>
<p><?php echo e($recipe['description']); ?></p>
<div class="meta">
<span>⏱ <?php echo format_minutes((int) ($recipe['total_time'] ?? 0)); ?></span>
<span>⏱ <?php echo format_minutes((int)($recipe['total_time'] ?? 0)); ?></span>
<span>🙂 <?php echo e($recipe['difficulty']); ?></span>
</div>
<?php if (!empty($recipe['tags'])): ?>
@@ -340,19 +453,25 @@ document.getElementById('landingCta').addEventListener('click', function(e){
<article class="empty-state">
<h3><?php echo e($t['empty_title']); ?></h3>
<p><?php echo e($t['empty_text']); ?></p>
<a class="button" href="/index.php?lang=<?php echo e($lang); ?>"><?php echo e($t['tag_clear']); ?></a>
<a class="btn-reveal" href="/index.php?lang=<?php echo e($lang); ?>">
<span class="btn-reveal-text"><?php echo e($t['tag_clear']); ?></span>
<span class="btn-reveal-arrow">→</span>
</a>
</article>
<?php endif; ?>
</section>
<section class="coming-features" id="coming-features">
<!-- Coming Features -->
<section class="coming-features reveal-target" id="coming-features" data-section-name="<?php echo $lang === 'de' ? 'Demnächst' : 'Soon'; ?>">
<div class="section-header section-header--stack">
<p class="eyebrow"><?php echo $lang === 'de' ? 'Roadmap' : 'Roadmap'; ?></p>
<h2><?php echo e($t['coming_features']); ?></h2>
<p><?php echo e($t['coming_features_sub']); ?></p>
</div>
<div class="feature-grid">
<?php foreach ($comingFeatures as $feature): ?>
<article class="feature-card">
<article class="feature-card reveal-target">
<div class="feature-icon" aria-hidden="true">✨</div>
<p><?php echo e($feature); ?></p>
</article>
@@ -361,4 +480,314 @@ document.getElementById('landingCta').addEventListener('click', function(e){
</section>
</div><!-- /#recipes-start -->
<?php include __DIR__ . '/partials/footer.php'; ?>
<!-- ╔══════════════════════════════════════════════════════════════╗
║ JAVASCRIPT — Preloader, Lenis, GSAP Stage, Section Indicator ║
╚══════════════════════════════════════════════════════════════╝ -->
<script>
(function() {
'use strict';
/* ───────────────────────────────────────────────────────────────
1. CAPITOLIUM PRELOADER
─────────────────────────────────────────────────────────────── */
var fillEl = document.getElementById('preloaderFill');
var percEl = document.getElementById('preloaderPerc');
var preEl = document.getElementById('preloader');
var progress = 0;
var done = false;
function tickPreloader() {
if (done) return;
var step = Math.floor(Math.random() * 14) + 6;
progress = Math.min(100, progress + step);
if (fillEl) fillEl.style.width = progress + '%';
if (percEl) percEl.textContent = progress;
if (progress >= 100) {
done = true;
setTimeout(function() {
if (preEl) {
preEl.classList.add('loaded');
setTimeout(function() {
if (preEl && preEl.parentNode) preEl.parentNode.removeChild(preEl);
}, 1200);
}
}, 280);
} else {
setTimeout(tickPreloader, 65 + Math.random() * 80);
}
}
tickPreloader();
/* ───────────────────────────────────────────────────────────────
2. LENIS SMOOTH SCROLL
─────────────────────────────────────────────────────────────── */
var lenis;
if (typeof Lenis !== 'undefined') {
lenis = new Lenis({
duration: 1.25,
easing: function(t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
direction: 'vertical',
gestureDirection: 'vertical',
smooth: true,
smoothTouch: false,
touchMultiplier: 2,
});
window.lenis = lenis;
// Sync GSAP ticker
if (typeof gsap !== 'undefined') {
gsap.ticker.add(function(time) { lenis.raf(time * 1000); });
gsap.ticker.lagSmoothing(0);
} else {
function rafLoop(time) {
lenis.raf(time);
requestAnimationFrame(rafLoop);
}
requestAnimationFrame(rafLoop);
}
}
/* ───────────────────────────────────────────────────────────────
3. GSAP RECIPE SHOWCASE STAGE
─────────────────────────────────────────────────────────────── */
<?php if (!empty($stageRecipes)): ?>
if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
gsap.registerPlugin(ScrollTrigger);
// If lenis is active, feed its scroll to ScrollTrigger
if (lenis) {
lenis.on('scroll', ScrollTrigger.update);
}
var stageEl = document.getElementById('recipe-stage');
var introEl = document.getElementById('stageIntro');
var slidesEl = document.getElementById('stageSlides');
var progressEl = document.getElementById('stageProgress');
var dots = progressEl ? progressEl.querySelectorAll('.recipe-stage__progress-dot') : [];
var slides = slidesEl ? slidesEl.querySelectorAll('.recipe-stage__slide') : [];
var numSlides = slides.length;
if (stageEl && numSlides > 0) {
// Initial state: slides hidden (off-screen right), intro visible
gsap.set(slides, { xPercent: 110, opacity: 0 });
gsap.set(introEl, { opacity: 1, y: 0 });
// We express pin length in pixels
var pinLength = (numSlides + 1.5) * window.innerHeight;
// Segment boundaries (fractional 0–1) per slide for dot tracking
var introEnd = 1 / (numSlides + 1.5);
var segBoundaries = [];
for (var si = 0; si < numSlides; si++) {
segBoundaries.push({
start: introEnd + si * (1 - introEnd) / numSlides,
end: introEnd + (si + 1) * (1 - introEnd) / numSlides,
});
}
var stageTl = gsap.timeline({
scrollTrigger: {
trigger: stageEl,
start: 'top top',
end: '+=' + pinLength,
pin: true,
scrub: 1.2,
anticipatePin: 1,
onUpdate: function(self) {
// Update section indicator progress
updateIndicatorProgress(self.progress);
// Update progress dots based on scroll progress
var p = self.progress;
var activeIdx = -1;
for (var si = 0; si < segBoundaries.length; si++) {
var seg = segBoundaries[si];
var midpoint = (seg.start + seg.end) / 2;
// Slide is "active" from its enter midpoint to the next midpoint
var nextMid = si < segBoundaries.length - 1
? (segBoundaries[si].start + segBoundaries[si+1].end) / 2
: 1;
if (p >= seg.start && p < seg.end) {
activeIdx = si;
break;
}
}
if (activeIdx === -1 && p < introEnd) {
// Still in intro
} else if (activeIdx === -1) {
activeIdx = numSlides - 1;
}
dots.forEach(function(dot, di) {
dot.classList.toggle('active', di === activeIdx);
});
},
}
});
stageTl.to(introEl, {
opacity: 0,
y: -40,
duration: introEnd,
ease: 'power2.in',
}, 0);
// Phase per slide
slides.forEach(function(slide, idx) {
var segStart = segBoundaries[idx].start;
var segEnd = segBoundaries[idx].end;
var enterDur = (segEnd - segStart) * 0.28;
var exitDur = (segEnd - segStart) * 0.27;
var img = slide.querySelector('img');
// Enter: slide in from RIGHT
stageTl.fromTo(slide,
{ xPercent: 105, opacity: 0 },
{ xPercent: 0, opacity: 1, duration: enterDur, ease: 'power3.out' },
segStart
);
// Inner image parallax on enter
if (img) {
stageTl.fromTo(img,
{ scale: 1.12, xPercent: 8 },
{ scale: 1, xPercent: 0, duration: enterDur, ease: 'power2.out' },
segStart
);
}
// Exit: slide out to LEFT
stageTl.to(slide,
{ xPercent: -110, opacity: 0, duration: exitDur, ease: 'power3.in' },
segEnd - exitDur
);
if (img) {
stageTl.to(img,
{ scale: 1.08, xPercent: -6, duration: exitDur, ease: 'power2.in' },
segEnd - exitDur
);
}
});
}
}
<?php endif; ?>
/* ───────────────────────────────────────────────────────────────
4. INDEX SECTION INDICATOR
─────────────────────────────────────────────────────────────── */
var indicatorEl = document.getElementById('sectionIndicator');
var indicatorIndex = document.getElementById('indicatorIndex');
var indicatorFill = document.getElementById('indicatorLineFill');
var indicatorName = document.getElementById('indicatorName');
// Collect all sections with data-section-name
var sections = Array.from(document.querySelectorAll('[data-section-name]'));
function updateIndicatorFromScroll() {
var scrollY = window.scrollY;
var viewMid = scrollY + window.innerHeight * 0.4;
var active = null;
var activeIdx = 0;
sections.forEach(function(sec, idx) {
var top = sec.getBoundingClientRect().top + scrollY;
var bottom = top + sec.offsetHeight;
if (viewMid >= top && viewMid < bottom) {
active = sec;
activeIdx = idx;
}
});
if (!active && sections.length > 0) {
active = sections[0];
activeIdx = 0;
}
// Show / hide indicator
if (scrollY > 80) {
indicatorEl && indicatorEl.classList.add('visible');
} else {
indicatorEl && indicatorEl.classList.remove('visible');
}
// Update content
if (active && indicatorEl) {
var name = active.getAttribute('data-section-name') || '';
var numStr = String(activeIdx + 1).padStart(2, '0');
var pct = sections.length > 1
? Math.round((activeIdx / (sections.length - 1)) * 100)
: 100;
if (indicatorIndex) indicatorIndex.textContent = numStr;
if (indicatorName) indicatorName.textContent = name;
if (indicatorFill) indicatorFill.style.height = pct + '%';
}
}
// Global helper for GSAP onUpdate
window.updateIndicatorProgress = function(progress) {
if (indicatorFill) {
indicatorFill.style.height = Math.round(progress * 100) + '%';
}
};
// Listen
if (lenis) {
lenis.on('scroll', updateIndicatorFromScroll);
} else {
window.addEventListener('scroll', updateIndicatorFromScroll, { passive: true });
}
updateIndicatorFromScroll();
/* ───────────────────────────────────────────────────────────────
5. SCROLL REVEAL (for .reveal-target elements)
─────────────────────────────────────────────────────────────── */
if ('IntersectionObserver' in window) {
var revealObs = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
revealObs.unobserve(entry.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal-target').forEach(function(el) {
revealObs.observe(el);
});
} else {
// Fallback: show all immediately
document.querySelectorAll('.reveal-target').forEach(function(el) {
el.classList.add('revealed');
});
}
/* ───────────────────────────────────────────────────────────────
6. LANDING CTA smooth scroll
─────────────────────────────────────────────────────────────── */
var landingCta = document.getElementById('landingCta');
if (landingCta) {
landingCta.addEventListener('click', function(e) {
e.preventDefault();
var target = document.getElementById('recipe-stage');
if (!target) target = document.getElementById('recipes-start');
if (!target) return;
if (window.lenis) {
window.lenis.scrollTo(target, { offset: 0, duration: 1.6 });
} else {
target.scrollIntoView({ behavior: 'smooth' });
}
});
}
})();
</script>