\n \n \n \n`,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}\n\nfunction App() {\n /**\n * Steps:\n * 0 Ice cream\n * 1 Q1 reason\n * 2 Q2 random meet\n * 3 Q3 timing\n * 4 Fake final question (looks unrelated)\n * 5 Valentine question\n * 6 Full celebration page (auto → next)\n * 7 Details page (azizam)\n */\n const [step, setStep] = useState<0 | 1 | 2 | 3 | 4 | 5 | 6 | 7>(0);\n const [fade, setFade] = useState(false);\n\n const [ice, setIce] = useState(null);\n\n // Mechanics\n const [noClicks, setNoClicks] = useState(0);\n const yesSize = useMemo(() => clamp(22 + noClicks * 10, 22, 86), [noClicks]);\n\n // No button dodge\n const arenaRef = useRef(null);\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n\n // Rumble (screen shake)\n const [rumble, setRumble] = useState(false);\n\n // Hearts and confetti\n const [hearts, setHearts] = useState([]);\n const [particles, setParticles] = useState([]);\n const rafRef = useRef(null);\n\n // Audio\n const bgRef = useRef(null);\n const hbRef = useRef(null);\n const [audioUnlocked, setAudioUnlocked] = useState(false);\n\n // Make a clean fade transition between steps\n const go = (nextStep: number) => {\n setFade(true);\n setTimeout(() => {\n setStep(nextStep as any);\n setFade(false);\n }, 380);\n };\n\n const unlockAudio = () => {\n setAudioUnlocked(true);\n // try to start bg music softly (some browsers only allow after a click — this is that click)\n if (bgRef.current) {\n bgRef.current.loop = true;\n bgRef.current.volume = 0.35;\n bgRef.current.play().catch(() => {});\n }\n };\n\n // Center No button initial position when arena exists\n useEffect(() => {\n if (step !== 5) return;\n const el = arenaRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n setNoPos({ x: rect.width * 0.62, y: rect.height * 0.22 });\n }, [step]);\n\n const moveNo = () => {\n const el = arenaRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const pad = 14;\n const maxX = Math.max(pad, rect.width - 230);\n const maxY = Math.max(pad, rect.height - 90);\n setNoPos({ x: rand(pad, maxX), y: rand(pad, maxY) });\n };\n\n const triggerRumble = () => {\n setRumble(true);\n try {\n // @ts-ignore\n if (navigator.vibrate) navigator.vibrate(28);\n } catch {}\n setTimeout(() => setRumble(false), 220);\n };\n\n // Heartbeat when the Valentine question appears\n useEffect(() => {\n if (step !== 5) return;\n if (!audioUnlocked) return;\n\n if (hbRef.current) {\n hbRef.current.currentTime = 0;\n hbRef.current.volume = 1.0;\n hbRef.current.play().catch(() => {});\n }\n }, [step, audioUnlocked]);\n\n // Floating hearts during valentine + celebration\n useEffect(() => {\n if (!(step === 5 || step === 6)) {\n setHearts([]);\n return;\n }\n let alive = true;\n const t = setInterval(() => {\n if (!alive) return;\n const h: Heart = {\n id: `${Date.now()}-${Math.random()}`,\n left: rand(2, 98),\n size: rand(14, 34),\n dur: rand(5.5, 9.5),\n delay: rand(0, 0.8),\n hue: rand(0, 360),\n rot: rand(-25, 25),\n };\n setHearts((prev) => {\n const next = [...prev, h];\n return next.length > 26 ? next.slice(next.length - 26) : next;\n });\n }, 380);\n\n return () => {\n alive = false;\n clearInterval(t);\n };\n }, [step]);\n\n const spawnConfetti = () => {\n const baseX = window.innerWidth / 2;\n const baseY = window.innerHeight / 2;\n\n const fresh: Particle[] = Array.from({ length: 160 }).map((_, i) => ({\n id: `${Date.now()}-${i}`,\n x: baseX + rand(-40, 40),\n y: baseY + rand(-30, 30),\n vx: rand(-6, 6),\n vy: rand(-11, -2),\n life: rand(75, 130),\n r: rand(3, 7),\n hue: rand(0, 360),\n }));\n\n setParticles(fresh);\n\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n\n const tick = () => {\n setParticles((prev) =>\n prev\n .map((p) => ({\n ...p,\n x: p.x + p.vx,\n y: p.y + p.vy,\n vy: p.vy + 0.30,\n vx: p.vx * 0.992,\n life: p.life - 1,\n }))\n .filter((p) => p.life > 0)\n );\n rafRef.current = requestAnimationFrame(tick);\n };\n\n rafRef.current = requestAnimationFrame(tick);\n\n setTimeout(() => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n setParticles([]);\n }, 2700);\n };\n\n // After celebration page shows, auto go to details page\n useEffect(() => {\n if (step !== 6) return;\n const t = setTimeout(() => go(7), 3200);\n return () => clearTimeout(t);\n }, [step]);\n\n const handleNo = () => {\n setNoClicks((c) => c + 1);\n triggerRumble();\n moveNo();\n };\n\n const handleYes = () => {\n spawnConfetti();\n go(6);\n };\n\n // Trippy background + card\n const pageStyle: React.CSSProperties = {\n minHeight: \"100vh\",\n display: \"grid\",\n placeItems: \"center\",\n padding: 18,\n color: \"white\",\n textAlign: \"center\",\n fontFamily: \"system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif\",\n background:\n \"radial-gradient(circle at 18% 22%, rgba(255,0,200,0.45), transparent 45%),\" +\n \"radial-gradient(circle at 84% 26%, rgba(0,255,220,0.28), transparent 50%),\" +\n \"radial-gradient(circle at 28% 84%, rgba(255,255,0,0.20), transparent 55%),\" +\n \"linear-gradient(120deg, rgba(9,10,20,1), rgba(18,0,34,1))\",\n overflow: \"hidden\",\n };\n\n const cardStyle: React.CSSProperties = {\n width: \"min(760px, 92vw)\",\n borderRadius: 26,\n padding: 22,\n border: \"1px solid rgba(255,255,255,0.18)\",\n background: \"rgba(0,0,0,0.35)\",\n boxShadow: \"0 20px 70px rgba(0,0,0,0.38), 0 0 60px rgba(255,0,200,0.14)\",\n backdropFilter: \"blur(10px)\",\n WebkitBackdropFilter: \"blur(10px)\",\n position: \"relative\",\n zIndex: 2,\n transition: \"opacity 380ms ease\",\n opacity: fade ? 0 : 1,\n };\n\n // Celebration page: FULL SCREEN, filled with gifs + text + confetti + hearts + music\n const celebrationStyle: React.CSSProperties = {\n position: \"relative\",\n width: \"100%\",\n minHeight: \"100vh\",\n display: \"grid\",\n placeItems: \"center\",\n padding: 18,\n textAlign: \"center\",\n color: \"white\",\n fontFamily: \"system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif\",\n background:\n \"conic-gradient(from 180deg, rgba(255,0,200,0.25), rgba(0,255,220,0.22), rgba(255,255,0,0.18), rgba(140,0,255,0.24), rgba(255,0,200,0.25)),\" +\n \"radial-gradient(circle at 50% 50%, rgba(0,0,0,0.72), rgba(0,0,0,0.88))\",\n overflow: \"hidden\",\n };\n\n const detailsStyle: React.CSSProperties = {\n ...pageStyle,\n };\n\n return (\n

\n \n\n {/* Audio nodes */}\n

\n ))}\n \n\n {/* Confetti layer */}\n \n {particles.map((p) => (\n \n ))}\n \n\n {/* Steps */}\n {step <= 5 && (\n

\n\n \n

\n {/* Step 0: Ice cream */}\n {step === 0 && (\n <>\n \n SERIOUS QUESTION INCOMING…\n

\n {NAME}… hey baby was wondering ur fav ice cream🍦\n

\n Pick the sexiest ice cream flavor.\n

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

\n\n

\n (This unlocks the soundtrack 😌)\n

\n \n )}\n\n {/* Step 1 */}\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 {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 {step === 3 && (\n <>\n \n Do you believe timing matters?\n \n \n \n \n \n \n )}\n\n {/* Step 4: Fake final question */}\n {step === 4 && (\n <>\n \n FINAL QUESTION\n \n \n Okay {NAME}… last thing.\n \n

\n If someone planned something *special* for you…\n
\n would you trust them to handle it? 👀\n

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

\n (don’t overthink…)\n

\n \n )}\n\n {/* Step 5: Valentine */}\n {step === 5 && (\n <>\n \n {NAME}… will you be my Valentine?💘\n \n\n \n {/* YES */}\n \n Yes ✨\n \n\n {/* NO */}\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 (better pick yes nigi)\n

\n \n )}\n \n \n \n )}\n\n {/* Step 6: FULL celebration page */}\n {step === 6 && (\n

\n\n {/* A big tiled gif wall */}\n \n {Array.from({ length: 36 }).map((_, i) => {\n const src = CELEB_GIFS[i % CELEB_GIFS.length];\n return (\n \n ((e.currentTarget as HTMLImageElement).style.display =\n \"none\")}\n />\n

\n );\n })}\n

\n\n {/* Foreground cinematic text */}\n

\n CINEMATIC MOMENT\n

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

\n Celebration time babyyyy omgggg!!!!!!!\n

\n (details loading…)\n

\n \n\n {/* Bump the music up a bit */}\n {\n unlockAudio();\n if (bgRef.current) {\n bgRef.current.volume = 0.6;\n bgRef.current.play().catch(() => {});\n }\n spawnConfetti();\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 }}\n >\n Tap for louder music + extra confetti ✨\n \n \n )}\n\n {/* Step 7: Details page */}\n {step === 7 && (\n

\n\n \n

\n PERFECT.\n

\n\n

\n Saturday.\n

\n 6–7pm.\n

\n Be ready.\n

\n \n Dress cute azizam heheheh.\n

\n\n

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

\n\n \n {\n spawnConfetti();\n }}\n >\n Extra confetti ✨\n \n {\n setNoClicks(0);\n setIce(null);\n go(0);\n }}\n >\n Reset 🔄\n \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 .trippyOverlay2 {\n position: absolute;\n inset: -80px;\n pointer-events: none;\n z-index: 0;\n background:\n radial-gradient(circle at 25% 25%, rgba(255,0,200,0.25), transparent 55%),\n radial-gradient(circle at 80% 30%, rgba(0,255,220,0.22), transparent 55%),\n radial-gradient(circle at 55% 85%, rgba(255,255,0,0.18), transparent 55%),\n conic-gradient(from 90deg, rgba(140,0,255,0.22), rgba(255,0,200,0.18), rgba(0,255,220,0.18), rgba(140,0,255,0.22));\n filter: blur(18px);\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: 46px;\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}\nif (typeof document !== \"undefined\") {\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", client);\n } else client();\n}","deleted","label",[100],"permalink","https://www.val.town/x/mcjesus97/valentine/code/main.tsx","extension","actionData","errors"]