Untitled

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>San Valentín 💖</title>

<style>
body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    width: 320px;
}

h1 {
    color: #e63946;
    margin-bottom: 25px;
}

button {
    padding: 12px 28px;
    font-size: 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}

#yes {
    background-color: #e63946;
    color: white;
}

#no {
    background-color: #ccc;
    position: absolute;
}

img {
    margin-top: 20px;
    width: 100%;
    border-radius: 15px;
    display: none;
}
</style>
</head>

<body>

<div class="card">
    <h1>¿Quieres ser mi San Valentín, mor? 💘</h1>
    <button id="yes">SÍ 💖</button>
    <button id="no">NO 💔</button>

    <img id="photo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQA..." />
</div>

<script>
const noBtn = document.getElementById("no");
const yesBtn = document.getElementById("yes");
const img = document.getElementById("photo");

noBtn.addEventListener("mouseover", () => {
    const x = Math.random() * (window.innerWidth - 120);
    const y = Math.random() * (window.innerHeight - 60);
    noBtn.style.left = x + "px";
    noBtn.style.top = y + "px";
});

yesBtn.addEventListener("click", () => {
    img.style.display = "block";
    yesBtn.style.display = "none";
    noBtn.style.display = "none";
});
</script>

</body>
</html>