dgvt/** @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 💔", "¿Seguro mi amor? 😘", "Vamos di que sí 😍", "Solo aprieta SÍ 🥰", "Me estás rompiendo el corazón 💖", "Ya no hay besos 😢", "Ok, me rindo… 😞💜", ];
function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false); const [noPosition, setNoPosition] = useState({ top: 0, left: 0 }); const yesButtonSize = noClicks * 20 + 16;
const firstImg = "https://media.tenor.com/JbTTyqYpHRMAAAAM/cappy-capybara.gif"; const secondImg = "https://media1.giphy.com/media/dlxpKwcG3oUFlBZrAN/200w.gif";
// Mueve el botón "No" a posición aleatoria const moveNoButton = () => { const top = Math.floor(Math.random() * 200) - 100; const left = Math.floor(Math.random() * 200) - 100; setNoPosition({ top, left }); setNoClicks(noClicks + 1); };
return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", fontFamily: "Arial, sans-serif", textAlign: "center", backgroundColor: "#fff0f6", overflow: "hidden", }} >
{` @keyframes bounce { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } @keyframes glow { 0% { color: #9c27b0; text-shadow: 0 0 5px #9c27b0; } 50% { color: #ff4081; text-shadow: 0 0 20px #ff4081; } 100% { color: #9c27b0; text-shadow: 0 0 5px #9c27b0; } } `} {!isValentine ? (
<>
<img
src={firstImg}
style={{ width: "200px", animation: "bounce 1s infinite alternate" }}
/>
<h1>¿Quieres seguir siendo mi Valentine? ❤️</h1>
<div style={{ position: "relative", height: "60px" }}>
<button
onClick={() => setIsValentine(true)}
style={{
fontSize: `${yesButtonSize}px`,
margin: "10px",
padding: "10px 20px",
backgroundColor: "#4CAF50",
color: "white",
border: "none",
borderRadius: "8px",
cursor: "pointer",
transition: "all 0.2s",
}}
>
Sí 💘
</button>
<button
onMouseEnter={moveNoButton}
style={{
position: "absolute",
top: `${noPosition.top}px`,
left: `${noPosition.left}px`,
fontSize: "16px",
margin: "10px",
padding: "10px 20px",
backgroundColor: "#f44336",
color: "white",
border: "none",
borderRadius: "8px",
cursor: "pointer",
}}
>
{noClicks === 0
? "No 💔"
: NO_PHRASES[Math.min(noClicks, NO_PHRASES.length - 1)]}
</button>
</div>
</>
) : (
<>
<img
src={secondImg}
style={{ width: "200px", animation: "bounce 1s infinite alternate" }}
/>
<div
style={{
fontSize: "42px",
fontWeight: "bold",
marginTop: "20px",
animation: "glow 1s infinite alternate",
}}
>
¡SÍÍÍ! 💜<br />
Te amo mi amor 😘
</div>
</>
)}
</div>
); }
function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") client();
export default async function server(): Promise { return new Response(
<html> <head> <title>💘 Para mi esposo 💘</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </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" } }, ); }