emilandClaude Sonnet 4.6
3863eb214e
Canvas-based wheel with 8-color palette, ease-out cubic spin animation, deterministic winner calculation, confetti burst on result, copy to clipboard. Supports 2–24 custom items with live textarea update. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
78 lines
2.3 KiB
Plaintext
78 lines
2.3 KiB
Plaintext
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import WheelSpinner from '../../components/generators/WheelSpinner.astro';
|
|
import AdBanner from '../../components/AdBanner.astro';
|
|
import SeoBlock from '../../components/SeoBlock.astro';
|
|
import { generators } from '../../data/generators';
|
|
|
|
const generator = generators.find((g) => g.slug === 'wheel')!;
|
|
---
|
|
|
|
<BaseLayout
|
|
title={generator.seoTitle}
|
|
description={generator.seoDescription}
|
|
>
|
|
<div class="max-w-2xl mx-auto px-4 py-12 sm:py-20">
|
|
<nav aria-label="Breadcrumb" class="mb-10">
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
|
aria-label="Back to all generators"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="m15 18-6-6 6-6"/>
|
|
</svg>
|
|
All generators
|
|
</a>
|
|
</nav>
|
|
|
|
<header class="mb-2">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span
|
|
class="inline-block w-2.5 h-2.5 rounded-full bg-[#534AB7]"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span class="text-sm font-medium text-zinc-400 uppercase tracking-widest">randify</span>
|
|
</div>
|
|
<h1 class="text-3xl sm:text-4xl font-bold text-zinc-100">
|
|
{generator.title}
|
|
</h1>
|
|
<p class="mt-2 text-base text-zinc-400">{generator.description}</p>
|
|
</header>
|
|
|
|
<main>
|
|
<WheelSpinner />
|
|
</main>
|
|
|
|
<div class="mt-12 flex justify-center">
|
|
<AdBanner size="tile" />
|
|
</div>
|
|
|
|
<SeoBlock
|
|
howTo={[
|
|
'Type your items into the text box — one per line.',
|
|
'Click "Update wheel" to apply changes.',
|
|
'Hit "Spin" and watch the wheel decide.',
|
|
'Copy the result or spin again.',
|
|
]}
|
|
whenTo={[
|
|
'Picking a winner for a giveaway or raffle.',
|
|
'Deciding whose turn it is in a game or meeting.',
|
|
'Choosing a random activity, movie, or restaurant.',
|
|
'Any decision you want to leave to chance.',
|
|
]}
|
|
/>
|
|
</div>
|
|
</BaseLayout>
|