\n {text}\n

\n \n \n );\n}\n\n// ✅ Mobile-first full-screen receipt (fits phones properly)\nfunction AppointmentScreen({ onBack }) {\n const teal = \"#0a9bb0\";\n\n return (\n \n {/* Top bar */}\n \n \n ← Back\n \n

Appointment

\n\n

\n {/* Title */}\n \n Your appointment with {APPT.salonName} is scheduled for:\n

\n\n {/* Date */}\n \n {APPT.dateLine}\n \n\n {/* Address */}\n \n {APPT.addressLine1}\n
\n {APPT.addressLine2}\n \n\n {/* Services */}\n

\n \n Services:\n

\n \n {APPT.services.map((s) => (\n

\n {s}\n

\n ))}\n \n \n\n {/* Calendar button */}\n \n Add to Apple Calendar 📅\n \n\n

\n This downloads a calendar file. On iPhone, tap it to add to Calendar.\n

\n \n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [yesClicks, setYesClicks] = useState(0);\n const [showLetter, setShowLetter] = useState(false);\n const [noPosition, setNoPosition] = useState({ top: \"60%\", left: \"55%\" });\n\n const [showConfirming, setShowConfirming] = useState(false);\n const [showAppointment, setShowAppointment] = useState(false);\n\n const yesButtonSize = noClicks * 20 + 18;\n\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n\n const moveNoButton = () => {\n const padding = 140;\n const maxX = window.innerWidth - padding;\n const maxY = window.innerHeight - padding;\n\n setNoPosition({\n left: `${Math.random() * Math.max(0, maxX)}px`,\n top: `${Math.random() * Math.max(0, maxY)}px`,\n });\n };\n\n useEffect(() => {\n moveNoButton();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n moveNoButton();\n };\n\n const handleYes = () => {\n setYesClicks((prev) => {\n const next = prev + 1;\n if (next >= 2) setShowLetter(true);\n return next;\n });\n };\n\n const handlePlans = () => {\n setShowConfirming(true);\n setTimeout(() => {\n setShowConfirming(false);\n setShowAppointment(true);\n }, 5000);\n };\n\n return (\n \n {/* Main question */}\n {!showLetter && (\n \n $\"cute$ \n

Will you be my Valentine? 💘

\n\n \n {yesClicks === 0 && \"Yes 😎\"}\n {yesClicks === 1 && \"REALLY? 🫣\"}\n \n\n \n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n \n )}\n\n {/* Letter */}\n {showLetter && !showAppointment && (\n \n \n {showConfirming && }\n\n

💌

{LOVE_LETTER}

\n\n \n Are you free Feb 14? 💘\n \n \n \n )}\n\n {/* Full-screen mobile appointment */}\n {showAppointment && (\n setShowAppointment(false)} />\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() {\n return new Response(\n `\n \n \n Valentine 💘\n \n \n \n \n

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