💘 Will You Be My Valentine? 💘

\n \n 💝\n

\n \n Welcome! 🌟\n \n \n Before we begin this magical journey... who do I have the pleasure\n of talking to?\n

\n \n \n setNameInput(e.target.value)}\n placeholder=\"Enter your name...\"\n style={{\n fontSize: \"clamp(1rem, 3vw, 1.2rem)\",\n padding: \"15px 25px\",\n borderRadius: \"15px\",\n border: \"none\",\n width: \"100%\",\n maxWidth: \"400px\",\n textAlign: \"center\",\n boxShadow: \"0 8px 20px rgba(0,0,0,0.2)\",\n outline: \"none\",\n }}\n autoFocus\n />\n e.target.style.transform = \"scale(0.95)\"}\n onMouseUp={(e) => e.target.style.transform = \"scale(1)\"}\n onTouchStart={(e) => e.target.style.transform = \"scale(0.95)\"}\n onTouchEnd={(e) => e.target.style.transform = \"scale(1)\"}\n >\n Continue ✨\n \n \n \n )}\n\n {/* QUESTION PAGE */}\n {page === \"question\" && (\n \n \n \n {userName}, will you be my Valentine? 💘\n \n\n {noClicks > 3 && (\n \n The Yes button is getting bigger... just saying 👀\n

\n )}\n\n {noClicks > 5 && (\n \n 🎁 Say yes and I'll let you pick where we go!\n

\n )}\n\n {noClicks > 10 && (\n \n ⚠️ WARNING: Clicking \"No\" may result in extreme sadness! 😢\n

\n )}\n\n \n e.target.style.transform = `scale(1.1)`}\n onMouseLeave={(e) => e.target.style.transform = `scale(1)`}\n onTouchStart={(e) => e.target.style.transform = `scale(1.1)`}\n onTouchEnd={(e) => e.target.style.transform = `scale(1)`}\n >\n YES! 🎉\n \n {\n if (noClicks >= 7) {\n const maxX = window.innerWidth - 200;\n const maxY = window.innerHeight - 200;\n setNoButtonPos({\n x: Math.random() * maxX - maxX / 2,\n y: Math.random() * maxY - maxY / 2,\n });\n }\n }}\n style={{\n fontSize: \"clamp(0.9rem, 3vw, 16px)\",\n margin: \"10px\",\n padding: \"10px 20px\",\n backgroundColor: \"#ff4444\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"15px\",\n cursor: \"pointer\",\n boxShadow: \"0 4px 10px rgba(255,68,68,0.4)\",\n transition: \"all 0.3s ease\",\n fontWeight: \"bold\",\n transform: `translate(${noButtonPos.x}px, ${noButtonPos.y}px)`,\n touchAction: \"manipulation\",\n }}\n >\n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n \n\n \n No clicks: {noClicks} 💔\n \n \n )}\n\n {/* SUCCESS PAGE WITH INTERACTIVE FEATURES */}\n {page === \"success\" && (\n \n \n \n YAAAAY!!! 💖🎉✨\n \n \n I knew you'd say yes, {userName}! 😊🥰\n

\n\n {!submitted\n ? (\n \n {/* Mood Selector */}\n

\n \n How are you feeling? 😊\n

\n \n {MOODS.map((m, i) => (\n {\n setMood(m.label);\n playSound(330 + i * 50, 0.1);\n }}\n style={{\n padding: \"10px 15px\",\n fontSize: \"clamp(0.9rem, 2.5vw, 1.1rem)\",\n backgroundColor: mood === m.label\n ? \"#00ff88\"\n : \"rgba(255,255,255,0.2)\",\n color: \"white\",\n border: mood === m.label\n ? \"3px solid white\"\n : \"2px solid rgba(255,255,255,0.3)\",\n borderRadius: \"12px\",\n cursor: \"pointer\",\n transition: \"all 0.2s\",\n fontWeight: mood === m.label ? \"bold\" : \"normal\",\n }}\n >\n {m.emoji} {m.label}\n \n ))}\n

\n \n\n {/* Date Idea Picker */}\n

\n \n Pick our first date! 🎯\n

\n \n {DATE_IDEAS.map((idea, i) => (\n {\n setDateIdea(idea.label);\n playSound(400 + i * 30, 0.15);\n }}\n style={{\n padding: \"15px 10px\",\n fontSize: \"clamp(0.85rem, 2vw, 1rem)\",\n backgroundColor: dateIdea === idea.label\n ? \"#ff69b4\"\n : \"rgba(255,255,255,0.2)\",\n color: \"white\",\n border: dateIdea === idea.label\n ? \"3px solid white\"\n : \"2px solid rgba(255,255,255,0.3)\",\n borderRadius: \"12px\",\n cursor: \"pointer\",\n transition: \"all 0.2s\",\n fontWeight: dateIdea === idea.label\n ? \"bold\"\n : \"normal\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"5px\",\n }}\n >\n

\n {idea.emoji}\n

{idea.label}

\n \n ))}\n

\n \n\n {/* Sticker Picker */}\n

\n \n Add some stickers! ✨ ({selectedStickers.length} selected)\n

\n \n {STICKERS.map((sticker, i) => (\n toggleSticker(sticker)}\n style={{\n fontSize: \"clamp(1.5rem, 5vw, 2rem)\",\n padding: \"10px\",\n backgroundColor: selectedStickers.includes(sticker)\n ? \"rgba(0,255,136,0.3)\"\n : \"rgba(255,255,255,0.1)\",\n border: selectedStickers.includes(sticker)\n ? \"3px solid #00ff88\"\n : \"2px solid rgba(255,255,255,0.2)\",\n borderRadius: \"12px\",\n cursor: \"pointer\",\n transition: \"all 0.2s\",\n transform: selectedStickers.includes(sticker)\n ? \"scale(1.1)\"\n : \"scale(1)\",\n }}\n >\n {sticker}\n \n ))}\n

\n \n\n {/* Message Box */}\n

\n \n Leave me a sweet message! 💌\n

\n \n setMessage(e.target.value)}\n placeholder=\"Write your message here... 💕\"\n style={{\n fontSize: \"clamp(0.95rem, 2.5vw, 1.1rem)\",\n padding: \"15px\",\n borderRadius: \"15px\",\n border: \"none\",\n width: \"100%\",\n maxWidth: \"500px\",\n minHeight: \"120px\",\n resize: \"vertical\",\n boxShadow: \"0 8px 20px rgba(0,0,0,0.2)\",\n outline: \"none\",\n fontFamily: \"inherit\",\n }}\n />\n {selectedStickers.length > 0 && (\n

\n {selectedStickers.join(\" \")}\n

\n )}\n \n Send Message 💕\n \n \n

\n \n )\n : (\n

✉️

\n \n Message sent! 💝\n

\n \n Thank you, {userName}! 🥰\n

\n {mood && (\n \n Your mood: {mood}\n

\n )}\n {dateIdea && (\n \n Date idea: {dateIdea} 🎉\n

\n )}\n

\n )}\n \n )}\n\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n if (new URL(request.url).pathname === \"/api/track\") {\n try {\n const data = await request.json();\n console.log(\"📊 Tracking Data:\", JSON.stringify(data, null, 2));\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (e) {\n return new Response(JSON.stringify({ success: false }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n 💘 Will You Be My Valentine? 💘\n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[105],"permalink","https://www.val.town/x/mrgray/valentine/code/main.tsx","extension","actionData","errors"]