untitled-5560/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
const NO_PHRASES = [ "No 💔", "Pretty please? 🥺", "But we'd be so cute together! 💕", "One more chance, pookie?", "Don't break my heart 😭", "WHAT ABOUT A MAYBE 😩", ];
const IMAGES = { ask: "https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif", yes: "https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif", };
function confettiBoom() { import("https://cdn.skypack.dev/canvas-confetti").then((confetti) => { confetti.default({ particleCount: 200, spread: 100, origin: { y: 0.6 }, }); }); }
function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false); const [married, setMarried] = useState(false); const [noStyle, setNoStyle] = useState({});
const yesSize = Math.min(18 + noClicks * 18, 140); const noLocked = noClicks >= 3;
useEffect(() => { if (isValentine) startHearts(); }, [isValentine]);
const runAway = () => { if (noLocked) return; const x = Math.random() * 240 -
120; const y = Math.random() * 240 - 120; setNoStyle({ transform:
translate(${x}px, ${y}px) }); };
const handleNo = () => { if (!noLocked) setNoClicks((n) => n + 1); };
const handleYes = () => { new Audio("https://assets.mixkit.co/sfx/preview/mixkit-magic-pop-932.mp3").play(); confettiBoom(); setIsValentine(true); };
if (married) { return (
); }return (
<div style={styles.buttons}>
<button
onClick={handleYes}
style={{ ...styles.yes, fontSize: `${yesSize}px` }}
>
YES 💖
</button>
<button
onMouseEnter={runAway}
onClick={handleNo}
disabled={noLocked}
style={{
...styles.no,
...noStyle,
opacity: noLocked ? 0.4 : 1,
}}
>
{noLocked
? "Too late 😈"
: noClicks === 0
? "No"
: NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}
</button>
</div>
</>
) : (
<>
<img src={IMAGES.yes} style={styles.gif} />
<h1 style={styles.big}>YAYYYY 💖🎉</h1>
<p style={styles.sub}>Best decision of your life 😌</p>
<button style={styles.yes} onClick={() => setMarried(true)}>
So… when’s the wedding? 💍
</button>
</>
)}
</div>
); }
/* 💖 Falling hearts */ function startHearts() { const heart = () => { const el = document.createElement("div"); el.innerText = "💖"; el.style.position = "fixed"; el.style.left = Math.random() * 100 + "vw"; el.style.top = "-20px"; el.style.fontSize = Math.random() * 24 + 16 + "px"; el.style.animation = "fall 5s linear"; document.body.appendChild(el); setTimeout(() => el.remove(), 5000); }; setInterval(heart, 300); }
/* 🎨 Styles */ const styles = { container: { minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", background: "linear-gradient(135deg, #ffe6f0, #fff)", fontFamily: "Arial, sans-serif", overflow: "hidden", }, gif: { maxWidth: "200px" }, buttons: { display: "flex", gap: "20px", flexWrap: "wrap" }, yes: { padding: "14px 30px", background: "#2ecc71", color: "#fff", border: "none", borderRadius: "14px", cursor: "pointer", boxShadow: "0 0 20px rgba(46,204,113,.7)", }, no: { padding: "12px 24px", background: "#e74c3c", color: "#fff", border: "none", borderRadius: "14px", cursor: "pointer", transition: "transform .2s ease", }, big: { fontSize: "52px", color: "#ff69b4" }, sub: { fontSize: "18px" }, };
/* 🚀 Boot */ function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") client();
export default async function server() { return new Response(
<!DOCTYPE html> <html> <head> <title>Valentine 💘</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{margin:0} @keyframes fall { to { transform: translateY(110vh); opacity: 0; } } </style> </head> <body> <div id="root"></div> <script src="https://esm.town/v/std/catch"></script> <script type="module" src="${import.meta.url}"></script> </body> </html>,
{ headers: { "content-type": "text/html" } } ); }