const { useState: uS, useEffect: uE } = React; // ---------- A11y Panel ---------- function A11yPanel({ t }) { const [open, setOpen] = uS(false); const [textSize, setTextSize] = uS(0); // 0..3 const [lineH, setLineH] = uS(0); const [align, setAlign] = uS(0); const [font, setFont] = uS(false); const [contrast, setContrast] = uS(0); const [gray, setGray] = uS(false); const [hideImgs, setHideImgs] = uS(false); const [stopMotion, setStopMotion] = uS(false); const [links, setLinks] = uS(false); const [outline, setOutline] = uS(false); uE(() => { const body = document.body; const html = document.documentElement; const sizes = [1, 1.15, 1.3, 1.5]; const lines = [1.55, 1.7, 1.9, 2.1]; const aligns = ["initial", "justify", "center", "right"]; body.style.setProperty("--a11y-font-scale", sizes[textSize]); body.style.setProperty("--a11y-line", lines[lineH]); // Mobile: zoom on destabilises position:fixed (modal/header) on iOS Safari. // Use font-size scale on root + a body class so CSS can opt-in. Desktop uses zoom for visual fidelity. const isMobile = window.matchMedia("(max-width: 900px)").matches; if (isMobile) { html.style.zoom = ""; html.style.fontSize = sizes[textSize] === 1 ? "" : (sizes[textSize] * 100) + "%"; } else { html.style.fontSize = ""; html.style.zoom = sizes[textSize]; } body.classList.toggle("a11y-readable", font); body.classList.toggle("a11y-contrast", contrast > 0); body.classList.toggle("a11y-grayscale", gray); body.classList.toggle("a11y-hide-images", hideImgs); body.classList.toggle("a11y-stop-motion", stopMotion); body.classList.toggle("a11y-links", links); // text-align override const sheetId = "a11y-align-sheet"; let s = document.getElementById(sheetId); if (!s) { s = document.createElement("style"); s.id = sheetId; document.head.appendChild(s); } if (align === 0) s.textContent = ""; else s.textContent = `.intro-text, .about-text, .bistro-text, .faq-a, .body, p.body { text-align: ${aligns[align]} !important; }`; }, [textSize, lineH, align, font, contrast, gray, hideImgs, stopMotion, links]); const reset = () => { setTextSize(0); setLineH(0); setAlign(0); setFont(false); setContrast(0); setGray(false); setHideImgs(false); setStopMotion(false); setLinks(false); setOutline(false); }; const LevelPips = ({ value, max = 3 }) => (
{Array.from({ length: max }).map((_, i) => ( ))}
); const BoolPip = ({ on }) => (
); return ( <> {open && (
{t.a11y.title}
{t.a11y.sections.text}
{t.a11y.sections.visual}
{t.a11y.sections.orient}
)} {outline && setOutline(false)}/>} ); } function OutlineOverlay({ onClose }) { const sections = [ { id: "top", label: "01 · Start" }, { id: "intro", label: "02 · Willkommen" }, { id: "places", label: "03 · Platz & Unterkünfte" }, { id: "activities", label: "04 · Aktivitäten" }, { id: "bistro", label: "05 · Seebistro" }, { id: "about", label: "06 · Über uns" }, { id: "faq", label: "07 · FAQ" }, ]; return (
Seitenstruktur
{sections.map(s => ( {s.label} ))}
); } // ---------- Tweaks ---------- function TweaksPanel({ variant, setVariant, accent, setAccent, active }) { if (!active) return null; return (
Tweaks
); } Object.assign(window, { A11yPanel, TweaksPanel });