\n \n\n

\n ))}\n \n\n {/* Confetti */}\n \n {particles.map((p) => (\n \n ))}\n \n\n {/* Normal steps (card UI) */}\n {step <= 5 && (\n

\n \n

\n {step === 0 && (\n <>\n \n STARTING…\n

\n {NAME}… quick warm-up 🍦\n

\n Pick your favorite ice cream flavor.\n

\n\n \n {ICECREAM.map((opt) => (\n {\n setIce(opt);\n unlockAudio();\n go(1);\n }}\n >\n {opt}\n \n ))}\n

\n\n

\n (this click unlocks music on most phones)\n

\n \n )}\n\n {step === 1 && (\n <>\n \n Do you believe everything happens for a reason?\n \n \n \n \n

\n ice cream energy: {ice ?? \"??\"}\n

\n \n )}\n\n {step === 2 && (\n <>\n \n Do you think two people can randomly meet…\n
\n and it not be random?\n \n \n \n \n \n \n )}\n\n {step === 3 && (\n <>\n \n Do you believe timing matters?\n \n \n \n \n \n \n )}\n\n {/* Fake final question (misdirection, feels unrelated) */}\n {step === 4 && (\n <>\n \n FINAL QUESTION\n \n \n Okay {NAME}… last one.\n \n

\n If someone asked you something important right now…\n
\n would you answer honestly? 👀\n

\n\n \n \n \n \n\n

\n (promise it’s not what you think)\n

\n \n )}\n\n {/* Valentine */}\n {step === 5 && (\n <>\n \n {NAME}… will you be my Valentine? 💘\n \n\n \n {/* YES (secretly grows) */}\n \n Yes ✨\n \n\n {/* NO (runs + shakes after 5) */}\n {\n if (noClicks >= 1) moveNo();\n }}\n style={{\n position: \"absolute\",\n left: noPos.x,\n top: noPos.y,\n fontSize: 16,\n padding: \"12px 18px\",\n borderRadius: 18,\n border: \"1px solid rgba(255,255,255,0.16)\",\n background:\n \"linear-gradient(135deg, rgba(255,0,200,0.24), rgba(140,0,255,0.18), rgba(0,255,220,0.12))\",\n color: \"white\",\n cursor: \"pointer\",\n boxShadow:\n \"0 0 30px rgba(255,0,200,0.14), 0 0 40px rgba(140,0,255,0.12)\",\n transition:\n \"left 140ms ease, top 140ms ease, transform 140ms ease\",\n animation: noClicks >= 5\n ? \"noShake 0.12s infinite\"\n : \"none\",\n maxWidth: 280,\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {NO_LINES[Math.min(noClicks, NO_LINES.length - 1)]}\n \n \n\n

\n (choose wisely 😌)\n

\n \n )}\n \n \n \n )}\n\n {/* FULL celebration page (clean cinematic, not tiled chaos) */}\n {step === 6 && (\n

\n\n {/* Big cinematic headline */}\n

\n CINEMATIC CELEBRATION\n

\n \n YAYYYY {NAME} 💖🎉\n

\n the universe just clapped for us 😭🕺🐈\n

\n\n {/* Big gifs arranged cleanly (3 columns on desktop, stacked on mobile) */}\n \n {[GIF_A, GIF_B, GIF_C].map((src, i) => (\n \n ((e.currentTarget as HTMLImageElement).style.display =\n \"none\")}\n />\n

\n ))}\n \n\n {/* Optional “tap” if autoplay blocked */}\n {\n unlockAudio();\n spawnConfetti();\n if (bgRef.current) {\n bgRef.current.volume = 0.65;\n bgRef.current.play().catch(() => {});\n }\n }}\n style={{\n position: \"absolute\",\n bottom: 16,\n left: \"50%\",\n transform: \"translateX(-50%)\",\n zIndex: 4,\n padding: \"10px 14px\",\n borderRadius: 14,\n border: \"1px solid rgba(255,255,255,0.16)\",\n background: \"rgba(255,255,255,0.10)\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: 800,\n }}\n >\n Tap for music + extra confetti ✨\n \n\n {/* Responsive tweak */}\n \n \n )}\n\n {/* Details page */}\n {step === 7 && (\n

\n DETAILS\n

\n\n

\n Perfect.\n

\n Saturday.\n

\n 6–7pm.\n

\n Be ready.\n

\n \n Dress cute, azizam.\n

\n\n

\n (If music didn’t start, tap once anywhere.)\n

\n\n \n \n {\n setNoClicks(0);\n setIce(null);\n go(0);\n }}\n >\n Reset 🔄\n \n

\n \n )}\n \n );\n}\n\nfunction globalCss() {\n return `\n @keyframes spinGlow {\n 0% { transform: rotate(0deg) scale(1.05); }\n 50% { transform: rotate(180deg) scale(1.12); }\n 100% { transform: rotate(360deg) scale(1.05); }\n }\n .trippyOverlay {\n position: fixed;\n inset: -80px;\n pointer-events: none;\n z-index: 0;\n background:\n conic-gradient(from 120deg,\n rgba(255,0,200,0.15),\n rgba(0,255,220,0.15),\n rgba(255,255,0,0.12),\n rgba(140,0,255,0.15),\n rgba(255,0,200,0.15)\n );\n filter: blur(28px);\n opacity: 0.7;\n animation: spinGlow 14s linear infinite;\n }\n .celebrationGlow{\n position:absolute;\n inset:-120px;\n pointer-events:none;\n z-index:1;\n background:\n radial-gradient(circle at 30% 20%, rgba(255,0,200,0.25), transparent 55%),\n radial-gradient(circle at 70% 30%, rgba(0,255,220,0.22), transparent 55%),\n radial-gradient(circle at 50% 80%, rgba(140,0,255,0.25), transparent 55%),\n conic-gradient(from 90deg, rgba(140,0,255,0.18), rgba(255,0,200,0.14), rgba(0,255,220,0.14), rgba(140,0,255,0.18));\n filter: blur(24px);\n opacity: 0.9;\n animation: spinGlow 12s linear infinite;\n }\n\n @keyframes floatUp {\n 0% { transform: translateY(0); opacity: 0; }\n 12% { opacity: 1; }\n 100% { transform: translateY(-110vh); opacity: 0; }\n }\n\n @keyframes neonPulse {\n 0%, 100% { filter: drop-shadow(0 0 18px rgba(255,0,200,0.22)); transform: scale(1); }\n 50% { filter: drop-shadow(0 0 30px rgba(0,255,220,0.18)); transform: scale(1.02); }\n }\n\n @keyframes rumble {\n 0% { transform: translate(0,0); }\n 20% { transform: translate(-2px, 1px); }\n 40% { transform: translate(2px, -1px); }\n 60% { transform: translate(-2px, -1px); }\n 80% { transform: translate(2px, 1px); }\n 100% { transform: translate(0,0); }\n }\n .rumble { animation: rumble 0.22s linear; }\n\n @keyframes noShake {\n 0% { transform: translate(0,0) rotate(-1deg); }\n 25% { transform: translate(-2px, 1px) rotate(1deg); }\n 50% { transform: translate(2px, -1px) rotate(-1deg); }\n 75% { transform: translate(-2px, -1px) rotate(1deg); }\n 100% { transform: translate(0,0) rotate(-1deg); }\n }\n\n @keyframes popIn {\n 0% { transform: translateY(10px) scale(0.96); opacity: 0; }\n 100% { transform: translateY(0) scale(1); opacity: 1; }\n }\n\n @keyframes detailsIn {\n 0% { transform: translateY(12px); opacity: 0; filter: blur(6px); }\n 100% { transform: translateY(0); opacity: 1; filter: blur(0); }\n }\n .detailsLine {\n font-size: 50px;\n font-weight: 1000;\n line-height: 1.05;\n margin-top: 10px;\n text-shadow: 0 0 26px rgba(255,0,200,0.16);\n animation: detailsIn 0.7s ease both;\n }\n\n .glassBtn{\n padding: 12px 16px;\n border-radius: 14px;\n border: 1px solid rgba(255,255,255,0.18);\n background: rgba(255,255,255,0.10);\n color: white;\n cursor: pointer;\n box-shadow: 0 12px 28px rgba(0,0,0,0.22);\n font-weight: 800;\n }\n .glassBtn:hover{ transform: translateY(-1px); }\n\n .neonBtn{\n padding: 12px 16px;\n border-radius: 14px;\n border: 1px solid rgba(0,255,220,0.28);\n background: linear-gradient(135deg, rgba(0,255,220,0.18), rgba(255,0,200,0.14));\n color: white;\n cursor: pointer;\n box-shadow: 0 0 30px rgba(0,255,220,0.14), 0 0 40px rgba(255,0,200,0.12);\n font-weight: 900;\n }\n .neonBtn:hover{ transform: translateY(-1px); }\n `;\n}\n\nfunction client() {\n const el = document.getElementById(\"root\");\n if (!el) return;\n createRoot(el).render();\n}\n\nif (typeof document !== \"undefined\") {\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", client);\n } else client();\n}\n\nexport default async function server(_request: Request): Promise {\n return new Response(\n `\n\n \n \n For ${NAME}\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/mcjesus97/l/code/main.tsx","extension","actionData","errors"]