💕 A Special Message For You 💕

\n {particles.map((p, i) => (\n \n ))}\n

\n );\n}\n\nfunction StarBurst({ style }: { style: React.CSSProperties }) {\n return (\n \n ⭐\n \n );\n}\n\nfunction FloatingHeart(\n { delay, left, size, duration }: {\n delay: number;\n left: number;\n size: number;\n duration: number;\n },\n) {\n const hearts = [\n \"💕\",\n \"💖\",\n \"💗\",\n \"💓\",\n \"❤️\",\n \"💘\",\n \"🌸\",\n \"✨\",\n \"💝\",\n \"🌹\",\n \"💐\",\n \"🦋\",\n ];\n return (\n \n {hearts[Math.floor(Math.random() * hearts.length)]}\n \n );\n}\n\nfunction PhotoFrame({ src, alt }: { src: string; alt?: string }) {\n const isPlaceholder = !src || src === \"YOUR_PHOTO_URL_HERE\";\n return (\n \n {isPlaceholder\n ? (\n

\n \n 📷\n

\n Add your photo URL
in CONFIG\n

\n \n )\n : (\n \n )}\n \n \n 💫\n \n \n );\n}\n\nfunction Envelope({ onOpen, name }: { onOpen: () => void; name: string }) {\n const [isHovered, setIsHovered] = useState(false);\n const [sparkles, setSparkles] = useState<\n Array<{ id: number; x: number; y: number }>\n >([]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setSparkles((prev) => [\n ...prev.slice(-10),\n { id: Date.now(), x: Math.random() * 320, y: Math.random() * 220 },\n ]);\n }, 300);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n \n {CONFIG.envelopeText}\n

\n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n width: \"380px\",\n height: \"260px\",\n cursor: \"pointer\",\n position: \"relative\",\n transition: \"all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)\",\n transform: isHovered\n ? \"scale(1.15) rotate(-5deg) translateY(-15px)\"\n : \"scale(1)\",\n filter: isHovered\n ? \"drop-shadow(0 40px 80px rgba(0,0,0,0.5)) drop-shadow(0 0 60px rgba(255,182,193,0.8))\"\n : \"drop-shadow(0 20px 50px rgba(0,0,0,0.4))\",\n }}\n >\n {sparkles.map((s) => (\n \n ✨\n \n ))}\n \n \n \n \n 💌\n \n \n To: {name}\n \n {[...Array(6)].map((_, i) => (\n \n {[\"💕\", \"✨\", \"💖\", \"🌟\", \"💗\", \"⭐\"][i]}\n \n ))}\n \n \n ✨ Click to open ✨\n

