\n {pieces.map((p) => (\n \n ))}\n

\n );\n}\n\nfunction FloatingHearts() {\n return (\n

\n {Array.from({ length: 10 }).map((_, i) => (\n \n 💛\n

\n ))}\n \n );\n}\n\nfunction App() {\n const [step, setStep] = useState(0); // 0 = ask, 1 = yay, 2 = message\n const [noClicks, setNoClicks] = useState(0);\n const [confettiFire, setConfettiFire] = useState(0);\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n const stageRef = useRef(null);\n\n const yesScale = clamp(1 + noClicks * 0.1, 1, 1.8);\n\n const noText = useMemo(() => {\n if (noClicks === 0) return \"No\";\n return NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)];\n }, [noClicks]);\n\n const moveNo = () => {\n const rect = stageRef.current.getBoundingClientRect();\n setNoPos({\n x: rand(-rect.width / 3, rect.width / 3),\n y: rand(-rect.height / 4, rect.height / 4),\n });\n };\n\n return (\n

\n \n \n \n\n

\n {/* -------- SLIDE 0 -------- */}\n {step === 0 && (\n <>\n

\n\n

\n Do you wanna go to a café with me?{\" \"}\n ☕🌼\n

\n\n

\n No pressure — just something warm, cozy, and sweet 💛\n

\n\n

\n {\n setStep(1);\n setConfettiFire((x) => x + 1);\n }}\n >\n Yes ( ˶ˆᗜˆ˵ )\n \n\n {\n setNoClicks((x) => x + 1);\n moveNo();\n }}\n >\n {noText}\n \n

\n\n

\n I’ll pick a cute café 🌼\n

\n \n )}\n\n {/* -------- SLIDE 1 -------- */}\n {step === 1 && (\n <>\n

Yayyyy!!! 💛🎉

\n Okay… now I’m smiling for real ☕🌼\n

\n\n setStep(2)}\n >\n Next 💛\n \n \n )}\n\n {/* -------- SLIDE 2 -------- */}\n {step === 2 && (\n <>\n

🌼💛

Just one little thing

\n I really like spending time with you.\n
\n Even just sitting together makes me happy.\n
\n It always feels calm and cozy 💛\n

\n\n {\n setStep(0);\n setNoClicks(0);\n setNoPos({ x: 0, y: 0 });\n }}\n >\n Replay ✨\n \n

\n \n )}\n

\n\n

made with cat

\n );\n}\n\nconst styles = {\n page: {\n minHeight: \"100vh\",\n display: \"grid\",\n placeItems: \"center\",\n background: \"linear-gradient(180deg,#FFFDF6,#FFF6EA,#FFF2F8)\",\n fontFamily: \"system-ui\",\n overflow: \"hidden\",\n },\n card: {\n background: \"rgba(255,255,255,0.85)\",\n borderRadius: 24,\n padding: 22,\n textAlign: \"center\",\n boxShadow: \"0 20px 40px rgba(0,0,0,0.1)\",\n },\n gif: { width: 260, borderRadius: 16 },\n title: { fontSize: 34 },\n subtitle: { color: \"rgba(0,0,0,0.65)\" },\n buttons: { display: \"grid\", gap: 12, marginTop: 10 },\n yesBtn: {\n padding: \"12px 22px\",\n borderRadius: 16,\n background: \"#FFD84D\",\n border: \"none\",\n fontWeight: 900,\n cursor: \"pointer\",\n },\n noBtn: {\n padding: \"12px 18px\",\n borderRadius: 16,\n background: \"#FF6FA0\",\n border: \"none\",\n color: \"white\",\n fontWeight: 800,\n cursor: \"pointer\",\n },\n yay: { fontSize: 48, color: \"#FFB000\" },\n nextBtn: {\n marginTop: 12,\n padding: \"10px 16px\",\n borderRadius: 14,\n background: \"rgba(255,216,77,0.35)\",\n border: \"none\",\n cursor: \"pointer\",\n fontWeight: 800,\n },\n messageCard: {\n padding: 20,\n borderRadius: 20,\n background: \"rgba(255,255,255,0.9)\",\n },\n messageEmoji: { fontSize: 26 },\n messageTitle: { fontSize: 22, color: \"#FFB000\" },\n messageText: {\n fontSize: 16,\n lineHeight: 1.6,\n color: \"rgba(0,0,0,0.75)\",\n },\n againBtn: {\n marginTop: 14,\n padding: \"10px 16px\",\n borderRadius: 14,\n background: \"rgba(255,216,77,0.28)\",\n border: \"none\",\n cursor: \"pointer\",\n },\n hint: { marginTop: 12, fontSize: 13 },\n dot: {\n display: \"inline-block\",\n width: 8,\n height: 8,\n borderRadius: 999,\n background: \"#FFD84D\",\n marginRight: 6,\n },\n confettiWrap: { position: \"fixed\", inset: 0, pointerEvents: \"none\" },\n confettiPiece: {\n position: \"absolute\",\n top: -20,\n borderRadius: 3,\n animation: \"confetti-fall 1.6s forwards\",\n },\n floatWrap: { position: \"fixed\", inset: 0, pointerEvents: \"none\" },\n floatHeart: {\n position: \"absolute\",\n bottom: -40,\n animation: \"float-up linear infinite\",\n },\n small: { marginTop: 10, fontSize: 12, opacity: 0.6 },\n};\n\nconst css = `\n@keyframes confetti-fall {\n to { transform: translateY(110vh) translateX(var(--drift)); opacity: 0; }\n}\n@keyframes float-up {\n to { transform: translateY(-120vh); opacity: 0; }\n}\n.wiggle { animation: wiggle 1.6s infinite; }\n@keyframes wiggle {\n 0%,100% { transform: rotate(-6deg); }\n 50% { transform: rotate(6deg); }\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\nCafé Date?\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/milanxo7/untitled-1148/code/main.ts","extension","actionData","errors"]