flixcooks-website/recipe.php

<?php
require __DIR__ . '/helpers.php';

$lang = (isset($_GET['lang']) && strtolower($_GET['lang']) === 'de') ? 'de' : 'en';
$copy = [
    'en' => [
        'not_found'     => 'Recipe not found',
        'not_found_sub' => 'Try searching for something else.',
        'back_home'     => '← Back to all recipes',
        'nutrition'     => 'Nutrition',
        'calories'      => 'Calories',
        'protein'       => 'Protein',
        'carbs'         => 'Carbs',
        'fat'           => 'Fat',
        'ingredients'   => 'Ingredients',
        'utensils'      => 'Utensils',
        'steps'         => 'Steps',
        'also_tasty'    => 'Also tasty',
        'more_dishes'   => 'More dishes to keep you cooking.',
        'prep'          => 'Prep',
        'cook'          => 'Cook',
        'total'         => 'Total',
        'serves'        => 'Serves',
        'level'         => 'Level',
    ],
    'de' => [
        'not_found'     => 'Rezept nicht gefunden',
        'not_found_sub' => 'Versuche eine andere Suche.',
        'back_home'     => '← Zurück zu allen Rezepten',
        'nutrition'     => 'Nährwerte',
        'calories'      => 'Kalorien',
        'protein'       => 'Protein',
        'carbs'         => 'Kohlenhydrate',
        'fat'           => 'Fett',
        'ingredients'   => 'Zutaten',
        'utensils'      => 'Küchenwerkzeug',
        'steps'         => 'Schritte',
        'also_tasty'    => 'Auch lecker',
        'more_dishes'   => 'Noch mehr zum Nachkochen.',
        'prep'          => 'Vorbereitung',
        'cook'          => 'Garen',
        'total'         => 'Gesamt',
        'serves'        => 'Portionen',
        'level'         => 'Level',
    ],
];
$t = $copy[$lang];

$allRecipes       = load_recipes();
$slug             = isset($_GET['slug']) ? trim($_GET['slug']) : '';
$recipeRaw        = $slug ? find_recipe_by_slug($allRecipes, $slug) : null;
$recipe           = $recipeRaw ? localize_recipe($recipeRaw, $lang) : null;
$allRecipesLocal  = localize_recipes($allRecipes, $lang);

$langSwitchLabel = $lang === 'de' ? 'EN' : 'DE';
$langSwitchHref  = lang_url($lang === 'de' ? 'en' : 'de');

if (!$recipe) {
    http_response_code(404);
    $pageTitle   = $t['not_found'] . ' | FlixCooks';
    $description = $t['not_found_sub'];
    include __DIR__ . '/partials/head.php';
    include __DIR__ . '/partials/header.php';
    ?>
    <main class="not-found">
      <h1><?php echo e($t['not_found']); ?></h1>
      <p><?php echo e($t['not_found_sub']); ?></p>
      <a class="btn-reveal" href="/index.php?lang=<?php echo e($lang); ?>#recipes-start">
        <span class="btn-reveal-text"><?php echo e($t['back_home']); ?></span>
        <span class="btn-reveal-arrow">→</span>
      </a>
    </main>
    <?php
    include __DIR__ . '/partials/footer.php';
    exit;
}

$pageTitle   = e($recipe['title']) . ' | FlixCooks';
$description = $recipe['description'] ?? '';
include __DIR__ . '/partials/head.php';
include __DIR__ . '/partials/header.php';
?>

