\n \n \n\n

\n {/* PAGE 1 */}\n {page === 1 && (\n \n {!isValentine ? (\n <>\n \n\n

\n Will you be my Valentine, {GIRL_NAME}? 💘\n

\n\n

\n \n Yes 💚\n \n\n \n

\n\n

\n (Click Yes!!!)\n

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

Yay!!! 💖🎉

\n Okay cool… now go to your birthday message 😌\n

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

\n Happy Birthday Baby Girl 🎂💗\n

\n\n

To my strong, black, smart & gorgeous woman

\n\n {/* Photo + mini glow */}\n

\n $\"Her\"$ \n

\n\n

\n \n Letter for {NICKNAME} 💌\n

\n\n \n

\n\n \n setPage(1)}>Back 💘\n\n setPage(3)}>\n Next: Flowers 💐\n \n

\n\n

\n Tip: paste her photo link at the top where it says{\" \"}\n HER_PHOTO.\n

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

\n \n Flowers for My Love 💐\n \n

Click each note

\n\n \n\n

\n setPage(2)}>\n Back to Letter 💌\n \n

\n \n )}\n

\n \n );\n}\n\n/* -----------------------------------\n Bouquet Board (mobile safe layout)\n------------------------------------ */\nfunction BouquetBoard({ bouquetImg }) {\n const notes = useMemo(\n () => [\n {\n id: 1,\n title: \"Sunflower 🌻\",\n msg: \"You’re my sunflower — you brighten my whole day.\",\n },\n { id: 2, title: \"Rose 🌹\", msg: \"My heart rose the day I met you.\" },\n {\n id: 3,\n title: \"Pink Tulip 🌷\",\n msg: \"I’m tulip-ly in love with you, liefiee.\",\n },\n { id: 4, title: \"Daisy 🌼\", msg: \"I think about you every daisy.\" },\n { id: 5, title: \"Lavender 💜\", msg: \"You calm my mind like lavender.\" },\n { id: 6, title: \"Orchid 🪷\", msg: \"You’re rare… like an orchid.\" },\n { id: 7, title: \"Lily 💐\", msg: \"You’re my peace — my lily.\" },\n {\n id: 8,\n title: \"Peony 🌺\",\n msg: \"You’re beautiful in a way that feels expensive and effortless.\",\n },\n {\n id: 9,\n title: \"Cherry Blossom 🌸\",\n msg: \"You make my life feel like spring.\",\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 },\n ],\n [],\n );\n\n return (\n

\n {/* IMPORTANT: this class makes the mobile CSS work */}\n

\n {/* LEFT NOTES */}\n

\n \n \n \n \n \n

\n\n {/* BOUQUET CENTER */}\n

\n\n $\"Bouquet\"$ \n\n

A bouquet for a 10 ✨

\n\n {/* RIGHT NOTES */}\n

\n \n \n \n \n \n

\n );\n}\n\n/* -----------------------------------\n Note Card (click open)\n------------------------------------ */\nfunction NoteCard({ note }) {\n const [open, setOpen] = useState(false);\n\n return (\n setOpen((p) => !p)}\n style={{\n ...styles.noteCard,\n transform: open ? \"scale(1.03)\" : \"scale(1)\",\n }}\n >\n

{note.title}

\n\n

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

\n \n );\n}\n\n/* -----------------------------------\n UI Components\n------------------------------------ */\nfunction Card({ children }) {\n return

{children}

;\n}\n\nfunction PrimaryButton({ children, onClick }) {\n return (\n \n );\n}\n\n/* -----------------------------------\n Effects\n------------------------------------ */\nfunction ConfettiBurst() {\n const pieces = new Array(70).fill(0);\n\n return (\n

\n {pieces.map((_, i) => (\n \n ))}\n

\n );\n}\n\nfunction FloatingHearts() {\n const hearts = new Array(18).fill(0);\n\n return (\n

\n {hearts.map((_, i) => (\n \n 💗\n

\n ))}\n

\n );\n}\n\nfunction Sparkles() {\n const sparkles = new Array(22).fill(0);\n\n return (\n

\n {sparkles.map((_, i) => (\n \n ✨\n

\n ))}\n

\n );\n}\n\n/* -----------------------------------\n Styles\n------------------------------------ */\nconst styles = {\n app: {\n minHeight: \"100vh\",\n background: \"linear-gradient(135deg, #ff2d7a, #ffd1e1)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"18px\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n\n shell: {\n width: \"min(980px, 95vw)\",\n position: \"relative\",\n zIndex: 2,\n },\n\n card: {\n width: \"100%\",\n borderRadius: \"24px\",\n background: \"rgba(255,255,255,0.92)\",\n padding: \"26px\",\n boxShadow: \"0px 18px 50px rgba(0,0,0,0.18)\",\n border: \"1px solid rgba(255,255,255,0.35)\",\n textAlign: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n\n h1: {\n margin: 0,\n fontSize: \"42px\",\n color: \"#ff2d7a\",\n letterSpacing: \"-0.5px\",\n },\n\n sub: {\n marginTop: \"10px\",\n marginBottom: \"0px\",\n fontSize: \"16px\",\n color: \"#333\",\n },\n\n bigYay: {\n fontSize: \"52px\",\n fontWeight: \"900\",\n color: \"#ff2d7a\",\n marginTop: \"10px\",\n },\n\n yesBtn: {\n margin: \"10px\",\n padding: \"12px 24px\",\n backgroundColor: \"#1ea54c\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"14px\",\n cursor: \"pointer\",\n fontWeight: \"800\",\n boxShadow: \"0px 10px 25px rgba(0,0,0,0.12)\",\n transition: \"0.2s ease\",\n },\n\n noBtn: {\n fontSize: \"16px\",\n margin: \"10px\",\n padding: \"12px 22px\",\n backgroundColor: \"#ff2b2b\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"14px\",\n cursor: \"pointer\",\n fontWeight: \"700\",\n boxShadow: \"0px 10px 25px rgba(0,0,0,0.12)\",\n },\n\n primaryBtn: {\n padding: \"12px 18px\",\n borderRadius: \"14px\",\n border: \"none\",\n background: \"#ff2d7a\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"800\",\n fontSize: \"15px\",\n boxShadow: \"0px 10px 24px rgba(0,0,0,0.12)\",\n },\n\n /* Page 2 photo */\n photoWrap: {\n marginTop: \"18px\",\n width: \"210px\",\n height: \"210px\",\n borderRadius: \"999px\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n position: \"relative\",\n },\n\n photoGlow: {\n position: \"absolute\",\n inset: \"-10px\",\n borderRadius: \"999px\",\n background:\n \"radial-gradient(circle, rgba(255,45,122,0.35), transparent 70%)\",\n filter: \"blur(2px)\",\n },\n\n photo: {\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n borderRadius: \"999px\",\n border: \"5px solid rgba(255,255,255,0.85)\",\n position: \"relative\",\n zIndex: 2,\n boxShadow: \"0px 18px 40px rgba(0,0,0,0.18)\",\n },\n\n letterBox: {\n marginTop: \"18px\",\n background: \"rgba(255,255,255,0.85)\",\n borderRadius: \"18px\",\n padding: \"16px\",\n border: \"1px solid rgba(0,0,0,0.06)\",\n textAlign: \"left\",\n },\n\n textarea: {\n marginTop: \"10px\",\n width: \"100%\",\n minHeight: \"200px\",\n borderRadius: \"14px\",\n border: \"1px solid rgba(0,0,0,0.12)\",\n padding: \"12px\",\n fontSize: \"14px\",\n outline: \"none\",\n resize: \"vertical\",\n fontFamily: \"Arial, sans-serif\",\n },\n\n /* Page 3 board */\n board: {\n marginTop: \"18px\",\n borderRadius: \"22px\",\n overflow: \"hidden\",\n border: \"1px solid rgba(255,255,255,0.35)\",\n background: \"linear-gradient(135deg, #ff4d88, #ff9bbd)\",\n boxShadow: \"0px 14px 40px rgba(0,0,0,0.12)\",\n padding: \"16px\",\n },\n\n boardInner: {\n display: \"grid\",\n gridTemplateColumns: \"1fr 1.1fr 1fr\",\n gap: \"14px\",\n alignItems: \"center\",\n },\n\n noteColumn: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"12px\",\n },\n\n /* ✅ FIXED bouquet center (glass background) */\n bouquetCenter: {\n position: \"relative\",\n display: \"grid\",\n placeItems: \"center\",\n padding: \"18px\",\n borderRadius: \"22px\",\n background: \"rgba(255,255,255,0.14)\",\n border: \"1px solid rgba(255,255,255,0.22)\",\n boxShadow: \"0px 14px 30px rgba(0,0,0,0.12)\",\n overflow: \"hidden\",\n },\n\n /* ✅ FIXED glow (no more weird checkerboard look) */\n bouquetGlow: {\n position: \"absolute\",\n inset: 0,\n borderRadius: \"22px\",\n background:\n \"radial-gradient(circle at top, rgba(255,255,255,0.22), transparent 60%)\",\n filter: \"blur(1px)\",\n zIndex: 1,\n },\n\n /* ✅ FIXED bouquet image sizing */\n bouquetImg: {\n width: \"320px\",\n maxWidth: \"78vw\",\n filter: \"drop-shadow(0px 18px 20px rgba(0,0,0,0.25))\",\n position: \"relative\",\n zIndex: 3,\n },\n\n bouquetCaption: {\n marginTop: \"10px\",\n fontSize: \"13px\",\n color: \"rgba(255,255,255,0.9)\",\n fontWeight: \"bold\",\n position: \"relative\",\n zIndex: 3,\n },\n\n noteCard: {\n position: \"relative\",\n borderRadius: \"16px\",\n border: \"1px solid rgba(0,0,0,0.10)\",\n background: \"rgba(255,255,255,0.92)\",\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 width: \"100%\",\n },\n\n tape: {\n position: \"absolute\",\n top: \"-10px\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"70px\",\n height: \"20px\",\n borderRadius: \"6px\",\n background: \"rgba(255, 224, 235, 0.9)\",\n border: \"1px solid rgba(0,0,0,0.06)\",\n },\n\n noteTitle: {\n fontWeight: \"bold\",\n color: \"#ff2d7a\",\n fontSize: \"14px\",\n },\n\n noteText: {\n marginTop: \"8px\",\n color: \"#333\",\n fontSize: \"14px\",\n lineHeight: \"1.35\",\n },\n\n /* Confetti */\n confettiWrap: {\n position: \"absolute\",\n inset: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\",\n borderRadius: \"24px\",\n },\n\n confettiPiece: {\n position: \"absolute\",\n top: \"-10px\",\n width: \"10px\",\n height: \"10px\",\n borderRadius: \"4px\",\n background: \"white\",\n animationName: \"confettiFall\",\n animationTimingFunction: \"ease-in\",\n animationIterationCount: 1,\n },\n\n /* Background */\n floatWrap: {\n position: \"absolute\",\n inset: 0,\n zIndex: 0,\n pointerEvents: \"none\",\n },\n\n sparkWrap: {\n position: \"absolute\",\n inset: 0,\n zIndex: 0,\n pointerEvents: \"none\",\n },\n};\n\n/* -----------------------------------\n Client + Server\n------------------------------------ */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render(\n <>\n \n \n ,\n );\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n For ${GIRL_NAME} 💗\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","label","children",[70],"contentHash","9592f7f0d3c0036b4da2cddf74183b9d54e0c3511064d3bc2851e1778e603c57","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}",[70],"219db6de0cde9d99ab623850153b424bf310bc4ca153e580028ccbf8fe9f9954",["D",1770845804226],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019c4ea1-90b2-77a7-8d39-1976a120b5a1","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019c4ea1-90b2-77a7-8d39-1cfe7c8e715a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_136":132},"org",{"_11":12,"_130":-5,"_131":132,"_104":105,"_133":134,"_135":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOVhjRDRNT2tUV3dDWGpYZDhveG5uSGk1Y1gifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":58,"_13":14,"_34":193,"_46":-5,"_100":48,"_49":50,"_101":50,"_102":-5,"_103":-5,"_104":105,"_106":77,"_107":26,"_108":-5,"_109":-5,"_110":22,"_53":111,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":117,"_118":117,"_119":120,"_121":120,"_122":120,"_123":117,"_124":117,"_125":194,"_127":195,"_129":196,"_47":48},"tree",[186,187],"files",[186,187],"counts",{"_176":22,"_177":172,"_178":172,"_179":180,"_181":182},"contents",[165,166],"file","upstreamProject",{"_32":39,"_13":14,"_102":-5,"_103":-5,"_49":50,"_125":163},"upstreamBranch",{"_32":33,"_34":161,"_36":162,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":52,"_136":164},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_32":169,"_13":170,"_76":171,"_78":-5,"_79":57,"_80":172,"_81":26,"_34":173,"_40":22,"_83":148,"_85":174,"_64":48,"_87":-5,"_69":175},{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":167,"_40":20,"_83":84,"_85":86,"_64":48,"_87":-5,"_69":168},["D",1770977097899],[70],"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.",[170],"pulls","branches","forks","envVars",{"_183":22,"_185":22},"connections",{"_183":22,"_184":22},"count","unfilledCount","emptyCount",{"_32":169,"_13":170,"_76":171,"_78":-5,"_79":57,"_80":172,"_81":26,"_34":190,"_40":22,"_83":148,"_85":174,"_64":48,"_87":-5,"_88":191,"_69":192},{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":82,"_40":20,"_83":84,"_85":86,"_64":48,"_87":-5,"_88":188,"_69":189},[],[70],["D",1770845804226],[],[170],["D",1770845804226],{"_11":12,"_136":132},{"_11":12,"_130":-5,"_131":132,"_104":105,"_133":134,"_135":48},{"_40":56,"_13":16,"_32":57,"_38":58,"_42":33,"_43":41,"_59":50,"_60":39,"_61":54,"_55":14,"_51":12},"ctx",{"_125":-5,"_158":230,"_231":232,"_233":234,"_235":48,"_236":48,"_237":48,"_238":26,"_239":-5,"_240":-7,"_241":-7,"_242":22,"_243":48,"_244":48,"_245":-5,"_246":48,"_247":48,"_248":48,"_249":-5},"ENV",{"_201":202,"_203":204,"_205":16,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229},"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"]

Compare

Mergejeenyuhs/mainintomewtru/main

Hmain.tsx+699-70