\n {hearts.map((h) => (\n \n {h.emoji}\n \n ))}\n

\n );\n}\n\nfunction Confetti() {\n const pieces = useMemo(\n () =>\n Array.from({ length: 40 }, (_, i) => ({\n id: i,\n left: Math.random() * 100,\n size: 14 + Math.random() * 18,\n duration: 2.5 + Math.random() * 3,\n delay: Math.random() * 1.5,\n emoji: CONFETTI_EMOJI[i % CONFETTI_EMOJI.length],\n })),\n [],\n );\n return (\n

\n {pieces.map((p) => (\n \n {p.emoji}\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [copied, setCopied] = useState(false);\n const [accepted, setAccepted] = useState(false);\n const [stage, setStage] = useState<\"plan\" | \"done\">(\"plan\");\n const [planIndex, setPlanIndex] = useState(0);\n const [answers, setAnswers] = useState>({});\n const [answerEmoji, setAnswerEmoji] = useState>({});\n const [noStyle, setNoStyle] = useState({});\n const yesFontSize = 16 + noClicks * 6;\n const fleeing = noClicks >= 5;\n const total = QUESTIONS.length;\n\n const firstImg = \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg = \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleYes = () => setAccepted(true);\n\n const handleNo = () => {\n const next = noClicks + 1;\n setNoClicks(next);\n if (next >= 5) {\n setNoStyle({\n position: \"fixed\",\n left: `${22 + Math.random() * 55}%`,\n top: `${25 + Math.random() * 55}%`,\n transition: \"left 0.4s ease, top 0.4s ease\",\n });\n }\n };\n\n const handleAnswer = (q: Question, opt: Option) => {\n setAnswers((prev) => ({ ...prev, [q.id]: opt.label }));\n setAnswerEmoji((prev) => ({ ...prev, [q.id]: opt.emoji }));\n if (planIndex === total - 1) {\n setStage(\"done\");\n } else {\n setPlanIndex((i) => i + 1);\n }\n };\n\n const handleBack = () => {\n if (planIndex > 0) setPlanIndex((i) => i - 1);\n };\n\n const handleShare = async () => {\n try {\n await navigator.clipboard.writeText(window.location.href);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n } catch {\n // clipboard blocked — fall back silently\n }\n };\n\n const question = QUESTIONS[planIndex];\n\n return (\n \n \n {!accepted ? (\n

Will you go on a date with me? 💘

\n Roses are red, violets are blue, I made this whole page just to ask you. 🌹\n

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

\n ) : stage === \"plan\" ? (\n \n {/* progress bar */}\n \n \n \n

\n Step {planIndex + 1} of {total} · {question.tag}\n

\n {question.prompt}\n

{question.sub}

\n \n {question.options.map((opt) => (\n handleAnswer(question, opt)}\n style={{\n padding: \"20px 10px\",\n backgroundColor: \"#ffffff\",\n color: \"#7a2944\",\n border: \"2px solid #ffd0e3\",\n borderRadius: \"18px\",\n fontSize: \"16px\",\n cursor: \"pointer\",\n transition: \"transform 0.15s ease, box-shadow 0.15s ease\",\n boxShadow: \"0 4px 12px rgba(255, 92, 157, 0.12)\",\n }}\n onMouseEnter={(e) => (e.currentTarget.style.transform = \"scale(1.04)\")}\n onMouseLeave={(e) => (e.currentTarget.style.transform = \"scale(1)\")}\n >\n

{opt.emoji}

{opt.label}

\n \n ))}\n \n {planIndex > 0 && (\n \n ← Back\n \n )}\n \n ) : (\n

\n \n

\n It's a DATE!! 🥳💖\n

\n Here's our perfect plan (I'm already excited):\n

\n {QUESTIONS.map((q) => (\n \n {answerEmoji[q.id]}\n {q.tag}\n {answers[q.id]}\n

\n ))}\n

\n \n {copied ? \"Link copied! Now send it 💌\" : \"Copy link to send to my crush 🔗\"}\n \n \n )}\n \n view source\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: Request): Promise {\n if (new URL(request.url).pathname === \"/source\") {\n const { parseVal } = await import(\"https://esm.town/v/std/utils/index.ts\");\n return Response.redirect(parseVal().links.self.val, 302);\n }\n return new Response(\n `\n \n \n Will you go on a date with me? 💘\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n","label","children",[72],"contentHash","068e824abc4990564d44482f6810daa8d768a250d4b4edc18ce97fa59c6078b5","fe0d1f7e-27b0-11f0-aecd-569c3dd06744","fddef4f0-27b0-11f0-aecd-569c3dd06744",["D",1739338420215],10,"/** @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 yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg = \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks(prev => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n };\n\n return (\n \n {!isValentine\n ? (\n <>\n

Will you be my Valentine? 💘

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

\n \n )\n : (\n <>\n

\n \n Yay!!! 💖🎉\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: 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}",[72],"219db6de0cde9d99ab623850153b424bf310bc4ca153e580028ccbf8fe9f9954","README.md",{"_32":113,"_13":102,"_78":114,"_80":-5,"_81":33,"_82":115,"_83":26,"_34":116,"_40":22,"_86":109,"_88":117,"_65":48,"_90":-5,"_91":-7,"_71":118,"_93":119},{"_32":105,"_13":102,"_78":106,"_80":-5,"_81":58,"_82":57,"_83":26,"_34":107,"_40":108,"_86":109,"_88":110,"_65":48,"_90":-5,"_91":-7,"_71":111,"_93":112},"7ff8bc76-de65-4eff-aa2d-c7e8bde67b0d","01a09b98-707e-729a-bf0d-57f23f1b5edd",["D",1789317315169],4,"file","# 💘 Will you go on a date with me?\n\nA cute animated date invitation page you can send to your crush. It's impossible to say no (literally).\n\n## Try it\n\n[Open the live page](url:main.tsx)\n\n## How it works\n\nFirst she has to say **yes** to the date (the Yes button grows every time she refuses, and the No button eventually runs away 😆). Then it's a cute little planner of **8 steps**:\n\n1. 🍽️ **What should we eat?** — Pizza, sushi, tacos, ramen…\n2. 🎠 **What should we do?** — Movie night, park stroll, arcade games…\n3. 📅 **When do we go?** — This weekend, Friday night, ASAP…\n4. 👗 **What's the vibe?** — Cozy casual, dress to impress…\n5. 🎧 **Music?** — Your playlist, karaoke night, lo-fi chill…\n6. 🍦 **Dessert?** — Ice cream, cheesecake, boba, donuts…\n7. 💬 **What do we talk about?** — Awkward stories, our past crushes…\n8. 🌆 **How should the night end?** — Midnight walk, drive around town…\n\nEvery pick is a tappable emoji card, with a **progress bar** and a **← Back** button so she can change her mind. At the end she gets a **recap of her perfect date** with raining confetti.\n\nPlus:\n- ❤️ Floating hearts + wobbling headline throughout, and smooth slide transitions between steps.\n- 🔗 A **\"Copy link to send to my crush\"** button snaps the share URL to the clipboard.\n- 👀 `view source` is in the corner for anyone to remix.\n\n## Make it yours\n\nEverything is easy to tweak in `main.tsx`:\n\n- **The questions** — edit the `QUESTIONS` array (tag, prompt, subtitle, and each `options` emoji/name). Add or remove entire steps.\n- **The question** on the first screen — edit the `

`.\n- The phrases on the No button — edit the `NO_PHRASES` array.\n- The colors — the buttons, background gradient, and headline are set with inline styles.\n- The GIFs — swap `firstImg` and `secondImg`.\n- When No starts running away — change the `noClicks >= 5` threshold.\n\nGood luck — hopefully they say yes! hehe\n",[102],"32225be9e3c73a185380d61e17d99346a4f73541741de3c402d1268226236979","fddefc5c-27b0-11f0-aecd-569c3dd06744","fddefcde-27b0-11f0-aecd-569c3dd06744",1,["D",1739338102873],"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.",[102],"884dd4eb86fd1264df9b44f9e56598ee15cb691e2de0dd1661353c8166c61b1e",["D",1789316853822],"legacyEnvVars","httpPrivacy","description","Cute animated date invitation with Yes/No options","imageUrl","userId","32ed7f4a-b3c2-44d9-a8f0-c9ec7d7c66ba","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","01a09b97-0ae0-7554-bad8-e5dd9860d4ae","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_158":153},"org",{"_11":12,"_152":153,"_154":153,"_126":127,"_155":156,"_157":48},"branch","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":59,"_13":14,"_34":207,"_46":-5,"_121":48,"_49":50,"_122":50,"_123":124,"_125":-5,"_126":127,"_128":79,"_129":26,"_130":-5,"_131":-5,"_132":22,"_53":133,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":139,"_140":139,"_141":142,"_143":142,"_144":142,"_145":139,"_146":139,"_147":208,"_149":209,"_151":210,"_47":48},"tree",[201,202],"files",[201,202],"counts",{"_191":22,"_192":115,"_193":22,"_194":195,"_196":197},"contents",[185,186],"upstreamProject",{"_32":39,"_13":56,"_123":-5,"_125":-5,"_49":50,"_147":183},"upstreamBranch",{"_32":33,"_34":181,"_36":182,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":52,"_158":184},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_32":105,"_13":102,"_78":106,"_80":-5,"_81":58,"_82":57,"_83":26,"_34":189,"_40":108,"_86":109,"_88":110,"_65":48,"_90":-5,"_71":190},{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":58,"_82":20,"_83":26,"_34":187,"_40":85,"_86":87,"_88":89,"_65":48,"_90":14,"_71":188},["D",1789317309441],[72],["D",1789317315169],[102],"pulls","branches","forks","envVars",{"_198":22,"_200":22},"connections",{"_198":22,"_199":22},"count","unfilledCount","emptyCount",{"_32":105,"_13":102,"_78":106,"_80":-5,"_81":58,"_82":57,"_83":26,"_34":107,"_40":108,"_86":109,"_88":110,"_65":48,"_90":-5,"_91":205,"_71":206},{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":58,"_82":20,"_83":26,"_34":84,"_40":85,"_86":87,"_88":89,"_65":48,"_90":14,"_91":203,"_71":204},[],[72],[],[102],["D",1789316853822],{"_11":12,"_158":153},{"_11":12,"_152":153,"_154":153,"_126":127,"_155":156,"_157":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":41,"_60":50,"_61":39,"_62":54,"_55":14,"_51":12},"ctx",{"_147":-5,"_178":244,"_245":246,"_247":248,"_249":48,"_250":48,"_251":48,"_252":26,"_253":-5,"_254":-7,"_255":-7,"_256":22,"_257":48,"_258":48,"_259":-5,"_260":48,"_261":48,"_262":48,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":16,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"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"]

Compare

Mergearyahiwa66/mainintomewtru/main

README.md+37-4

Hmain.tsx+457-55