Initialisieren
This commit is contained in:
74
components/coin-3d.tsx
Normal file
74
components/coin-3d.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { forwardRef } from "react";
|
||||
|
||||
type Coin3DProps = {
|
||||
frontLabel: string;
|
||||
backLabel: string;
|
||||
/** Kantenlänge in px */
|
||||
size?: number;
|
||||
/** Endlos-Idle-Drehung (Hero) */
|
||||
spin?: boolean;
|
||||
/**
|
||||
* Achse, um die die Münze rotiert. Bestimmt, wie die Rückseite
|
||||
* vorgedreht wird, damit ihr Text lesbar bleibt.
|
||||
* "x" = Flip um die X-Achse (Tool), "y" = Drehung um die Y-Achse (Hero).
|
||||
*/
|
||||
spinAxis?: "x" | "y";
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/** Gestapelte Kreisscheiben erzeugen die Münzdicke. */
|
||||
const EDGE_LAYERS = [-3, -2, -1, 0, 1, 2, 3];
|
||||
|
||||
/**
|
||||
* Echte 3D-CSS-Münze. Der forwarded ref zeigt auf das rotierende
|
||||
* Innen-Element, damit GSAP `rotationX` flippen kann.
|
||||
*/
|
||||
const Coin3D = forwardRef<HTMLDivElement, Coin3DProps>(function Coin3D(
|
||||
{ frontLabel, backLabel, size = 168, spin = false, spinAxis = "x", className = "" },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`coin ${spin ? "animate-coin-spin" : ""} ${className}`}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
{EDGE_LAYERS.map((z) => (
|
||||
<div
|
||||
key={z}
|
||||
aria-hidden
|
||||
className="coin-edge"
|
||||
style={{ transform: `translateZ(${z}px)` }}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="coin-face coin-face--front">
|
||||
<div className="coin-engraving" aria-hidden />
|
||||
<div className="coin-engraving coin-engraving--inner" aria-hidden />
|
||||
<span className="coin-label" style={{ fontSize: size * 0.1 }}>
|
||||
{frontLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="coin-face coin-face--back"
|
||||
style={{
|
||||
transform:
|
||||
spinAxis === "y"
|
||||
? "rotateY(180deg) translateZ(4px)"
|
||||
: "rotateX(180deg) translateZ(4px)",
|
||||
}}
|
||||
>
|
||||
<div className="coin-engraving" aria-hidden />
|
||||
<div className="coin-engraving coin-engraving--inner" aria-hidden />
|
||||
<span className="coin-label" style={{ fontSize: size * 0.1 }}>
|
||||
{backLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default Coin3D;
|
||||
26
components/deferred-scroll-flourishes.tsx
Normal file
26
components/deferred-scroll-flourishes.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const ScrollFlourishes = dynamic(() => import("@/components/scroll-flourishes"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
/** Die dekorativen, aufwändigen Ranken sind nur auf größeren Displays sinnvoll. */
|
||||
export default function DeferredScrollFlourishes() {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const query = window.matchMedia(
|
||||
"(min-width: 768px) and (prefers-reduced-motion: no-preference)",
|
||||
);
|
||||
const update = () => setEnabled(query.matches);
|
||||
|
||||
update();
|
||||
query.addEventListener("change", update);
|
||||
return () => query.removeEventListener("change", update);
|
||||
}, []);
|
||||
|
||||
return enabled ? <ScrollFlourishes /> : null;
|
||||
}
|
||||
21
components/direct-answer.tsx
Normal file
21
components/direct-answer.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
export default function DirectAnswer() {
|
||||
return (
|
||||
<section className="relative py-4 sm:py-8">
|
||||
<div className="mx-auto w-full max-w-3xl px-5 sm:px-8">
|
||||
<div className="rounded-3xl border border-line bg-surface/80 p-7 text-center shadow-soft sm:p-9">
|
||||
<h2 className="font-display text-xl font-semibold tracking-tight text-ink">
|
||||
Was ist Entscheidomat?
|
||||
</h2>
|
||||
<p className="mt-3 text-base leading-relaxed text-ink-soft">
|
||||
Entscheidomat ist ein kostenloser Zufallsgenerator und eine
|
||||
digitale Entscheidungshilfe. Du kannst online eine Münze werfen,
|
||||
ein Glücksrad drehen, würfeln, eine Zufallszahl erzeugen, den
|
||||
Magic 8-Ball fragen, eine eigene Liste auslosen oder den
|
||||
Ja-Nein-Generator befragen – ganz ohne Anmeldung und direkt im
|
||||
Browser.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
76
components/features.tsx
Normal file
76
components/features.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import {
|
||||
ShieldCheck,
|
||||
SlidersHorizontal,
|
||||
Smartphone,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import Reveal from "@/components/reveal";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
icon: SlidersHorizontal,
|
||||
title: "Komplett anpassbar",
|
||||
text: "Beschriftungen, Optionen und Antworten – alles passt sich deiner Entscheidung an und bleibt automatisch gespeichert.",
|
||||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Kein Account nötig",
|
||||
text: "Kein Login, keine Werbung, kein Schnickschnack. Öffnen, werfen, entscheiden – fertig.",
|
||||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Überall dabei",
|
||||
text: "Ob Handy, Tablet oder Desktop: Der Entscheidomat fühlt sich auf jedem Gerät butterweich an.",
|
||||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Liebe zum Detail",
|
||||
text: "Physikalische Spins, feine 3D-Animationen und Soundeffekte machen jede Entscheidung zum kleinen Erlebnis.",
|
||||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<section id="features" className="relative scroll-mt-20 py-24 sm:py-32">
|
||||
<div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
|
||||
<Reveal className="mx-auto max-w-2xl text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-ink-soft">
|
||||
Warum Entscheidomat?
|
||||
</p>
|
||||
<h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
|
||||
Weil Entscheiden auch{" "}
|
||||
<em className="font-display italic text-[#0d7a57]">schön</em> sein kann.
|
||||
</h2>
|
||||
<p className="mt-4 text-lg leading-relaxed text-ink-soft">
|
||||
Keine langweiligen Standard-Tools mehr. Hier bekommst du Zufall mit
|
||||
Stil – und trotzdem blitzschnell und ohne Hürden.
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{FEATURES.map((feature, i) => (
|
||||
<Reveal key={feature.title} delay={i * 0.08}>
|
||||
<div className="group h-full rounded-3xl border border-line bg-surface p-7 shadow-soft transition-all duration-300 hover:-translate-y-1.5 hover:shadow-lift">
|
||||
<div
|
||||
className={`flex h-12 w-12 items-center justify-center rounded-2xl ${feature.tint} transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-6`}
|
||||
>
|
||||
<feature.icon className="h-6 w-6" strokeWidth={2.1} />
|
||||
</div>
|
||||
<h3 className="mt-5 font-display text-lg font-semibold tracking-tight">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-ink-soft">
|
||||
{feature.text}
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
30
components/footer.tsx
Normal file
30
components/footer.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import Link from "next/link";
|
||||
import { Coins } from "lucide-react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-line bg-surface/60">
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-between gap-4 px-5 py-8 text-sm text-ink-soft sm:flex-row sm:px-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<Coins className="h-4 w-4 text-[#0d7a57]" />
|
||||
<span className="font-display font-semibold text-ink">
|
||||
Entscheid<span className="italic text-[#0d7a57]">omat</span>
|
||||
</span>
|
||||
<span aria-hidden>·</span>
|
||||
<span>© {new Date().getFullYear()}</span>
|
||||
</div>
|
||||
<p>
|
||||
Gebaut für alle, die sich (manchmal) nicht entscheiden können.
|
||||
</p>
|
||||
<nav aria-label="Rechtliches" className="flex items-center gap-4">
|
||||
<Link href="/impressum" className="transition-colors hover:text-[#0d7a57]">
|
||||
Impressum
|
||||
</Link>
|
||||
<Link href="/datenschutz" className="transition-colors hover:text-[#0d7a57]">
|
||||
Datenschutz
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
327
components/hero.tsx
Normal file
327
components/hero.tsx
Normal file
@@ -0,0 +1,327 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
motion,
|
||||
useMotionValue,
|
||||
useScroll,
|
||||
useSpring,
|
||||
useTransform,
|
||||
} from "framer-motion";
|
||||
import { ArrowDown } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
|
||||
export default function Hero() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
const { scrollY } = useScroll();
|
||||
|
||||
// Scroll-Transformationen (Reversibel)
|
||||
const ringY = useTransform(scrollY, [0, 1000], [0, 180]);
|
||||
const ringScale = useTransform(scrollY, [0, 1000], [1, 1.18]);
|
||||
const ringOpacity = useTransform(scrollY, [0, 400, 1000, 1500], [1, 1, 0.5, 0]);
|
||||
const ringRotate = useTransform(scrollY, [0, 1000], [0, 10]);
|
||||
|
||||
// Interaktive Cursor-Bewegung (Subtile Spring-Physik für elegantes Hovering)
|
||||
const rawMouseX = useMotionValue(0);
|
||||
const rawMouseY = useMotionValue(0);
|
||||
|
||||
const smoothMouseX = useSpring(rawMouseX, { stiffness: 60, damping: 28 });
|
||||
const smoothMouseY = useSpring(rawMouseY, { stiffness: 60, damping: 28 });
|
||||
|
||||
// Subtile magnetische Linienverschiebung
|
||||
const magnetX = useTransform(smoothMouseX, [-0.5, 0.5], [-10, 10]);
|
||||
const magnetY = useTransform(smoothMouseY, [-0.5, 0.5], [-8, 8]);
|
||||
|
||||
// SVG-Glow-Position (in viewBox 1550 x 950 Koordinaten)
|
||||
const [svgGlow, setSvgGlow] = useState({ x: 775, y: 475 });
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLElement>) => {
|
||||
const rect = sectionRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
// Normalisierte Mauskoordinaten (-0.5 bis 0.5)
|
||||
const normX = (e.clientX - rect.left) / rect.width - 0.5;
|
||||
const normY = (e.clientY - rect.top) / rect.height - 0.5;
|
||||
rawMouseX.set(normX);
|
||||
rawMouseY.set(normY);
|
||||
|
||||
// Umrechnung auf SVG-ViewBox-Koordinaten für das sanfte Aufleuchten
|
||||
const svgX = Math.round(((e.clientX - rect.left) / rect.width) * 1550);
|
||||
const svgY = Math.round(((e.clientY - rect.top) / rect.height) * 950);
|
||||
setSvgGlow({ x: svgX, y: svgY });
|
||||
};
|
||||
|
||||
// Text-Intro startet erst, wenn der Preloader das "app:reveal"-Event feuert
|
||||
useEffect(() => {
|
||||
// Der Hero ist das LCP-Element. Auf Mobilgeräten bleibt er deshalb sofort
|
||||
// sichtbar, statt seine endgültige Darstellung durch eine Timeline zu verzögern.
|
||||
if (window.matchMedia("(max-width: 767px)").matches) return;
|
||||
|
||||
let ctx: gsap.Context | undefined;
|
||||
let fallback: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
const start = () => {
|
||||
if (ctx) return;
|
||||
ctx = gsap.context(() => {
|
||||
gsap.fromTo(
|
||||
".hero-el",
|
||||
{ y: 34, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
stagger: 0.1,
|
||||
ease: "power3.out",
|
||||
},
|
||||
);
|
||||
}, sectionRef);
|
||||
};
|
||||
|
||||
const mm = gsap.matchMedia();
|
||||
mm.add("(prefers-reduced-motion: no-preference)", () => {
|
||||
window.addEventListener("app:reveal", start, { once: true });
|
||||
|
||||
// Beim gecachten bzw. mobilen Preloader ist die Seite schon sichtbar,
|
||||
// bevor dieser Effect registriert wird. Dann sofort animieren statt auf
|
||||
// den Fallback-Timer zu warten.
|
||||
if (document.documentElement.dataset.preloader !== "active") {
|
||||
start();
|
||||
} else {
|
||||
fallback = setTimeout(start, 1200);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
mm.revert();
|
||||
window.removeEventListener("app:reveal", start);
|
||||
if (fallback) clearTimeout(fallback);
|
||||
ctx?.revert();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="top"
|
||||
ref={sectionRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
className="relative flex min-h-[100svh] flex-col justify-center pt-16 cursor-default"
|
||||
>
|
||||
{/* Weicher Spot in der Mitte: Fadet am Rand und unten zu 100% transparent in den Seitenhintergrund aus */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[radial-gradient(ellipse_75%_55%_at_50%_35%,#ffffff_0%,transparent_100%)]"
|
||||
/>
|
||||
|
||||
{/* Multischichtiges Ring-Design: Kreise fließen flüssig über die Sektionsgrenze nach unten */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, ease: "easeOut" }}
|
||||
style={{
|
||||
y: ringY,
|
||||
x: magnetX,
|
||||
scale: ringScale,
|
||||
opacity: ringOpacity,
|
||||
rotate: ringRotate,
|
||||
}}
|
||||
className="pointer-events-none absolute left-1/2 top-1/2 w-[min(100vw,1550px)] h-[min(115vh,1100px)] -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<motion.div style={{ y: magnetY }} className="w-full h-full">
|
||||
<svg
|
||||
aria-hidden
|
||||
className="w-full h-full"
|
||||
viewBox="0 0 1550 1100"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
{/* Subtiler radialer Glow-Verlauf unter dem Cursor */}
|
||||
<radialGradient
|
||||
id="cursorLineGlow"
|
||||
cx={svgGlow.x}
|
||||
cy={svgGlow.y}
|
||||
r="280"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0%" stopColor="#0d7a57" stopOpacity="0.32" />
|
||||
<stop offset="50%" stopColor="#0d7a57" stopOpacity="0.12" />
|
||||
<stop offset="100%" stopColor="#0d7a57" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
{/* 1. Basis-Ellipsen mit dezentem Ruhe-Opacity */}
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="290"
|
||||
ry="180"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.13"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="440"
|
||||
ry="275"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.10"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="610"
|
||||
ry="370"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.11"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="770"
|
||||
ry="460"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.08"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="5 5"
|
||||
/>
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="920"
|
||||
ry="550"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.06"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="1080"
|
||||
ry="640"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.05"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
||||
{/* Dynamisch kreuzende Orbit-Bögen – reichen flüssig bis in die nächste Sektion */}
|
||||
<circle
|
||||
cx="690"
|
||||
cy="440"
|
||||
r="620"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.07"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<circle
|
||||
cx="860"
|
||||
cy="570"
|
||||
r="680"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.06"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="1040"
|
||||
ry="440"
|
||||
transform="rotate(-11 775 490)"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.06"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
||||
{/* Feine Horizon-Linie hinter den Buttons */}
|
||||
<line
|
||||
x1="390"
|
||||
y1="690"
|
||||
x2="1160"
|
||||
y2="690"
|
||||
stroke="#111412"
|
||||
strokeOpacity="0.09"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
||||
{/* 2. Subtile Aufleuchten-Ebene unter dem Cursor */}
|
||||
<g stroke="url(#cursorLineGlow)" strokeWidth="1.3">
|
||||
<ellipse cx="775" cy="490" rx="290" ry="180" />
|
||||
<ellipse cx="775" cy="490" rx="440" ry="275" />
|
||||
<ellipse cx="775" cy="490" rx="610" ry="370" />
|
||||
<ellipse cx="775" cy="490" rx="770" ry="460" strokeDasharray="5 5" />
|
||||
<ellipse cx="775" cy="490" rx="920" ry="550" />
|
||||
<ellipse cx="775" cy="490" rx="1080" ry="640" />
|
||||
<circle cx="690" cy="440" r="620" />
|
||||
<circle cx="860" cy="570" r="680" />
|
||||
<ellipse
|
||||
cx="775"
|
||||
cy="490"
|
||||
rx="1040"
|
||||
ry="440"
|
||||
transform="rotate(-11 775 490)"
|
||||
/>
|
||||
<line x1="390" y1="690" x2="1160" y2="690" />
|
||||
</g>
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<div className="bg-noise pointer-events-none absolute inset-0" aria-hidden />
|
||||
|
||||
<div className="relative mx-auto flex w-full max-w-5xl flex-col items-center px-5 py-16 text-center sm:px-8">
|
||||
<h1 className="font-sans text-[11vw] font-medium leading-[1.02] tracking-[-0.03em] sm:text-6xl lg:text-7xl">
|
||||
<span className="hero-el block">Kostenloser</span>
|
||||
<span className="hero-el block font-display text-[1.06em] font-normal italic tracking-normal text-[#0d7a57]">
|
||||
Zufallsgenerator
|
||||
</span>
|
||||
<span className="hero-el block">für schnelle Entscheidungen</span>
|
||||
</h1>
|
||||
|
||||
<p className="hero-el mt-8 max-w-md text-base leading-relaxed text-ink-soft sm:text-lg">
|
||||
Lass den Zufall entscheiden – mit Münze, Glücksrad, Würfel & mehr für
|
||||
alle, die sich mal wieder nicht entscheiden können.
|
||||
</p>
|
||||
|
||||
<div className="hero-el mt-10 flex flex-wrap items-center justify-center gap-3">
|
||||
<motion.a
|
||||
href="#tools"
|
||||
whileHover={{ y: -2, scale: 1.02 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="inline-flex items-center rounded-full bg-[#0d7a57] px-8 py-3.5 text-sm font-semibold text-white shadow-[0_12px_28px_rgba(13,122,87,0.30)] transition-colors duration-200 hover:bg-[#095c41]"
|
||||
>
|
||||
Jetzt entscheiden
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#features"
|
||||
whileHover={{ y: -2 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="inline-flex items-center rounded-full border border-ink/20 bg-surface/80 px-8 py-3.5 text-sm font-semibold text-ink transition-colors duration-200 hover:border-[#0d7a57] hover:text-[#0d7a57]"
|
||||
>
|
||||
Mehr erfahren
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<p className="hero-el mt-8 inline-flex items-center rounded-full border border-[#0d7a57]/20 bg-[#e6f7f0] px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-[#0d7a57]">
|
||||
<span className="inline-block h-1.5 w-1.5 rounded-full bg-[#0d7a57] mr-2.5" />
|
||||
7 Tools · Kostenlos · Ohne Anmeldung
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Scroll-Hinweis */}
|
||||
<a
|
||||
href="#tools"
|
||||
aria-label="Zu den Tools scrollen"
|
||||
className="absolute bottom-6 left-1/2 z-10 hidden -translate-x-1/2 flex-col items-center gap-1 text-ink-soft transition-colors hover:text-ink md:flex"
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.2em]">
|
||||
Scroll
|
||||
</span>
|
||||
<ArrowDown className="animate-bob h-4 w-4" />
|
||||
</a>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
74
components/homepage-faq.tsx
Normal file
74
components/homepage-faq.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Reveal from "@/components/reveal";
|
||||
|
||||
export const HOMEPAGE_FAQS = [
|
||||
{
|
||||
q: "Was ist Entscheidomat?",
|
||||
a: "Entscheidomat ist ein kostenloses Portal mit sieben Zufalls- und Entscheidungs-Tools: Ja-Nein-Generator, Münze, Glücksrad, Würfel, Zufallszahl, Magic 8-Ball und Listen-Auslosung – alle direkt im Browser nutzbar.",
|
||||
},
|
||||
{
|
||||
q: "Ist Entscheidomat wirklich kostenlos?",
|
||||
a: "Ja, vollständig kostenlos. Es gibt keine versteckten Kosten und keine Pflicht-Anmeldung, um die Tools zu nutzen.",
|
||||
},
|
||||
{
|
||||
q: "Muss ich mich registrieren?",
|
||||
a: "Nein. Es ist keine Anmeldung, keine E-Mail-Adresse und kein Account nötig – einfach öffnen und loslegen.",
|
||||
},
|
||||
{
|
||||
q: "Werden meine Daten gespeichert oder weitergegeben?",
|
||||
a: "Eigene Einstellungen (z. B. Beschriftungen oder Listen) werden nur lokal im localStorage deines Browsers gespeichert und nicht an einen Server übertragen. Details findest du in der Datenschutzerklärung.",
|
||||
},
|
||||
{
|
||||
q: "Funktioniert Entscheidomat auch auf dem Handy?",
|
||||
a: "Ja, alle Tools sind vollständig responsiv und funktionieren auf Smartphone, Tablet und Desktop.",
|
||||
},
|
||||
{
|
||||
q: "Wie zufällig sind die Ergebnisse?",
|
||||
a: "Jedes Tool erzeugt bei jeder Anfrage einen neuen Zufallswert, unabhängig von vorherigen Ergebnissen.",
|
||||
},
|
||||
{
|
||||
q: "Kann ich die Tools für wichtige Entscheidungen nutzen?",
|
||||
a: "Die Tools sind für spielerische Alltagsentscheidungen gedacht. Bei wichtigen persönlichen, finanziellen, rechtlichen oder gesundheitlichen Entscheidungen solltest du dich nicht auf einen Zufallsgenerator verlassen.",
|
||||
},
|
||||
{
|
||||
q: "Gibt es Werbung auf Entscheidomat?",
|
||||
a: "Aktuell zeigt Entscheidomat keine Werbung. Sollte sich das künftig ändern, wird das vorher transparent in der Datenschutzerklärung ergänzt.",
|
||||
},
|
||||
{
|
||||
q: "Wie kann ich Feedback geben oder Kontakt aufnehmen?",
|
||||
a: "Am einfachsten per E-Mail an info@entscheidomat.com – die Kontaktdaten findest du auch im Impressum.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomepageFaq() {
|
||||
return (
|
||||
<section id="faq" className="relative scroll-mt-20 py-20 sm:py-28">
|
||||
<div className="mx-auto w-full max-w-3xl px-5 sm:px-8">
|
||||
<Reveal className="text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-ink-soft">
|
||||
Häufige Fragen
|
||||
</p>
|
||||
<h2 className="mt-3 text-4xl font-medium tracking-[-0.02em] sm:text-5xl">
|
||||
Noch Fragen zu{" "}
|
||||
<em className="font-display italic text-[#0d7a57]">Entscheidomat</em>?
|
||||
</h2>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.1} className="mt-10 space-y-3">
|
||||
{HOMEPAGE_FAQS.map((faq) => (
|
||||
<details
|
||||
key={faq.q}
|
||||
className="group rounded-2xl border border-line bg-cream/70 px-5 py-4"
|
||||
>
|
||||
<summary className="cursor-pointer list-none font-semibold text-ink marker:content-none">
|
||||
{faq.q}
|
||||
</summary>
|
||||
<p className="mt-2 text-sm leading-relaxed text-ink-soft">
|
||||
{faq.a}
|
||||
</p>
|
||||
</details>
|
||||
))}
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
38
components/legal-layout.tsx
Normal file
38
components/legal-layout.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { ReactNode } from "react";
|
||||
import Nav from "@/components/nav";
|
||||
import Footer from "@/components/footer";
|
||||
|
||||
export default function LegalLayout({
|
||||
title,
|
||||
updated,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
updated: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<main className="flex-1 pt-16">
|
||||
<div className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8 sm:py-24">
|
||||
<h1 className="font-display text-4xl font-medium tracking-[-0.02em] sm:text-5xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-3 text-sm text-ink-soft">Stand: {updated}</p>
|
||||
|
||||
<div className="mt-8 rounded-2xl border border-clay/30 bg-clay-soft px-5 py-4 text-sm font-medium leading-relaxed text-clay">
|
||||
<strong>Hinweis für den Pre-Launch:</strong> Vor der öffentlichen
|
||||
Veröffentlichung müssen die Angaben zum Diensteanbieter und eine
|
||||
ladungsfähige Geschäftsanschrift vollständig ergänzt werden.
|
||||
</div>
|
||||
|
||||
<div className="mt-10 space-y-8 text-[15px] leading-relaxed text-ink-soft [&_h2]:font-display [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-ink [&_a]:text-[#0d7a57] [&_a]:underline [&_a]:underline-offset-2 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
134
components/nav.tsx
Normal file
134
components/nav.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { ChevronDown, Menu, Volume2, VolumeX, X } from "lucide-react";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
|
||||
const TOOLS = [
|
||||
{ href: "/ja-nein-generator", label: "Ja-Nein-Generator", hint: "Schnelle Entscheidungen" },
|
||||
{ href: "/muenze-werfen", label: "Münze werfen", hint: "Kopf oder Zahl" },
|
||||
{ href: "/gluecksrad", label: "Glücksrad", hint: "Drehen & auswählen" },
|
||||
{ href: "/wuerfel-online", label: "Würfel online", hint: "Für Spiel & Zufall" },
|
||||
{ href: "/zufallszahl-generator", label: "Zufallszahl", hint: "Dein Zahlenbereich" },
|
||||
{ href: "/magic-8-ball", label: "Magic 8-Ball", hint: "Das kleine Orakel" },
|
||||
{ href: "/namen-auslosen", label: "Namen auslosen", hint: "Listen & Gewinner" },
|
||||
];
|
||||
|
||||
export default function Nav() {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [toolsOpen, setToolsOpen] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const { enabled, toggle, play } = useSound();
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 10);
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
setToolsOpen(false);
|
||||
setMobileOpen(false);
|
||||
}
|
||||
};
|
||||
const onPointerDown = (event: MouseEvent) => {
|
||||
if (!dropdownRef.current?.contains(event.target as Node)) setToolsOpen(false);
|
||||
};
|
||||
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
window.addEventListener("mousedown", onPointerDown);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", onScroll);
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
window.removeEventListener("mousedown", onPointerDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const closeMenus = () => {
|
||||
setToolsOpen(false);
|
||||
setMobileOpen(false);
|
||||
};
|
||||
|
||||
const soundButton = (
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
toggle();
|
||||
if (!enabled) play("pop");
|
||||
}}
|
||||
whileTap={{ scale: 0.88 }}
|
||||
aria-label={enabled ? "Sound ausschalten" : "Sound einschalten"}
|
||||
title={enabled ? "Sound ausschalten" : "Sound einschalten"}
|
||||
className="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border border-line bg-surface text-ink-soft shadow-soft transition-colors duration-200 hover:border-[#0d7a57]/50 hover:text-[#0d7a57]"
|
||||
>
|
||||
{enabled ? <Volume2 className="h-[18px] w-[18px]" /> : <VolumeX className="h-[18px] w-[18px]" />}
|
||||
</motion.button>
|
||||
);
|
||||
|
||||
return (
|
||||
<header className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ${scrolled || mobileOpen ? "border-b border-line/70 bg-paper/95 shadow-[0_4px_24px_rgb(23_23_28/0.05)] backdrop-blur-xl" : "border-b border-transparent bg-transparent"}`}>
|
||||
<nav className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-5 sm:px-8" aria-label="Hauptnavigation">
|
||||
<Link href="/#top" className="group flex items-center gap-2.5" onClick={closeMenus}>
|
||||
<img
|
||||
src="/icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="h-9 w-9 shrink-0 transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
<span className="flex items-baseline">
|
||||
<span className="text-lg font-semibold tracking-tight">Entscheid</span>
|
||||
<span className="font-display text-lg italic text-[#0d7a57] transition-colors group-hover:text-[#095c41]">omat</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<div className="hidden items-center gap-1 sm:flex">
|
||||
<div ref={dropdownRef} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setToolsOpen((open) => !open)}
|
||||
aria-expanded={toolsOpen}
|
||||
aria-haspopup="menu"
|
||||
className="inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium text-ink-soft transition-colors duration-200 hover:bg-[#e6f7f0] hover:text-[#0d7a57]"
|
||||
>
|
||||
Tools <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${toolsOpen ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
{toolsOpen && (
|
||||
<div role="menu" className="absolute right-0 top-[calc(100%+0.7rem)] w-80 overflow-hidden rounded-3xl border border-line bg-surface p-2 shadow-[0_22px_55px_rgba(17,20,18,0.16)]">
|
||||
<p className="px-3 pb-2 pt-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-ink-soft">Alle Zufalls-Tools</p>
|
||||
{TOOLS.map((tool) => (
|
||||
<Link key={tool.href} href={tool.href} role="menuitem" onClick={closeMenus} className="group flex items-center justify-between rounded-2xl px-3 py-2.5 transition-colors hover:bg-[#e6f7f0]">
|
||||
<span><span className="block text-sm font-semibold text-ink group-hover:text-[#0d7a57]">{tool.label}</span><span className="block text-xs text-ink-soft">{tool.hint}</span></span>
|
||||
<span aria-hidden className="text-[#0d7a57] opacity-0 transition-opacity group-hover:opacity-100">→</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Link href="/#features" className="rounded-full px-4 py-2 text-sm font-medium text-ink-soft transition-colors duration-200 hover:bg-[#e6f7f0] hover:text-[#0d7a57]">Features</Link>
|
||||
{soundButton}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 sm:hidden">
|
||||
{soundButton}
|
||||
<button type="button" onClick={() => setMobileOpen((open) => !open)} aria-expanded={mobileOpen} aria-controls="mobile-menu" aria-label={mobileOpen ? "Menü schließen" : "Menü öffnen"} className="flex h-10 w-10 items-center justify-center rounded-full border border-line bg-surface text-ink shadow-soft">
|
||||
{mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{mobileOpen && (
|
||||
<div id="mobile-menu" className="border-t border-line/70 bg-paper px-5 pb-6 pt-4 shadow-xl sm:hidden">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-ink-soft">Tools auswählen</p>
|
||||
<div className="grid gap-1">
|
||||
{TOOLS.map((tool) => <Link key={tool.href} href={tool.href} onClick={closeMenus} className="flex items-center justify-between rounded-2xl px-4 py-3 hover:bg-[#e6f7f0]"><span><span className="block font-semibold text-ink">{tool.label}</span><span className="text-xs text-ink-soft">{tool.hint}</span></span><span className="text-[#0d7a57]">→</span></Link>)}
|
||||
</div>
|
||||
<Link href="/#features" onClick={closeMenus} className="mt-3 block rounded-2xl border border-line px-4 py-3 font-semibold text-ink">Features</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
156
components/playground.tsx
Normal file
156
components/playground.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowRight,
|
||||
CircleDashed,
|
||||
Coins,
|
||||
Dices,
|
||||
Disc3,
|
||||
Hash,
|
||||
HelpCircle,
|
||||
ListChecks,
|
||||
} from "lucide-react";
|
||||
import Reveal from "@/components/reveal";
|
||||
|
||||
const GENERATORS = [
|
||||
{
|
||||
id: "janein",
|
||||
slug: "ja-nein-generator",
|
||||
title: "Ja-Nein-Generator",
|
||||
badge: "Zwei Optionen",
|
||||
description:
|
||||
"Stelle eine Frage und erhalte sofort eine unparteiische Antwort mit Ja oder Nein. Ideal für schnelle Alltagsentscheidungen.",
|
||||
icon: HelpCircle,
|
||||
},
|
||||
{
|
||||
id: "coin",
|
||||
slug: "muenze-werfen",
|
||||
title: "Münze werfen",
|
||||
badge: "3D Münzwurf",
|
||||
description:
|
||||
"Wirf eine goldene 3D-Münze in die Luft und überlasse knifflige Wahlentscheidungen dem klassischen Kopf oder Zahl.",
|
||||
icon: Coins,
|
||||
},
|
||||
{
|
||||
id: "wheel",
|
||||
slug: "gluecksrad",
|
||||
title: "Glücksrad online",
|
||||
badge: "Entscheidungsrad",
|
||||
description:
|
||||
"Erstelle dein eigenes Glücksrad mit individuellen Feldern und drehe für eine transparente, zufällige Auswahl.",
|
||||
icon: Disc3,
|
||||
},
|
||||
{
|
||||
id: "dice",
|
||||
slug: "wuerfel-online",
|
||||
title: "Würfel online",
|
||||
badge: "Würfel-Simulator",
|
||||
description:
|
||||
"Rolle einen oder mehrere 6er, 10er oder benutzerdefinierte 3D-Würfel für Spiele & Entscheidungen.",
|
||||
icon: Dices,
|
||||
},
|
||||
{
|
||||
id: "number",
|
||||
slug: "zufallszahl-generator",
|
||||
title: "Zufallszahl-Generator",
|
||||
badge: "Zahlenbereich",
|
||||
description:
|
||||
"Generiere eine oder mehrere echte Zufallszahlen in einem frei definierten Bereich zwischen Minimum und Maximum.",
|
||||
icon: Hash,
|
||||
},
|
||||
{
|
||||
id: "ball",
|
||||
slug: "magic-8-ball",
|
||||
title: "Magic 8-Ball",
|
||||
badge: "Mystisches Orakel",
|
||||
description:
|
||||
"Befrage die magische Billardkugel und erhalte geheimnisvolle Antworten auf deine Lebensfragen.",
|
||||
icon: CircleDashed,
|
||||
},
|
||||
{
|
||||
id: "list",
|
||||
slug: "namen-auslosen",
|
||||
title: "Namen & Liste auslosen",
|
||||
badge: "Gewinnspiel & Teams",
|
||||
description:
|
||||
"Mische Namen oder Optionen in einer Liste, lose Gewinner aus oder erstelle automatisch zufällige Gruppen.",
|
||||
icon: ListChecks,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export default function Playground() {
|
||||
return (
|
||||
<section id="tools" className="relative scroll-mt-20 py-20 sm:py-28">
|
||||
<div className="relative mx-auto w-full max-w-6xl px-5 sm:px-8">
|
||||
<Reveal className="mx-auto max-w-2xl text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-ink-soft">
|
||||
Die 7 Zufalls-Tools
|
||||
</p>
|
||||
<h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
|
||||
Wähle deinen{" "}
|
||||
<em className="font-display italic text-[#0d7a57]">Generator</em>.
|
||||
</h2>
|
||||
<p className="mt-4 text-lg leading-relaxed text-ink-soft">
|
||||
Klicke auf ein Tool, um direkt zur interaktiven Vollversion mit
|
||||
allen Einstellungen zu gelangen.
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{GENERATORS.map((tool, i) => {
|
||||
const Icon = tool.icon;
|
||||
const isFeatured = i === 6;
|
||||
|
||||
return (
|
||||
<Reveal
|
||||
key={tool.id}
|
||||
delay={i * 0.06}
|
||||
className={isFeatured ? "sm:col-span-2 lg:col-span-1" : ""}
|
||||
>
|
||||
<Link
|
||||
href={`/${tool.slug}`}
|
||||
className="group relative flex h-full flex-col justify-between overflow-hidden rounded-[2rem] border border-line bg-surface p-7 sm:p-8 shadow-lift transition-all duration-300 hover:-translate-y-1.5 hover:border-[#0d7a57]/40 hover:shadow-[0_20px_45px_rgba(13,122,87,0.14)]"
|
||||
>
|
||||
{/* Subtiler Glow-Effekt im Hintergrund der Karte */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute -right-12 -top-12 h-36 w-36 rounded-full bg-[#0d7a57]/5 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:bg-[#0d7a57]/15"
|
||||
/>
|
||||
|
||||
<div>
|
||||
{/* Icon & Badge Header */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-[#0d7a57]/20 bg-[#e6f7f0] text-[#0d7a57] shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-[#0d7a57] group-hover:bg-[#0d7a57] group-hover:text-white">
|
||||
<Icon className="h-6 w-6" strokeWidth={2.1} />
|
||||
</div>
|
||||
<span className="inline-flex items-center rounded-full border border-line bg-paper px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-ink-soft">
|
||||
{tool.badge}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Titel & Beschreibung */}
|
||||
<h3 className="mt-6 font-display text-2xl font-semibold tracking-tight text-ink transition-colors duration-200 group-hover:text-[#0d7a57]">
|
||||
{tool.title}
|
||||
</h3>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-ink-soft">
|
||||
{tool.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Link Footer */}
|
||||
<div className="mt-8 flex items-center justify-between border-t border-line/60 pt-4 text-xs font-semibold uppercase tracking-widest text-[#0d7a57]">
|
||||
<span>Generator öffnen</span>
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-[#e6f7f0] text-[#0d7a57] transition-all duration-300 group-hover:translate-x-1 group-hover:bg-[#0d7a57] group-hover:text-white">
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
148
components/preloader.tsx
Normal file
148
components/preloader.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
const CURL_PATH =
|
||||
"M 100 30 C 88 30, 76 26, 66 22 C 56 18, 46 18, 40 24 C 34 30, 38 40, 48 40 C 56 40, 60 32, 54 28 C 49 25, 43 29, 46 34";
|
||||
const SESSION_KEY = "entscheidomat:preloader-seen";
|
||||
|
||||
/**
|
||||
* Minimalistische Ladeanimation: ein Kalligraphie-Ornament,
|
||||
* das sich selbst zeichnet, danach hebt sich der Vorhang.
|
||||
* Feuert "app:reveal", sobald die Seite sichtbar wird.
|
||||
*/
|
||||
export default function Preloader() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
const [animationDone, setAnimationDone] = useState(false);
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
const leftCurlRef = useRef<SVGPathElement>(null);
|
||||
const rightCurlRef = useRef<SVGPathElement>(null);
|
||||
const dotRef = useRef<SVGCircleElement>(null);
|
||||
const wordRef = useRef<HTMLParagraphElement>(null);
|
||||
const hasStartedRef = useRef(false);
|
||||
|
||||
const reveal = () => {
|
||||
document.documentElement.dataset.preloader = "complete";
|
||||
window.dispatchEvent(new Event("app:reveal"));
|
||||
};
|
||||
|
||||
// Reduced Motion: keine Animation, aber Reveal-Event trotzdem dispatchen –
|
||||
// rein imperativ, kein setState, deshalb kein separater Effekt-Zweig nötig.
|
||||
useEffect(() => {
|
||||
let hasSeenPreloader = false;
|
||||
|
||||
try {
|
||||
hasSeenPreloader = window.sessionStorage.getItem(SESSION_KEY) === "1";
|
||||
} catch {
|
||||
// Falls Browser-Speicher blockiert ist, bleibt der Loader funktional.
|
||||
}
|
||||
|
||||
const shouldSkip = document.documentElement.dataset.preloader === "cached";
|
||||
if (reduced || shouldSkip || (hasSeenPreloader && !hasStartedRef.current)) {
|
||||
setAnimationDone(true);
|
||||
reveal();
|
||||
return;
|
||||
}
|
||||
|
||||
hasStartedRef.current = true;
|
||||
try {
|
||||
window.sessionStorage.setItem(SESSION_KEY, "1");
|
||||
} catch {
|
||||
// Die Animation darf nicht von verfügbarem Browser-Speicher abhängen.
|
||||
}
|
||||
|
||||
document.documentElement.style.overflow = "hidden";
|
||||
const duration = window.matchMedia("(max-width: 767px)").matches ? 0.45 : 1;
|
||||
|
||||
const curls = [leftCurlRef.current, rightCurlRef.current].filter(
|
||||
Boolean,
|
||||
) as SVGPathElement[];
|
||||
const lengths = curls.map((p) => p.getTotalLength());
|
||||
curls.forEach((p, i) => {
|
||||
p.style.strokeDasharray = `${lengths[i]}`;
|
||||
p.style.strokeDashoffset = `${lengths[i]}`;
|
||||
});
|
||||
|
||||
const tl = gsap.timeline({
|
||||
onComplete: () => {
|
||||
document.documentElement.style.overflow = "";
|
||||
setAnimationDone(true);
|
||||
reveal();
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(curls, {
|
||||
strokeDashoffset: 0,
|
||||
duration: 0.35 * duration,
|
||||
ease: "power2.inOut",
|
||||
stagger: 0.05 * duration,
|
||||
})
|
||||
.fromTo(
|
||||
dotRef.current,
|
||||
{ scale: 0, transformOrigin: "50% 50%" },
|
||||
{ scale: 1, duration: 0.15 * duration, ease: "back.out(3)" },
|
||||
`-=${0.12 * duration}`,
|
||||
)
|
||||
.fromTo(
|
||||
wordRef.current,
|
||||
{ opacity: 0, y: 10, letterSpacing: "0.5em" },
|
||||
{ opacity: 1, y: 0, letterSpacing: "0.28em", duration: 0.22 * duration, ease: "power2.out" },
|
||||
`-=${0.1 * duration}`,
|
||||
)
|
||||
.to(overlayRef.current, {
|
||||
yPercent: -100,
|
||||
duration: 0.4 * duration,
|
||||
ease: "power4.inOut",
|
||||
delay: 0.08 * duration,
|
||||
});
|
||||
|
||||
return () => {
|
||||
document.documentElement.style.overflow = "";
|
||||
tl.kill();
|
||||
};
|
||||
}, [reduced]);
|
||||
|
||||
if (reduced || animationDone) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={overlayRef}
|
||||
aria-hidden
|
||||
data-preloader-overlay
|
||||
className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-paper"
|
||||
>
|
||||
<svg
|
||||
width="220"
|
||||
height="66"
|
||||
viewBox="0 0 200 60"
|
||||
fill="none"
|
||||
stroke="#161513"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path ref={leftCurlRef} d={CURL_PATH} />
|
||||
<path
|
||||
ref={rightCurlRef}
|
||||
d={CURL_PATH}
|
||||
transform="rotate(180 100 30)"
|
||||
/>
|
||||
<circle
|
||||
ref={dotRef}
|
||||
cx="100"
|
||||
cy="30"
|
||||
r="1.8"
|
||||
fill="#161513"
|
||||
stroke="none"
|
||||
/>
|
||||
</svg>
|
||||
<p
|
||||
ref={wordRef}
|
||||
className="mt-6 text-[11px] font-semibold uppercase tracking-[0.28em] text-ink-soft opacity-0"
|
||||
>
|
||||
Entscheidomat
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
components/providers/sound-provider.tsx
Normal file
53
components/providers/sound-provider.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useMemo,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { playSound, type SoundName } from "@/lib/sounds";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
|
||||
type SoundContextValue = {
|
||||
enabled: boolean;
|
||||
toggle: () => void;
|
||||
play: (name: SoundName) => void;
|
||||
};
|
||||
|
||||
const SoundContext = createContext<SoundContextValue>({
|
||||
enabled: false,
|
||||
toggle: () => {},
|
||||
play: () => {},
|
||||
});
|
||||
|
||||
const STORAGE_KEY = "entscheidomat-sound";
|
||||
|
||||
export function SoundProvider({ children }: { children: ReactNode }) {
|
||||
const [enabled, setEnabled] = useLocalStorage(STORAGE_KEY, true);
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
setEnabled((prev) => !prev);
|
||||
}, [setEnabled]);
|
||||
|
||||
const play = useCallback(
|
||||
(name: SoundName) => {
|
||||
if (enabled) playSound(name);
|
||||
},
|
||||
[enabled],
|
||||
);
|
||||
|
||||
const value = useMemo(
|
||||
() => ({ enabled, toggle, play }),
|
||||
[enabled, toggle, play],
|
||||
);
|
||||
|
||||
return (
|
||||
<SoundContext.Provider value={value}>{children}</SoundContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useSound() {
|
||||
return useContext(SoundContext);
|
||||
}
|
||||
28
components/related-tools.tsx
Normal file
28
components/related-tools.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
import { TOOL_PAGES } from "@/lib/tool-pages";
|
||||
|
||||
export default function RelatedTools({ current }: { current: string }) {
|
||||
const others = TOOL_PAGES.filter((t) => t.slug !== current);
|
||||
|
||||
return (
|
||||
<p className="text-base text-ink-soft leading-relaxed">
|
||||
Weitere Zufalls-Tools:{" "}
|
||||
{others.map((t, i) => (
|
||||
<span key={t.slug}>
|
||||
<Link
|
||||
href={`/${t.slug}`}
|
||||
className="text-[#c97d60] font-medium hover:underline underline-offset-2 transition-colors"
|
||||
>
|
||||
{t.label}
|
||||
</Link>
|
||||
{i < others.length - 2
|
||||
? ", "
|
||||
: i === others.length - 2
|
||||
? " sowie "
|
||||
: "."}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
64
components/reveal.tsx
Normal file
64
components/reveal.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
|
||||
|
||||
type RevealProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
/** Verzögerung in Sekunden (für Stagger) */
|
||||
delay?: number;
|
||||
y?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Leichte Scroll-Reveal-Variante ohne ScrollTrigger. IntersectionObserver
|
||||
* verursacht keine fortlaufende Scroll-Arbeit und lädt keine GSAP-Plugins.
|
||||
*/
|
||||
export default function Reveal({
|
||||
children,
|
||||
className,
|
||||
delay = 0,
|
||||
y = 30,
|
||||
}: RevealProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const element = ref.current;
|
||||
if (!element) return;
|
||||
|
||||
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
if (reducedMotion.matches || !window.IntersectionObserver) {
|
||||
const frame = window.requestAnimationFrame(() => setVisible(true));
|
||||
return () => window.cancelAnimationFrame(frame);
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setVisible(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ rootMargin: "0px 0px -12%" },
|
||||
);
|
||||
|
||||
observer.observe(element);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`reveal${visible ? " reveal--visible" : ""}${className ? ` ${className}` : ""}`}
|
||||
style={
|
||||
{
|
||||
"--reveal-delay": `${delay}s`,
|
||||
"--reveal-y": `${y}px`,
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
390
components/scroll-flourishes.tsx
Normal file
390
components/scroll-flourishes.tsx
Normal file
@@ -0,0 +1,390 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
|
||||
/**
|
||||
* Botanisch präzise verschnörkelte Ranken:
|
||||
* Das Wachstum ist exakt auf den gesamten Scrollverlauf abgestimmt (kein zu schnelles Wachsen).
|
||||
* Die Ranken entfalten sich genau synchron zur Scroll-Position und erreichen den
|
||||
* untersten Rand erst, wenn man auch ganz unten angekommen ist.
|
||||
*/
|
||||
|
||||
// Botanisch geformtes Blatt mit spitzer Silhouetten-Form, Blattader & dezentem Hover-Wiegeln
|
||||
function Leaf({
|
||||
x,
|
||||
y,
|
||||
rotate = 0,
|
||||
scale = 1,
|
||||
className = "",
|
||||
}: {
|
||||
x: number;
|
||||
y: number;
|
||||
rotate?: number;
|
||||
scale?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<motion.g
|
||||
transform={`translate(${x}, ${y}) rotate(${rotate}) scale(${scale})`}
|
||||
whileHover={{ scale: scale * 1.18, rotate: rotate + 6 }}
|
||||
transition={{ type: "spring", stiffness: 160, damping: 16 }}
|
||||
className={`vine-leaf pointer-events-auto cursor-pointer ${className}`}
|
||||
>
|
||||
{/* Äußere Blattsilhouette – edles Gelb-Grün / Smaragd */}
|
||||
<path
|
||||
d="M 0 0 C 14 -20 36 -12 42 0 C 36 12 14 20 0 0 Z"
|
||||
fill="#0d7a57"
|
||||
fillOpacity="0.92"
|
||||
className="transition-all duration-300 hover:fill-[#109b6f]"
|
||||
/>
|
||||
{/* Feine Blattader */}
|
||||
<path
|
||||
d="M 0 0 C 15 -3 28 -2 39 0"
|
||||
stroke="#ffffff"
|
||||
strokeOpacity="0.75"
|
||||
strokeWidth="1.2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</motion.g>
|
||||
);
|
||||
}
|
||||
|
||||
// Offene Spiral-Tendril (Ranken-Kringel)
|
||||
function Tendril({ d, className = "" }: { d: string; className?: string }) {
|
||||
return (
|
||||
<path
|
||||
className={`vine-tendril ${className}`}
|
||||
d={d}
|
||||
fill="none"
|
||||
stroke="#161513"
|
||||
strokeWidth="1.4"
|
||||
strokeLinecap="round"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Ranke 1 (Links-Oben nach Mitte-Rechts - Hero Bereich)
|
||||
const STEM_1 =
|
||||
"M -40 20 C 120 70, 240 160, 320 300 C 400 440, 280 600, 420 740 C 520 860, 680 940, 820 1060";
|
||||
|
||||
const TENDRILS_1 = [
|
||||
"M 240 160 C 275 135, 295 160, 275 185 C 255 195, 240 178, 252 165",
|
||||
"M 420 740 C 465 710, 485 745, 460 770 C 435 785, 415 755, 428 738",
|
||||
];
|
||||
|
||||
const LEAF_NODES_1 = [
|
||||
{ x: 120, y: 70, rotate: -25, scale: 0.9 },
|
||||
{ x: 240, y: 160, rotate: 42, scale: 1.1 },
|
||||
{ x: 320, y: 300, rotate: -45, scale: 1.0 },
|
||||
{ x: 400, y: 440, rotate: 32, scale: 0.95 },
|
||||
{ x: 420, y: 740, rotate: -35, scale: 1.05 },
|
||||
{ x: 680, y: 940, rotate: 50, scale: 0.9 },
|
||||
];
|
||||
|
||||
// Ranke 2 (Rechts-Oben edel schwebend - Mittlerer Bereich)
|
||||
const STEM_2 =
|
||||
"M 920 30 C 760 150, 620 310, 710 490 C 800 680, 620 830, 740 1020 C 860 1180, 720 1340, 840 1500";
|
||||
|
||||
const TENDRILS_2 = [
|
||||
"M 710 490 C 665 460, 640 495, 665 520 C 690 535, 710 505, 695 488",
|
||||
"M 740 1020 C 695 990, 670 1025, 695 1050 C 720 1065, 740 1035, 725 1018",
|
||||
];
|
||||
|
||||
const LEAF_NODES_2 = [
|
||||
{ x: 760, y: 150, rotate: 155, scale: 1.0 },
|
||||
{ x: 710, y: 490, rotate: -130, scale: 1.15 },
|
||||
{ x: 620, y: 830, rotate: 140, scale: 0.9 },
|
||||
{ x: 740, y: 1020, rotate: -150, scale: 1.05 },
|
||||
{ x: 840, y: 1500, rotate: 135, scale: 1.1 },
|
||||
];
|
||||
|
||||
// Ranke 3 (Untere Ranke Links – Wächst erst in der 2. Seitenhälfte bis in den Footer)
|
||||
const STEM_3 =
|
||||
"M -30 50 C 210 180, 440 240, 520 430 C 600 620, 420 810, 610 1000 C 780 1170, 690 1340, 840 1550 C 920 1720, 780 1880, 910 2050";
|
||||
|
||||
const TENDRILS_3 = [
|
||||
"M 520 430 C 565 400, 590 435, 565 460 C 540 475, 518 445, 532 428",
|
||||
"M 610 1000 C 655 970, 680 1005, 655 1030 C 630 1045, 608 1015, 622 998",
|
||||
"M 840 1550 C 885 1520, 910 1555, 885 1580 C 860 1595, 838 1565, 852 1548",
|
||||
];
|
||||
|
||||
const LEAF_NODES_3 = [
|
||||
{ x: 210, y: 180, rotate: -30, scale: 1.05 },
|
||||
{ x: 440, y: 240, rotate: 35, scale: 0.9 },
|
||||
{ x: 520, y: 430, rotate: -40, scale: 1.1 },
|
||||
{ x: 420, y: 810, rotate: 45, scale: 1.0 },
|
||||
{ x: 610, y: 1000, rotate: -35, scale: 1.15 },
|
||||
{ x: 780, y: 1170, rotate: 30, scale: 0.95 },
|
||||
{ x: 840, y: 1550, rotate: -25, scale: 1.1 },
|
||||
{ x: 880, y: 1860, rotate: 40, scale: 0.95 },
|
||||
];
|
||||
|
||||
// Ranke 4 (Untere Ranke Rechts – Wächst erst in der 2. Seitenhälfte bis in den Footer)
|
||||
const STEM_4 =
|
||||
"M 900 40 C 740 220, 620 400, 700 600 C 780 800, 600 1000, 720 1220 C 840 1440, 680 1680, 780 1920 C 880 2080, 750 2200, 850 2320";
|
||||
|
||||
const TENDRILS_4 = [
|
||||
"M 700 600 C 655 570, 630 605, 655 630 C 680 645, 700 615, 685 598",
|
||||
"M 720 1220 C 675 1190, 650 1225, 675 1250 C 700 1265, 720 1235, 705 1218",
|
||||
];
|
||||
|
||||
const LEAF_NODES_4 = [
|
||||
{ x: 740, y: 220, rotate: 145, scale: 1.0 },
|
||||
{ x: 700, y: 600, rotate: 125, scale: 0.95 },
|
||||
{ x: 600, y: 1000, rotate: -140, scale: 1.1 },
|
||||
{ x: 720, y: 1220, rotate: 135, scale: 1.05 },
|
||||
{ x: 780, y: 1920, rotate: -130, scale: 0.95 },
|
||||
];
|
||||
|
||||
export default function ScrollFlourishes() {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
|
||||
const mm = gsap.matchMedia();
|
||||
|
||||
mm.add("(prefers-reduced-motion: no-preference)", () => {
|
||||
// 1. Dasharray & Offset für alle Linienpfade vorbereiten
|
||||
const strokePaths = root.querySelectorAll<SVGPathElement>(
|
||||
".vine-stem, .vine-tendril",
|
||||
);
|
||||
strokePaths.forEach((p) => {
|
||||
const len = p.getTotalLength();
|
||||
p.style.strokeDasharray = `${len}`;
|
||||
p.style.strokeDashoffset = `${len}`;
|
||||
});
|
||||
|
||||
const leaves = root.querySelectorAll<SVGGElement>(".vine-leaf");
|
||||
gsap.set(leaves, { opacity: 0, scale: 0, transformOrigin: "0px 0px" });
|
||||
|
||||
// 2. Perfekt getaktete ScrollTrigger Timeline (Spannweite von 0 bis 1.0 des gesamten Dokument-Scrolls)
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: document.body,
|
||||
start: "top top",
|
||||
end: "bottom bottom",
|
||||
scrub: 0.7,
|
||||
},
|
||||
});
|
||||
|
||||
// Ranke 1 (Hero): Wächst im oberen Drittel (0.0 bis 0.38)
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-stem-1"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.38 },
|
||||
0,
|
||||
);
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-tendril-1"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.08 },
|
||||
0.25,
|
||||
);
|
||||
|
||||
// Ranke 2 (Mitte-Rechts): Wächst im mittleren Bereich (0.22 bis 0.68)
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-stem-2"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.46 },
|
||||
0.22,
|
||||
);
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-tendril-2"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.08 },
|
||||
0.48,
|
||||
);
|
||||
|
||||
// Ranke 3 (Untere Ranke Links): Wächst in der 2. Hälfte bis ganz nach unten (0.45 bis 1.0)
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-stem-3"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.55 },
|
||||
0.45,
|
||||
);
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-tendril-3"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.08 },
|
||||
0.72,
|
||||
);
|
||||
|
||||
// Ranke 4 (Untere Ranke Rechts): Wächst in der 2. Hälfte bis ganz nach unten (0.50 bis 1.0)
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-stem-4"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.5 },
|
||||
0.5,
|
||||
);
|
||||
tl.to(
|
||||
root.querySelectorAll(".vine-tendril-4"),
|
||||
{ strokeDashoffset: 0, ease: "none", duration: 0.08 },
|
||||
0.78,
|
||||
);
|
||||
|
||||
// Blätter entfalten sich organisch zur jeweiligen Wachstumszeit
|
||||
tl.to(
|
||||
leaves,
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
ease: "back.out(1.5)",
|
||||
duration: 0.1,
|
||||
stagger: 0.02,
|
||||
},
|
||||
0.1,
|
||||
);
|
||||
|
||||
// Subtiler, ruhiger Parallax-Versatz (Ohne hektische Maus-Swayings)
|
||||
tl.to(
|
||||
".vine-container-1",
|
||||
{ yPercent: 6, scale: 1.06, ease: "none", duration: 1 },
|
||||
0,
|
||||
);
|
||||
tl.to(
|
||||
".vine-container-2",
|
||||
{ yPercent: 8, scale: 0.95, ease: "none", duration: 1 },
|
||||
0,
|
||||
);
|
||||
tl.to(
|
||||
".vine-container-3",
|
||||
{ yPercent: -4, scale: 1.05, ease: "none", duration: 1 },
|
||||
0,
|
||||
);
|
||||
tl.to(
|
||||
".vine-container-4",
|
||||
{ yPercent: 5, scale: 1.04, ease: "none", duration: 1 },
|
||||
0,
|
||||
);
|
||||
});
|
||||
|
||||
return () => mm.revert();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
aria-hidden
|
||||
className="pointer-events-none fixed inset-0 -z-10 overflow-hidden select-none"
|
||||
>
|
||||
{/* Ranke 1: Links-Oben nach Mitte-Rechts (Hero) */}
|
||||
<div className="vine-container-1 absolute left-[-4vw] top-[-2vh] w-[50vw] max-w-[750px] min-w-[320px] opacity-35 transition-opacity duration-500">
|
||||
<svg
|
||||
viewBox="0 0 850 1100"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
className="w-full h-auto pointer-events-auto"
|
||||
>
|
||||
<path
|
||||
className="vine-stem vine-stem-1"
|
||||
d={STEM_1}
|
||||
stroke="#161513"
|
||||
strokeWidth="1.6"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
{TENDRILS_1.map((d, i) => (
|
||||
<Tendril key={i} className="vine-tendril-1" d={d} />
|
||||
))}
|
||||
{LEAF_NODES_1.map((node, i) => (
|
||||
<Leaf
|
||||
key={i}
|
||||
x={node.x}
|
||||
y={node.y}
|
||||
rotate={node.rotate}
|
||||
scale={node.scale}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Ranke 2: Rechts-Oben (Mittlerer Bereich) */}
|
||||
<div className="vine-container-2 absolute right-[-4vw] top-[18vh] w-[54vw] max-w-[820px] min-w-[340px] opacity-30 transition-opacity duration-500">
|
||||
<svg
|
||||
viewBox="0 0 950 1550"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
className="w-full h-auto pointer-events-auto"
|
||||
>
|
||||
<path
|
||||
className="vine-stem vine-stem-2"
|
||||
d={STEM_2}
|
||||
stroke="#161513"
|
||||
strokeWidth="1.6"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
{TENDRILS_2.map((d, i) => (
|
||||
<Tendril key={i} className="vine-tendril-2" d={d} />
|
||||
))}
|
||||
{LEAF_NODES_2.map((node, i) => (
|
||||
<Leaf
|
||||
key={i}
|
||||
x={node.x}
|
||||
y={node.y}
|
||||
rotate={node.rotate}
|
||||
scale={node.scale}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Ranke 3: Untere Ranke Links – Wächst erst in der 2. Seitenhälfte bis in den Footer */}
|
||||
<div className="vine-container-3 absolute left-[-3vw] top-[42vh] w-[58vw] max-w-[920px] min-w-[360px] opacity-35 transition-opacity duration-500">
|
||||
<svg
|
||||
viewBox="0 0 950 2100"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
className="w-full h-auto pointer-events-auto"
|
||||
>
|
||||
<path
|
||||
className="vine-stem vine-stem-3"
|
||||
d={STEM_3}
|
||||
stroke="#161513"
|
||||
strokeWidth="1.6"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
{TENDRILS_3.map((d, i) => (
|
||||
<Tendril key={i} className="vine-tendril-3" d={d} />
|
||||
))}
|
||||
{LEAF_NODES_3.map((node, i) => (
|
||||
<Leaf
|
||||
key={i}
|
||||
x={node.x}
|
||||
y={node.y}
|
||||
rotate={node.rotate}
|
||||
scale={node.scale}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Ranke 4: Untere Ranke Rechts – Wächst erst in der 2. Seitenhälfte bis in den Footer */}
|
||||
<div className="vine-container-4 absolute right-[-3vw] top-[48vh] w-[56vw] max-w-[900px] min-w-[350px] opacity-35 transition-opacity duration-500">
|
||||
<svg
|
||||
viewBox="0 0 950 2350"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
className="w-full h-auto pointer-events-auto"
|
||||
>
|
||||
<path
|
||||
className="vine-stem vine-stem-4"
|
||||
d={STEM_4}
|
||||
stroke="#161513"
|
||||
strokeWidth="1.6"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
{TENDRILS_4.map((d, i) => (
|
||||
<Tendril key={i} className="vine-tendril-4" d={d} />
|
||||
))}
|
||||
{LEAF_NODES_4.map((node, i) => (
|
||||
<Leaf
|
||||
key={i}
|
||||
x={node.x}
|
||||
y={node.y}
|
||||
rotate={node.rotate}
|
||||
scale={node.scale}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
210
components/subpage-layout.tsx
Normal file
210
components/subpage-layout.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import type { ReactNode } from "react";
|
||||
import Link from "next/link";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import Nav from "@/components/nav";
|
||||
import Footer from "@/components/footer";
|
||||
import RelatedTools from "@/components/related-tools";
|
||||
|
||||
export type FaqItem = {
|
||||
q: string;
|
||||
a: string;
|
||||
};
|
||||
|
||||
type SubpageLayoutProps = {
|
||||
toolSlug: string;
|
||||
toolName: string;
|
||||
h1Title: string;
|
||||
introText: string;
|
||||
steps: string[];
|
||||
examples: string[];
|
||||
vorteileText: ReactNode;
|
||||
additionalContent?: ReactNode;
|
||||
faqs: FaqItem[];
|
||||
updatedDate: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export default function SubpageLayout({
|
||||
toolSlug,
|
||||
toolName,
|
||||
h1Title,
|
||||
introText,
|
||||
steps,
|
||||
examples,
|
||||
vorteileText,
|
||||
additionalContent,
|
||||
faqs,
|
||||
updatedDate,
|
||||
children,
|
||||
}: SubpageLayoutProps) {
|
||||
const howItWorksName =
|
||||
toolSlug === "muenze-werfen" ? "der Münzwurf" : toolName;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<main className="relative flex-1 pt-16 overflow-hidden">
|
||||
{/* Full-width Viewport Background: Architektonisches Grid & Geometrie-Muster (wie im Referenzbild) mit sanftem Übergang nach unten */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[620px] w-full overflow-hidden [mask-image:linear-gradient(to_bottom,black_45%,transparent_98%)]"
|
||||
>
|
||||
{/* Weiche Aquarell-Glows (einheitlich in Salbeigrün) */}
|
||||
<div className="absolute top-8 left-[12%] h-72 w-72 rounded-full bg-[#8da399]/20 blur-3xl" />
|
||||
<div className="absolute top-48 left-[50%] h-64 w-64 rounded-full bg-[#8da399]/18 blur-3xl" />
|
||||
|
||||
{/* Vektor-Muster: Feines architektonisches Raster, Kreise & Punkte */}
|
||||
<svg
|
||||
className="absolute inset-0 h-full w-full opacity-75"
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="archPattern"
|
||||
width="160"
|
||||
height="160"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
{/* Feine Rasterlinien */}
|
||||
<line x1="0" y1="0" x2="160" y2="0" stroke="#747874" strokeWidth="0.5" strokeOpacity="0.22" />
|
||||
<line x1="0" y1="80" x2="160" y2="80" stroke="#747874" strokeWidth="0.5" strokeOpacity="0.15" strokeDasharray="4 4" />
|
||||
<line x1="0" y1="0" x2="0" y2="160" stroke="#747874" strokeWidth="0.5" strokeOpacity="0.22" />
|
||||
<line x1="80" y1="0" x2="80" y2="160" stroke="#747874" strokeWidth="0.5" strokeOpacity="0.15" strokeDasharray="4 4" />
|
||||
|
||||
{/* Diagonale feine Hilfslinien */}
|
||||
<line x1="0" y1="0" x2="160" y2="160" stroke="#8da399" strokeWidth="0.4" strokeOpacity="0.15" />
|
||||
|
||||
{/* Geometrische Bögen & Kreise */}
|
||||
<circle cx="80" cy="80" r="50" stroke="#8da399" strokeWidth="0.5" strokeOpacity="0.3" fill="none" />
|
||||
<circle cx="80" cy="80" r="75" stroke="#8da399" strokeWidth="0.4" strokeOpacity="0.2" strokeDasharray="2 4" fill="none" />
|
||||
<circle cx="0" cy="0" r="40" stroke="#8da399" strokeWidth="0.4" strokeOpacity="0.22" fill="none" />
|
||||
|
||||
{/* Punkte auf den Schnittstellen */}
|
||||
<circle cx="80" cy="80" r="2" fill="#707a65" fillOpacity="0.5" />
|
||||
<circle cx="0" cy="0" r="2.2" fill="#707a65" fillOpacity="0.45" />
|
||||
<circle cx="160" cy="0" r="1.6" fill="#707a65" fillOpacity="0.4" />
|
||||
<circle cx="0" cy="160" r="1.6" fill="#707a65" fillOpacity="0.4" />
|
||||
<circle cx="160" cy="160" r="2.2" fill="#707a65" fillOpacity="0.45" />
|
||||
|
||||
<circle cx="80" cy="30" r="1.6" fill="#8da399" fillOpacity="0.45" />
|
||||
<circle cx="80" cy="130" r="1.6" fill="#8da399" fillOpacity="0.45" />
|
||||
<circle cx="30" cy="80" r="1.6" fill="#8da399" fillOpacity="0.4" />
|
||||
<circle cx="130" cy="80" r="1.6" fill="#8da399" fillOpacity="0.4" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#archPattern)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto w-full max-w-6xl px-5 py-12 sm:px-8 sm:py-16 md:py-20">
|
||||
{/* Header Section ohne Container-Box */}
|
||||
<header className="relative max-w-3xl mb-12 sm:mb-16">
|
||||
<nav
|
||||
aria-label="Breadcrumb"
|
||||
className="flex items-center gap-2 mb-3 text-xs font-semibold uppercase tracking-widest text-ink-soft"
|
||||
>
|
||||
<Link href="/" className="hover:text-[#c97d60] transition-colors">
|
||||
Entscheidomat
|
||||
</Link>
|
||||
<span className="text-line">/</span>
|
||||
<span className="text-ink font-medium">{toolName}</span>
|
||||
</nav>
|
||||
|
||||
<h1 className="font-display text-4xl sm:text-5xl lg:text-6xl font-semibold leading-[1.15] tracking-tight text-ink mb-4">
|
||||
{h1Title}
|
||||
</h1>
|
||||
|
||||
<p className="text-base sm:text-lg text-ink-soft leading-relaxed">
|
||||
{introText}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Main Interactive Tool Container */}
|
||||
<section className="mb-14 sm:mb-20 rounded-3xl border border-line bg-surface p-6 sm:p-8 md:p-10 shadow-lift relative overflow-hidden">
|
||||
{children}
|
||||
</section>
|
||||
|
||||
{/* 2-Column Content Structure: Explanations & FAQ */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14">
|
||||
{/* Left Column: Guide & Info */}
|
||||
<div className="lg:col-span-7 space-y-10">
|
||||
<article>
|
||||
<h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink mb-4">
|
||||
So funktioniert {howItWorksName.toLowerCase().startsWith("der") || howItWorksName.toLowerCase().startsWith("das") || howItWorksName.toLowerCase().startsWith("die") ? howItWorksName : `das ${howItWorksName}`}
|
||||
</h2>
|
||||
<ol className="space-y-3 text-base text-ink-soft pl-4 border-l-2 border-[#c97d60]/40">
|
||||
{steps.map((step, idx) => (
|
||||
<li key={idx} className="pl-2">
|
||||
<span className="font-semibold text-ink">{idx + 1}. </span>
|
||||
{step}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink mb-4">
|
||||
Beispiele
|
||||
</h2>
|
||||
<ul className="space-y-2 text-base text-ink-soft list-disc pl-5">
|
||||
{examples.map((ex, idx) => (
|
||||
<li key={idx}>{ex}</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink mb-4">
|
||||
Vorteile und Grenzen
|
||||
</h2>
|
||||
<div className="text-base text-ink-soft leading-relaxed">
|
||||
{vorteileText}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{additionalContent}
|
||||
|
||||
<article className="p-6 sm:p-7 bg-paper/90 rounded-2xl border border-line shadow-soft">
|
||||
<h2 className="font-display text-xl font-semibold text-ink mb-3">
|
||||
Verwandte Tools
|
||||
</h2>
|
||||
<RelatedTools current={toolSlug} />
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{/* Right Column: FAQ Accordion */}
|
||||
<div className="lg:col-span-5">
|
||||
<h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink mb-6">
|
||||
Häufige Fragen
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{faqs.map((faq) => (
|
||||
<details
|
||||
key={faq.q}
|
||||
className="group rounded-2xl border border-line bg-surface transition-colors hover:border-[#c97d60]/40 [&_summary::-webkit-details-marker]:hidden"
|
||||
>
|
||||
<summary className="flex cursor-pointer items-center justify-between gap-3 p-4 sm:p-5 font-display text-base font-semibold text-ink">
|
||||
<span>{faq.q}</span>
|
||||
<span className="shrink-0 text-ink-soft transition-transform duration-300 group-open:rotate-180">
|
||||
<ChevronDown className="h-5 w-5" />
|
||||
</span>
|
||||
</summary>
|
||||
<div className="px-4 pb-4 sm:px-5 sm:pb-5 text-sm sm:text-base leading-relaxed text-ink-soft border-t border-line/50 pt-3 mt-1">
|
||||
{faq.a}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-6 text-xs text-ink-soft">
|
||||
Zuletzt aktualisiert: {updatedDate}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
185
components/tools/coin-flip.tsx
Normal file
185
components/tools/coin-flip.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Coins } from "lucide-react";
|
||||
import Coin3D from "@/components/coin-3d";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { coinEase } from "@/lib/motion";
|
||||
import { popConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
export default function CoinFlip() {
|
||||
const [frontLabel, setFrontLabel] = useLocalStorage("coin-front", "Kopf");
|
||||
const [backLabel, setBackLabel] = useLocalStorage("coin-back", "Zahl");
|
||||
const [history, setHistory] = useState<string[]>([]);
|
||||
const [flipping, setFlipping] = useState(false);
|
||||
const [result, setResult] = useState<string | null>(null);
|
||||
|
||||
const coinRef = useRef<HTMLDivElement>(null);
|
||||
const stageRef = useRef<HTMLDivElement>(null);
|
||||
const rotationRef = useRef(0);
|
||||
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const front = frontLabel.trim() || "Kopf";
|
||||
const back = backLabel.trim() || "Zahl";
|
||||
|
||||
const flip = () => {
|
||||
if (flipping) return;
|
||||
|
||||
const isBack = Math.random() < 0.5;
|
||||
const label = isBack ? back : front;
|
||||
setFlipping(true);
|
||||
setResult(null);
|
||||
play("coin");
|
||||
|
||||
const current = rotationRef.current;
|
||||
const base = Math.ceil(current / 360) * 360;
|
||||
let target = base + 360 * 5 + (isBack ? 180 : 0);
|
||||
if (target - current < 360 * 4) target += 360;
|
||||
|
||||
const dur = reduced ? 0.3 : 2.6;
|
||||
|
||||
gsap.to(coinRef.current, {
|
||||
rotationX: target,
|
||||
duration: dur,
|
||||
ease: reduced ? "power1.out" : coinEase,
|
||||
onComplete: () => {
|
||||
rotationRef.current = target;
|
||||
setFlipping(false);
|
||||
setResult(label);
|
||||
setHistory((h) => [label, ...h].slice(0, 10));
|
||||
play("pop");
|
||||
popConfetti();
|
||||
},
|
||||
});
|
||||
|
||||
if (!reduced) {
|
||||
gsap.to(stageRef.current, {
|
||||
y: -54,
|
||||
duration: dur / 2,
|
||||
yoyo: true,
|
||||
repeat: 1,
|
||||
ease: "power2.out",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
{/* Bühne */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div ref={stageRef} className="coin-scene p-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={flip}
|
||||
aria-label="Münze werfen"
|
||||
className="block cursor-pointer rounded-full drop-shadow-[0_10px_18px_rgba(17,20,18,0.12)] transition-transform duration-200 hover:scale-[1.04] active:scale-95"
|
||||
>
|
||||
<Coin3D ref={coinRef} frontLabel={front} backLabel={back} size={188} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 h-14" aria-live="polite">
|
||||
<AnimatePresence mode="wait">
|
||||
{result && (
|
||||
<motion.p
|
||||
key={result + history.length}
|
||||
initial={{ opacity: 0, scale: 0.6, y: 12 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.8 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 22 }}
|
||||
className="font-display text-3xl font-semibold tracking-tight"
|
||||
>
|
||||
<span className="text-primary">{result}!</span>
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={flip}
|
||||
disabled={flipping}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-2 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<Coins className="h-5 w-5" />
|
||||
{flipping ? "Fliegt …" : "Münze werfen"}
|
||||
</motion.button>
|
||||
<p className="mt-3 text-xs text-ink-soft">
|
||||
Tipp: Du kannst auch direkt auf die Münze tippen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Einstellungen */}
|
||||
<div className="space-y-5">
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Seiten beschriften
|
||||
</h3>
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<label className="block">
|
||||
<span className="mb-1.5 block text-xs font-medium text-ink-soft">
|
||||
Vorderseite
|
||||
</span>
|
||||
<input
|
||||
value={frontLabel}
|
||||
onChange={(e) => setFrontLabel(e.target.value)}
|
||||
maxLength={14}
|
||||
placeholder="Kopf"
|
||||
className="w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="mb-1.5 block text-xs font-medium text-ink-soft">
|
||||
Rückseite
|
||||
</span>
|
||||
<input
|
||||
value={backLabel}
|
||||
onChange={(e) => setBackLabel(e.target.value)}
|
||||
maxLength={14}
|
||||
placeholder="Zahl"
|
||||
className="w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
||||
Z. B. „Ja“ & „Nein“, „Kino“ & „Couch“ – deine Beschriftung
|
||||
bleibt gespeichert.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{history.length > 0 && (
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Verlauf
|
||||
</h3>
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
<AnimatePresence initial={false}>
|
||||
{history.map((entry, i) => (
|
||||
<motion.span
|
||||
key={`${entry}-${history.length - i}`}
|
||||
initial={{ opacity: 0, scale: 0.6 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className={`rounded-full px-3 py-1 text-xs font-semibold ${
|
||||
i === 0
|
||||
? "bg-primary text-white"
|
||||
: "bg-surface text-ink-soft ring-1 ring-line"
|
||||
}`}
|
||||
>
|
||||
{entry}
|
||||
</motion.span>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
270
components/tools/dice-roller.tsx
Normal file
270
components/tools/dice-roller.tsx
Normal file
@@ -0,0 +1,270 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Dices } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { popConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
const SIZE = 104;
|
||||
const HALF = SIZE / 2;
|
||||
|
||||
/** Würfelaugen-Positionen im 3×3-Raster (viewBox 40×40). */
|
||||
const PIPS: Record<number, number[]> = {
|
||||
1: [4],
|
||||
2: [0, 8],
|
||||
3: [0, 4, 8],
|
||||
4: [0, 2, 6, 8],
|
||||
5: [0, 2, 4, 6, 8],
|
||||
6: [0, 2, 3, 5, 6, 8],
|
||||
};
|
||||
|
||||
/** Platzierung der Seiten im Würfel (gegenüberliegende Seiten = 7). */
|
||||
const FACE_TRANSFORMS = [
|
||||
`translateZ(${HALF}px)`, // 1 – vorne
|
||||
`rotateX(90deg) translateZ(${HALF}px)`, // 2 – oben
|
||||
`rotateY(90deg) translateZ(${HALF}px)`, // 3 – rechts
|
||||
`rotateY(-90deg) translateZ(${HALF}px)`, // 4 – links
|
||||
`rotateX(-90deg) translateZ(${HALF}px)`, // 5 – unten
|
||||
`rotateY(180deg) translateZ(${HALF}px)`, // 6 – hinten
|
||||
];
|
||||
|
||||
/** Welche Würfel-Rotation bringt Wert v nach vorne? */
|
||||
const FACE_ROTATION: Record<number, { rx: number; ry: number }> = {
|
||||
1: { rx: 0, ry: 0 },
|
||||
2: { rx: -90, ry: 0 },
|
||||
3: { rx: 0, ry: -90 },
|
||||
4: { rx: 0, ry: 90 },
|
||||
5: { rx: 90, ry: 0 },
|
||||
6: { rx: 0, ry: 180 },
|
||||
};
|
||||
|
||||
const DEFAULT_CUSTOM = ["Ja", "Nein", "Vielleicht", "Frag später", "Gute Idee", "Lass es"];
|
||||
|
||||
export default function DiceRoller() {
|
||||
const [mode, setMode] = useLocalStorage<"numbers" | "custom">(
|
||||
"dice-mode",
|
||||
"numbers",
|
||||
);
|
||||
const [customFaces, setCustomFaces] = useLocalStorage<string[]>(
|
||||
"dice-custom",
|
||||
DEFAULT_CUSTOM,
|
||||
);
|
||||
const [rolling, setRolling] = useState(false);
|
||||
const [result, setResult] = useState<number | null>(null);
|
||||
|
||||
const diceRef = useRef<HTMLDivElement>(null);
|
||||
const stageRef = useRef<HTMLDivElement>(null);
|
||||
const rotRef = useRef({ rx: -18, ry: 24 }); // hübscher Startwinkel
|
||||
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const roll = () => {
|
||||
if (rolling) return;
|
||||
|
||||
const value = 1 + Math.floor(Math.random() * 6);
|
||||
setRolling(true);
|
||||
setResult(null);
|
||||
play("dice");
|
||||
|
||||
const { rx, ry } = rotRef.current;
|
||||
const target = FACE_ROTATION[value];
|
||||
const targetRx = Math.ceil(rx / 360) * 360 + 720 + target.rx;
|
||||
const targetRy = Math.ceil(ry / 360) * 360 + 720 + target.ry;
|
||||
|
||||
const dur = reduced ? 0.35 : 1.9;
|
||||
|
||||
gsap.to(diceRef.current, {
|
||||
rotationX: targetRx,
|
||||
rotationY: targetRy,
|
||||
duration: dur,
|
||||
ease: reduced ? "power1.out" : "power3.out",
|
||||
onComplete: () => {
|
||||
rotRef.current = { rx: targetRx, ry: targetRy };
|
||||
setRolling(false);
|
||||
setResult(value);
|
||||
play("pop");
|
||||
popConfetti();
|
||||
},
|
||||
});
|
||||
|
||||
if (!reduced) {
|
||||
gsap.to(stageRef.current, {
|
||||
y: -40,
|
||||
duration: dur / 2,
|
||||
yoyo: true,
|
||||
repeat: 1,
|
||||
ease: "power2.out",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const resultLabel =
|
||||
result === null
|
||||
? null
|
||||
: mode === "custom"
|
||||
? customFaces[result - 1]?.trim() || `Seite ${result}`
|
||||
: String(result);
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
{/* Bühne */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div ref={stageRef} className="dice-scene p-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={roll}
|
||||
aria-label="Würfel rollen"
|
||||
className="block cursor-pointer drop-shadow-[0_22px_26px_rgb(23_23_28/0.22)] transition-transform duration-200 hover:scale-[1.05] active:scale-95"
|
||||
>
|
||||
<div
|
||||
ref={diceRef}
|
||||
className="dice"
|
||||
style={{
|
||||
width: SIZE,
|
||||
height: SIZE,
|
||||
// Startwinkel als Literal (deckt sich mit rotRef's Initialwert) –
|
||||
// GSAP übernimmt danach die Rotation imperativ am DOM-Node.
|
||||
transform: "rotateX(-18deg) rotateY(24deg)",
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6].map((v, i) => (
|
||||
<div
|
||||
key={v}
|
||||
className="dice-face"
|
||||
style={{ transform: FACE_TRANSFORMS[i] }}
|
||||
>
|
||||
{mode === "numbers" ? (
|
||||
<svg viewBox="0 0 40 40" className="h-full w-full">
|
||||
{PIPS[v].map((p) => (
|
||||
<circle
|
||||
key={p}
|
||||
cx={8 + (p % 3) * 12}
|
||||
cy={8 + Math.floor(p / 3) * 12}
|
||||
r={3.6}
|
||||
fill="#17171c"
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
) : (
|
||||
<span className="dice-face-label">
|
||||
{customFaces[v - 1]?.trim() || `Seite ${v}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 h-14" aria-live="polite">
|
||||
<AnimatePresence mode="wait">
|
||||
{resultLabel !== null && (
|
||||
<motion.p
|
||||
key={resultLabel + String(result)}
|
||||
initial={{ opacity: 0, scale: 0.6, y: 12 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.8 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 22 }}
|
||||
className="font-display text-3xl font-semibold tracking-tight"
|
||||
>
|
||||
<span className="text-primary">{resultLabel}</span>
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={roll}
|
||||
disabled={rolling}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-2 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<Dices className="h-5 w-5" />
|
||||
{rolling ? "Rollt …" : "Würfeln!"}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Einstellungen */}
|
||||
<div className="space-y-5">
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Würfel-Seiten
|
||||
</h3>
|
||||
|
||||
<div className="mt-4 flex rounded-full border border-line bg-surface p-1">
|
||||
{(
|
||||
[
|
||||
{ id: "numbers", label: "Zahlen 1–6" },
|
||||
{ id: "custom", label: "Eigene Texte" },
|
||||
] as const
|
||||
).map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
type="button"
|
||||
onClick={() => setMode(m.id)}
|
||||
className={`relative flex-1 cursor-pointer rounded-full px-3 py-2 text-sm font-semibold transition-colors duration-200 ${
|
||||
mode === m.id ? "text-white" : "text-ink-soft hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
{mode === m.id && (
|
||||
<motion.span
|
||||
layoutId="dice-mode-pill"
|
||||
transition={{ type: "spring", stiffness: 420, damping: 34 }}
|
||||
className="absolute inset-0 rounded-full bg-primary"
|
||||
/>
|
||||
)}
|
||||
<span className="relative z-10">{m.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{mode === "custom" && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||||
{customFaces.map((face, i) => (
|
||||
<label key={i} className="block">
|
||||
<span className="mb-1 block text-[11px] font-medium text-ink-soft">
|
||||
Seite {i + 1}
|
||||
</span>
|
||||
<input
|
||||
value={face}
|
||||
onChange={(e) =>
|
||||
setCustomFaces((faces) =>
|
||||
faces.map((f, idx) =>
|
||||
idx === i ? e.target.value : f,
|
||||
),
|
||||
)
|
||||
}
|
||||
maxLength={18}
|
||||
placeholder={`Seite ${i + 1}`}
|
||||
className="w-full rounded-xl border border-line bg-surface px-3 py-2 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
||||
Klassisch mit Würfelaugen oder mit eigenen Texten – perfekt für
|
||||
„Wer spült heute ab?“.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
188
components/tools/ja-nein-generator.tsx
Normal file
188
components/tools/ja-nein-generator.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { CheckCircle2, HelpCircle, XCircle } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { popConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
type Answer = "Ja" | "Nein";
|
||||
|
||||
export default function JaNeinGenerator() {
|
||||
const [question, setQuestion] = useState("");
|
||||
const [answer, setAnswer] = useState<Answer | null>(null);
|
||||
const [asking, setAsking] = useState(false);
|
||||
const [history, setHistory] = useState<Answer[]>([]);
|
||||
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const ask = () => {
|
||||
if (asking) return;
|
||||
|
||||
const pick: Answer = Math.random() < 0.5 ? "Ja" : "Nein";
|
||||
setAsking(true);
|
||||
setAnswer(null);
|
||||
play("whoosh");
|
||||
|
||||
const reveal = () => {
|
||||
setAsking(false);
|
||||
setAnswer(pick);
|
||||
setHistory((h) => [pick, ...h].slice(0, 10));
|
||||
play(pick === "Ja" ? "win" : "pop");
|
||||
if (pick === "Ja") popConfetti();
|
||||
};
|
||||
|
||||
if (reduced) {
|
||||
gsap.delayedCall(0.25, reveal);
|
||||
return;
|
||||
}
|
||||
|
||||
const tl = gsap.timeline({ onComplete: reveal });
|
||||
tl.to(cardRef.current, {
|
||||
rotate: -6,
|
||||
x: -10,
|
||||
duration: 0.09,
|
||||
ease: "power1.inOut",
|
||||
})
|
||||
.to(cardRef.current, {
|
||||
rotate: 6,
|
||||
x: 10,
|
||||
duration: 0.09,
|
||||
ease: "power1.inOut",
|
||||
})
|
||||
.repeat(3)
|
||||
.to(cardRef.current, {
|
||||
rotate: 0,
|
||||
x: 0,
|
||||
duration: 0.2,
|
||||
ease: "power2.out",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
{/* Bühne */}
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
maxLength={100}
|
||||
placeholder="Deine Ja/Nein-Frage (optional) …"
|
||||
aria-label="Deine Frage an den Ja-Nein-Generator"
|
||||
className="w-full max-w-sm rounded-full border border-line bg-surface px-5 py-3 text-center text-sm font-medium shadow-soft outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
|
||||
<div ref={cardRef} className="mt-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={ask}
|
||||
aria-label="Ja-Nein-Generator fragen"
|
||||
className="flex h-52 w-52 cursor-pointer items-center justify-center rounded-[2rem] border border-line bg-surface shadow-lift transition-transform duration-200 hover:scale-[1.03] active:scale-95 sm:h-60 sm:w-60"
|
||||
>
|
||||
<div
|
||||
className="relative flex h-full w-full items-center justify-center px-6"
|
||||
aria-live="polite"
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{answer ? (
|
||||
<motion.div
|
||||
key={answer + history.length}
|
||||
initial={{ opacity: 0, scale: 0.7 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.8 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 22 }}
|
||||
className={`flex flex-col items-center gap-2 ${
|
||||
answer === "Ja" ? "text-[#0d7a57]" : "text-clay"
|
||||
}`}
|
||||
>
|
||||
{answer === "Ja" ? (
|
||||
<CheckCircle2 className="h-14 w-14" />
|
||||
) : (
|
||||
<XCircle className="h-14 w-14" />
|
||||
)}
|
||||
<span className="font-display text-3xl font-semibold tracking-tight">
|
||||
{answer}
|
||||
</span>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="idle"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="flex flex-col items-center gap-2 text-ink-soft"
|
||||
>
|
||||
<HelpCircle className="h-14 w-14" />
|
||||
<span className="text-sm font-medium">Tippen zum Fragen</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={ask}
|
||||
disabled={asking}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<HelpCircle className="h-5 w-5" />
|
||||
{asking ? "Überlegt …" : "Ja oder Nein?"}
|
||||
</motion.button>
|
||||
<p className="mt-3 text-xs text-ink-soft">
|
||||
{question.trim()
|
||||
? `„${question.trim()}“`
|
||||
: "Stell eine Frage – oder lass dich einfach überraschen."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Info & Verlauf */}
|
||||
<div className="space-y-5">
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
So funktioniert's
|
||||
</h3>
|
||||
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
||||
Frage eingeben (optional), auf die Karte oder den Button tippen –
|
||||
der Generator entscheidet zufällig zwischen Ja und Nein. Perfekt
|
||||
für schnelle Entscheidungen ohne langes Abwägen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{history.length > 0 && (
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Verlauf
|
||||
</h3>
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
<AnimatePresence initial={false}>
|
||||
{history.map((entry, i) => (
|
||||
<motion.span
|
||||
key={`${entry}-${history.length - i}`}
|
||||
initial={{ opacity: 0, scale: 0.6 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className={`rounded-full px-3 py-1 text-xs font-semibold ${
|
||||
i === 0
|
||||
? entry === "Ja"
|
||||
? "bg-[#0d7a57] text-white"
|
||||
: "bg-clay text-white"
|
||||
: "bg-surface text-ink-soft ring-1 ring-line"
|
||||
}`}
|
||||
>
|
||||
{entry}
|
||||
</motion.span>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
178
components/tools/list-picker.tsx
Normal file
178
components/tools/list-picker.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { ListChecks, Sparkles } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { celebrateConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
const DEFAULT_LIST = "Anna\nBen\nClara\nDavid";
|
||||
|
||||
export default function ListPicker() {
|
||||
const [text, setText] = useLocalStorage("list-items", DEFAULT_LIST);
|
||||
const [removeAfterDraw, setRemoveAfterDraw] = useLocalStorage(
|
||||
"list-remove",
|
||||
false,
|
||||
);
|
||||
const [display, setDisplay] = useState<string | null>(null);
|
||||
const [drawing, setDrawing] = useState(false);
|
||||
const [winner, setWinner] = useState<string | null>(null);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
const lastPaintRef = useRef(0);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const items = text
|
||||
.split("\n")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
const draw = () => {
|
||||
if (drawing) return;
|
||||
if (items.length < 2) {
|
||||
setError(true);
|
||||
play("tick");
|
||||
gsap.fromTo(
|
||||
textareaRef.current,
|
||||
{ x: -7 },
|
||||
{ x: 0, duration: 0.4, ease: "elastic.out(2.5, 0.35)" },
|
||||
);
|
||||
return;
|
||||
}
|
||||
setError(false);
|
||||
|
||||
const pick = items[Math.floor(Math.random() * items.length)];
|
||||
setDrawing(true);
|
||||
setWinner(null);
|
||||
play("whoosh");
|
||||
|
||||
const dur = reduced ? 0.35 : 2.0;
|
||||
const proxy = { p: 0 };
|
||||
lastPaintRef.current = 0;
|
||||
|
||||
gsap.to(proxy, {
|
||||
p: 1,
|
||||
duration: dur,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => {
|
||||
const now = performance.now();
|
||||
const interval = reduced ? 60 : 30 + 260 * proxy.p;
|
||||
if (now - lastPaintRef.current > interval) {
|
||||
lastPaintRef.current = now;
|
||||
setDisplay(items[Math.floor(Math.random() * items.length)]);
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
setDisplay(pick);
|
||||
setWinner(pick);
|
||||
setDrawing(false);
|
||||
play("win");
|
||||
celebrateConfetti();
|
||||
if (removeAfterDraw) {
|
||||
setText(
|
||||
items
|
||||
.filter((item) => item !== pick)
|
||||
.join("\n"),
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
{/* Liste */}
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Deine Liste ({items.length})
|
||||
</h3>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
rows={8}
|
||||
placeholder={"Ein Eintrag pro Zeile, z. B.\nAnna\nBen\nClara"}
|
||||
aria-label="Liste der Einträge, ein Eintrag pro Zeile"
|
||||
className={`mt-4 w-full resize-none rounded-xl border bg-surface px-4 py-3 font-mono text-sm leading-relaxed outline-none transition focus:ring-2 ${
|
||||
error
|
||||
? "border-clay/60 focus:border-clay/60 focus:ring-clay/20"
|
||||
: "border-line focus:border-primary/60 focus:ring-primary/20"
|
||||
}`}
|
||||
/>
|
||||
<label className="mt-3 flex cursor-pointer items-center gap-2.5 text-sm font-medium text-ink-soft">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={removeAfterDraw}
|
||||
onChange={(e) => setRemoveAfterDraw(e.target.checked)}
|
||||
className="h-4 w-4 cursor-pointer accent-primary"
|
||||
/>
|
||||
Gezogene Einträge entfernen (ohne Zurücklegen)
|
||||
</label>
|
||||
<p className={`mt-3 text-xs leading-relaxed ${error ? "font-semibold text-clay" : "text-ink-soft"}`}>
|
||||
{error
|
||||
? "Bitte mindestens 2 Einträge eintragen."
|
||||
: "Ideal für Teams, Gruppen-Reihenfolgen oder Gewinnspiele."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Anzeige */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex min-h-[190px] w-full items-center justify-center rounded-[2rem] border border-line bg-cream/70 px-8 py-8">
|
||||
<AnimatePresence mode="wait">
|
||||
{display === null ? (
|
||||
<motion.div
|
||||
key="idle"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center gap-3 text-center"
|
||||
>
|
||||
<ListChecks className="h-8 w-8 text-primary/50" />
|
||||
<p className="font-display text-xl font-medium text-ink-soft">
|
||||
{items.length >= 2
|
||||
? `${items.length} Einträge warten auf die Ziehung.`
|
||||
: "Trage links mindestens 2 Einträge ein."}
|
||||
</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.p
|
||||
key={display + (winner ? "-win" : "")}
|
||||
initial={winner ? { scale: 0.6, opacity: 0, y: 14 } : false}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
transition={{ type: "spring", stiffness: 340, damping: 20 }}
|
||||
className={`break-words text-center font-display text-5xl font-semibold tracking-tight sm:text-6xl ${
|
||||
winner ? "text-primary" : "text-ink/60"
|
||||
}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
{display}
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={draw}
|
||||
disabled={drawing}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<Sparkles className="h-5 w-5" />
|
||||
{drawing ? "Zieht …" : "Zufällig ziehen"}
|
||||
</motion.button>
|
||||
{winner && (
|
||||
<p className="mt-3 text-xs text-ink-soft">
|
||||
{removeAfterDraw
|
||||
? `„${winner}“ wurde von der Liste entfernt.`
|
||||
: "Nochmal ziehen? Einfach erneut klicken."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
252
components/tools/magic-8-ball.tsx
Normal file
252
components/tools/magic-8-ball.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Pencil, Plus, Sparkles, X } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { popConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
const DEFAULT_ANSWERS = [
|
||||
"Ja, definitiv.",
|
||||
"Ohne Zweifel.",
|
||||
"Sehr wahrscheinlich.",
|
||||
"Sieht gut aus.",
|
||||
"Frag später nochmal.",
|
||||
"Kann ich jetzt nicht sagen.",
|
||||
"Konzentrier dich und frag erneut.",
|
||||
"Rechne nicht damit.",
|
||||
"Meine Antwort: Nein.",
|
||||
"Eher nicht.",
|
||||
];
|
||||
|
||||
const MIN_ANSWERS = 2;
|
||||
const MAX_ANSWERS = 20;
|
||||
|
||||
export default function Magic8Ball() {
|
||||
const [answers, setAnswers] = useLocalStorage<string[]>(
|
||||
"ball-answers",
|
||||
DEFAULT_ANSWERS,
|
||||
);
|
||||
const [question, setQuestion] = useState("");
|
||||
const [answer, setAnswer] = useState<string | null>(null);
|
||||
const [shaking, setShaking] = useState(false);
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
const ballRef = useRef<HTMLDivElement>(null);
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const validAnswers = answers.map((a) => a.trim()).filter(Boolean);
|
||||
|
||||
const shake = () => {
|
||||
if (shaking || validAnswers.length === 0) return;
|
||||
|
||||
const pick =
|
||||
validAnswers[Math.floor(Math.random() * validAnswers.length)];
|
||||
setShaking(true);
|
||||
setAnswer(null);
|
||||
play("whoosh");
|
||||
|
||||
const reveal = () => {
|
||||
setAnswer(pick);
|
||||
setShaking(false);
|
||||
play("pop");
|
||||
popConfetti();
|
||||
};
|
||||
|
||||
if (reduced) {
|
||||
gsap.delayedCall(0.25, reveal);
|
||||
return;
|
||||
}
|
||||
|
||||
const tl = gsap.timeline({ onComplete: reveal });
|
||||
tl.to(ballRef.current, {
|
||||
x: -18,
|
||||
rotation: -9,
|
||||
duration: 0.08,
|
||||
ease: "power1.inOut",
|
||||
})
|
||||
.to(ballRef.current, {
|
||||
x: 16,
|
||||
rotation: 8,
|
||||
duration: 0.08,
|
||||
ease: "power1.inOut",
|
||||
})
|
||||
.repeat(4)
|
||||
.to(ballRef.current, {
|
||||
x: 0,
|
||||
rotation: 0,
|
||||
duration: 0.22,
|
||||
ease: "power2.out",
|
||||
});
|
||||
};
|
||||
|
||||
const updateAnswer = (i: number, value: string) =>
|
||||
setAnswers((list) => list.map((a, idx) => (idx === i ? value : a)));
|
||||
|
||||
const addAnswer = () => {
|
||||
if (answers.length >= MAX_ANSWERS) return;
|
||||
setAnswers((list) => [...list, ""]);
|
||||
};
|
||||
|
||||
const removeAnswer = (i: number) => {
|
||||
if (answers.length <= MIN_ANSWERS) return;
|
||||
setAnswers((list) => list.filter((_, idx) => idx !== i));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
{/* Bühne */}
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
maxLength={80}
|
||||
placeholder="Deine Frage (optional) …"
|
||||
aria-label="Deine Frage an den 8-Ball"
|
||||
className="w-full max-w-sm rounded-full border border-line bg-surface px-5 py-3 text-center text-sm font-medium shadow-soft outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
|
||||
<div ref={ballRef} className="mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={shake}
|
||||
aria-label="8-Ball schütteln"
|
||||
className="ball-body relative flex h-64 w-64 cursor-pointer items-center justify-center rounded-full transition-transform duration-200 hover:scale-[1.03] active:scale-95 sm:h-72 sm:w-72"
|
||||
>
|
||||
<div className="ball-window relative flex h-32 w-32 items-center justify-center overflow-hidden rounded-full sm:h-36 sm:w-36">
|
||||
{/* Prisma-Dreieck */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-4 bg-primary/60"
|
||||
style={{
|
||||
clipPath: "polygon(50% 6%, 94% 90%, 6% 90%)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="relative z-10 flex h-full w-full items-center justify-center px-7"
|
||||
aria-live="polite"
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{answer ? (
|
||||
<motion.p
|
||||
key={answer}
|
||||
initial={{ opacity: 0, scale: 0.7, filter: "blur(8px)" }}
|
||||
animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
|
||||
exit={{ opacity: 0, filter: "blur(6px)" }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className="text-center font-display text-[13px] font-semibold leading-snug text-[#dde5dd]"
|
||||
>
|
||||
{answer}
|
||||
</motion.p>
|
||||
) : (
|
||||
<motion.p
|
||||
key="eight"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="font-display text-4xl font-semibold text-[#dde5dd]"
|
||||
>
|
||||
8
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={shake}
|
||||
disabled={shaking || validAnswers.length === 0}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<Sparkles className="h-5 w-5" />
|
||||
{shaking ? "Schüttelt …" : "8-Ball schütteln"}
|
||||
</motion.button>
|
||||
<p className="mt-3 text-xs text-ink-soft">
|
||||
{question.trim()
|
||||
? `„${question.trim()}“`
|
||||
: "Stell eine Ja/Nein-Frage – oder lass dich einfach überraschen."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Antworten-Editor */}
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Antworten ({validAnswers.length})
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditing((e) => !e)}
|
||||
aria-expanded={editing}
|
||||
className={`inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
|
||||
editing
|
||||
? "bg-primary text-white"
|
||||
: "bg-surface text-ink-soft ring-1 ring-line hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
{editing ? "Fertig" : "Bearbeiten"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{editing && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mt-4 max-h-[260px] space-y-2 overflow-y-auto pr-1">
|
||||
{answers.map((a, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<input
|
||||
value={a}
|
||||
onChange={(e) => updateAnswer(i, e.target.value)}
|
||||
maxLength={60}
|
||||
placeholder={`Antwort ${i + 1}`}
|
||||
aria-label={`Antwort ${i + 1}`}
|
||||
className="w-full rounded-xl border border-line bg-surface px-3.5 py-2 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAnswer(i)}
|
||||
disabled={answers.length <= MIN_ANSWERS}
|
||||
aria-label={`Antwort ${i + 1} entfernen`}
|
||||
className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-xl text-ink-soft transition-colors hover:bg-clay-soft hover:text-clay disabled:cursor-not-allowed disabled:opacity-30"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addAnswer}
|
||||
disabled={answers.length >= MAX_ANSWERS}
|
||||
className="mt-3 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-2 border-dashed border-line px-4 py-2.5 text-sm font-semibold text-ink-soft transition-colors hover:border-primary/50 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Antwort hinzufügen
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
||||
Der Ball sagt, was du ihm vorgibst – von klassisch bis fies.{" "}
|
||||
{MIN_ANSWERS}–{MAX_ANSWERS} Antworten, automatisch gespeichert.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
147
components/tools/random-number.tsx
Normal file
147
components/tools/random-number.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Hash } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { popConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
const randInt = (lo: number, hi: number) =>
|
||||
lo + Math.floor(Math.random() * (hi - lo + 1));
|
||||
|
||||
export default function RandomNumber() {
|
||||
const [min, setMin] = useLocalStorage("num-min", 1);
|
||||
const [max, setMax] = useLocalStorage("num-max", 100);
|
||||
const [display, setDisplay] = useState<string | null>(null);
|
||||
const [rolling, setRolling] = useState(false);
|
||||
const [done, setDone] = useState(false);
|
||||
|
||||
const lastPaintRef = useRef(0);
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const roll = () => {
|
||||
if (rolling) return;
|
||||
|
||||
const lo = Math.min(min, max);
|
||||
const hi = Math.max(min, max);
|
||||
const result = randInt(lo, hi);
|
||||
|
||||
setRolling(true);
|
||||
setDone(false);
|
||||
play("whoosh");
|
||||
|
||||
const dur = reduced ? 0.3 : 1.7;
|
||||
const proxy = { p: 0 };
|
||||
lastPaintRef.current = 0;
|
||||
|
||||
gsap.to(proxy, {
|
||||
p: 1,
|
||||
duration: dur,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => {
|
||||
const now = performance.now();
|
||||
// Wechsel-Intervall wächst → Slot-Machine-Effekt
|
||||
const interval = reduced ? 60 : 28 + 240 * proxy.p;
|
||||
if (now - lastPaintRef.current > interval) {
|
||||
lastPaintRef.current = now;
|
||||
setDisplay(String(randInt(lo, hi)));
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
setDisplay(String(result));
|
||||
setRolling(false);
|
||||
setDone(true);
|
||||
play("pop");
|
||||
popConfetti();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
{/* Anzeige */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex min-h-[190px] items-center justify-center rounded-[2rem] border border-line bg-cream/70 px-10 py-8">
|
||||
<AnimatePresence mode="wait">
|
||||
{display === null ? (
|
||||
<motion.p
|
||||
key="idle"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="text-center font-display text-xl font-medium text-ink-soft"
|
||||
>
|
||||
Bereit, wenn du es bist.
|
||||
</motion.p>
|
||||
) : (
|
||||
<motion.p
|
||||
key={display + (done ? "-done" : "")}
|
||||
initial={done ? { scale: 1.35, opacity: 0 } : false}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 320, damping: 18 }}
|
||||
className={`tabular font-display text-8xl font-semibold tracking-tight sm:text-9xl ${
|
||||
done ? "text-primary" : "text-ink/70"
|
||||
}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
{display}
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={roll}
|
||||
disabled={rolling}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<Hash className="h-5 w-5" />
|
||||
{rolling ? "Rollt …" : "Zahl generieren"}
|
||||
</motion.button>
|
||||
<p className="mt-3 text-xs text-ink-soft">
|
||||
Zufallszahl zwischen {Math.min(min, max)} und {Math.max(min, max)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Einstellungen */}
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Zahlenraum
|
||||
</h3>
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<label className="block">
|
||||
<span className="mb-1.5 block text-xs font-medium text-ink-soft">
|
||||
Minimum
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
value={min}
|
||||
onChange={(e) => setMin(Number(e.target.value))}
|
||||
className="tabular w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="mb-1.5 block text-xs font-medium text-ink-soft">
|
||||
Maximum
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
value={max}
|
||||
onChange={(e) => setMax(Number(e.target.value))}
|
||||
className="tabular w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
||||
Perfekt für Lose, Teams oder „Wie viele Liegestütze?“. Reihenfolge
|
||||
von Min & Max ist egal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
299
components/tools/wheel-of-fortune.tsx
Normal file
299
components/tools/wheel-of-fortune.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Plus, RotateCcw, Sparkles, X } from "lucide-react";
|
||||
import { gsap } from "@/lib/gsap";
|
||||
import { wheelEase } from "@/lib/motion";
|
||||
import { celebrateConfetti } from "@/lib/confetti";
|
||||
import { useSound } from "@/components/providers/sound-provider";
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage";
|
||||
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
|
||||
|
||||
const DEFAULT_OPTIONS = ["1", "2", "3", "4", "5", "6"];
|
||||
|
||||
/** Natürliche, gedeckte Farben – weiße Schrift bleibt lesbar. */
|
||||
const PALETTE = [
|
||||
"#33523f",
|
||||
"#a8623f",
|
||||
"#b98a3c",
|
||||
"#5e7a5e",
|
||||
"#6b7f8c",
|
||||
"#8a6b52",
|
||||
"#5f8a80",
|
||||
"#9a5b45",
|
||||
"#4f6b8a",
|
||||
"#8c7a4f",
|
||||
"#5c6e4f",
|
||||
"#3f5e66",
|
||||
];
|
||||
|
||||
const C = 210;
|
||||
const R = 196;
|
||||
const MIN_OPTIONS = 2;
|
||||
const MAX_OPTIONS = 12;
|
||||
|
||||
/** Winkel → Punkt auf dem Kreis (0° = oben, im Uhrzeigersinn). */
|
||||
function polar(angleDeg: number, radius: number): [number, number] {
|
||||
const a = (angleDeg * Math.PI) / 180;
|
||||
return [C + radius * Math.sin(a), C - radius * Math.cos(a)];
|
||||
}
|
||||
|
||||
export default function WheelOfFortune() {
|
||||
const [options, setOptions] = useLocalStorage<string[]>(
|
||||
"wheel-options",
|
||||
DEFAULT_OPTIONS,
|
||||
);
|
||||
const [spinning, setSpinning] = useState(false);
|
||||
const [winner, setWinner] = useState<number | null>(null);
|
||||
|
||||
const wheelRef = useRef<SVGGElement>(null);
|
||||
const pointerRef = useRef<HTMLDivElement>(null);
|
||||
const rotationRef = useRef(0);
|
||||
const lastTickRef = useRef(-1);
|
||||
|
||||
const { play } = useSound();
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
const labels = options.map((o, i) => o.trim() || `Option ${i + 1}`);
|
||||
const n = labels.length;
|
||||
const seg = 360 / n;
|
||||
|
||||
const spin = () => {
|
||||
if (spinning || n < MIN_OPTIONS) return;
|
||||
|
||||
const winnerIndex = Math.floor(Math.random() * n);
|
||||
setWinner(null);
|
||||
setSpinning(true);
|
||||
play("whoosh");
|
||||
lastTickRef.current = -1;
|
||||
|
||||
// Zufällige Position innerhalb des Gewinner-Segments
|
||||
const offset = 0.18 + Math.random() * 0.64;
|
||||
const targetAngle = winnerIndex * seg + seg * offset;
|
||||
|
||||
const current = rotationRef.current;
|
||||
const currentMod = ((current % 360) + 360) % 360;
|
||||
const delta =
|
||||
(((360 - targetAngle - currentMod) % 360) + 360) % 360;
|
||||
const target = current + 360 * 6 + delta;
|
||||
|
||||
const dur = reduced ? 0.5 : 5.6;
|
||||
|
||||
gsap.to(wheelRef.current, {
|
||||
rotation: target,
|
||||
svgOrigin: `${C} ${C}`,
|
||||
duration: dur,
|
||||
ease: reduced ? "power1.out" : wheelEase,
|
||||
onUpdate: () => {
|
||||
if (reduced) return;
|
||||
const rot = Number(gsap.getProperty(wheelRef.current, "rotation"));
|
||||
const m = ((rot % 360) + 360) % 360;
|
||||
const idx = Math.floor(((360 - m) % 360) / seg);
|
||||
if (idx !== lastTickRef.current) {
|
||||
lastTickRef.current = idx;
|
||||
play("tick");
|
||||
gsap.fromTo(
|
||||
pointerRef.current,
|
||||
{ rotation: -16 },
|
||||
{
|
||||
rotation: 0,
|
||||
duration: 0.22,
|
||||
ease: "elastic.out(2.2, 0.4)",
|
||||
transformOrigin: "50% 12%",
|
||||
},
|
||||
);
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
rotationRef.current = target;
|
||||
setSpinning(false);
|
||||
setWinner(winnerIndex);
|
||||
play("win");
|
||||
celebrateConfetti();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const updateOption = (i: number, value: string) => {
|
||||
setOptions((opts) => opts.map((o, idx) => (idx === i ? value : o)));
|
||||
setWinner(null);
|
||||
};
|
||||
|
||||
const addOption = () => {
|
||||
if (n >= MAX_OPTIONS) return;
|
||||
setOptions((opts) => [...opts, ""]);
|
||||
setWinner(null);
|
||||
};
|
||||
|
||||
const removeOption = (i: number) => {
|
||||
if (n <= MIN_OPTIONS) return;
|
||||
setOptions((opts) => opts.filter((_, idx) => idx !== i));
|
||||
setWinner(null);
|
||||
};
|
||||
|
||||
const fontSize = n <= 6 ? 15 : n <= 9 ? 13 : 11.5;
|
||||
|
||||
return (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
{/* Rad */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative w-full max-w-[400px]">
|
||||
{/* Zeiger */}
|
||||
<div
|
||||
ref={pointerRef}
|
||||
aria-hidden
|
||||
className="absolute -top-1.5 left-1/2 z-10 h-9 w-7 -translate-x-1/2 bg-primary shadow-[0_6px_16px_rgb(108_92_231/0.5)]"
|
||||
style={{
|
||||
clipPath: "polygon(50% 100%, 0 0, 100% 0)",
|
||||
}}
|
||||
/>
|
||||
<svg viewBox="0 0 420 420" className="w-full drop-shadow-[0_20px_36px_rgb(23_23_28/0.14)]">
|
||||
{/* äußerer Ring */}
|
||||
<circle cx={C} cy={C} r={206} fill="#ffffff" stroke="#e9e9e4" />
|
||||
<g ref={wheelRef}>
|
||||
{labels.map((label, i) => {
|
||||
const [x0, y0] = polar(i * seg, R);
|
||||
const [x1, y1] = polar((i + 1) * seg, R);
|
||||
const large = seg > 180 ? 1 : 0;
|
||||
const isWinner = winner === i;
|
||||
const dimmed = winner !== null && !isWinner;
|
||||
return (
|
||||
<g key={i}>
|
||||
<path
|
||||
d={`M ${C} ${C} L ${x0} ${y0} A ${R} ${R} 0 ${large} 1 ${x1} ${y1} Z`}
|
||||
fill={PALETTE[i % PALETTE.length]}
|
||||
stroke="#ffffff"
|
||||
strokeWidth={isWinner ? 3.5 : 1.5}
|
||||
className="transition-opacity duration-500"
|
||||
style={{
|
||||
opacity: dimmed ? 0.4 : 1,
|
||||
filter: isWinner
|
||||
? "drop-shadow(0 0 14px rgb(242 179 61 / 0.9))"
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
<g transform={`rotate(${i * seg + seg / 2} ${C} ${C})`}>
|
||||
<text
|
||||
x={C}
|
||||
y={C - 118}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
transform={`rotate(90 ${C} ${C - 118})`}
|
||||
fill="#ffffff"
|
||||
fontSize={fontSize}
|
||||
fontWeight={600}
|
||||
fontFamily="var(--font-display)"
|
||||
style={{
|
||||
textShadow: "0 1px 3px rgb(0 0 0 / 0.35)",
|
||||
opacity: dimmed ? 0.4 : 1,
|
||||
}}
|
||||
className="transition-opacity duration-500"
|
||||
>
|
||||
{label.length > 16 ? `${label.slice(0, 15)}…` : label}
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
{/* Nabe */}
|
||||
<circle cx={C} cy={C} r={30} fill="#ffffff" stroke="#e9e9e4" strokeWidth={2} />
|
||||
<circle cx={C} cy={C} r={9} fill="#6c5ce7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 h-14" aria-live="polite">
|
||||
<AnimatePresence mode="wait">
|
||||
{winner !== null && (
|
||||
<motion.p
|
||||
key={`${winner}-${labels[winner]}`}
|
||||
initial={{ opacity: 0, scale: 0.6, y: 12 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.8 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 22 }}
|
||||
className="flex items-center gap-2 font-display text-3xl font-semibold tracking-tight"
|
||||
>
|
||||
<Sparkles className="h-6 w-6 text-clay" />
|
||||
<span className="text-primary">{labels[winner]}!</span>
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={spin}
|
||||
disabled={spinning || n < MIN_OPTIONS}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-2 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<RotateCcw className="h-5 w-5" />
|
||||
{spinning ? "Dreht sich …" : "Drehen!"}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Optionen-Editor */}
|
||||
<div className="rounded-3xl border border-line bg-cream/70 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
|
||||
Optionen ({n}/{MAX_OPTIONS})
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOptions(DEFAULT_OPTIONS);
|
||||
setWinner(null);
|
||||
}}
|
||||
className="cursor-pointer text-xs font-medium text-ink-soft underline-offset-2 transition-colors hover:text-primary hover:underline"
|
||||
>
|
||||
Zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 max-h-[300px] space-y-2 overflow-y-auto pr-1">
|
||||
{options.map((option, i) => (
|
||||
<div key={i} className="flex items-center gap-2.5">
|
||||
<span
|
||||
aria-hidden
|
||||
className="h-3.5 w-3.5 shrink-0 rounded-full ring-2 ring-white"
|
||||
style={{ background: PALETTE[i % PALETTE.length] }}
|
||||
/>
|
||||
<input
|
||||
value={option}
|
||||
onChange={(e) => updateOption(i, e.target.value)}
|
||||
maxLength={24}
|
||||
placeholder={`Option ${i + 1}`}
|
||||
aria-label={`Option ${i + 1}`}
|
||||
className="w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeOption(i)}
|
||||
disabled={n <= MIN_OPTIONS}
|
||||
aria-label={`Option ${i + 1} entfernen`}
|
||||
className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-xl text-ink-soft transition-colors hover:bg-clay-soft hover:text-clay disabled:cursor-not-allowed disabled:opacity-30"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addOption}
|
||||
disabled={n >= MAX_OPTIONS}
|
||||
className="mt-3 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-2 border-dashed border-line px-4 py-2.5 text-sm font-semibold text-ink-soft transition-colors hover:border-primary/50 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Option hinzufügen
|
||||
</button>
|
||||
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
||||
{MIN_OPTIONS}–{MAX_OPTIONS} Optionen. Deine Liste bleibt automatisch
|
||||
gespeichert.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user