[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_98":97,"_32":44,"_106":84,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":56,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","019c4ea2-9757-708f-a9e9-70717c0747f4","name","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, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Asseblief 😭\",\n \"Liefiee please 🥺\",\n \"Don't do me like that 😩\",\n \"I'll buy you snacks 🍫\",\n \"One chance 😔\",\n \"Eish okay 💔\",\n];\n\nfunction FloatingHearts() {\n // simple floating hearts overlay\n return (\n \n {[...Array(18)].map((_, i) => (\n \n {i % 3 === 0 ? \"💗\" : i % 3 === 1 ? \"💕\" : \"✨\"}\n \n ))}\n \n );\n}\n\nfunction Note({ note }) {\n const [open, setOpen] = useState(false);\n\n return (\n setOpen((prev) => !prev)}\n style={{\n position: \"absolute\",\n top: note.top,\n left: note.left,\n right: note.right,\n transform: `rotate(${note.rot})`,\n width: open ? \"255px\" : \"175px\",\n minHeight: open ? \"150px\" : \"95px\",\n borderRadius: \"16px\",\n border: \"1px solid rgba(0,0,0,0.10)\",\n background: \"rgba(255,255,255,0.94)\",\n padding: \"12px\",\n cursor: \"pointer\",\n boxShadow: \"0px 12px 22px rgba(0,0,0,0.14)\",\n transition: \"all 0.25s ease\",\n textAlign: \"left\",\n perspective: \"900px\",\n }}\n >\n {/* tape */}\n \n\n {/* flip effect */}\n \n

\n {note.title}\n

\n\n \n {open ? note.msg : \"Tap to open 💌\"}\n \n\n

\n {open ? \"Tap again to close\" : \"\"}\n

\n \n \n );\n}\n\nfunction App() {\n // page: 1 = valentine, 1.5 = yes screen, 2 = birthday, 3 = bouquet\n const [page, setPage] = useState(1);\n\n // Valentine logic\n const [noClicks, setNoClicks] = useState(0);\n const yesButtonSize = (noClicks * 18) + 18;\n\n // Music logic\n const audioRef = useRef(null);\n const [musicOn, setMusicOn] = useState(false);\n\n // Replace these gifs if you want\n const valentineGif =\n \"https://media.tenor.com/4R0b6x2n5nQAAAAj/cute-bear.gif\";\n const yesGif =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n const birthdayGif =\n \"https://media.tenor.com/2bD5tq0JcK8AAAAj/happy-birthday-cute.gif\";\n\n // Bouquet transparent PNG (replace this)\n const bouquetImg =\n \"https://i.imgur.com/2yaf2wb.png\"; // <-- replace with your own transparent bouquet PNG\n\n // Music MP3 link (replace this)\n // IMPORTANT: must be a direct .mp3 link (not YouTube)\n const musicUrl =\n \"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3\";\n\n // Notes around bouquet\n const notes = useMemo(() => ([\n {\n id: 1,\n title: \"Sunflower 🌻\",\n msg: \"You’re my sunflower — you brighten my whole day.\",\n top: \"12%\",\n left: \"8%\",\n rot: \"-6deg\",\n },\n {\n id: 2,\n title: \"Rose 🌹\",\n msg: \"My heart rose the day I met you.\",\n top: \"18%\",\n right: \"8%\",\n rot: \"7deg\",\n },\n {\n id: 3,\n title: \"Pink Tulip 🌷\",\n msg: \"I’m tulip-ly in love with you, liefiee.\",\n top: \"42%\",\n left: \"4%\",\n rot: \"4deg\",\n },\n {\n id: 4,\n title: \"Daisy 🌼\",\n msg: \"I think about you every daisy.\",\n top: \"48%\",\n right: \"4%\",\n rot: \"-5deg\",\n },\n {\n id: 5,\n title: \"Lavender 💜\",\n msg: \"You calm my mind like lavender.\",\n top: \"72%\",\n left: \"10%\",\n rot: \"6deg\",\n },\n {\n id: 6,\n title: \"Orchid 🪷\",\n msg: \"You’re rare… like an orchid.\",\n top: \"72%\",\n right: \"10%\",\n rot: \"-6deg\",\n },\n {\n id: 7,\n title: \"Lily 💐\",\n msg: \"You’re pure and beautiful — my lily.\",\n top: \"8%\",\n left: \"40%\",\n rot: \"2deg\",\n },\n {\n id: 8,\n title: \"Peony 🌺\",\n msg: \"You’re beautiful in a way that feels expensive and effortless.\",\n top: \"28%\",\n left: \"32%\",\n rot: \"-3deg\",\n },\n {\n id: 9,\n title: \"Cherry Blossom 🌸\",\n msg: \"You make my life feel like spring.\",\n top: \"28%\",\n right: \"30%\",\n rot: \"3deg\",\n },\n {\n id: 10,\n title: \"Baby’s Breath 🤍\",\n msg: \"You’re the soft part of my love. The little things that matter most.\",\n top: \"8%\",\n right: \"36%\",\n rot: \"-2deg\",\n },\n ]), []);\n\n useEffect(() => {\n // create audio element once\n audioRef.current = new Audio(musicUrl);\n audioRef.current.loop = true;\n audioRef.current.volume = 0.7;\n\n return () => {\n try {\n audioRef.current.pause();\n } catch (_) {}\n };\n }, []);\n\n const toggleMusic = async () => {\n try {\n if (!audioRef.current) return;\n\n if (!musicOn) {\n await audioRef.current.play();\n setMusicOn(true);\n } else {\n audioRef.current.pause();\n setMusicOn(false);\n }\n } catch (e) {\n alert(\"Music couldn’t play. Try tapping again.\");\n }\n };\n\n const handleNo = () => setNoClicks((prev) => prev + 1);\n\n const handleYes = () => {\n setPage(1.5);\n setTimeout(() => setPage(2), 1200);\n };\n\n const Card = ({ children }) => (\n \n \n {children}\n \n );\n\n const PrimaryButton = ({ onClick, children }) => (\n \n {children}\n \n );\n\n const SecondaryButton = ({ onClick, children }) => (\n \n {children}\n \n );\n\n return (\n \n {/* MUSIC BUTTON */}\n \n {musicOn ? \"🔊 Music On\" : \"🔇 Music Off\"}\n \n\n {/* PAGE 1: VALENTINE */}\n {page === 1 && (\n \n

\n Will you be my Valentine, Yonela? 💘\n

\n\n

\n Liefiee… I’m asking nicely 😭💗\n

\n\n

\n \n Yes 💖\n \n\n \n {noClicks === 0\n ? \"No 😭\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n \n )}\n\n {/* PAGE 1.5: QUICK YES SCREEN */}\n {page === 1.5 && (\n \n

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

\n Okay cool… now you’re stuck with me 😭💘\n

\n \n \n )}\n\n {/* PAGE 2: BIRTHDAY */}\n {page === 2 && (\n \n

\n Happy Birthday Yonela 🎂💗\n

\n\n

\n Today is your day, liefiee.\n

\n\n {/* LETTER TEMPLATE */}\n \n

My Liefiee,

\n\n

\n (Write your own words here. Keep it real. Keep it you.)\n

\n\n

\n (Tell her what you love about her: her smile, her eyes, her energy.)\n

\n\n

\n (Tell her what you want for her future + how proud you are.)\n

\n\n

Happy Birthday once again,
Thando 💗

\n\n

\n Tip: Just replace the sentences in brackets with your real message.\n

\n\n

\n setPage(3)}>\n Next: Your Flowers 🌸\n \n\n setPage(1)}>\n Back ↩\n \n

\n \n \n )}\n\n {/* PAGE 3: BOUQUET */}\n {page === 3 && (\n \n

\n Flowers for My Love 💐\n

\n Click the notes, liefiee 💗\n

\n\n \n {/* sparkles overlay */}\n \n ✨ 💗 ✨ 💕 ✨ 💗 ✨ 💕 ✨\n \n\n {/* bouquet center */}\n \n \n \n (A bouquet for a 10 ✨)\n \n \n\n {/* notes */}\n {notes.map((note) => (\n \n ))}\n \n\n

\n setPage(2)}>\n Back to Letter 💌\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 Yonela 💗\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770898675232],"branchVersion","branchId","c2b6d476-0791-11f1-954b-42dde27851f2","id","c2ac7030-0791-11f1-954b-42dde27851f2","valentine",["D",1770845804226],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c4ea1-90b2-77a7-8d39-1976a120b5a1","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c4ea1-90b2-77a7-8d39-1cfe7c8e715a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":53,"_102":103,"_104":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":87,"_88":89,"_90":49,"_91":92,"_93":94,"_95":44,"_96":97},"isOwned",29,"main","projectId","forkedBranchId","fdd9b22e-27b0-11f0-aecd-569c3dd06744","forkedBranchVersion",11,"forkedProjectPrivacy","forkedProjectId","fdd966ca-27b0-11f0-aecd-569c3dd06744","forkedProjectOrgId","1ea2ca52-aecd-4993-8c60-cb61483dff1b","projectName","userHandle","jeenyuhs","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOVhjRDRNT2tUV3dDWGpYZDhveG5uSGk1Y1gifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":173,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":174,"_78":175,"_80":176,"_82":25},"tree",[164,165],"files",[164,165],"counts",{"_154":60,"_155":150,"_156":150,"_157":158,"_159":160},"contents",[138,139],"upstreamProject",{"_42":92,"_32":44,"_51":-5,"_52":-5,"_48":49,"_76":136},"upstreamBranch",{"_42":87,"_37":130,"_131":132,"_32":84,"_85":92,"_13":89,"_86":-5,"_88":-5,"_133":134,"_46":-5,"_82":25,"_48":49,"_96":135,"_61":94,"_95":44},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],"updatedAt",["D",1739338420215],"lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","mewtru",{"_98":135,"_105":137},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_42":147,"_32":148,"_30":149,"_141":-5,"_40":41,"_39":150,"_142":56,"_37":151,"_13":60,"_33":20,"_35":152,"_24":25,"_145":-5,"_27":153},{"_42":140,"_32":28,"_30":31,"_141":-5,"_40":41,"_39":14,"_142":25,"_37":143,"_13":144,"_33":34,"_35":36,"_24":25,"_145":-5,"_27":146},"dc36dde4-080c-11f1-9619-42dde27851f2","parentId","latest",["D",1770898675232],8,"label",[28],"c2be4666-0791-11f1-954b-42dde27851f2","README.md","019c4ea2-9757-708f-a9e9-6cf0f54c200c",1,["D",1770845804226],"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.",[148],"pulls","branches","forks","envVars",{"_161":60,"_163":60},"connections",{"_161":60,"_162":60},"count","unfilledCount","emptyCount",{"_42":147,"_32":148,"_30":149,"_141":-5,"_40":41,"_39":150,"_142":56,"_37":170,"_13":60,"_33":20,"_35":152,"_24":25,"_145":-5,"_167":171,"_27":172},{"_42":140,"_32":28,"_30":31,"_141":-5,"_40":41,"_39":14,"_142":25,"_37":166,"_13":144,"_33":34,"_35":36,"_24":25,"_145":-5,"_167":168,"_27":169},["D",1770898675232],"children",[],[28],["D",1770845804226],[],[148],["D",1770845804226],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":53,"_102":103,"_104":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":87,"_88":89,"_90":49,"_91":92,"_93":94,"_95":44,"_96":97},"ctx",{"_76":-5,"_127":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":56,"_219":-5,"_220":-7,"_221":-7,"_222":60,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":84,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"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"]

Diff · v9