Neubau Fundament + Startseite: Designsystem, PHP-Komponenten, Brevo-Formular, Instagram-Sync

- Ordnerstruktur mit public/-Docroot, Deny-.htaccess für app/bin/config/data/storage - CLAUDE.md mit Leitplanken (self-hosted only, Single Source of Truth, Component-first) - Design-Tokens aus alter Seite extrahiert (Akzent #e20612, Coolvetica/Abel als woff2) - Front Controller mit Routen-Register, Sitemap, Canonical, JSON-LD (SportsClub) - Startseite: Hero, Instagram-Feed (lokaler Cache), Historie/Sportheim, Stats, Partner, Kontakt - Kontaktformular via PHPMailer/Brevo mit Honeypot + HMAC-Time-Trap (kein reCAPTCHA) - bin/instagram-sync.php: Scraper mit Strategie-Kette, flock, atomarem Cache, lokalen Bildern Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-11 21:16:25 +02:00
commit 0f19729a88
70 changed files with 2548 additions and 0 deletions
--- a/public/assets/js/form.js
+++ b/public/assets/js/form.js
@@ -0,0 +1,62 @@
+/* Kontaktformular: Progressive Enhancement — ohne JS normales POST + Redirect.
+   Mit JS: fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
+(function () {
+    'use strict';
+
+    var form = document.querySelector('.form');
+    if (!form || !window.fetch) {
+        return;
+    }
+
+    var status = form.querySelector('[data-form-status]');
+    var button = form.querySelector('button[type="submit"]');
+
+    var MESSAGES = {
+        success: 'Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.',
+        validation: 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
+        mail: 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut.'
+    };
+
+    function show(type, text) {
+        var p = document.createElement('p');
+        p.className = type === 'success' ? 'form__success' : 'form__error';
+        p.textContent = text;
+        status.replaceChildren(p);
+        status.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+
+    form.addEventListener('submit', function (event) {
+        // Native Validierung zuerst (novalidate ist gesetzt, daher manuell).
+        if (!form.checkValidity()) {
+            event.preventDefault();
+            form.reportValidity();
+            return;
+        }
+
+        event.preventDefault();
+        button.disabled = true;
+        button.textContent = 'Wird gesendet …';
+
+        fetch(form.action, {
+            method: 'POST',
+            body: new FormData(form),
+            headers: { Accept: 'application/json' }
+        })
+            .then(function (response) { return response.json(); })
+            .then(function (data) {
+                if (data.ok) {
+                    show('success', MESSAGES.success);
+                    form.reset();
+                } else {
+                    show('error', MESSAGES[data.error] || MESSAGES.mail);
+                }
+            })
+            .catch(function () {
+                show('error', MESSAGES.mail);
+            })
+            .finally(function () {
+                button.disabled = false;
+                button.textContent = 'Nachricht senden';
+            });
+    });
+})();
--- a/public/assets/js/nav.js
+++ b/public/assets/js/nav.js
@@ -0,0 +1,40 @@
+/* Burger-Navigation: Toggle mit aria-expanded, Escape schließt, Klick auf Link schließt. */
+(function () {
+    'use strict';
+
+    var toggle = document.querySelector('.site-nav__toggle');
+    var list = document.getElementById('site-nav-list');
+    if (!toggle || !list) {
+        return;
+    }
+
+    function setOpen(open) {
+        toggle.setAttribute('aria-expanded', String(open));
+        document.body.classList.toggle('nav-open', open);
+        toggle.querySelector('.visually-hidden').textContent = open ? 'Menü schließen' : 'Menü öffnen';
+    }
+
+    toggle.addEventListener('click', function () {
+        setOpen(toggle.getAttribute('aria-expanded') !== 'true');
+    });
+
+    list.addEventListener('click', function (event) {
+        if (event.target.closest('a')) {
+            setOpen(false);
+        }
+    });
+
+    document.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
+            setOpen(false);
+            toggle.focus();
+        }
+    });
+
+    // Beim Vergrößern auf Desktop offenes Overlay zurücksetzen.
+    window.addEventListener('resize', function () {
+        if (window.innerWidth > 1249 && toggle.getAttribute('aria-expanded') === 'true') {
+            setOpen(false);
+        }
+    });
+})();