\n {herName}, will you be my Valentine?\n

\n\n

\n Pick yes. I will plan the date. You pick the outfit.\n

\n\n

\n \n Yes\n \n\n 0 ? \"translateY(2px)\" : \"none\",\n }}\n aria-label=\"No button\"\n >\n {noLabel}\n \n

\n\n

Tip: Press Enter for Yes

Press Esc for No

\n\n {sparkleOn && (\n

\n Okay okay, I heard you. Try the other button.\n

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

Locked in

{`Love, ${yourName}`}

\n\n \n\n

Yay!

\n {herName}, you are my favorite person. 💖\n

\n\n

Date plan

Dinner and dessert
Photos together
One surprise

\n Text me: “I said yes” so I screenshot it.\n

\n\n {\n setStage(\"ask\");\n setNoClicks(0);\n }}\n style={styles.resetBtn}\n >\n Replay\n \n \n )}\n

\n );\n}\n\nconst styles = {\n page: {\n minHeight: \"100vh\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"24px\",\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n background:\n \"radial-gradient(900px 600px at 20% 10%, rgba(255,105,180,0.25), transparent 60%), radial-gradient(900px 600px at 80% 90%, rgba(255,0,102,0.18), transparent 60%), linear-gradient(135deg, #0b1020, #130b1a 55%, #0b1020)\",\n color: \"#ffffff\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n bgHearts: {\n position: \"absolute\",\n inset: 0,\n backgroundImage:\n \"radial-gradient(circle at 10% 20%, rgba(255,105,180,0.10) 0 2px, transparent 3px), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08) 0 2px, transparent 3px), radial-gradient(circle at 50% 80%, rgba(255,0,102,0.10) 0 2px, transparent 3px)\",\n backgroundSize: \"140px 140px\",\n filter: \"blur(0.2px)\",\n opacity: 0.9,\n pointerEvents: \"none\",\n },\n card: {\n width: \"min(560px, 100%)\",\n background:\n \"linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06))\",\n border: \"1px solid rgba(255,255,255,0.16)\",\n borderRadius: \"24px\",\n padding: \"22px 20px\",\n boxShadow: \"0 22px 70px rgba(0,0,0,0.45)\",\n backdropFilter: \"blur(10px)\",\n position: \"relative\",\n },\n topRow: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"10px\",\n gap: \"10px\",\n },\n badge: {\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: \"8px\",\n padding: \"8px 12px\",\n borderRadius: \"999px\",\n background: \"rgba(255,105,180,0.18)\",\n border: \"1px solid rgba(255,105,180,0.30)\",\n fontSize: \"14px\",\n },\n miniText: {\n fontSize: \"13px\",\n opacity: 0.85,\n },\n gif: {\n width: \"180px\",\n height: \"180px\",\n objectFit: \"contain\",\n display: \"block\",\n margin: \"8px auto 6px auto\",\n userSelect: \"none\",\n },\n h1: {\n margin: \"8px 0 6px 0\",\n fontSize: \"28px\",\n lineHeight: 1.15,\n letterSpacing: \"-0.3px\",\n textAlign: \"center\",\n },\n p: {\n margin: \"0 0 16px 0\",\n opacity: 0.9,\n textAlign: \"center\",\n fontSize: \"15px\",\n lineHeight: 1.5,\n },\n btnRow: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"12px\",\n flexWrap: \"wrap\",\n marginTop: \"6px\",\n },\n yesBtn: {\n padding: \"12px 20px\",\n borderRadius: \"16px\",\n border: \"1px solid rgba(34,197,94,0.35)\",\n background: \"linear-gradient(180deg, rgba(34,197,94,1), rgba(22,163,74,1))\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: 800,\n letterSpacing: \"0.2px\",\n transition: \"transform 120ms ease\",\n },\n noBtn: {\n fontSize: \"16px\",\n padding: \"12px 16px\",\n borderRadius: \"16px\",\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 maxWidth: \"360px\",\n transition: \"transform 120ms ease\",\n },\n hintRow: {\n display: \"flex\",\n justifyContent: \"center\",\n gap: \"10px\",\n marginTop: \"14px\",\n flexWrap: \"wrap\",\n },\n hint: {\n fontSize: \"12px\",\n opacity: 0.75,\n padding: \"6px 10px\",\n borderRadius: \"999px\",\n border: \"1px solid rgba(255,255,255,0.12)\",\n background: \"rgba(0,0,0,0.18)\",\n },\n toast: {\n position: \"absolute\",\n left: \"50%\",\n bottom: \"14px\",\n transform: \"translateX(-50%)\",\n background: \"rgba(0,0,0,0.55)\",\n border: \"1px solid rgba(255,255,255,0.14)\",\n padding: \"10px 12px\",\n borderRadius: \"14px\",\n fontSize: \"13px\",\n opacity: 0.95,\n width: \"min(460px, 92%)\",\n textAlign: \"center\",\n },\n yayWrap: {\n textAlign: \"center\",\n marginTop: \"6px\",\n marginBottom: \"10px\",\n },\n yay: {\n fontSize: \"54px\",\n fontWeight: 900,\n letterSpacing: \"-0.8px\",\n color: \"rgba(255,105,180,1)\",\n textShadow: \"0 12px 40px rgba(255,105,180,0.25)\",\n },\n subYay: {\n marginTop: \"4px\",\n fontSize: \"16px\",\n opacity: 0.92,\n },\n detailsCard: {\n marginTop: \"12px\",\n borderRadius: \"18px\",\n border: \"1px solid rgba(255,255,255,0.14)\",\n background: \"rgba(0,0,0,0.18)\",\n padding: \"14px 14px\",\n },\n detailsTitle: {\n fontSize: \"14px\",\n opacity: 0.85,\n marginBottom: \"10px\",\n letterSpacing: \"0.2px\",\n },\n list: {\n margin: 0,\n paddingLeft: \"18px\",\n lineHeight: 1.55,\n },\n li: {\n marginBottom: \"6px\",\n },\n smallNote: {\n marginTop: \"10px\",\n fontSize: \"12px\",\n opacity: 0.75,\n },\n resetBtn: {\n display: \"block\",\n margin: \"14px auto 0 auto\",\n padding: \"10px 14px\",\n borderRadius: \"14px\",\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 fontSize: \"14px\",\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n For Teagan\n \n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[103],"permalink","https://www.val.town/x/mathew4202/valentine/code/main.tsx","extension","actionData","errors"]