<article class="recipe">
  <div class="recipe__hero">
    <img src="<?php echo e($recipe['hero']); ?>" alt="<?php echo e($recipe['title']); ?>">
    <div class="recipe__hero__copy">
      <?php if (!empty($recipe['category'])): ?>
        <p class="pill pill--gold"><?php echo e($recipe['category']); ?></p>
      <?php endif; ?>
      <div class="recipe__title-row">
        <h1><?php echo e($recipe['title']); ?></h1>
        <button class="btn-favorite btn-favorite--large" data-slug="<?php echo e($recipe['slug']); ?>" aria-label="Save to favorites">
          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
          </svg>
        </button>
      </div>
      <p class="lede"><?php echo e($recipe['description']); ?></p>
      <div class="meta meta--row">
        <span><?php echo e($t['prep']); ?>: <?php echo format_minutes((int)$recipe['prep_time']); ?></span>
        <span><?php echo e($t['cook']); ?>: <?php echo format_minutes((int)$recipe['cook_time']); ?></span>
        <span><?php echo e($t['total']); ?>: <?php echo format_minutes((int)$recipe['total_time']); ?></span>
        <span><?php echo e($t['serves']); ?>: <?php echo e($recipe['servings']); ?></span>
        <span><?php echo e($t['level']); ?>: <?php echo e($recipe['difficulty']); ?></span>
      </div>
      <a class="btn-reveal" href="/index.php?lang=<?php echo e($lang); ?>#recipes-start">
        <span class="btn-reveal-text"><?php echo e($t['back_home']); ?></span>
        <span class="btn-reveal-arrow">←</span>
      </a>
    </div>
  </div>

  <div class="recipe__body">

    <?php if (isset($recipe['nutrition']) && ($recipe['nutrition']['calories'] > 0 || $recipe['nutrition']['protein'] > 0 || $recipe['nutrition']['carbs'] > 0 || $recipe['nutrition']['fat'] > 0)): ?>
    <section class="panel reveal-target" id="nutrition-panel">
      <h2><?php echo e($t['nutrition']); ?></h2>
      <div class="g-row nutrition-widget">
        <?php 
          $nutri = $recipe['nutrition'];
          $macros = [
            ['label' => $t['calories'], 'value' => $nutri['calories'], 'unit' => 'kcal', 'pct' => min(100, round(($nutri['calories']/2000)*100))],
            ['label' => $t['protein'], 'value' => $nutri['protein'], 'unit' => 'g', 'pct' => min(100, round(($nutri['protein']/50)*100))],
            ['label' => $t['carbs'], 'value' => $nutri['carbs'], 'unit' => 'g', 'pct' => min(100, round(($nutri['carbs']/260)*100))],
            ['label' => $t['fat'], 'value' => $nutri['fat'], 'unit' => 'g', 'pct' => min(100, round(($nutri['fat']/70)*100))]
          ];
        ?>
        <?php foreach ($macros as $m): ?>
          <div class="g-col nutrition-item">
            <div class="nutrition-item__header">
              <span class="nutrition-label"><?php echo e($m['label']); ?></span>
              <span class="nutrition-value"><?php echo e($m['value']); ?><?php echo $m['unit']; ?></span>
            </div>
            <div class="nutrition-bar">
              <div class="nutrition-fill" data-width="<?php echo $m['pct']; ?>%" style="width: 0;"></div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </section>
    <?php endif; ?>

    <section class="panel">
      <h2><?php echo e($t['ingredients']); ?></h2>
      <ul class="ingredients">
        <?php foreach ($recipe['ingredients'] as $item): ?>
          <li><?php echo e($item); ?></li>
        <?php endforeach; ?>
      </ul>
    </section>

    <?php if (!empty($recipe['utensils'])): ?>
    <section class="panel">
      <h2><?php echo e($t['utensils']); ?></h2>
      <ul class="ingredients">
        <?php foreach ($recipe['utensils'] as $item): ?>
          <li><?php echo e($item); ?></li>
        <?php endforeach; ?>
      </ul>
    </section>
    <?php endif; ?>

    <section class="panel">
      <h2><?php echo e($t['steps']); ?></h2>
      <ol class="steps">
        <?php foreach ($recipe['steps'] as $step): ?>
          <li><?php echo e($step); ?></li>
        <?php endforeach; ?>
      </ol>
    </section>
  </div>

  <section class="more">
    <div class="section-header section-header--stack">
      <p class="eyebrow"><?php echo e($t['also_tasty']); ?></p>
      <h3><?php echo e($t['more_dishes']); ?></h3>
    </div>
    <div class="grid grid--tight">
      <?php foreach ($allRecipesLocal as $other): ?>
        <?php if ($other['slug'] === $recipe['slug'] || !empty($other['coming_soon'])) continue; ?>
        <article class="card card--bare reveal-target">
          <a href="/recipe.php?<?php echo http_build_query(['slug' => $other['slug'], 'lang' => $lang]); ?>" class="card__image">
            <img src="<?php echo e($other['hero']); ?>" alt="<?php echo e($other['title']); ?>" loading="lazy">
            <button class="btn-favorite" data-slug="<?php echo e($other['slug']); ?>" aria-label="Save to favorites" onclick="event.preventDefault(); event.stopPropagation();">
              <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
              </svg>
            </button>
          </a>
          <div class="card__body">
            <h4><a href="/recipe.php?<?php echo http_build_query(['slug' => $other['slug'], 'lang' => $lang]); ?>"><?php echo e($other['title']); ?></a></h4>
            <p><?php echo e($other['description']); ?></p>
            <div class="meta">
              <span>⏱ <?php echo format_minutes((int)($other['total_time'] ?? 0)); ?></span>
              <span>🙂 <?php echo e($other['difficulty']); ?></span>
            </div>
          </div>
        </article>
      <?php endforeach; ?>
    </div>
  </section>
</article>

<?php include __DIR__ . '/partials/footer.php'; ?>

<script>
// Scroll reveal on recipe page
if ('IntersectionObserver' in window) {
  var obs = new IntersectionObserver(function(entries) {
    entries.forEach(function(e) {
      if (e.isIntersecting) { 
        e.target.classList.add('revealed'); 
        obs.unobserve(e.target); 
        
        // Trigger nutrition bar animations if this is the nutrition panel
        if (e.target.id === 'nutrition-panel') {
          e.target.querySelectorAll('.nutrition-fill').forEach(function(fill) {
            fill.style.width = fill.getAttribute('data-width');
          });
        }
      }
    });
  }, { threshold: 0.08 });
  document.querySelectorAll('.reveal-target').forEach(function(el) { obs.observe(el); });
}
// Lenis init for recipe page
if (typeof Lenis !== 'undefined') {
  var lenis = new Lenis({ duration: 1.2, smooth: true, smoothTouch: false });
  window.lenis = lenis;
  function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
  requestAnimationFrame(raf);
}
</script>