Valentine's Day Invitation

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_175":176,"_177":178},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_133":-5,"_20":134,"_22":135,"_136":137,"_138":139,"_25":140,"_24":-5,"_141":-5,"_142":-5,"_143":54,"_144":145,"_146":45,"_147":-5,"_148":-5,"_149":150},"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":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","suspenx","name","Valent1nes","branchName","main","version","path","","project",{"_34":74,"_13":14,"_46":75,"_76":-5,"_77":54,"_78":79,"_80":79,"_81":82,"_83":84,"_85":86,"_87":-5,"_88":54,"_89":-5,"_90":-5,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":-5,"_102":103,"_104":103,"_105":106,"_107":106,"_108":106,"_109":103,"_110":103,"_111":112,"_113":114,"_115":116,"_117":54},"tree",[65,66],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":64},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","e70b2990-0498-11f1-b954-42dde27851f2","main.ts","fileId","b7014a66-0495-11f1-8e57-42dde27851f2","parentId","branchId","b6fe971c-0495-11f1-8e57-42dde27851f2","branchVersion",26,"latest",true,"createdAt",["D",1770519018293],3,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Pretty please? 🥺\",\n \"But we'd be so cute together! 💕\",\n \"One more chance, pookie?\",\n \"Don't break my heart :(\",\n \"What about a maybe?\",\n \"Please don't do this to me, I'm fragile\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [envelopeOpened, setEnvelopeOpened] = useState(false);\n const [letterPulledOut, setLetterPulledOut] = useState(false);\n const [showQuestion, setShowQuestion] = useState(false);\n\n const yesButtonSize = (noClicks * 20) + 16;\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 // Replace these URLs with your own photos\n const backgroundPhotos = [\n \"https://imgur.com/zY3w1Fs\",\n \"https://photos.app.goo.gl/CUAiBXQ5qKSb7Ggq6\",\n \"https://photos.app.goo.gl/wePgp1oEVu1VySY36\",\n \"https://photos.app.goo.gl/imd56Ecnt2sMsQsS8\",\n ];\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n };\n\n const openEnvelope = () => {\n setEnvelopeOpened(true);\n // Pull letter out after envelope opens\n setTimeout(() => {\n setLetterPulledOut(true);\n }, 1000);\n // Show question after letter unfolds\n setTimeout(() => {\n setShowQuestion(true);\n }, 3000);\n };\n\n // Envelope Screen (Closed)\n if (!envelopeOpened) {\n return (\n \n {/* Animated background elements */}\n \n {[...Array(25)].map((_, i) => (\n \n {[\n \"💕\",\n \"💖\",\n \"💗\",\n \"💝\",\n \"🌹\",\n \"✨\",\n ][Math.floor(Math.random() * 6)]}\n \n ))}\n \n\n {/* Enhanced Envelope */}\n \n e.currentTarget.style.transform = \"translateY(-10px)\"}\n onMouseLeave={(e) =>\n e.currentTarget.style.transform = \"translateY(0)\"}\n >\n {/* Letter paper peeking out from top - MOVED OUTSIDE SO IT'S FULLY VISIBLE */}\n \n \n 💌\n \n \n For Sajni\n \n \n with all my love...\n \n \n\n {/* Main envelope body */}\n \n {/* Decorative inner border */}\n \n\n {/* Pink flap triangle on top */}\n \n\n {/* Wax seal with key */}\n \n 🔑\n \n \n \n\n \n Click to open your letter ✨\n

\n\n \n \n );\n }\n\n // Letter opening animation screen\n if (!showQuestion) {\n return (\n \n {/* Envelope with opening flap */}\n \n \n {/* Flap opening upward */}\n \n \n \n\n {/* Folded letter coming out and unfolding */}\n \n {/* Fold line effect */}\n \n\n \n My Dearest Sajni 💕\n \n\n \n I have something very special to ask you...\n \n 💝\n \n \n \n\n \n \n );\n }\n\n // Question Screen\n if (!isValentine) {\n return (\n \n {/* Background photo corners */}\n {backgroundPhotos.map((photo, index) => (\n \n ))}\n\n {/* Floating hearts */}\n \n {[...Array(15)].map((_, i) => (\n \n 💕\n \n ))}\n \n\n {/* Main content */}\n \n \n \n Sajni, Will you be my Valentine? 💘\n \n

