Stable Website before landingpage

2026-03-22 22:16:44 +01:00
parent 7e0818aece
commit 9049e7cc58
23 changed files with 2552 additions and 0 deletions
@@ -0,0 +1,72 @@
+<footer class="site-footer">
+  <div class="footer-meta">
+    <p>Cook or get cooked.</p>
+    <a class="contact-link" href="mailto:contact@flixcooks.at">Contact me</a>
+    <small>© <?php echo date('Y'); ?> FlixCooks</small>
+    <a href="https://www.perplexity.ai/computer" target="_blank" rel="noopener noreferrer" style="font-size:0.75rem;color:var(--muted)">Created with Perplexity Computer</a>
+  </div>
+</footer>
+
+<button id="backToTop" aria-label="Back to top">↑ Back to top</button>
+
+<!-- Fixed dark/light toggle — always visible, scrolls with page -->
+<button class="theme-toggle" data-theme-toggle aria-label="Switch to dark mode">
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+</button>
+
+<script>
+// ── Back to top ───────────────────────────────────────────────────────────────
+(function(){
+  const btn = document.getElementById('backToTop');
+  if (!btn) return;
+  const check = () => btn.classList.toggle('show', window.scrollY > 240);
+  window.addEventListener('scroll', check, { passive: true });
+  btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+  check();
+})();
+
+// ── Dark / light mode toggle ─────────────────────────────────────────────────
+(function(){
+  const r   = document.documentElement;
+  let d = r.getAttribute('data-theme') || 'light';
+  r.setAttribute('data-theme', d);
+
+  const SUN  = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
+  const MOON = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+
+  function setIcon() {
+    const icon  = d === 'dark' ? SUN : MOON;
+    const label = 'Switch to ' + (d === 'dark' ? 'light' : 'dark') + ' mode';
+    document.querySelectorAll('[data-theme-toggle]').forEach(t => {
+      t.innerHTML = icon;
+      t.setAttribute('aria-label', label);
+    });
+  }
+
+  // Use event delegation so it works regardless of DOM order
+  document.addEventListener('click', function(e) {
+    if (e.target.closest('[data-theme-toggle]')) {
+      d = d === 'dark' ? 'light' : 'dark';
+      r.setAttribute('data-theme', d);
+      setIcon();
+    }
+  });
+
+  // Toggle adapts visually when scrolled off landing section
+  (function(){
+    const landing = document.getElementById('landing');
+    const toggle  = document.querySelector('.theme-toggle');
+    if (!toggle) return;
+    function check() {
+      const past = !landing || window.scrollY > (landing.offsetHeight - 80);
+      toggle.classList.toggle('on-site', past);
+    }
+    window.addEventListener('scroll', check, { passive: true });
+    check();
+  })();
+
+  setIcon();
+})();
+</script>
+</body>
+</html>
@@ -0,0 +1,21 @@
+<?php
+$pageTitle   = $pageTitle   ?? 'FlixCooks | Food Blog & Recipes';
+$description = $description ?? 'Seasonal recipes, tested tips, and approachable cooking for busy weeknights.';
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="<?php echo e($description); ?>">
+  <title><?php echo e($pageTitle); ?></title>
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+  <link rel="alternate icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/assets/style.css">
+  <!-- Always start light -->
+  <script>document.documentElement.setAttribute('data-theme','light');</script>
+</head>
+<body>
@@ -0,0 +1,31 @@
+<header class="site-header">
+  <div class="site-header__top">
+    <a class="logo" href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>">
+      <img src="/assets/logo.png" alt="FlixCooks">
+    </a>
+    <div class="header-actions">
+      <a class="lang-toggle" href="<?php echo e($langSwitchHref ?? '#'); ?>"><?php echo e($langSwitchLabel ?? 'DE/EN'); ?></a>
+      <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="siteNav">
+        <span class="menu-toggle__icon" aria-hidden="true">☰</span>
+        <span class="menu-toggle__label"><?php echo $lang === 'de' ? 'Menü' : 'Menu'; ?></span>
+      </button>
+    </div>
+  </div>
+  <nav id="siteNav" class="site-nav" data-collapsed="true">
+    <a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>"><?php echo e($navHome ?? 'Home'); ?></a>
+    <a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>#latest"><?php echo e($navLatest ?? 'Latest'); ?></a>
+    <a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>#basics"><?php echo e($navBasics ?? 'Basics'); ?></a>
+  </nav>
+</header>
+<script>
+  (() => {
+    const toggle = document.currentScript.previousElementSibling.querySelector('.menu-toggle');
+    const nav = document.getElementById('siteNav');
+    if (!toggle || !nav) return;
+    toggle.addEventListener('click', () => {
+      const isCollapsed = nav.getAttribute('data-collapsed') === 'true';
+      nav.setAttribute('data-collapsed', String(!isCollapsed));
+      toggle.setAttribute('aria-expanded', String(isCollapsed));
+    });
+  })();
+</script>