itzvargas
README.md

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" } }, ); }