<!DOCTYPE html>
<html>
<head>
<title>For Emaan</title>
<style>
body {
background:#f9e9ef;
overflow:hidden;
font-family:Arial;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
}
/* HEART PARTICLES */
.heart {
position: fixed;
top: -10px;
font-size: 20px;
color: #ff5c8d;
animation: fall 4s linear infinite;
}
@keyframes fall {
0% {transform: translateY(0) rotate(0deg); opacity:1;}
100% {transform: translateY(110vh) rotate(360deg); opacity:0;}
}
/* ENVELOPE */
#env {
width:300px;
height:190px;
background:#ff8aa0;
position:relative;
cursor:pointer;
transition:0.6s;
border-radius:6px;
animation: shake 1.5s infinite;
}
@keyframes shake {
0% {transform: translateX(0);}
50% {transform: translateX(-3px);}
100% {transform: translateX(0);}
}
#flap {
width:100%;
height:100%;
background:#ff6d89;
position:absolute;
top:0;
transform-origin:top;
transition:0.6s;
border-radius:6px 6px 0 0;
}
/* MESSAGE */
#msg {
display:none;
margin-top:25px;
text-align:center;
font-size:22px;
font-weight:bold;
color:#b13456;
line-height:1.5;
opacity:0;
transition:opacity 1.5s;
}
.from {
display:none;
margin-top:10px;
font-size:16px;
color:#444;
opacity:0;
transition:opacity 1.5s;
}
/* TAP TO OPEN GLOW */
#tap {
margin-bottom:20px;
font-size:18px;
color:#ff4c73;
font-weight:bold;
animation: glow 1s infinite alternate;
}
@keyframes glow {
from {opacity:0.3;}
to {opacity:1;}
}
</style>
</head>
<body>
<div id="tap">Tap to Open 💌</div>
<div id="env" onclick="openEnv()">
<div id="flap"></div>
</div>
<div id="msg">
💗 Emaan, meri choti si bacha… meri princess…<br>
I’m sorry 😭❤️ 💗
</div>
<div class="from">— Yaram</div>
<script>
// SONG
let audio = new Audio("https://dl.prokerala.com/downloads/ringtones/files/mp3/acha-chalo-jane-do-bhootnath-23434.mp3");
function openEnv(){
document.getElementById("flap").style.transform = "rotateX(-180deg)";
document.getElementById("msg").style.display="block";
document.querySelector(".from").style.display="block";
audio.play();
setTimeout(()=>{
document.getElementById("msg").style.opacity=1;
document.querySelector(".from").style.opacity=1;
},400);
document.getElementById("tap").style.display="none";
document.getElementById("env").style.animation="none";
}
// HEART PARTICLES
setInterval(()=>{
let heart = document.createElement("div");
heart.className="heart";
heart.innerHTML="❤️";
heart.style.left = Math.random()*100 + "vw";
heart.style.animationDuration = (3 + Math.random()*2) + "s";
document.body.appendChild(heart);
setTimeout(()=>heart.remove(),5000);
},300);
</script>
</body>
</html>