[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_223":224,"_225":226},"routes/_app.x.$handle.$name",{"_108":107,"_38":52,"_117":94,"_33":118,"_13":14,"_119":-5,"_11":120,"_121":122,"_123":124,"_125":126,"_127":128,"_26":-5,"_129":130,"_131":132,"_133":31,"_134":135,"_136":66,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",3,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","8ca9ab3d-cba3-4ac8-aaec-f0aee4b1fabc","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/app.tsx","latestPath","fileId","01a01a88-7712-7639-ab42-97587d9ae192","name","app.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ───────────────────────── edit everything in here ─────────────────────────\n\n// The gift card codes revealed when they press the present button. Fill in\n// the real codes — leave one as \"YOUR_CODE_HERE\" and it'll show a placeholder.\n// Remove any object from the array to drop that card entirely.\nconst GIFT_CARDS = [\n { label: \"🍔 Food\", code: \"YOUR_FOOD_CODE_HERE\" },\n { label: \"🎮 Overwatch\", code: \"YOUR_OVERWATCH_CODE_HERE\" },\n { label: \"🎁 One more\", code: \"YOUR_THIRD_CODE_HERE\" },\n];\nconst GIFT_BUTTON_TEXT = \"🎁 open it\";\n\nconst QUESTION = \"I just wanted to thank you\";\nconst SUBTITLE = \"you try sooo hard and I notice every bit of it\";\n\n// What the \"no\" button says as they keep pressing it\nconst NO_PHRASES = [\n \"you really do though\",\n \"you try so so hard\",\n \"moira mains don't get to be humble\",\n \"you don't get to be humble today\",\n \"i'm not letting this one go\",\n \"this button is decorative btw\",\n \"i'll just keep asking forever\",\n \"Error 404: modesty not allowed\",\n];\n\nconst THANK_YOU_TITLE = \"Thank you for trying so hard 🩷\";\nconst THANK_YOU_LINES = [\n \"I really do appreciate you as a friend. I see how much you go through in your life. The late nights studying, the restarts, the trying again when stopping would've been so much easier.\",\n \"The trying to show up for your friends, even when it comes at your expense. It does say alot about you.\",\n \"It matters alot to me, and you matter. Thank you Rafe💖\",\n];\n\nconst TEASE = \"wait... one more thing 👀\";\n\nconst ASK_GIF = \"https://media.tenor.com/SzEa9KOp6vwAAAAi/sanrio.gif\";\nconst YAY_GIF =\n \"https://media.tenor.com/ARNBrhfqznwAAAAi/ibunwoo-my-melody.gif\";\n\n// How long to wait (ms) before the surprise button shows up\nconst GIFT_DELAY = 2600;\n\n// ───────────────────────────────────────────────────────────────────────────\n\nconst page: React.CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: \"100vh\",\n padding: \"24px\",\n textAlign: \"center\",\n boxSizing: \"border-box\",\n};\n\nconst baseButton: React.CSSProperties = {\n margin: \"10px\",\n padding: \"12px 22px\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"12px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n};\n\nfunction Ask({ onYes }: { onYes: () => void }) {\n const [noClicks, setNoClicks] = useState(0);\n const yesSize = noClicks * 18 + 16;\n\n return (\n <>\n $\"\"$ \n

{QUESTION}

{SUBTITLE}

\n \n Yes\n \n setNoClicks((n) => n + 1)}\n style={{\n ...baseButton,\n fontSize: \"16px\",\n backgroundColor: \"#e05a72\",\n }}\n >\n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n \n );\n}\n\nfunction GiftButton() {\n const [nudged, setNudged] = useState(false);\n const style: React.CSSProperties = {\n ...baseButton,\n display: \"inline-block\",\n fontSize: \"26px\",\n padding: \"18px 34px\",\n backgroundColor: \"#ff69a0\",\n textDecoration: \"none\",\n };\n\n if (GIFT_URL === \"CHANGE_ME\") {\n return (\n

\n \n {nudged && (\n

\n (psst — open frontend/app.tsx and put your link in{\" \"}\n GIFT_URL)\n

\n )}\n

\n );\n }\n\n return (\n \n {GIFT_BUTTON_TEXT}\n \n );\n}\n\nfunction Thanks() {\n const [showGift, setShowGift] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setShowGift(true), GIFT_DELAY);\n return () => clearTimeout(timer);\n }, []);\n\n return (\n <>\n $\"\"$ \n \n {THANK_YOU_TITLE}\n \n

\n {THANK_YOU_LINES.map((line, i) => (\n

\n {line}\n

\n ))}\n

\n {showGift && (\n

{TEASE}

\n \n

\n )}\n \n );\n}\n\nfunction App() {\n const [accepted, setAccepted] = useState(false);\n return (\n

\n {accepted ? : setAccepted(true)} />}\n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ───────────────────────── edit everything in here ─────────────────────────\n\n// The gift card codes revealed when they press the present button. Fill in\n// the real codes — leave one as \"YOUR_CODE_HERE\" and it'll show a placeholder.\n// Remove any object from the array to drop that card entirely.\nconst GIFT_CARDS = [\n { label: \"🍔 Food\", code: \"YOUR_FOOD_CODE_HERE\" },\n { label: \"🎮 Overwatch\", code: \"YOUR_OVERWATCH_CODE_HERE\" },\n { label: \"🎁 One more\", code: \"YOUR_THIRD_CODE_HERE\" },\n];\nconst GIFT_BUTTON_TEXT = \"🎁 open it\";\n\nconst QUESTION = \"I just wanted to thank you\";\nconst SUBTITLE = \"you try sooo hard and I notice every bit of it\";\n\n// What the \"no\" button says as they keep pressing it\nconst NO_PHRASES = [\n \"you really do though\",\n \"you try so so hard\",\n \"moira mains don't get to be humble\",\n \"you don't get to be humble today\",\n \"i'm not letting this one go\",\n \"this button is decorative btw\",\n \"i'll just keep asking forever\",\n \"Error 404: modesty not allowed\",\n];\n\nconst THANK_YOU_TITLE = \"Thank you for trying so hard 🩷\";\nconst THANK_YOU_LINES = [\n \"I really do appreciate you as a friend. I see how much you go through in your life. The late nights studying, the restarts, the trying again when stopping would've been so much easier.\",\n \"The trying to show up for your friends, even when it comes at your expense. It does say alot about you.\",\n \"It matters alot to me, and you matter. Thank you Rafe💖\",\n];\n\nconst TEASE = \"wait... one more thing 👀\";\n\nconst ASK_GIF = \"https://media.tenor.com/SzEa9KOp6vwAAAAi/sanrio.gif\";\nconst YAY_GIF =\n \"https://media.tenor.com/ARNBrhfqznwAAAAi/ibunwoo-my-melody.gif\";\n\n// How long to wait (ms) before the surprise button shows up\nconst GIFT_DELAY = 2600;\n\n// ───────────────────────────────────────────────────────────────────────────\n\nconst page: React.CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: \"100vh\",\n padding: \"24px\",\n textAlign: \"center\",\n boxSizing: \"border-box\",\n};\n\nconst baseButton: React.CSSProperties = {\n margin: \"10px\",\n padding: \"12px 22px\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"12px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n};\n\nfunction Ask({ onYes }: { onYes: () => void }) {\n const [noClicks, setNoClicks] = useState(0);\n const yesSize = noClicks * 18 + 16;\n\n return (\n <>\n $\"\"$ \n

{QUESTION}

{SUBTITLE}

\n \n );\n}\n\nfunction copyCode(code: string) {\n navigator.clipboard?.writeText(code).catch(() => {});\n}\n\nfunction GiftButton() {\n const [opened, setOpened] = useState(false);\n const style: React.CSSProperties = {\n ...baseButton,\n display: \"inline-block\",\n fontSize: \"26px\",\n padding: \"18px 34px\",\n backgroundColor: \"#ff69a0\",\n textDecoration: \"none\",\n };\n\n return (\n

\n setOpened(true)}\n >\n {GIFT_BUTTON_TEXT}\n \n {opened && (\n \n {GIFT_CARDS.map((card) => {\n const isPlaceholder = card.code.startsWith(\"YOUR_\");\n return (\n \n

\n {card.label}\n

\n \n \n {card.code}\n \n {!isPlaceholder && (\n copyCode(card.code)}\n style={{\n ...baseButton,\n margin: 0,\n padding: \"6px 12px\",\n fontSize: \"13px\",\n backgroundColor: \"#3ea55f\",\n whiteSpace: \"nowrap\",\n }}\n >\n copy\n \n )}\n

\n \n );\n })}\n \n )}\n \n );\n}\n\nfunction Thanks() {\n const [showGift, setShowGift] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setShowGift(true), GIFT_DELAY);\n return () => clearTimeout(timer);\n }, []);\n\n return (\n <>\n $\"\"$ \n \n {THANK_YOU_TITLE}\n \n

\n {THANK_YOU_LINES.map((line, i) => (\n

\n {line}\n

\n ))}\n

\n {showGift && (\n

{TEASE}

\n \n

\n )}\n \n );\n}\n\nfunction App() {\n const [accepted, setAccepted] = useState(false);\n return (\n

\n {accepted ? : setAccepted(true)} />}\n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();","createdAt",["D",1787151572126],"branchVersion","branchId","e91e7932-1f44-4f08-bc7b-a4ef771ebc45","id","e69c72cd-1b7f-46bb-a26b-5a16e47fc82d","thank-you-copy",["D",1787151546031],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Thank you page with gift card code reveal","imageUrl","fda17b4d-1ba2-451f-887c-030c890115f5","pinnedFileId","01a01a88-7713-71af-97c2-9e6b305e73df","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a01a72-72d1-77af-97ff-58c22a0ac918","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_108":107,"_116":112},"org",{"_108":107,"_109":110,"_111":112,"_19":62,"_113":114,"_115":31},"branch",{"_13":93,"_38":94,"_50":49,"_95":51,"_96":97,"_98":99,"_100":57,"_101":102,"_103":104,"_105":52,"_106":107},"isOwned",7,"main","projectId","forkedBranchId","eb72b009-75c7-42dd-8812-e8eb6d1c16c8","forkedBranchVersion",8,"forkedProjectPrivacy","forkedProjectId","502c35ee-545b-437b-8c9a-6c50fd75f945","forkedProjectOrgId","019e798d-a88a-73c9-9cb3-97908551522d","projectName","userHandle","boobolacroix","handle","displayName","boobo lacroix","avatar","https://lh3.googleusercontent.com/a/ACg8ocKLFV34qWpE3tUTX_yo780li88B5Kf_63gsw579PWERKzopCA=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":219,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":220,"_88":221,"_90":222,"_92":31},"tree",[196,198,199,200],"files",[196,197,198,199,200],"counts",{"_186":70,"_187":160,"_188":70,"_189":190,"_191":192},"contents",[153,154,155,156],"upstreamProject",{"_50":102,"_38":149,"_59":150,"_61":-5,"_56":57,"_86":151},"upstreamBranch",{"_50":97,"_45":141,"_142":143,"_38":94,"_95":102,"_13":99,"_96":144,"_98":145,"_146":147,"_54":-5,"_92":31,"_56":57,"_106":148,"_71":104,"_105":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1787147278790],"updatedAt",["D",1787151321914],"63fcb4ec-5c40-11f1-b877-ee650bb23af1",11,"lockfileKey","1787151322123-esm.town_v_starkvj_thank-you@8-main","starkvj","thank-you","Thank you page with a growing button and a surprise gift reveal",{"_108":148,"_116":152},"https://lh3.googleusercontent.com/a/ACg8ocL58mZwgiU34ppEb8_odPR4xDS5mvHTDaeJreDu0bHFnZRycZQi=s96-c",{"_50":180,"_38":181,"_36":182,"_159":-5,"_48":49,"_47":160,"_161":66,"_45":183,"_13":70,"_40":184,"_42":-5,"_30":31,"_165":-5,"_33":185},{"_50":174,"_38":175,"_36":176,"_159":-5,"_48":49,"_47":160,"_161":66,"_45":177,"_13":70,"_40":26,"_42":178,"_30":31,"_165":-5,"_33":179},{"_50":168,"_38":169,"_36":170,"_159":-5,"_48":49,"_47":160,"_161":31,"_45":171,"_13":70,"_40":26,"_42":172,"_30":31,"_165":-5,"_33":173},{"_50":157,"_38":158,"_36":64,"_159":-5,"_48":49,"_47":160,"_161":66,"_45":162,"_13":70,"_40":163,"_42":164,"_30":31,"_165":166,"_33":167},"fa274a22-4913-404a-b015-68df8e47c26e","main.tsx","parentId",1,"latest",["D",1787151546031],"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function server(request: Request): Promise {\n const path = new URL(request.url).pathname;\n\n // client-side React code (transpiled on the fly)\n if (path.startsWith(\"/frontend/\")) return serveFile(path, import.meta.url);\n\n return new Response(await readFile(\"/index.html\", import.meta.url), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n","label","thank-you-rafe",[158],"95e1f8e0-61f1-4c9b-a6b4-082191668451","index.html","01a01a88-7713-71af-97c2-99b58b480595",["D",1787151546031],"\n\n \n \n thank you 🩷\n \n \n \n \n \n \n