\n {\n e.currentTarget.style.transform = \"scale(1.05)\";\n e.currentTarget.style.backgroundColor = \"#ff1744\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = \"scale(1)\";\n e.currentTarget.style.backgroundColor = \"#ff4d6d\";\n }}\n >\n Yes 💖\n \n {\n e.currentTarget.style.backgroundColor = \"#ffb3c6\";\n e.currentTarget.style.borderColor = \"#ff9bb5\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = \"#ffc9d9\";\n e.currentTarget.style.borderColor = \"#ffb3c6\";\n }}\n >\n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n \n\n \n \n );\n }\n\n // Love Letter Screen (Final)\n return (\n \n {/* Celebration hearts */}\n \n {[...Array(30)].map((_, i) => (\n \n {[\"❤️\", \"💕\", \"💖\", \"💗\", \"💝\"][Math.floor(Math.random() * 5)]}\n \n ))}\n \n\n \n\n \n Yay!!! 💖🎉\n \n\n {/* Love Letter */}\n \n \n \n My Dearest Sajni,\n \n \n\n \n

\n My Princess, the more I spend time with you, understanding the\n person you are, is the more i fall in love with you. Every day with\n you feels like a dream come true, and I can't imagine my life\n without your love.\n

\n You make every ordinary moment extraordinary for me. Your kindness,\n your warmth, and the way you care for everyone around you, to me\n never goes unnoticed.\n

\n This Valentine's Day, I want you to know that you mean everything to\n me and i love you for who you are. You're not just my Valentine,\n you're my best friend, my confidant, and the love of my life.\n

\n \n Thank you for saying yes. ❤️\n

\n \n\n \n \n Forever yours,\n

\n \n Your Valentine, V 💕\n

\n \n \n\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted",false,"label",[36],"f2c36e16-0496-11f1-a617-42dde27851f2","README.md","a96651a2-0496-11f1-a48d-42dde27851f2",12,["D",1770518178959],1,"_### Valentines Card for my love_",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":72,"_18":73},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":69,"_18":70},["D",1770519018293],"children",[],[36],["D",1770518178959],[],[58],"b6fe306a-0495-11f1-8e57-42dde27851f2",["D",1770517649190],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","To my big batty princess, with the tight pum pum","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36a4f94f-eb3a-405b-1339-8cdc14b93800/square512?exp=1789552799&sig=88206421801713025d79cba0bf87aefc2d4b4a6381ee488ecdf79f42e1bc8b6f","userId","019c35f7-c45c-7671-9998-b0cdf3456094","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019c35f7-c45c-7671-9998-b41ec771cfac","tursoName","b6fe306a049511f18e5742dde27851f2","tursoHostname","b6fe306a049511f18e5742dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789530642963],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_132":128},"org",{"_11":12,"_126":-5,"_127":128,"_85":86,"_129":130,"_131":54},"branch",{"_17":43,"_13":16,"_34":41,"_118":74,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOUs1VmxDZGk2cXFTNzNmM05ibW5zcFgxaUEifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":74,"_13":14,"_46":170,"_76":-5,"_77":54,"_78":79,"_80":79,"_81":82,"_83":84,"_85":86,"_87":-5,"_88":54,"_89":-5,"_90":-5,"_91":92,"_93":94,"_95":96,"_97":98,"_99":171,"_101":-5,"_102":103,"_104":103,"_105":106,"_107":106,"_108":106,"_109":103,"_110":103,"_111":172,"_113":173,"_115":174,"_117":54},[164,165],"files",[164,165],"counts",{"_155":92,"_156":62,"_157":92,"_31":158,"_159":160},[151,152],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":154},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":153},[36],[58],"pulls","branches","forks",{"_161":92,"_163":92},"connections",{"_161":92,"_162":92},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":168,"_18":169},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":166,"_18":167},[],[36],[],[58],["D",1770517649190],["D",1789530642963],{"_11":12,"_132":128},{"_11":12,"_126":-5,"_127":128,"_85":86,"_129":130,"_131":54},{"_17":43,"_13":16,"_34":41,"_118":74,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_111":-5,"_148":208,"_209":210,"_211":212,"_213":54,"_214":54,"_215":54,"_216":45,"_217":-5,"_218":-7,"_219":-7,"_220":92,"_221":54,"_222":54,"_223":-5,"_224":54,"_225":54,"_226":54,"_227":-5},"ENV",{"_179":180,"_181":182,"_183":16,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207},"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