\n \n );\n}\n\nfunction OpenCard({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n

{children}

\n \n );\n}\n\nfunction Story(\n { messages, onComplete }: {\n messages: { text: string; photo: string | null }[];\n onComplete: () => void;\n },\n) {\n const [index, setIndex] = useState(0);\n const [visible, setVisible] = useState(true);\n\n useEffect(() => {\n if (index < messages.length) {\n const hasPhoto = messages[index].photo &&\n messages[index].photo !== \"YOUR_PHOTO_URL_HERE\";\n const duration = hasPhoto ? 5000 : 3000;\n const timer = setTimeout(() => {\n setVisible(false);\n setTimeout(() => {\n if (index === messages.length - 1) onComplete();\n else {\n setIndex((i) => i + 1);\n setVisible(true);\n }\n }, 600);\n }, duration);\n return () => clearTimeout(timer);\n }\n }, [index, messages, onComplete]);\n\n const currentMessage = messages[index];\n const hasPhoto = currentMessage.photo &&\n currentMessage.photo !== \"YOUR_PHOTO_URL_HERE\";\n\n return (\n \n \n \n {hasPhoto && }\n \n {currentMessage.text}\n \n \n

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

\n \n \n );\n}\n\nfunction Question({ onYes }: { onYes: () => void }) {\n const [noClicks, setNoClicks] = useState(0);\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n const [showFireworks, setShowFireworks] = useState(false);\n\n const moveNoButton = () => {\n if (noClicks >= 2) {\n setNoPos({\n x: (Math.random() - 0.5) * 250,\n y: (Math.random() - 0.5) * 150,\n });\n }\n };\n\n const handleYes = () => {\n setShowFireworks(true);\n setTimeout(() => onYes(), 800);\n };\n\n return (\n \n

\n {showFireworks && (\n <>\n {[...Array(8)].map((_, i) => (\n \n ))}\n \n )}\n \n \n Will You Be My Valentine? 💘\n \n \n (You better say yes 😏💕)\n

\n \n 2\n ? \"linear-gradient(135deg, #6bcb77, #4CAF50, #45a049, #3d8b40)\"\n : \"linear-gradient(135deg, #6bcb77, #4CAF50)\",\n border: noClicks > 2 ? \"4px solid rgba(107,203,119,0.8)\" : \"none\",\n borderRadius: \"50px\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n transition: \"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)\",\n boxShadow: noClicks > 2\n ? \"0 0 50px rgba(107,203,119,0.9), 0 15px 40px rgba(0,0,0,0.3), inset 0 2px 20px rgba(255,255,255,0.3)\"\n : \"0 10px 30px rgba(0,0,0,0.25)\",\n fontFamily: \"'Quicksand', sans-serif\",\n animation: noClicks > 2\n ? \"pulse 0.4s infinite, borderGlow 1.5s infinite\"\n : \"none\",\n textShadow: noClicks > 2\n ? \"0 0 10px rgba(255,255,255,0.5)\"\n : \"none\",\n }}\n >\n Yes! 💖\n \n {\n setNoClicks((n) => n + 1);\n moveNoButton();\n }}\n onMouseEnter={moveNoButton}\n style={{\n padding: \"22px 50px\",\n fontSize: \"20px\",\n background: \"linear-gradient(135deg, #ff6b6b, #ee5a5a, #d64545)\",\n border: \"none\",\n borderRadius: \"50px\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n transform: `translate(${noPos.x}px, ${noPos.y}px) ${\n noClicks > 4 ? \"rotate(15deg) scale(0.8)\" : \"\"\n }`,\n transition: \"all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)\",\n opacity: noClicks > 5 ? 0.2 : noClicks > 3 ? 0.5 : 1,\n fontFamily: \"'Quicksand', sans-serif\",\n boxShadow: \"0 10px 30px rgba(0,0,0,0.25)\",\n }}\n >\n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n {noClicks > 0 && (\n \n {noClicks < 3\n ? \"Are you really sure? 🥺\"\n : noClicks < 6\n ? \"The Yes button is growing... just saying 👀\"\n : \"Okay I see how it is... 😏💕\"}\n

\n )}\n \n \n );\n}\n\nfunction Celebration() {\n const confetti = Array.from({ length: 150 }, (_, i) => ({\n id: i,\n left: Math.random() * 100,\n delay: Math.random() * 4,\n duration: 2 + Math.random() * 3,\n color: [\n \"#ff6b6b\",\n \"#ffd93d\",\n \"#6bcb77\",\n \"#4d96ff\",\n \"#ff6bd6\",\n \"#fff\",\n \"#ff9a9e\",\n \"#fbc2eb\",\n ][Math.floor(Math.random() * 8)],\n size: 6 + Math.random() * 14,\n rotation: Math.random() * 360,\n }));\n const hasPhoto = CONFIG.finalPhoto &&\n CONFIG.finalPhoto !== \"YOUR_PHOTO_URL_HERE\";\n\n return (\n \n

\n {confetti.map((c) => (\n 0.5\n ? \"50%\"\n : Math.random() > 0.5\n ? \"2px\"\n : \"0\",\n animation: `confettiFall ${c.duration}s ease-out infinite`,\n animationDelay: `${c.delay}s`,\n transform: `rotate(${c.rotation}deg)`,\n boxShadow: `0 0 10px ${c.color}`,\n }}\n />\n ))}\n {[...Array(12)].map((_, i) => (\n \n ))}\n {hasPhoto ? : (\n \n )}\n \n YAYYY!!! 🎉💖🎉\n \n \n {[\"🎊\", \"✨\", \"💕\", \"🌟\", \"💖\", \"⭐\", \"💗\", \"🎉\"].map((emoji, i) => (\n \n {emoji}\n

\n ))}\n \n \n {CONFIG.finalMessage}\n

\n \n 💑\n \n \n \n With all my love,
\n \n {CONFIG.yourName}\n {\" \"}\n 💕\n

\n \n \n {[\"💐\", \"🌹\", \"🦋\", \"💝\", \"🌸\", \"💌\"].map((emoji, i) => (\n \n {emoji}\n \n ))}\n \n \n \n 🎁 Now go to my trunk...\n

\n \n There's a surprise for you! 💝\n

\n \n \n \n );\n}\n\nfunction App() {\n const [phase, setPhase] = useState(\"envelope\");\n const hearts = Array.from({ length: 35 }, (_, i) => ({\n id: i,\n delay: i * 0.2,\n left: Math.random() * 100,\n size: 18 + Math.random() * 28,\n duration: 5 + Math.random() * 5,\n }));\n\n return (\n \n \n {hearts.map((h) => )}\n {phase === \"envelope\" && (\n setPhase(\"story\")} name={CONFIG.herName} />\n )}\n {phase === \"story\" && (\n setPhase(\"question\")}\n />\n )}\n {phase === \"question\" && (\n setPhase(\"celebration\")} />\n )}\n {phase === \"celebration\" && }\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 `💕 A Special Message For You 💕\n \n \n \n \n

\n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[127],"2acab9e2-f7b1-11f0-92bb-42dde27851f2","README.md","019be694-dec8-75a4-853d-9e28089126cd",1,["D",1769100074599],"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.",[143],"pulls","forks","envVars",{"_155":55,"_157":55},"connections",{"_155":55,"_156":55},"count","unfilledCount","emptyCount",{"_20":142,"_13":143,"_128":144,"_129":-5,"_130":21,"_131":145,"_132":51,"_22":164,"_29":55,"_135":105,"_137":147,"_139":40,"_140":-5,"_161":165,"_93":166},{"_20":126,"_13":127,"_128":49,"_129":-5,"_130":21,"_131":30,"_132":51,"_22":160,"_29":134,"_135":136,"_137":138,"_139":40,"_140":-5,"_161":162,"_93":163},["D",1769818709638],"children",[],[127],["D",1769100074599],[],[143],["D",1769100074599],{"_11":12,"_91":87},{"_11":12,"_85":-5,"_86":87,"_46":47,"_88":89,"_90":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_78":42,"_79":80,"_81":82,"_83":14,"_84":12},"ctx",{"_71":-5,"_115":204,"_205":206,"_207":208,"_209":40,"_210":40,"_211":40,"_212":51,"_213":-5,"_214":-7,"_215":-7,"_216":55,"_217":40,"_218":40,"_219":-5,"_220":40,"_221":40,"_222":40,"_223":-5},"ENV",{"_175":176,"_177":178,"_179":26,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203},"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"]

Branches1

Branches
1