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

\n );\n}\n\nfunction FloatingHearts() {\n const hearts = useMemo(\n () =>\n Array.from({ length: 10 }).map((_, i) => ({\n id: i,\n left: rand(5, 95),\n delay: rand(0, 2),\n duration: rand(6, 10),\n size: rand(14, 26),\n opacity: rand(0.35, 0.7),\n })),\n [],\n );\n\n return (\n

\n {hearts.map((h) => (\n \n 💛\n

\n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [confettiFire, setConfettiFire] = useState(0);\n\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.85);\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 moveNoButton = () => {\n const stage = stageRef.current;\n if (!stage) return;\n\n const rect = stage.getBoundingClientRect();\n const maxX = rect.width / 2 - 110;\n const maxY = rect.height / 2 - 110;\n\n const x = clamp(rand(-maxX, maxX), -maxX, maxX);\n const y = clamp(rand(-maxY, maxY), -maxY, maxY);\n\n setNoPos({ x, y });\n };\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n if (noClicks >= 1) moveNoButton();\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setConfettiFire((x) => x + 1);\n };\n\n useEffect(() => {\n const t = setTimeout(() => setConfettiFire((x) => x + 1), 250);\n return () => clearTimeout(t);\n }, []);\n\n return (\n

\n \n \n \n\n

\n\n

\n {!isValentine\n ? (\n <>\n \n\n

\n Will you be my Valentine?{\" \"}\n \n \n

\n\n

\n I’d really love to spend a little time with you no pressure,\n just a sweet day 💛\n

\n\n

\n \n Yes ( ˶ˆᗜˆ˵ )\n \n\n {\n if (noClicks >= 2) moveNoButton();\n }}\n style={{\n ...styles.noBtn,\n transform: `translate(${noPos.x}px, ${noPos.y}px)`,\n }}\n className={noClicks >= 2 ? \"sneaky\" : \"\"}\n >\n {noText}\n \n

\n\n

\n ( it will be so fun ) 🌼\n

\n \n )\n : (\n <>\n \n

Yayyyy!!! 💛🎉

\n Okay… now I’m smiling for real. Can’t wait 🌼\n

\n\n {\n setIsValentine(false);\n setNoClicks(0);\n setNoPos({ x: 0, y: 0 });\n setConfettiFire((x) => x + 1);\n }}\n >\n Replay ✨\n \n

\n \n )}\n

\n\n

made with 💛

\n );\n}\n\nconst styles = {\n page: {\n minHeight: \"100vh\",\n display: \"grid\",\n placeItems: \"center\",\n padding: 18,\n background:\n \"radial-gradient(1200px 600px at 20% 15%, #FFF7C7 0%, rgba(255,247,199,0) 55%), radial-gradient(900px 500px at 80% 10%, #FFE3B8 0%, rgba(255,227,184,0) 55%), linear-gradient(180deg, #FFFDF6 0%, #FFF6EA 55%, #FFF2F8 100%)\",\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n position: \"relative\",\n overflow: \"hidden\",\n },\n shell: { width: \"min(520px, 92vw)\", position: \"relative\" },\n topGlow: {\n position: \"absolute\",\n inset: -40,\n background:\n \"radial-gradient(closest-side, rgba(255,216,77,0.40), rgba(255,216,77,0))\",\n filter: \"blur(10px)\",\n zIndex: 0,\n },\n card: {\n position: \"relative\",\n zIndex: 1,\n background: \"rgba(255,255,255,0.78)\",\n border: \"1px solid rgba(255, 216, 77, 0.35)\",\n borderRadius: 24,\n boxShadow:\n \"0 20px 50px rgba(20,20,20,0.12), 0 2px 0 rgba(255,216,77,0.25) inset\",\n padding: 22,\n textAlign: \"center\",\n backdropFilter: \"blur(10px)\",\n overflow: \"hidden\",\n },\n gif: {\n width: 260,\n maxWidth: \"88vw\",\n height: \"auto\",\n borderRadius: 16,\n boxShadow: \"0 10px 25px rgba(0,0,0,0.10)\",\n margin: \"6px auto 14px\",\n },\n title: {\n margin: \"6px 0 6px\",\n fontSize: 34,\n lineHeight: 1.1,\n color: \"#1B1B1B\",\n letterSpacing: -0.5,\n },\n subtitle: {\n margin: \"0 auto 16px\",\n fontSize: 15,\n color: \"rgba(0,0,0,0.65)\",\n maxWidth: 420,\n },\n buttonRow: {\n position: \"relative\",\n minHeight: 90,\n display: \"grid\",\n placeItems: \"center\",\n gap: 10,\n marginTop: 6,\n },\n yesBtn: {\n border: \"none\",\n borderRadius: 16,\n padding: \"12px 22px\",\n background:\n \"linear-gradient(180deg, #FFE56E 0%, #FFD84D 55%, #FFC933 100%)\",\n color: \"#4A3500\",\n fontWeight: 900,\n cursor: \"pointer\",\n boxShadow:\n \"0 10px 18px rgba(255, 205, 0, 0.25), 0 2px 0 rgba(255,255,255,0.65) inset\",\n transition: \"transform 160ms ease\",\n outline: \"none\",\n },\n noBtn: {\n border: \"none\",\n borderRadius: 16,\n padding: \"12px 18px\",\n background: \"linear-gradient(180deg, #FF6FA0 0%, #FF4D88 100%)\",\n color: \"white\",\n fontWeight: 800,\n cursor: \"pointer\",\n boxShadow:\n \"0 10px 18px rgba(255, 77, 136, 0.18), 0 2px 0 rgba(255,255,255,0.45) inset\",\n transition: \"transform 180ms ease\",\n outline: \"none\",\n maxWidth: 340,\n },\n footerHint: {\n marginTop: 16,\n fontSize: 13,\n color: \"rgba(0,0,0,0.60)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: 8,\n },\n dot: {\n width: 8,\n height: 8,\n borderRadius: 999,\n background: \"#FFD84D\",\n boxShadow: \"0 0 0 4px rgba(255,216,77,0.25)\",\n },\n yayWrap: { padding: \"6px 0 2px\" },\n yayTitle: {\n fontSize: 52,\n fontWeight: 900,\n color: \"#FFB000\",\n textShadow: \"0 2px 0 rgba(255,255,255,0.85)\",\n },\n yaySub: {\n marginTop: 8,\n fontSize: 16,\n color: \"rgba(0,0,0,0.7)\",\n },\n againBtn: {\n marginTop: 16,\n border: \"none\",\n borderRadius: 14,\n padding: \"10px 16px\",\n background: \"rgba(255,216,77,0.28)\",\n color: \"#6B4B00\",\n fontWeight: 800,\n cursor: \"pointer\",\n },\n smallPrint: {\n textAlign: \"center\",\n marginTop: 10,\n fontSize: 12,\n color: \"rgba(0,0,0,0.55)\",\n },\n confettiWrap: {\n position: \"fixed\",\n inset: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\",\n zIndex: 50,\n },\n confettiPiece: {\n position: \"absolute\",\n top: -20,\n borderRadius: 3,\n animationName: \"confetti-fall\",\n animationTimingFunction: \"cubic-bezier(.2,.7,.2,1)\",\n animationFillMode: \"forwards\",\n },\n floatWrap: {\n position: \"fixed\",\n inset: 0,\n pointerEvents: \"none\",\n zIndex: 1,\n },\n floatHeart: {\n position: \"absolute\",\n bottom: -40,\n animationName: \"float-up\",\n animationTimingFunction: \"linear\",\n animationIterationCount: \"infinite\",\n filter: \"drop-shadow(0 8px 14px rgba(0,0,0,0.12))\",\n },\n};\n\nconst css = `\n@keyframes confetti-fall{\n 0% { transform: translateY(-10px) translateX(0) rotate(0deg); opacity: 1; }\n 70% { opacity: 1; }\n 100% { transform: translateY(110vh) translateX(var(--drift)) rotate(560deg); opacity: 0; }\n}\n@keyframes float-up{\n 0% { transform: translateY(0) translateX(0) rotate(-10deg); opacity: 0; }\n 10% { opacity: 1; }\n 100% { transform: translateY(-115vh) translateX(60px) rotate(18deg); opacity: 0; }\n}\n.wiggle{ animation: wiggle 1.8s ease-in-out infinite; }\n@keyframes wiggle{\n 0%, 100% { transform: rotate(-8deg) scale(1); }\n 50% { transform: rotate(10deg) scale(1.06); }\n}\n.pop:active{ transform: scale(0.98) !important; }\n.sneaky{ animation: sneaky 0.18s ease-in-out; }\n@keyframes sneaky{\n 0%{ filter: brightness(1); }\n 50%{ filter: brightness(1.05); }\n 100%{ filter: brightness(1); }\n}\nbutton:focus-visible{\n outline: 3px solid rgba(255,216,77,0.8);\n outline-offset: 3px;\n}\n`;\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(_request) {\n return new Response(\n `\n\n \n Valentine's Day Invitation\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-897/code/main.ts","extension","actionData","errors"]