/** @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 OUR_ALBUM = "https://imgur.com/a/8sS3uYP"; const BABY_ALBUM = "https://imgur.com/a/vPMpMiH";

const NO_PHRASES = [ "Please, my King 🥺", "Our love is real 💕", "Our baby believes in us 🤍", "I choose you always 👑", "Forever is us ✨", ];

function AlbumFrame({ src }) { return ( <iframe src={${src}/embed} style={{ width: "300px", height: "300px", borderRadius: "22px", border: "none", boxShadow: "0 10px 25px rgba(0,0,0,0.25)", marginBottom: "20px", }} allowFullScreen /> ); }

function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false); const yesButtonSize = noClicks * 20 + 18;

return ( <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", background: "linear-gradient(135deg, #ffd6e8, #fff1f7)", fontFamily: "Arial, sans-serif", padding: "24px", }} > {!isValentine ? ( <>

      <h1 style={{ color: "#c2185b" }}>
        My King 👑  
        <br />
        Will you be my Valentine?
      </h1>

      <p style={{ fontSize: "18px", maxWidth: "420px" }}>
        You are a good man.  
        <br />
        My safe place.  
        <br />
        The one I choose to build a family with 🤍
      </p>

      <div>
        <button
          onClick={() => setIsValentine(true)}
          style={{
            fontSize: `${yesButtonSize}px`,
            padding: "12px 32px",
            margin: "10px",
            backgroundColor: "#2e7d32",
            color: "white",
            border: "none",
            borderRadius: "30px",
            cursor: "pointer",
          }}
        >
          YES 💖
        </button>

        <button
          onClick={() => setNoClicks(noClicks + 1)}
          style={{
            fontSize: "16px",
            padding: "10px 24px",
            margin: "10px",
            backgroundColor: "#c62828",
            color: "white",
            border: "none",
            borderRadius: "30px",
            cursor: "pointer",
          }}
        >
          {noClicks === 0
            ? "No"
            : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}
        </button>
      </div>
    </>
  ) : (
    <>
      <AlbumFrame src={BABY_ALBUM} />

      <h1 style={{ fontSize: "40px", color: "#d81b60" }}>
        I choose you. Always. 💍
      </h1>

      <p style={{ fontSize: "20px", maxWidth: "460px" }}>
        You are my King 👑  
        <br />
        The love of my life  
        <br />
        And the father of our precious child 🤍👶
      </p>

      <p
        style={{
          marginTop: "20px",
          fontStyle: "italic",
          fontSize: "22px",
          color: "#8e0038",
        }}
      >
        Forever — you, me, and our child 🤍👶👑
      </p>

      <p style={{ marginTop: "10px", fontSize: "18px" }}>
        In every lifetime, I choose you.
      </p>
    </>
  )}
</div>

); }

function client() { createRoot(document.getElementById("root")).render(); }

if (typeof document !== "undefined") client();

export default async function server() { return new Response( <html> <head> <title>Forever 🤍👑</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <div id="root"></div> <script type="module" src="${import.meta.url}"></script> </body> </html>, { headers: { "content-type": "text/html" } } ); }

angi

valentine