<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gửi Đến Người Tôi Yêu</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ffebee 0%, #ffffff 100%);
color: #333;
text-align: center;
transition: background 2s;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: #e91e63;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.heart {
color: #e91e63;
font-size: 5rem;
animation: pulse 1.5s infinite;
cursor: pointer;
user-select: none;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.message {
background-color: white;
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: none;
opacity: 0;
transition: opacity 2s;
}
.buttons {
margin: 2rem 0;
}
.btn {
display: inline-block;
padding: 0.8rem 1.5rem;
margin: 0 0.5rem;
border-radius: 30px;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
cursor: pointer;
transition: all 0.3s;
}
.btn-yes {
background-color: #e91e63;
color: white;
border: 2px solid #e91e63;
}
.btn-yes:hover {
background-color: #c2185b;
border-color: #c2185b;
transform: scale(1.05);
}
.btn-no {
background-color: white;
color: #e91e63;
border: 2px solid #e91e63;
position: relative;
}
.btn-no:hover {
background-color: #ffebee;
}
.photos {
display: flex;
justify-content: center;
margin: 2rem 0;
display: none;
}
.cat-image {
max-width: 300px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.response {
display: none;
margin-top: 2rem;
}
#confetti-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
pointer-events: none;
}
.music-control {
position: fixed;
bottom: 20px;
right: 20px;
background-color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<canvas id="confetti-canvas" class="hidden"></canvas>
<div class="container">
<h1 id="title">Hi Mèo!</h1>
<div class="heart" id="heart">🐱</div>
<div class="message" id="love-message">
<p>Mai là một ngày đẹp trời 🌈 Em có bận việc gì không? Nếu không thì 4h chiều mai a qua đón đi chỗ này hay lắm :></p>
</div>
<div class="buttons" id="buttons" style="display: none;">
<button class="btn btn-yes" id="btn-yes">Đồng Ý</button>
<button class="btn btn-no" id="btn-no">Không</button>
</div>
<div class="photos" id="photos">
<img src="/api/placeholder/300/300" alt="Mèo trắng với hoa tulip vàng" class="cat-image">
</div>
<div class="response" id="yes-response">
<h2>Tuyệt vời!</h2>
<p>See u soon</p>
</div>
</div>
<div class="music-control" id="music-control">♫</div>
<audio id="background-music" loop>
<source src="" type="audio/mpeg">
</audio>
<script>
// Tạo hiệu ứng confetti
function createConfetti() {
const canvas = document.getElementById('confetti-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.classList.remove('hidden');
const ctx = canvas.getContext('2d');
const pieces = [];
const numberOfPieces = 200;
const colors = ['#e91e63', '#ff4081', '#f8bbd0', '#f06292', '#ec407a'];
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
for (let i = 0; i < numberOfPieces; i++) {
pieces.push({
x: Math.random() * canvas.width, // x-coordinate
y: Math.random() * -canvas.height, // y-coordinate
rotation: Math.random() * 360, // rotation in degrees
size: randomFromTo(7, 15),
speed: randomFromTo(1, 5),
color: colors[Math.floor(Math.random() * colors.length)],
shape: Math.random() > 0.5 ? 'circle' : 'rect',
});
}
function drawConfetti() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pieces.forEach((piece, index) => {
ctx.beginPath();
ctx.fillStyle = piece.color;
if (piece.shape === 'circle') {
ctx.arc(piece.x, piece.y, piece.size, 0, Math.PI * 2, false);
} else {
ctx.save();
ctx.translate(piece.x + piece.size / 2, piece.y + piece.size / 2);
ctx.rotate(piece.rotation * Math.PI / 180);
ctx.rect(-piece.size / 2, -piece.size / 2, piece.size, piece.size);
ctx.restore();
}
ctx.fill();
// Cập nhật vị trí
piece.y += piece.speed;
piece.rotation += 1;
// Nếu đã rơi xuống dưới cùng, đặt lại vị trí lên trên cùng
if (piece.y > canvas.height) {
piece.y = -piece.size;
piece.x = Math.random() * canvas.width;
}
});
requestAnimationFrame(drawConfetti);
}
drawConfetti();
}
// Xử lý sự kiện khi chạm vào trái tim
document.getElementById('heart').addEventListener('click', function() {
const message = document.getElementById('love-message');
message.style.display = 'block';
setTimeout(() => {
message.style.opacity = '1';
}, 100);
setTimeout(() => {
document.getElementById('buttons').style.display = 'block';
}, 2000);
document.getElementById('photos').style.display = 'flex';
});
// Xử lý sự kiện khi nhấn nút "Đồng Ý"
document.getElementById('btn-yes').addEventListener('click', function() {
document.getElementById('yes-response').style.display = 'block';
document.body.style.background = 'linear-gradient(135deg, #ffe6f0 0%, #ffffff 100%)';
createConfetti();
// Phát nhạc
const music = document.getElementById('background-music');
music.play();
});
// Xử lý sự kiện khi di chuột vào nút "Không"
document.getElementById('btn-no').addEventListener('mouseover', function(e) {
// Di chuyển nút "Không" đến vị trí ngẫu nhiên
const x = Math.random() * (window.innerWidth - 100);
const y = Math.random() * (window.innerHeight - 100);
this.style.position = 'absolute';
this.style.left = `${x}px`;
this.style.top = `${y}px`;
});
// Xử lý nút điều khiển nhạc
document.getElementById('music-control').addEventListener('click', function() {
const music = document.getElementById('background-music');
if (music.paused) {
music.play();
this.textContent = '♫';
} else {
music.pause();
this.textContent = '♪';
}
});
</script>
</body>
</html>