\n \n \n \n\n",[169],"9d72a2bd-512d-4380-b358-48dea0243561","README.md","01a01a88-7713-71af-97c2-9676fec65afa",["D",1787151546031],"# thank you for trying so hard 🩷\n\nLive: \n\nSame idea as the valentine page (growing \"Yes\" button, a \"No\" button that keeps\nbegging), but the question is _\"can I thank you?\"_ — and once they say yes, a\nsurprise 🎁 gift button shows up a couple seconds later and sends them wherever\nyou want.\n\n## How it goes\n\n```mermaid\nflowchart LR\n A[\"J=I just wanted to thank you\"] -->|No| A\n A -->|Yes| B[\"thank you message 🩷\"]\n B -->|\"~2.6s later\"| C[\"wait... one more thing 👀\"]\n C --> D[\"🎁 opens your gift link\"]\n```\n\n## Change it\n\nEverything you'd want to edit is at the top of `frontend/app.tsx`:\n\n| what | does what |\n| ------------------------------------- | ------------------------------------------------------------------------------------------------------ |\n| `GIFT_URL` | **set this** — where the gift button sends them (playlist, photo album, wishlist, doc, another val...) |\n| `GIFT_BUTTON_TEXT` | text on the gift button |\n| `QUESTION` / `SUBTITLE` | the first screen |\n| `NO_PHRASES` | what the \"No\" button says as they keep clicking |\n| `THANK_YOU_TITLE` / `THANK_YOU_LINES` | the actual thank you — make this yours |\n| `TEASE` | the little \"wait...\" line before the gift |\n| `ASK_GIF` / `YAY_GIF` | the two gifs |\n| `GIFT_DELAY` | how long the suspense lasts, in ms |\n\nColors and layout live further down the same file. `index.html` has the\nbackground color and the button animations.\n\nUntil you set `GIFT_URL`, the gift button just reminds you to fill it in.",[175],"0c7c114c-cf0f-43ec-81f4-d3b2b42f7cd3","frontend","01a01a88-7713-71af-97c2-92fee6095e4b",["D",1787151546031],"directory",[181],"pulls","branches","forks","envVars",{"_193":70,"_195":70},"connections",{"_193":70,"_194":70},"count","unfilledCount","emptyCount",{"_50":180,"_38":181,"_36":182,"_159":-5,"_48":49,"_47":160,"_161":66,"_45":216,"_13":70,"_40":184,"_42":-5,"_30":31,"_165":-5,"_202":217,"_33":218},{"_50":211,"_38":39,"_36":37,"_159":182,"_48":49,"_47":14,"_161":31,"_45":212,"_13":213,"_40":41,"_42":44,"_30":31,"_165":-5,"_202":214,"_33":215},{"_50":174,"_38":175,"_36":176,"_159":-5,"_48":49,"_47":160,"_161":66,"_45":208,"_13":70,"_40":26,"_42":178,"_30":31,"_165":-5,"_202":209,"_33":210},{"_50":168,"_38":169,"_36":170,"_159":-5,"_48":49,"_47":160,"_161":31,"_45":205,"_13":70,"_40":26,"_42":172,"_30":31,"_165":-5,"_202":206,"_33":207},{"_50":157,"_38":158,"_36":64,"_159":-5,"_48":49,"_47":160,"_161":66,"_45":201,"_13":70,"_40":163,"_42":164,"_30":31,"_165":166,"_202":203,"_33":204},["D",1787151546031],"children",[],[158],["D",1787151546031],[],[169],["D",1787151546031],[],[175],"3e3aa3f6-08c3-4761-bf5e-2c7b26f13635",["D",1787151572126],2,[],[181,39],["D",1787151546031],[197],[181],["D",1787151546031],{"_108":107,"_116":112},{"_108":107,"_109":110,"_111":112,"_19":62,"_113":114,"_115":31},{"_13":93,"_38":94,"_50":49,"_95":51,"_96":97,"_98":99,"_100":57,"_101":102,"_103":104,"_105":52,"_106":107},"ctx",{"_86":-5,"_138":256,"_257":258,"_259":260,"_261":31,"_262":31,"_263":31,"_264":66,"_265":-5,"_266":-7,"_267":-7,"_268":70,"_269":31,"_270":31,"_271":-5,"_272":31,"_273":31,"_274":31,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":94,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v3