Valentine's Day Invitation

\n {/* CSS animations */}\n \n\n {/* audio element */}\n

\n );\n}\n\nconst styles = {\n page: {\n minHeight: \"100vh\",\n display: \"grid\",\n placeItems: \"center\",\n fontFamily: \"Arial, sans-serif\",\n padding: 20,\n background: \"linear-gradient(135deg, #0b1220, #1a1033, #0b1220)\",\n },\n wrap: { width: \"min(720px, 100%)\" },\n topRow: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n gap: 10,\n marginBottom: 10,\n },\n card: {\n position: \"relative\",\n overflow: \"hidden\",\n borderRadius: 16,\n padding: 22,\n textAlign: \"center\",\n background: \"rgba(255,255,255,0.08)\",\n border: \"1px solid rgba(255,255,255,0.14)\",\n boxShadow: \"0 18px 60px rgba(0,0,0,0.35)\",\n backdropFilter: \"blur(10px)\",\n color: \"white\",\n },\n heroGif: { width: 170, height: 170, objectFit: \"contain\" },\n h1: { margin: \"14px 0 10px\" },\n btnRow: {\n display: \"flex\",\n justifyContent: \"center\",\n gap: 12,\n flexWrap: \"wrap\",\n marginTop: 14,\n },\n yesBtn: {\n padding: \"10px 22px\",\n backgroundColor: \"#16a34a\",\n color: \"white\",\n border: \"none\",\n borderRadius: 10,\n cursor: \"pointer\",\n },\n noBtn: {\n padding: \"10px 22px\",\n color: \"white\",\n border: \"none\",\n borderRadius: 10,\n maxWidth: 320,\n },\n lockText: { marginTop: 12, color: \"rgba(255,255,255,0.75)\" },\n yay: { fontSize: 48, fontWeight: \"bold\", color: \"#fb7185\", marginTop: 10 },\n smallBtn: {\n padding: \"8px 12px\",\n borderRadius: 10,\n border: \"1px solid rgba(255,255,255,0.18)\",\n background: \"rgba(255,255,255,0.08)\",\n color: \"white\",\n cursor: \"pointer\",\n },\n catLayer: {\n position: \"relative\",\n height: 210,\n marginTop: 6,\n marginBottom: 2,\n display: \"grid\",\n placeItems: \"center\",\n },\n cat: {\n position: \"absolute\",\n pointerEvents: \"none\",\n filter: \"drop-shadow(0 10px 18px rgba(0,0,0,0.35))\",\n },\n};\n\nconst css = `\n@keyframes catShake {\n 0% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateX(0); }\n 25% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateX(-4px); }\n 50% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateX(4px); }\n 75% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateX(-2px); }\n 100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateX(0); }\n}\n@keyframes catBounce {\n 0% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateY(0); }\n 50% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateY(-8px); }\n 100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) translateY(0); }\n}\n`;\n\n// Patch: inject CSS vars into each cat so the keyframes can use them.\n// We do this by setting style vars via inline style in React (below).\n// (Val Town runs this fine.)\nconst origCreateElement = React.createElement;\nReact.createElement = function (type, props, ...children) {\n if (type === \"img\" && props && props.style && props.style.animation) {\n const t = props.style.transform || \"\";\n // Parse translate(x,y) rotate(deg) from our string.\n // Super lightweight parsing (good enough for our format).\n const tx =\n (t.match(/translate\\\$([-\\\\d.]+)px,\\\\s*([-\\\\d.]+)px\\\$/) || [])[1] ?? \"0\";\n const ty =\n (t.match(/translate\\\$([-\\\\d.]+)px,\\\\s*([-\\\\d.]+)px\\\$/) || [])[2] ?? \"0\";\n const rot = (t.match(/rotate\\\$([-\\\\d.]+)deg\\\$/) || [])[1] ?? \"0\";\n props.style[\"--tx\"] = `${tx}px`;\n props.style[\"--ty\"] = `${ty}px`;\n props.style[\"--rot\"] = `${rot}deg`;\n }\n return origCreateElement(type, props, ...children);\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 `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[100],"permalink","https://www.val.town/x/mmf715840ops/Valentines/code/main.ts","extension","actionData","errors"]

Will you be my Valentine? 💘