<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Happy Birthday ❤️</title>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.container {
  width: 92%;
  max-width: 430px;
  min-height: 650px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  border-radius: 30px;
  padding: 35px 22px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  color: white;
}

h1 {
  font-size: 38px;
  margin-top: 35px;
  text-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.name {
  font-size: 28px;
  margin: 15px 0;
  font-weight: bold;
}

.cake {
  font-size: 110px;
  margin: 35px 0 20px;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  50% {
    transform: translateY(-15px);
  }
}

button {
  border: 0;
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 17px;
  font-weight: bold;
  background: white;
  color: #d94f87;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
}

.message {
  display: none;
  margin-top: 25px;
  line-height: 1.7;
  font-size: 17px;
}

.heart {
  position: fixed;
  bottom: -30px;
  animation: float 5s linear forwards;
  font-size: 25px;
}

@keyframes float {
  to {
    transform: translateY(-110vh) rotate(360deg);
    opacity: 0;
  }
}

.photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
  margin-top: 20px;
  display: none;
}
</style>
</head>

<body>

<div class="container">

  <div style="font-size:45px;">🎈🎁🎈</div>

  <h1>Happy Birthday ❤️</h1>

  <div class="name">My Favorite Person</div>

  <div class="cake">🎂</div>

  <button onclick="showWish()">
    🎂 Tap the Cake 🎂
  </button>

  <img id="photo" class="photo" src="YOUR_PHOTO.jpg">

  <div id="message" class="message">

    <h2>💖 A Special Wish For You 💖</h2>

    <p>
      On this special day, I wish you
      endless happiness, beautiful moments,
      and everything your heart desires. 🌸
    </p>

    <br>

    <p>
      May all your dreams come true,
      and may your life always be filled
      with love, laughter, and joy. ✨
    </p>

    <br>

    <h2>Happy Birthday! 🥳🎂❤️</h2>

  </div>

</div>

<script>

function showWish() {

  document.getElementById("message").style.display = "block";

  document.getElementById("photo").style.display = "block";

  for (let i = 0; i < 25; i++) {

    setTimeout(function() {

      let heart = document.createElement("div");

      heart.className = "heart";

      heart.innerHTML =
        ["❤️","💖","💕","🌸","✨"]
        [Math.floor(Math.random() * 5)];

      heart.style.left = Math.random() * 100 + "vw";

      heart.style.animationDuration =
        (3 + Math.random() * 4) + "s";

      document.body.appendChild(heart);

      setTimeout(() => {
        heart.remove();
      }, 7000);

    }, i * 150);

  }

}

</script>

</body>
</html>