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>