@jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0";
const NO_PHRASES = [ "No 💔", "Pretty please? 🥺", "One more chance my rib", "But we'd be so cute together! 💕", "What about a maybe?", "Don't do this to me, I'll cry ooo", ];
function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false); const yesButtonSize = (noClicks * 20) + 16;
const firstImg = "https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif"; const secondImg = "https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif";
const handleNo = () => { setNoClicks(prev => prev + 1); };
const handleYes = () => { setIsValentine(true); };
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100vh",
fontFamily: "Arial, sans-serif",
textAlign: "center",
padding: "20px",
boxSizing: "border-box",
}}
>
{!isValentine ? (
<>
<img
src={firstImg}
alt="Cute bear with hearts"
style={{ maxWidth: "80%", height: "auto", marginBottom: "20px" }}
/>
<h1 style={{
fontSize: "clamp(1.8rem, 5vw, 3.5rem)",
margin: "0 0 30px 0",
lineHeight: 1.3
}}>
Favour, I want to be your valentine this year and every year till the last one.
I want my name to be the only one you call valentine 💘
${yesButtonSize}px,
margin: "15px",
padding: "15px 30px",
backgroundColor: "green",
color: "white",
border: "none",
borderRadius: "8px",
cursor: "pointer",
touchAction: "manipulation",
minWidth: "120px",
}}
>
Yes
<button
onClick={handleNo}
style={{
fontSize: "18px",
margin: "15px",
padding: "12px 25px",
backgroundColor: "red",
color: "white",
border: "none",
borderRadius: "8px",
cursor: "pointer",
touchAction: "manipulation",
minWidth: "120px",
}}
>
{noClicks === 0
? "No"
: NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}
function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise {
return new Response(
<html> <head> <title>Valentine's Day Invitation for Favour</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to bottom, #fff0f5, #ffe4e1); } img { max-width: 100%; height: auto; } </style> </head> <body> <div id="root"></div> <script src="https://esm.town/v/std/catch"></script> <script type="module" src="${import.meta.url}"></script> </body> </html> ,
{
headers: { "content-type": "text/html" },
},
);
}