Valentine's Day Invitation

{item.emoji}

\n \n {item.text}\n

\n \n \n ))}\n \n );\n}\n\nfunction App() {\n const [showSplash, setShowSplash] = useState(true);\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [noButtonPosition, setNoButtonPosition] = useState({\n top: \"50%\",\n left: \"50%\",\n });\n const [showConfetti, setShowConfetti] = useState(false);\n const [currentLyricLine, setCurrentLyricLine] = useState(0);\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 const customImage =\n \"https://lh3.googleusercontent.com/d/18hCsoP88m9FCE2N4p4K23mxH7xJdP3N6\";\n const secondCustomImage =\n \"https://lh3.googleusercontent.com/d/11D5lcRYcZvuT3szionlrsraWeZZJ1ZyJ\";\n\n const splashImage =\n \"https://lh3.googleusercontent.com/d/16goTOt6IU9Uz59oEEB5-ALo9cqmsmg8k\";\n\n const leftSlideImages = [\n \"https://lh3.googleusercontent.com/d/1u4Rot3XS4_IQNFwWs6eMpb9gKaYVgkcU\",\n \"https://lh3.googleusercontent.com/d/1hFBbToGzqBplYDffKm18NgrK3cGsNFTN\",\n \"https://lh3.googleusercontent.com/d/13Sm9FiZIgUco4TfjlT0VhuqfzTdoeXkm\",\n \"https://lh3.googleusercontent.com/d/1vedPzOvab-Yx-n8LKoFOD7PXUoDtLfCH\",\n \"https://lh3.googleusercontent.com/d/1yzsRV9cLsSUKceIAmQS0DIGUvvHVUwRt\",\n \"https://lh3.googleusercontent.com/d/1pkXYZtg7kqLp0CeABXva7RtEW_HsDEJN\",\n \"https://lh3.googleusercontent.com/d/18alzBBSciueVfpdfM1-VppSVznFlKje4\",\n ];\n\n const rightSlideImages = [\n \"https://lh3.googleusercontent.com/d/1xpw_Yu7_iKBKpLv0U3ysuO4Ec3egxvSX\",\n \"https://lh3.googleusercontent.com/d/16goTOt6IU9Uz59oEEB5-ALo9cqmsmg8k\",\n \"https://lh3.googleusercontent.com/d/1NKaanjiZ4eXnO_THmKPdtfFHJx3QRqw7\",\n \"https://lh3.googleusercontent.com/d/1XLEKAXmoSBUdFM8-b4uic8icLnQ70TqK\",\n \"https://lh3.googleusercontent.com/d/1klwQUjZBCP79_35_-WodTOTzWBVC-UVA\",\n \"https://lh3.googleusercontent.com/d/1jYzlFKN1CDtJQ82I3CKFqYIZTOfi1cf_\",\n \"https://lh3.googleusercontent.com/d/1mROQhVmCVBjPg8TPPyVLObvrBeS6I_Es\",\n ];\n\n const lyricLines = [\n \"Turn around\",\n \"Look at what you seeeeeeee\",\n \"In her face\",\n \"The mirror of her dreeeeeams\",\n\n \"Make believe I'm everywhere\",\n \"Given in the liiiiiight\",\n \"Written on the pages is\",\n \"The answer to our never ending storyyyyyyy\",\n \"Ah-ah-ah-ah-ah\",\n\n \"Reach the stars\",\n \"Fly a fantasyyyyyyy\",\n \"Dream a dream\",\n \"And what you see will beeeeeee\",\n\n \"Rhymes that keep their secrets will\",\n \"Unfold behind the clouds\",\n \"And there upon a rainbow is\",\n \"The answer to our never ending storyyyyyyyy\",\n\n \"Ah-ah-ah-ah-ah\",\n \"Stoooooryyyyyy\",\n \"Ah-ah-ah-ah-ah\",\n\n \"Thanks for being my best friend for all these years Kara 💖\",\n ];\n\n const handleNoHover = () => {\n if (noClicks >= NO_PHRASES.length) {\n const randomTop = Math.random() * 80 + 10;\n const randomLeft = Math.random() * 80 + 10;\n setNoButtonPosition({ top: `${randomTop}%`, left: `${randomLeft}%` });\n }\n };\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 7500);\n };\n\n const poemContent = (\n 0 ? \"14px\" : \"18px\",\n lineHeight: \"1.8\",\n color: \"#333\",\n maxWidth: noClicks > 0 ? \"300px\" : \"600px\",\n backgroundColor: \"#fff0f5\",\n padding: noClicks > 0 ? \"20px\" : \"30px\",\n borderRadius: \"15px\",\n boxShadow: \"0 4px 6px rgba(0,0,0,0.1)\",\n transition: \"all 0.5s ease\",\n }}\n >\n

Roses are red,

Violets are blue,

I'd run up that hill,

To make a deal with God for you.

\n\n

My heart has no firewall,

\n Vecna's clock is starting to chime,\n

\n But your laugh is my \"favourite song,\"\n

That saves me every single time.

\n\n

You're the Master of my Puppets,

The \"anchor\" in my dark,

I'm just the Steve to your Robin,

\n The guy who's lost without your spark.\n

\n\n

\n So, since I'm the Software Engineer,\n

And, you're the Cyber Queen,

\n Will you be my valentine, you short doughnut?\n

(Select 'Yes' to avoid a blue screen).

\n \n );\n\n // Splash Screen\n if (showSplash) {\n return (\n \n \n \n Hey Kara, I have something special for you... 💖\n \n setShowSplash(false)}\n style={{\n fontSize: \"24px\",\n padding: \"15px 40px\",\n backgroundColor: \"#ff69b4\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"10px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n boxShadow: \"0 4px 10px rgba(255, 105, 180, 0.4)\",\n transition: \"transform 0.2s ease\",\n }}\n onMouseEnter={(e) => e.target.style.transform = \"scale(1.05)\"}\n onMouseLeave={(e) => e.target.style.transform = \"scale(1)\"}\n >\n Click here ✨\n \n \n );\n }\n\n return (\n \n {/* Confetti */}\n {showConfetti && (\n \n {[...Array(50)].map((_, i) => (\n \n {[\"❤️\", \"💕\", \"💖\", \"💗\", \"💝\"][Math.floor(Math.random() * 5)]}\n \n ))}\n \n )}\n\n {/* Moving No button */}\n {noClicks >= NO_PHRASES.length && !isValentine && (\n \n {NO_PHRASES[NO_PHRASES.length - 1]}\n \n )}\n\n {!isValentine\n ? (\n <>\n

\n\n {noClicks > 0\n ? (\n \n {poemContent}\n \n \n {noClicks >= 2 && (\n \n )}\n {noClicks >= 3 && (\n \n You have to admit that we look really cute together 💕\n

\n )}\n \n \n )\n : (\n

\n {poemContent}\n

\n )}\n\n

\n \n Yes\n \n {noClicks < NO_PHRASES.length && (\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 {/* Floating game elements - only show after line 10 */}\n = 10} />\n\n

\n \n Yay!!! 💖🎉\n

\n\n {/* Lyrics with slideshows on both sides */}\n \n \n \n \n \n {/* Message after lyrics complete */}\n {currentLyricLine >= lyricLines.length && (\n \n \n

\n Meeting you will always be one of the best decisions I've\n ever made 💖\n

\n Thank you for being the person you are, for all the laughs,\n the gaming sessions, the vibes, and for sticking by me\n through all the 'Upside Down' moments. I'm so lucky to have\n you as my best friend 🫂\n

\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","label","dilz-my-best-fwend-kara",[61],"fae0817c-02bd-11f1-b37e-42dde27851f2","README.md","019c2eff-c766-740d-b748-153b7e7dd32f",1,["D",1770315040464],"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.",[82],{"_35":81,"_13":82,"_62":83,"_64":-5,"_65":66,"_67":84,"_69":70,"_37":94,"_17":33,"_73":24,"_75":86,"_77":50,"_78":-5,"_91":95,"_18":96},{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":90,"_17":72,"_73":74,"_75":76,"_77":50,"_78":79,"_91":92,"_18":93},["D",1770561942304],"children",[],[61],["D",1770315040464],[],[82],"fad42648-02bd-11f1-b37e-42dde27851f2",["D",1770315040464],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019c2efc-1317-72a6-ae04-b491a37e7d17","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019c2efc-1317-72a6-ae04-b904b04c1563","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_139":135},"org",{"_11":12,"_133":-5,"_134":135,"_103":104,"_136":137,"_138":50},"branch",{"_17":68,"_13":16,"_35":66,"_41":97,"_44":36,"_45":43,"_130":52,"_131":42,"_132":56,"_57":14,"_53":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOUdHMnlnenBlMlFBdDl2dVg3MVRzcGFibDUifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":97,"_13":14,"_37":183,"_48":-5,"_99":50,"_51":52,"_100":52,"_101":-5,"_102":-5,"_103":104,"_105":63,"_106":70,"_107":-5,"_108":-5,"_109":33,"_55":110,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":116,"_117":116,"_118":119,"_120":119,"_121":119,"_122":116,"_123":116,"_124":184,"_126":185,"_128":186,"_49":50},[177,178],"files",[177,178],"counts",{"_168":33,"_169":84,"_170":33,"_34":171,"_172":173},[164,165],"upstreamProject",{"_35":42,"_13":14,"_101":-5,"_102":-5,"_51":52,"_124":162},"upstreamBranch",{"_35":36,"_37":160,"_39":161,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":54,"_139":163},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_35":81,"_13":82,"_62":83,"_64":-5,"_65":66,"_67":84,"_69":70,"_37":85,"_17":33,"_73":24,"_75":86,"_77":50,"_78":-5,"_18":167},{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":71,"_17":72,"_73":74,"_75":76,"_77":50,"_78":79,"_18":166},[61],[82],"pulls","branches","forks",{"_174":33,"_176":33},"connections",{"_174":33,"_175":33},"count","unfilledCount","emptyCount",{"_35":81,"_13":82,"_62":83,"_64":-5,"_65":66,"_67":84,"_69":70,"_37":94,"_17":33,"_73":24,"_75":86,"_77":50,"_78":-5,"_91":181,"_18":182},{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":90,"_17":72,"_73":74,"_75":76,"_77":50,"_78":79,"_91":179,"_18":180},[],[61],[],[82],["D",1770315040464],{"_11":12,"_139":135},{"_11":12,"_133":-5,"_134":135,"_103":104,"_136":137,"_138":50},{"_17":68,"_13":16,"_35":66,"_41":97,"_44":36,"_45":43,"_130":52,"_131":42,"_132":56,"_57":14,"_53":12},"ctx",{"_124":-5,"_157":220,"_221":222,"_223":224,"_225":50,"_226":50,"_227":50,"_228":70,"_229":-5,"_230":-7,"_231":-7,"_232":33,"_233":50,"_234":50,"_235":-5,"_236":50,"_237":50,"_238":50,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":16,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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