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

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

\n {Array.from({ length: 8 }).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.7);\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 $\"cute$ \n\n

\n do you wanna go to a cafe with me? ☕🌼\n

\n\n

\n just a chill cafe hangout ☕\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\n {/* SLIDE 1 */}\n {step === 1 && (\n <>\n $\"yay$ \n

yayyy!! 💛

\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

🌼💛

just one thing

\n\n

\n hanging out with you is fun.\n
\n it’s nice just being around you (ฅ^•ﻌ•^ฅ)\n
\n ur tuff don't go bald or something.\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

made with penguins

\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.9)\",\n borderRadius: 24,\n padding: 22,\n textAlign: \"center\",\n width: \"min(520px, 92vw)\",\n boxShadow: \"0 20px 40px rgba(0,0,0,0.1)\",\n },\n gif: { width: 260, maxWidth: \"88vw\", borderRadius: 16 },\n title: { fontSize: 32, margin: \"6px 0\" },\n subtitle: { color: \"rgba(0,0,0,0.65)\", margin: \"6px 0 10px\" },\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: 44, 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.95)\",\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 fontWeight: 800,\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`;\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\nsilly question\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/random/code/main.tsx","extension","actionData","errors"]