/** @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? π₯Ί", "But we'd be so cute together! π", "One more chance, pookie?", "Don't break my heart :(", "What about a maybe?", "Please don't do this to me, I'm fragile", "I have your pics", "If you smile or laugh you owe me 2k", "Guess what you didn't notice the grammatical error", "Go and reply my snap wereyπ", "Why are you still pressing the no, i have heard you", "You're still adamant on that no bah?", "You'll die single", "Lol, if you got to this then you definitely have a problem with me", "Oya dey go", "MΓ‘a lα» ", "Je vais ", "Bye pookie", "Oya rate my work, send it to my DM", ];
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",
}}
>
{!isValentine
? (
<>
${yesButtonSize}px,
margin: "10px",
padding: "10px 20px",
backgroundColor: "green",
color: "white",
border: "none",
borderRadius: "5px",
cursor: "pointer",
}}
>
Yes
<button
onClick={handleNo}
style={{
fontSize: "16px",
margin: "10px",
padding: "10px 20px",
backgroundColor: "red",
color: "white",
border: "none",
borderRadius: "5px",
cursor: "pointer",
}}
>
{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</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, sans-serif; } </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" },
},
);
}