Valentine's Day Invitation

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_186":187,"_188":189},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_139":-5,"_20":140,"_22":141,"_142":143,"_144":145,"_25":146,"_24":-5,"_147":148,"_149":150,"_151":50,"_152":153,"_154":71,"_155":-5,"_156":-5,"_157":158},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","acegg1","name","valentineFinal","branchName","main","version","path","","project",{"_35":96,"_13":14,"_37":97,"_48":-5,"_98":50,"_51":52,"_99":52,"_100":-5,"_101":-5,"_102":103,"_104":64,"_105":71,"_106":-5,"_107":-5,"_108":33,"_55":109,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":115,"_116":115,"_117":118,"_119":118,"_120":118,"_121":115,"_122":115,"_123":124,"_125":126,"_127":128,"_49":50},"tree",[87,88],"file","contents",[59,60],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"pull","ahead",71,"behind",0,"envVars","id","fdd9b22e-27b0-11f0-aecd-569c3dd06744","createdAt",["D",1746230157507],"updatedAt",["D",1739338420215],"projectId","fdd966ca-27b0-11f0-aecd-569c3dd06744",11,"forkedBranchId","forkedBranchVersion","lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","deletedAt","isOwned",false,"privacy","public","userHandle","mewtru","orgId","1ea2ca52-aecd-4993-8c60-cb61483dff1b","projectName","valentine",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":84,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_18":86},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_18":79},"7eb28532-01af-11f1-a4f6-42dde27851f2","main.tsx","fileId","019c23c1-9882-75e4-9694-43d6ea8ef9f2","parentId","branchId","cdd38f48-0106-11f1-b21b-42dde27851f2","branchVersion",72,"latest",true,["D",1770198868163],"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"Please? 🥺\",\n \"3omre mahansa ebesate wente ganbe ya agmal wahed fel denya ❤️\",\n \"Hafdl teol 3omre bahebk ❤️\",\n \"hatefdale feh dema8e el 3omr kolo\",\n \"Ole YES sad2ene el maradi\",\n \"elmarade ha3melha sah\",\n \"Aw3dk law sad2etene feh youm hatshofe da mene\",\n \"Law weselte leh hena fa e3rafe ene msh mefart feke youm feh hayati tany\",\n \"last chance 💔\",\n];\n\n// ✨ Minimal chic sparkles (not childish)\nfunction SoftSparkles() {\n const dots = useMemo(() => {\n return Array.from({ length: 22 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n top: Math.random() * 100,\n size: 5 + Math.random() * 14,\n opacity: 0.05 + Math.random() * 0.12,\n duration: 7 + Math.random() * 9,\n delay: Math.random() * 2,\n }));\n }, []);\n\n return (\n

\n {dots.map((d) => (\n \n ))}\n

\n );\n}\n\n// ❤️ Floating red hearts (soft + adult)\nfunction FloatingHearts() {\n const hearts = useMemo(() => {\n return Array.from({ length: 12 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n size: 12 + Math.random() * 18,\n duration: 7 + Math.random() * 6,\n delay: Math.random() * 2,\n opacity: 0.12 + Math.random() * 0.22,\n rotate: -10 + Math.random() * 20,\n }));\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \n ❤️\n \n ))}\n \n );\n}\n\n// 🎆 Fireworks background (when YES)\nfunction Fireworks({ active }) {\n const bursts = useMemo(() => {\n return Array.from({ length: 12 }).map((_, i) => ({\n id: i,\n left: 10 + Math.random() * 80,\n top: 10 + Math.random() * 55,\n delay: Math.random() * 0.7,\n size: 70 + Math.random() * 90,\n }));\n }, []);\n\n if (!active) return null;\n\n return (\n \n {bursts.map((b) => (\n \n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [fireworks, setFireworks] = useState(false);\n\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n const noBtnRef = useRef(null);\n\n // classy scaling (not too crazy)\n const yesButtonSize = Math.min(28, 16 + noClicks * 1.35);\n\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n\n // elegant escape (small movement so it stays premium)\n const maxMove = 90;\n const x = (Math.random() - 0.5) * 2 * maxMove;\n const y = (Math.random() - 0.5) * 2 * maxMove;\n setNoPos({ x, y });\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setFireworks(true);\n setTimeout(() => setFireworks(false), 2200);\n };\n\n useEffect(() => {\n const onResize = () => setNoPos({ x: 0, y: 0 });\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n return (\n \n \n\n \n \n \n\n {/* ✨ Premium card */}\n \n {/* top highlight line */}\n \n\n {!isValentine\n ? (\n <>\n {/* header */}\n \n \n Valentine Invite\n \n\n \n 14 / 02 / 2026\n \n \n\n {/* content */}\n

