<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For You ❤️</title>
<style>
body {
margin: 0;
height: 100vh;
background: radial-gradient(circle at bottom, #000015 0%, #000010 100%);
overflow: hidden;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* Star animation */
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.2; }
100% { opacity: 1; }
}
/* Envelope */
.envelope {
width: 120px;
height: 80px;
background: #fff;
position: relative;
cursor: pointer;
transform: scale(1.5);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.envelope:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 40px solid #ccc;
}
.envelope:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 40px solid #ccc;
}
/* Hidden note */
.note {
display: none;
font-size: 1.8rem;
color: white;
text-align: center;
padding: 20px;
animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Floating hearts */
.heart {
position: absolute;
color: red;
font-size: 1.5rem;
animation: float 2s ease-in forwards;
}
@keyframes float {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-100px); opacity: 0; }
}
</style>
</head>
<body>
<div id="stars"></div>
<div class="envelope" id="envelope"></div>
<div class="note" id="note">I love you ❤️</div>
<script>
// Generate stars
const starContainer = document.getElementById('stars');
for (let i = 0; i < 50; i++) {
let star = document.createElement('div');
star.className = 'star';
let size = Math.random() * 2 + 1;
star.style.width = size + 'px';
star.style.height = size + 'px';
star.style.top = Math.random() * 100 + '%';
star.style.left = Math.random() * 100 + '%';
star.style.animationDuration = (Math.random() * 2 + 1) + 's';
starContainer.appendChild(star);
}
const envelope = document.getElementById('envelope');
const note = document.getElementById('note');
envelope.addEventListener('click', () => {
envelope.style.display = 'none';
note.style.display = 'block';
createHearts();
});
function createHearts() {
for (let i = 0; i < 5; i++) {
let heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '❤️';
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.top = window.innerHeight - 50 + 'px';
document.body.appendChild(heart);
setTimeout(() => {
heart.remove();
}, 2000);
}
}
</script>
</body>
</html>
