/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSlider */
const { useState, useEffect, useRef, useMemo } = React;
/* ───────────────────────── DATA ───────────────────────── */
const ROSTER_FUSSBALL = [
{ n: "01", name: "Stoff", role: "Tor", note: "Hält alles. Außer das Bier." },
{ n: "07", name: "Hansi", role: "Sturm", note: "Tor pro Halbzeit garantiert*" },
{ n: "10", name: "Maxi", role: "10er", note: "Spielmacher, Vorlagengeber" },
{ n: "04", name: "Toni", role: "IV", note: "Brutal in der Luft" },
{ n: "11", name: "Flo", role: "Flügel", note: "Schnell. Sehr schnell." },
{ n: "06", name: "Lukas", role: "6er", note: "Räumt auf" },
{ n: "09", name: "Beni", role: "Stürmer", note: "Kopfballmonster" },
{ n: "03", name: "Sepp", role: "LV", note: "Kapitän der Reserve" },
];
const ROSTER_RACING = [
{ n: "A1", name: "Maxi", role: "Bergziege", note: "Watt/kg unmenschlich" },
{ n: "A2", name: "Flo", role: "Sprinter", note: "Letzte 200m gehören ihm" },
{ n: "A3", name: "Hansi", role: "Domestique", note: "Zieht den Zug" },
{ n: "A4", name: "Stoff", role: "All-Rounder", note: "Alles. Immer." },
{ n: "A5", name: "Toni", role: "Zeitfahrer", note: "Aero-Position perfekt" },
];
const FIXTURES = [
{ date: "SA 27.06", time: "10:00", opp: "Turnier Vidrol", venue: "Vidrol", kind: "Turnier" },
{ date: "SA 18.07", time: "10:00", opp: "Turnier Leisach", venue: "Sportplatz Leisach", kind: "Turnier" },
];
const SPONSORS = ["LEISACHER BRÄU", "BERGADLER GMBH", "PNEU PUSTERTAL", "DRAU CYCLES", "OSTTIROL ENERGIE", "ALMHÜTTE STIEGERHOF"];
const STATS = [
{ v: "13", l: "Spiele 25/26" },
{ v: "11", l: "Siege" },
{ v: "247", l: "Halbe nach Sieg" },
{ v: "1.247", l: "Höhenmeter Schnitt" },
];
/* ───────────────────────── HELPERS ───────────────────────── */
function useCountdown(target) {
const [now, setNow] = useState(Date.now());
useEffect(() => {
const t = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(t);
}, []);
const diff = Math.max(0, target - now);
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
return { d, h, m, s };
}
function useMouse() {
const [p, setP] = useState({ x: 0.5, y: 0.5 });
useEffect(() => {
const onMove = (e) => setP({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight });
window.addEventListener("mousemove", onMove);
return () => window.removeEventListener("mousemove", onMove);
}, []);
return p;
}
/* ───────────────────────── BRAND ASSETS ───────────────────────── */
function SparteLogo({ sparte, className = "crest-medallion", combined = false }) {
if (combined) {
return
{/* Outer hexagon — modern, geometric */}
II
);
}
function MountainDraw() {
// Hand-drawn mountain silhouette spanning whole hero — peaks rise tall.
return (
{/* Far range — soft, peaks lower */}
{/* Tree dots */}
{/* Single bird */}
);
}
function MorphingPill() {
const messages = [
"SAISON 25/26 · LANDING IN PROGRESS",
"BIERORDNUNG §1 — §47 · IM ENTWURF",
"247 HALBE NACH SIEG · KALKULIERT",
"OSTTIROL · 46.82°N 12.74°E",
"BUILT IN OSTTIROL · POWERED BY MALZ",
"TRIKOT 25/26 · IN PRODUKTION",
];
const [i, setI] = useState(0);
useEffect(() => {
const t = setInterval(() => setI(v => (v + 1) % messages.length), 3200);
return () => clearInterval(t);
}, []);
return (
{messages[i]}
);
}
/* Rubber stamp — looks pressed-on at angle */
function RubberStamp({ text = "GENEHMIGT", sub = "MMXXVI", angle = -8, top, left, right, bottom }) {
const style = { top, left, right, bottom, transform: `rotate(${angle}deg)` };
return (
);
}
/* Hand-drawn annotation arrow + scribble */
function HandAnnotation({ x, y, label, dir = "left" }) {
// dir = "left" arrow points right (label on left)
const isLeft = dir === "left";
return (
{isLeft ? (
<>
{label}
);
}
/* Flying bird silhouette — crosses sky every ~28s */
function FlyingBird() {
return (
);
}
/* Live versus card — Fußball ⨯ Racing duality with rotating stats */
function VersusCard() {
const stats = [
{ eyebrow: "ZWEI SPARTEN · EIN VEREIN", lA: "Mann", nA: "11", labelA: "Fussball", lB: "Räder", nB: "02", labelB: "Racing", foot: "Rasen trifft Asphalt" },
{ eyebrow: "DIE ROHDATEN · 25/26", lA: "Tore", nA: "47", labelA: "Saison", lB: "Podest", nB: "06", labelB: "Saison", foot: "Bilanz auf Kurs" },
{ eyebrow: "ALTER · DURCHSCHNITT", lA: "Jahre", nA: "24", labelA: "Mannschaft", lB: "PS", nB: "118", labelB: "Maschine", foot: "Jung & laut" },
{ eyebrow: "BIER NACH HEIMSPIEL", lA: "Halbe", nA: "247", labelA: "Statistisch", lB: "Min", nB: "12", labelB: "Bis Schaum weg", foot: "Bierordnung §3" },
];
const [idx, setIdx] = useState(0);
useEffect(() => {
const t = setInterval(() => setIdx(v => (v + 1) % stats.length), 4500);
return () => clearInterval(t);
}, []);
const s = stats[idx];
return (
{s.eyebrow}
{String(idx + 1).padStart(2, "0")}/{String(stats.length).padStart(2, "0")}
{s.foot}
{idx === 3 ? "🍺" : "→"}
{/* Tape strip — fake "barcode" of pages */}
{stats.map((_, i) => (
);
}
/* Cursor trail — ephemeral dots */
function CursorTrail() {
const [pts, setPts] = useState([]);
useEffect(() => {
let id = 0;
const onMove = (e) => {
setPts(p => {
const next = [...p, { id: id++, x: e.clientX, y: e.clientY, t: Date.now() }];
return next.slice(-10);
});
};
window.addEventListener("mousemove", onMove);
const cleanup = setInterval(() => {
const now = Date.now();
setPts(p => p.filter(pt => now - pt.t < 800));
}, 100);
return () => {
window.removeEventListener("mousemove", onMove);
clearInterval(cleanup);
};
}, []);
return (
{pts.map((pt, i) => (
);
}
function SnowDrift() {
const flakes = useMemo(() =>
Array.from({ length: 24 }).map(() => ({
l: Math.random() * 100,
d: 8 + Math.random() * 16,
delay: -Math.random() * 16,
o: 0.15 + Math.random() * 0.35,
s: 1 + Math.random() * 2,
drift: (Math.random() - 0.5) * 60,
})), []);
return (
{flakes.map((f, i) => (
);
}
function SunArc() {
return (
{/* Sun disc — concentric rings */}
{Array.from({ length: 16 }).map((_, i) => {
const a = (i * Math.PI * 2) / 16 - Math.PI / 2;
const x1 = 800 + Math.cos(a) * 340;
const y1 = 780 + Math.sin(a) * 340;
const x2 = 800 + Math.cos(a) * (i % 2 === 0 ? 460 : 410);
const y2 = 780 + Math.sin(a) * (i % 2 === 0 ? 460 : 410);
return
{/* tiny center sun */}
);
}
function Constellation() {
const m = useMouse();
// 5 anchor stars whose hairlines connect through the cursor
const stars = [
{ x: 12, y: 22 }, { x: 78, y: 18 }, { x: 88, y: 64 },
{ x: 18, y: 72 }, { x: 50, y: 50 },
];
const cx = m.x * 100, cy = m.y * 100;
return (
{stars.map((s, i) => (
);
}
/* ───────────────────────── HERO VARIANTS ───────────────────────── */
function HeroEditorial({ sparte }) {
const m = useMouse();
const [scroll, setScroll] = useState(0);
const [time, setTime] = useState(new Date());
useEffect(() => {
const onScroll = () => setScroll(window.scrollY);
window.addEventListener("scroll", onScroll, { passive: true });
const t = setInterval(() => setTime(new Date()), 1000);
return () => { window.removeEventListener("scroll", onScroll); clearInterval(t); };
}, []);
const tx = (m.x - 0.5) * 24;
const ty = (m.y - 0.5) * 24;
return (
{/* Drifting LEISACH parallax band — kept, iconic */}
LEISACH · LEISACH · LEISACH · LEISACH
{/* THE II — sculptural centerpiece */}
{/* Two minimal gold accents */}
✦
✦
Built in Osttirol ·Powered by Malz
46.82°N · 12.74°E
{time.toLocaleTimeString("de-AT", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
Radtrikot 25/26
↗
VOL.
II
MMXXVI
BUILT IN
·
OSTTIROL
Die Zweite.
Durstiger als die Erste .
{Array.from({ length: 6 }).map((_, i) => (
✦ LEISACH II ✦ MMXXVI ✦ BUILT IN OSTTIROL · POWERED BY MALZ ✦ BERG · BIER · BALL ✦ OSTTIROL ✦ SPORTCLUB · MMXIX ✦
))}
);
}
function HeroBroadcast({ sparte }) {
const isFB = sparte === "fussball";
const cd = useCountdown(useMemo(() => Date.now() + 1000 * 60 * 60 * 78 + 47000, []));
return (
{isFB ? "MATCHDAY -3" : "RACE WEEK"}
{isFB ? "MATCH" : "STAGE"}PREVIEW.
{STATS.map((s, i) => (
))}
NEXT FIXTURE
LEISACH II · TURNIER VIDROL
SA 27.06.2026 · VIDROL
{[
["TG", cd.d], ["STD", cd.h], ["MIN", cd.m], ["SEK", cd.s]
].map(([l, v], i) => (
{String(v).padStart(2, "0")}
{l}
))}
BREAKING
★ Hansi trifft im Aufwärmen 14× in Folge — Trainer "leicht beunruhigt"
★ Maxi sichtet sich neuen Sattel — gesamte Saison gefährdet
★ Leisacher Bräu erhöht Halbe-Limit auf 4 nach Sieg
★ Toni weiterhin ungeschlagen im Bierdiscus
★ Wetter Samstag: warm, mild, optimal für Niederlagen des Gegners
);
}
function HeroExperimental({ sparte }) {
const isFB = sparte === "fussball";
const m = useMouse();
const cd = useCountdown(useMemo(() => Date.now() + 1000 * 60 * 60 * 78 + 47000, []));
const tx = (m.x - 0.5) * 40;
const ty = (m.y - 0.5) * 40;
return (
{/* layered mountains */}
BERG.
BIER.
BALL.
{isFB ? "BUDE." : "BREAKAWAY."}
NÄCHSTER START
FR · 02.05 · 19:30
COUNTDOWN
{String(cd.d).padStart(2, "0")}:{String(cd.h).padStart(2, "0")}:{String(cd.m).padStart(2, "0")}:{String(cd.s).padStart(2, "0")}
SAISONHEFT ÖFFNEN
↗
);
}
/* ───────────────────────── REVEAL ON SCROLL ───────────────────────── */
function useRevealOnScroll(selector, threshold = 0.35) {
useEffect(() => {
const els = document.querySelectorAll(selector);
if (!els.length) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add("in-view");
obs.unobserve(e.target);
}
});
}, { threshold });
els.forEach(el => obs.observe(el));
return () => obs.disconnect();
}, [selector, threshold]);
}
/* ───────────────────────── MEDIA — video + cut-out player ───────────────────────── */
function MediaSection() {
useRevealOnScroll(".media-reveal");
const [muted, setMuted] = useState(true);
const iframeRef = useRef(null);
const userMutedRef = useRef(false); // user explicitly muted via button → don't auto-unmute
const sendCmd = (func, args = "") => {
const w = iframeRef.current && iframeRef.current.contentWindow;
if (!w) return;
w.postMessage(JSON.stringify({ event: "command", func, args }), "*");
};
const toggleSound = () => {
if (muted) {
sendCmd("unMute");
sendCmd("setVolume", [70]);
userMutedRef.current = false;
setMuted(false);
} else {
sendCmd("mute");
userMutedRef.current = true;
setMuted(true);
}
};
// Keep the video playing (muted autoplay). Sound only via the unmute button.
useEffect(() => {
const armTimer = setTimeout(() => {
sendCmd("playVideo");
}, 2500);
const keepAlive = setInterval(() => {
sendCmd("playVideo");
}, 5000);
return () => {
clearTimeout(armTimer);
clearInterval(keepAlive);
};
}, []);
return (
¶ DORFLEGENDEN · SOUNDTRACK 25/26
{/* Big background headline */}
BERG
BIER
BALL
{/* Autoplay video — tilted card */}
VIDEO
{/* subtle scanline overlay for character */}
{/* Sound toggle */}
{muted ? "🔇" : "🔊"}
{muted ? "TON AN" : "TON AUS"}
Florian Andreas — Dorflegenden
{muted ? "TON AN — BUTTON DRÜCKEN" : "TON LÄUFT"}
{/* Cut-out player — masked into transparency */}
{/* Sticker / N°99 badge */}
NUMMER
99
LEISACH II
{/* Three-truths spine — wordplay on "Halbzeit" */}
Manche spielen auf Sieg.
Manche fahren auf Zeit.
Wir spielen auf die Dritte Halbzeit.
— BUILT IN OSTTIROL · POWERED BY MALZ —
);
}
/* ───────────────────────── SHARED SECTIONS ───────────────────────── */
function SectionLabel({ n, t, k }) {
return (
{n}
{t}
{k && / {k} }
);
}
function Fixtures() {
useRevealOnScroll(".fix-reveal");
return (
¶ TERMINE · SAISON 25/26
Wann treffen wir uns?
{FIXTURES.map((f, i) => {
const [day, dm] = f.date.split(" ");
return (
{f.kind}
{day}
{dm}
{f.opp}
{f.venue}
);
})}
— ZWEI TERMINE · MEHR BRAUCHT'S NICHT —
);
}
function Gallery() {
useRevealOnScroll(".gal-reveal");
return (
);
}
function BreakingNews() {
useRevealOnScroll(".bn-reveal");
return (
{Array.from({ length: 2 }).map((_, k) => (
{Array.from({ length: 8 }).map((_, i) => (
EILMELDUNG
))}
))}
PRESSEMITTEILUNG
LEISACH · MMXXVI
Cheftrainer entlassen.
Nach internen Problemen und Unstimmigkeiten wurde unser
Cheftrainer von seiner Rolle entbunden und übernimmt ab sofort
wieder die volle Verantwortung für die Torwart-Position .
EX-TRAINER
Der Ex-Cheftrainer · letzte Anweisungen am Spielfeldrand
STELLENAUSSCHREIBUNG
Cheftrainer-Position offen.
Bewerbungen bitte per WhatsApp.
{Array.from({ length: 2 }).map((_, k) => (
{Array.from({ length: 8 }).map((_, i) => (
ENDE DER EILMELDUNG
))}
))}
);
}
function SparteSelect({ sparte, setSparte }) {
return (
¶ WÄHLE DEINE DISZIPLIN
👇
Klick auf eine Disziplin · eigene Unterseite
BUILT IN OSTTIROL
— EST. MMXIX —
POWERED BY MALZ
);
}
function Footer({ sparte }) {
return (
);
}
/* ───────────────────────── APP ───────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"vibe": "editorial",
"sparte": "fussball",
"accent": "gold",
"motion": true
}/*EDITMODE-END*/;
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const sparte = tweaks.sparte;
// Global trigger — any element with [data-trikot-trigger] führt direkt zur Radtrikot-Seite
useEffect(() => {
const onClick = (e) => {
const trigger = e.target.closest("[data-trikot-trigger]");
if (trigger) {
e.preventDefault();
window.location.href = "/trikot/";
}
};
document.addEventListener("click", onClick);
return () => document.removeEventListener("click", onClick);
}, []);
// accent color override
useEffect(() => {
const map = {
gold: "#e9bf5e",
hellblau: "#3e8edf",
weiss: "#ffffff",
red: "#e63946",
};
document.documentElement.style.setProperty("--accent", map[tweaks.accent] || "#e9bf5e");
document.documentElement.dataset.vibe = tweaks.vibe;
document.documentElement.dataset.motion = tweaks.motion ? "on" : "off";
}, [tweaks.accent, tweaks.vibe, tweaks.motion]);
const setSparte = (s) => setTweak("sparte", s);
let Hero;
if (tweaks.vibe === "broadcast") Hero = HeroBroadcast;
else if (tweaks.vibe === "experimental") Hero = HeroExperimental;
else Hero = HeroEditorial;
return (
setTweak("vibe", v)}
options={[
{ value: "editorial", label: "Editorial" },
{ value: "broadcast", label: "Broadcast" },
{ value: "experimental", label: "Experimental" },
]}
/>
setTweak("sparte", v)}
options={[
{ value: "fussball", label: "Fußball" },
{ value: "racing", label: "Racing" },
]}
/>
setTweak("accent", v)}
options={[
{ value: "gold", label: "Gold" },
{ value: "hellblau", label: "Hellblau" },
{ value: "weiss", label: "Weiß" },
{ value: "red", label: "Rot" },
]}
/>
setTweak("motion", v)}
label="Marquee / Scanlines / Float"
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render( 
;
}
const src = sparte === "racing" ? "assets/leisach-racing.jpeg" : "assets/leisach-fussball.png";
const alt = sparte === "racing" ? "Leisach II Racing" : "Leisach II Fußball";
return 
{/* Sticker / N°99 badge */}
