{items}

;\n}\n\n/* =========================\n APP\n ========================= */\nfunction App() {\n const name = useMemo(() => {\n try {\n return new URLSearchParams(location.search).get(\"name\") ||\n CFG.defaultName;\n } catch {\n return CFG.defaultName;\n }\n }, []);\n\n const [step, setStep] = useState(\"intro\");\n const [noClicks, setNoClicks] = useState(0);\n const [shake, setShake] = useState(false);\n\n // Cat fallback logic\n const [introGifIndex, setIntroGifIndex] = useState(0);\n const [introGifFailed, setIntroGifFailed] = useState(false);\n\n // ✅ NEW: Yes bounce when No is clicked\n const [yesBounce, setYesBounce] = useState(false);\n\n // ✅ NEW: Tease after 10 seconds on question screen\n const [tease, setTease] = useState(false);\n\n // ✅ NEW: Confetti on Yes\n const [confetti, setConfetti] = useState(false);\n\n const introText = CFG.introLines.join(\"\\n\\n\");\n const typedIntro = useTypewriter(introText, 55);\n const doneTyping = typedIntro.length === introText.length;\n\n const yesSize = 18 + noClicks * 16;\n\n // show NO_PHRASES immediately\n const noText = NO_PHRASES[Math.min(noClicks, NO_PHRASES.length - 1)];\n\n // ✅ NEW: No button moves away a little each click (still tappable)\n // We keep it bounded so it doesn't fly off-screen on mobile.\n const noOffset = useMemo(() => {\n const n = Math.min(noClicks, 10);\n const dx = Math.round((Math.random() > 0.5 ? 1 : -1) * (n * 10));\n const dy = Math.round((Math.random() > 0.5 ? 1 : -1) * (n * 6));\n return { dx, dy };\n }, [noClicks]);\n\n const handleNo = () => {\n setNoClicks((n) => n + 1);\n\n // shake\n setShake(false);\n requestAnimationFrame(() => {\n setShake(true);\n setTimeout(() => setShake(false), 350);\n });\n\n // yes bounce\n setYesBounce(false);\n requestAnimationFrame(() => {\n setYesBounce(true);\n setTimeout(() => setYesBounce(false), 420);\n });\n };\n\n const handleYes = () => {\n setStep(\"yay\");\n // heart confetti burst\n setConfetti(false);\n requestAnimationFrame(() => {\n setConfetti(true);\n setTimeout(() => setConfetti(false), 1800);\n });\n };\n\n // Tease timer (10 seconds) on question screen\n useEffect(() => {\n if (step !== \"question\") {\n setTease(false);\n return;\n }\n setTease(false);\n const t = setTimeout(() => setTease(true), 10000);\n return () => clearTimeout(t);\n }, [step]);\n\n const introSrc = CFG.introRaccoonGifs[introGifIndex];\n\n return (\n

\n \n\n {/* ✅ NEW: floating hearts background */}\n

\n\n {/* ✅ NEW: heart confetti on yes */}\n \n\n

\n {/* INTRO */}\n {step === \"intro\" && (\n <>\n {!introGifFailed\n ? (\n {\n const next = introGifIndex + 1;\n if (next < CFG.introRaccoonGifs.length) {\n setIntroGifIndex(next);\n } else {\n setIntroGifFailed(true);\n }\n }}\n />\n )\n : (\n

\n 🐱💖\n

\n )}\n\n

Hi {name} 💖

{typedIntro}

\n\n setStep(\"question\")}\n >\n Okay… what is it? 👀\n \n \n )}\n\n {/* QUESTION */}\n {step === \"question\" && (\n <>\n $\"bear$ \n

{CFG.questionTitle}

\n\n {/* ✅ NEW: countdown tease after 10 seconds */}\n {tease && (\n

\n decision time 😭\n

\n )}\n\n

\n \n Yes\n \n\n \n {noText}\n \n

\n \n )}\n\n {/* YAY */}\n {step === \"yay\" && (\n <>\n \n

{CFG.yayTitle}

{CFG.yaySubtitle}

\n \n )}\n

\n );\n}\n\n/* =========================\n STYLES\n ========================= */\nconst S = {\n page: {\n minHeight: \"100vh\",\n display: \"grid\",\n placeItems: \"center\",\n background: \"linear-gradient(135deg, rgba(255,182,193,0.4), white)\",\n fontFamily: \"Arial, sans-serif\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n card: {\n background: \"white\",\n padding: \"26px\",\n width: \"min(520px, 92vw)\",\n borderRadius: \"22px\",\n textAlign: \"center\",\n boxShadow: \"0 12px 30px rgba(0,0,0,0.12)\",\n position: \"relative\",\n zIndex: 2,\n },\n gif: {\n width: 180,\n height: 180,\n objectFit: \"contain\",\n },\n fallbackEmoji: {\n width: 180,\n height: 180,\n display: \"grid\",\n placeItems: \"center\",\n fontSize: 56,\n },\n h1: {\n marginTop: 10,\n marginBottom: 8,\n },\n text: {\n whiteSpace: \"pre-wrap\",\n fontSize: 18,\n lineHeight: 1.65,\n marginBottom: 14,\n },\n row: {\n display: \"flex\",\n justifyContent: \"center\",\n gap: 12,\n marginTop: 10,\n flexWrap: \"wrap\",\n },\n tease: {\n marginTop: 6,\n fontSize: 14,\n opacity: 0.85,\n },\n primaryBtn: {\n padding: \"12px 18px\",\n fontSize: 18,\n backgroundColor: \"#ff5fa2\",\n color: \"white\",\n border: \"none\",\n borderRadius: 14,\n cursor: \"pointer\",\n },\n yesBtn: {\n backgroundColor: \"#2ecc71\",\n color: \"white\",\n border: \"none\",\n borderRadius: 14,\n padding: \"12px 22px\",\n cursor: \"pointer\",\n minWidth: 140,\n },\n noBtn: {\n backgroundColor: \"#ff3b3b\",\n color: \"white\",\n border: \"none\",\n borderRadius: 14,\n padding: \"12px 18px\",\n cursor: \"pointer\",\n fontSize: 16,\n minWidth: 140,\n // base offset (even when not shaking)\n transform: \"translate(var(--dx, 0px), var(--dy, 0px))\",\n transition: \"transform 180ms ease\",\n },\n};\n\nconst css = `\n/* ✅ Floating hearts background */\n.floatingHearts{\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n background-image:\n radial-gradient(circle at 15% 80%, rgba(255,95,162,0.14) 0 2px, transparent 3px),\n radial-gradient(circle at 75% 20%, rgba(255,95,162,0.12) 0 2px, transparent 3px),\n radial-gradient(circle at 45% 10%, rgba(255,95,162,0.10) 0 2px, transparent 3px),\n radial-gradient(circle at 60% 70%, rgba(255,95,162,0.08) 0 2px, transparent 3px);\n animation: floatBg 7s ease-in-out infinite;\n}\n@keyframes floatBg {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-12px); }\n 100% { transform: translateY(0px); }\n}\n\n/* ✅ Shake (keeps the offset by including var(--dx/--dy)) */\n@keyframes shake {\n 0% { transform: translate(var(--dx,0px), var(--dy,0px)) translateX(0); }\n 25% { transform: translate(var(--dx,0px), var(--dy,0px)) translateX(-6px); }\n 50% { transform: translate(var(--dx,0px), var(--dy,0px)) translateX(6px); }\n 75% { transform: translate(var(--dx,0px), var(--dy,0px)) translateX(-4px); }\n 100% { transform: translate(var(--dx,0px), var(--dy,0px)) translateX(0); }\n}\n.shake { animation: shake 0.35s ease-in-out; }\n\n/* ✅ Yes bounce */\n@keyframes yesBounce {\n 0% { transform: scale(1); }\n 40% { transform: scale(1.09); }\n 100% { transform: scale(1); }\n}\n.yesBounce { animation: yesBounce 0.42s ease-out; }\n\n/* ✅ Confetti layer */\n.confettiLayer{\n position: fixed;\n inset: 0;\n z-index: 5;\n pointer-events: none;\n overflow: hidden;\n}\n.confettiHeart{\n position: absolute;\n top: -10vh;\n opacity: 0;\n animation-name: confettiFall;\n animation-timing-function: ease-out;\n animation-fill-mode: forwards;\n}\n@keyframes confettiFall{\n 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }\n 10% { opacity: 1; }\n 100% { transform: translate(var(--drift, 0px), 120vh) rotate(var(--rot, 0deg)); opacity: 0; }\n}\n`;\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server() {\n return new Response(\n `\n \n \n Valentine 💘\n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[100],"permalink","https://www.val.town/x/cfojas825/valentine/code/main.tsx","extension","actionData","errors"]