\n \n\n \n Malak, will you be my Valentine?\n \n\n \n A small question… but a big meaning...❤️\n

\n\n {/* buttons */}\n \n (e.currentTarget.style.filter = \"brightness(1.06)\")}\n onMouseLeave={(\n e,\n ) => (e.currentTarget.style.filter = \"brightness(1)\")}\n onMouseDown={(\n e,\n ) => (e.currentTarget.style.transform = \"scale(0.98)\")}\n onMouseUp={(\n e,\n ) => (e.currentTarget.style.transform = \"scale(1)\")}\n >\n YES\n \n\n \n {noClicks === 0 ? \"No\" : NO_PHRASES[\n Math.min(noClicks - 1, NO_PHRASES.length - 1)\n ]}\n \n

\n\n {noClicks > 0 && (\n \n Attempts to escape Aly:{\" \"}\n {noClicks}\n \n )}\n \n \n )\n : (\n <>\n {/* success */}\n

\n \n\n \n OKAY GOT YOU!!\n

\n\n \n 14/2/2026\n \n\n \n Now wait for your the next step.\n \n \n \n )}\n \n \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 `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[62],"cdd90b58-0106-11f1-b21b-42dde27851f2","README.md","019c23c1-9882-75e4-9694-3c8c82704136",1,["D",1770126415889],"Hello!!! \n\nFeel free to mess around with this val and make it your own :). Just click on \"Fork\" in the top right.\n\nYou can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!\n\nHave fun with it and hopefully your crush says yes hehe.",[81],{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":93,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_90":94,"_18":95},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_90":91,"_18":92},["D",1770198868163],"children",[],[62],["D",1770126415889],[],[81],"cdce2bb6-0106-11f1-b21b-42dde27851f2",["D",1770126415889],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019c2393-28a1-7119-b3d6-0071962ab0fc","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019c2393-28a1-7119-b3d6-05e892a9f85a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_138":134},"org",{"_11":12,"_132":-5,"_133":134,"_102":103,"_135":136,"_137":50},"branch",{"_17":69,"_13":16,"_35":67,"_41":96,"_44":36,"_45":43,"_129":52,"_130":42,"_131":56,"_57":14,"_53":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOUEwM1BUTnNYT1J5UEpjRDJCTFRGWkxJZE4ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":96,"_13":14,"_37":182,"_48":-5,"_98":50,"_51":52,"_99":52,"_100":-5,"_101":-5,"_102":103,"_104":64,"_105":71,"_106":-5,"_107":-5,"_108":33,"_55":109,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":115,"_116":115,"_117":118,"_119":118,"_120":118,"_121":115,"_122":115,"_123":183,"_125":184,"_127":185,"_49":50},[176,177],"files",[176,177],"counts",{"_167":33,"_168":83,"_169":33,"_34":170,"_171":172},[163,164],"upstreamProject",{"_35":42,"_13":58,"_100":-5,"_101":-5,"_51":52,"_123":161},"upstreamBranch",{"_35":36,"_37":159,"_39":160,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":54,"_138":162},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":84,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_18":166},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_18":165},[62],[81],"pulls","branches","forks",{"_173":33,"_175":33},"connections",{"_173":33,"_174":33},"count","unfilledCount","emptyCount",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":93,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_90":180,"_18":181},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_90":178,"_18":179},[],[62],[],[81],["D",1770126415889],{"_11":12,"_138":134},{"_11":12,"_132":-5,"_133":134,"_102":103,"_135":136,"_137":50},{"_17":69,"_13":16,"_35":67,"_41":96,"_44":36,"_45":43,"_129":52,"_130":42,"_131":56,"_57":14,"_53":12},"ctx",{"_123":-5,"_156":219,"_220":221,"_222":223,"_224":50,"_225":50,"_226":50,"_227":71,"_228":-5,"_229":-7,"_230":-7,"_231":33,"_232":50,"_233":50,"_234":-5,"_235":50,"_236":50,"_237":50,"_238":-5},"ENV",{"_190":191,"_192":193,"_194":16,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code