<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quà Nhỏ Tặng Em 💖</title>
<style>
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(135deg, #ffd6e8, #ffeef5);
font-family: 'Poppins', sans-serif;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
}
h1 {
font-size: 2em;
color: #ff4081;
text-shadow: 0 0 15px #ffc0cb, 0 0 30px #ff69b4;
margin-top: 40px;
animation: floatTitle 6s ease-in-out infinite alternate;
z-index: 2;
text-align: center;
padding: 0 10px;
transition: opacity 0.5s;
}
@keyframes floatTitle {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
}
.card-container {
position: relative;
width: 80vw;
max-width: 320px;
aspect-ratio: 7/5;
perspective: 1000px;
z-index: 3;
margin-top: 20px;
animation: floatCard 4s ease-in-out infinite alternate;
}
@keyframes floatCard {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
.card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
cursor: pointer;
}
.card.open {
transform: rotateY(180deg);
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.front {
background: #fff0f5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.back {
background: url('https://cdn.pixabay.com/photo/2017/02/01/22/02/heart-2032145_960_720.png') center/cover no-repeat;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
}
.heart-btn {
width: 60px;
height: 60px;
background: #ff5c8d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255,92,141,0.5);
transition: 0.3s;
}
.heart-btn:hover {
transform: scale(1.1) rotate(-5deg);
}
.heart-btn::before {
content: "❤";
color: white;
font-size: 28px;
}
.chuc {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 320px;
max-height: 60vh;
background: rgba(255,255,255,0.95);
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(255,105,180,0.4);
text-align: center;
color: #ff4081;
font-size: 0.95em;
line-height: 1.5em;
overflow-y: auto;
opacity: 0;
transition: opacity 0.8s ease;
z-index: 4;
pointer-events: none;
}
/* Sao và tim bay */
.star-small, .heart-float {
position: absolute;
border-radius: 50%;
opacity: 0.7;
animation: floatUp linear infinite;
z-index: 1;
}
@keyframes floatUp {
0% { transform: translateY(0) scale(0.3); opacity: 0.5; }
50% { opacity: 1; }
100% { transform: translateY(-200px) scale(0.3); opacity: 0; }
}
.star-large {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, #ffc0db, #ff1493);
opacity: 0.4;
z-index: 1;
animation: starBlink 4s infinite alternate;
}
@keyframes starBlink {
0% { opacity: 0.2; transform: scale(0.5); }
50% { opacity: 0.6; transform: scale(1); }
100% { opacity: 0.3; transform: scale(0.7); }
}
audio { display: none; }
</style>
</head>
<body>
<h1 id="title">Quà Nhỏ Tặng Em 💖</h1>
<div class="card-container">
<div class="card" id="loveCard">
<div class="front">
<div class="heart-btn" id="openBtn"></div>
</div>
<div class="back"></div>
</div>
</div>
<div class="chuc" id="chucText">
Em là điều dịu dàng nhất anh từng có,
như nắng mai ghé qua lòng anh mỗi sáng.
Cảm ơn em đã đến để anh học cách yêu thương nhẹ nhàng hơn.
Có thể khoảng cách khiến ta xa,
nhưng anh tin tim mình vẫn cùng một nhịp.
Mỗi khi nhìn lên bầu trời, anh lại nhớ –
nơi ấy có người khiến anh mỉm cười chỉ vì nghĩ đến.
Anh gửi gió thay lời ca, gửi mây gửi nắng về nhà em yêu.
Dẫu xa chẳng thể sánh chiều, tim anh vẫn ở – nơi em, thật gần. 💕
</div>
<audio id="bgMusic" loop>
<source src="https://cdn.pixabay.com/download/audio/2022/09/22/audio_63e52e1a7b.mp3?filename=lover-acoustic-118742.mp3" type="audio/mpeg">
</audio>
<script>
const card = document.getElementById('loveCard');
const openBtn = document.getElementById('openBtn');
const chucText = document.getElementById('chucText');
const music = document.getElementById('bgMusic');
const cardFront = card.querySelector('.front');
const title = document.getElementById('title');
openBtn.addEventListener('click', () => {
// Lật thiệp
card.classList.add('open');
music.play().catch(()=>{});
// Ẩn h1 "Quà Nhỏ Tặng Em 💖"
title.style.display = 'none';
// Hiển thị câu chúc
chucText.style.opacity = 1;
// Ẩn front thiệp
cardFront.style.display = 'none';
// Tạo tim + sao bay xung quanh lâu — 1 phút
const interval = setInterval(() => {
createHeart();
createStarSmall();
}, 100);
setTimeout(()=> clearInterval(interval), 60000); // 60s = 1 phút
});
function createStarSmall() {
const star = document.createElement('div');
star.classList.add('star-small');
star.style.background = `radial-gradient(circle, #ff${Math.floor(Math.random()*99+50)}d8, #ff69b4)`;
const size = Math.random() * 5 + 2;
star.style.width = size + 'px';
star.style.height = size + 'px';
star.style.left = Math.random() * window.innerWidth + 'px';
star.style.top = window.innerHeight + 'px';
star.style.animationDuration = (4 + Math.random() * 4) + 's';
document.body.appendChild(star);
setTimeout(()=> star.remove(), 8000);
}
function createHeart() {
const heart = document.createElement('div');
heart.classList.add('heart-float');
heart.style.background = 'radial-gradient(circle, #ff5c8d, #ff1493)';
const size = Math.random() * 12 + 8;
heart.style.width = size + 'px';
heart.style.height = size + 'px';
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.top = window.innerHeight + 'px';
heart.style.borderRadius = '50%';
heart.style.opacity = 0.7;
heart.style.animationDuration = (4 + Math.random()*4)+'s';
document.body.appendChild(heart);
setTimeout(()=> heart.remove(), 8000);
}
// Ngôi sao lớn nhấp nháy
for(let i=0; i<12; i++){
const star = document.createElement('div');
star.classList.add('star-large');
const size = Math.random()*8 + 6;
star.style.width = size + 'px';
star.style.height = size + 'px';
star.style.left = Math.random() * window.innerWidth + 'px';
star.style.top = Math.random() * window.innerHeight + 'px';
star.style.animationDuration = (3 + Math.random()*3)+'s';
document.body.appendChild(star);
}
</script>
</body>
</html>