<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Day | My Heart for You</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #ffafbd, #ffc3a0);
color: #5a3d5c;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 30px 0;
position: relative;
}
h1 {
font-family: 'Dancing Script', cursive;
font-size: 4.5rem;
color: #d32f75;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
animation: pulse 2s infinite alternate;
}
.tagline {
font-size: 1.3rem;
font-weight: 300;
margin-bottom: 30px;
opacity: 0.9;
}
.heart-container {
position: relative;
height: 300px;
margin: 30px auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-heart {
font-size: 10rem;
color: #ff4081;
cursor: pointer;
transition: transform 0.3s;
animation: heartbeat 1.5s infinite;
z-index: 10;
position: relative;
}
.main-heart:hover {
transform: scale(1.2);
color: #d32f75;
}
.floating-hearts {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.floating-heart {
position: absolute;
font-size: 2rem;
color: #ff4081;
opacity: 0.7;
animation: float 6s linear infinite;
}
.message-box {
background-color: rgba(255, 255, 255, 0.85);
border-radius: 20px;
padding: 40px;
margin: 40px auto;
max-width: 800px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.message-box::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
animation: sparkle 20s linear infinite;
z-index: 0;
}
.message-content {
position: relative;
z-index: 1;
}
h2 {
font-family: 'Dancing Script', cursive;
font-size: 3rem;
color: #d32f75;
margin-bottom: 20px;
text-align: center;
}
.message-text {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 25px;
text-align: center;
}
.highlight {
color: #ff4081;
font-weight: 600;
}
.interactive-section {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
flex-wrap: wrap;
}
.btn {
padding: 15px 30px;
border: none;
border-radius: 50px;
font-family: 'Poppins', sans-serif;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-primary {
background: linear-gradient(to right, #ff4081, #d32f75);
color: white;
box-shadow: 0 5px 15px rgba(211, 47, 117, 0.4);
}
.btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(211, 47, 117, 0.5);
}
.btn-secondary {
background-color: white;
color: #d32f75;
border: 2px solid #d32f75;
}
.btn-secondary:hover {
background-color: #ffebf3;
transform: translateY(-5px);
}
.countdown {
text-align: center;
margin: 50px 0;
padding: 20px;
}
.countdown-title {
font-size: 1.8rem;
margin-bottom: 20px;
color: #5a3d5c;
}
.countdown-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.countdown-item {
background-color: white;
border-radius: 15px;
padding: 20px;
min-width: 100px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.countdown-number {
font-size: 2.5rem;
font-weight: 700;
color: #ff4081;
display: block;
}
.countdown-label {
font-size: 0.9rem;
color: #5a3d5c;
text-transform: uppercase;
letter-spacing: 1px;
}
footer {
text-align: center;
padding: 30px;
margin-top: 50px;
color: #5a3d5c;
font-size: 0.9rem;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.heartbeat-effect {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.heartbeat-circle {
position: absolute;
border-radius: 50%;
border: 2px solid rgba(255, 64, 129, 0.2);
animation: ripple 4s linear infinite;
}
/* Animations */
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes pulse {
0% {
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
100% {
text-shadow: 3px 3px 15px rgba(211, 47, 117, 0.5);
}
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.7;
}
90% {
opacity: 0.7;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
@keyframes sparkle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.5;
top: 50%;
left: 50%;
}
100% {
width: 200vmax;
height: 200vmax;
opacity: 0;
top: calc(50% - 100vmax);
left: calc(50% - 100vmax);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 3rem;
}
.main-heart {
font-size: 7rem;
}
.message-box {
padding: 25px;
margin: 20px auto;
}
h2 {
font-size: 2.5rem;
}
.interactive-section {
flex-direction: column;
align-items: center;
}
.btn {
width: 80%;
}
}
</style>
</head>
<body>
<!-- Background heartbeat effect -->
<div class="heartbeat-effect" id="heartbeatEffect"></div>
<div class="container">
<header>
<h1>Happy Valentine's Day</h1>
<p class="tagline">Every day with you feels like a celebration of love</p>
</header>
<div class="heart-container">
<div class="main-heart" id="mainHeart">
<i class="fas fa-heart"></i>
</div>
<div class="floating-hearts" id="floatingHearts"></div>
</div>
<div class="message-box">
<div class="message-content">
<h2>To My Dearest Love</h2>
<p class="message-text">
On this special day, I want to remind you how much you mean to me.
You are the <span class="highlight">sunshine</span> that brightens my days,
the <span class="highlight">laughter</span> that fills my heart,
and the <span class="highlight">love</span> that gives my life meaning.
</p>
<p class="message-text">
Every moment with you is a treasure, and I'm grateful for the love we share.
No matter how many Valentine's Days come and go, my love for you will only grow stronger.
</p>
<p class="message-text">
Forever and always, you have my heart.
</p>
</div>
</div>
<div class="countdown">
<h3 class="countdown-title">Countdown to Our Next Anniversary</h3>
<div class="countdown-container">
<div class="countdown-item">
<span class="countdown-number" id="days">0</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">0</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">0</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">0</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
</div>
<div class="interactive-section">
<button class="btn btn-primary" id="loveMessageBtn">
<i class="fas fa-heart"></i> Special Message
</button>
<button class="btn btn-secondary" id="playMusicBtn">
<i class="fas fa-music"></i> Play Love Song
</button>
<button class="btn btn-secondary" id="createHeartsBtn">
<i class="fas fa-plus"></i> Create Hearts
</button>
</div>
<footer>
<p>Made with <i class="fas fa-heart" style="color:#ff4081;"></i> for the most amazing person in my life</p>
<p>© Valentine's Day 2023 - Forever in love</p>
</footer>
<!-- Add audio element and controls -->
<audio id="bgMusic" loop>
<source src="../songs/OneMyChoose.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<script>
// Create floating hearts
function createFloatingHearts() {
const container = document.getElementById('floatingHearts');
const heartCount = 15;
for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.classList.add('floating-heart');
heart.innerHTML = '<i class="fas fa-heart"></i>';
// Random position and animation delay
const leftPos = Math.random() * 100;
const delay = Math.random() * 5;
const duration = 3 + Math.random() * 4;
const size = 1 + Math.random();
heart.style.left = `${leftPos}%`;
heart.style.animationDelay = `${delay}s`;
heart.style.animationDuration = `${duration}s`;
heart.style.fontSize = `${size}rem`;
// Random color variation
const hue = 330 + Math.random() * 30;
heart.style.color = `hsl(${hue}, 100%, 65%)`;
container.appendChild(heart);
}
}
// Create background heartbeat effect
function createHeartbeatEffect() {
const container = document.getElementById('heartbeatEffect');
setInterval(() => {
const circle = document.createElement('div');
circle.classList.add('heartbeat-circle');
// Random size and position variation
const size = 50 + Math.random() * 100;
const x = 20 + Math.random() * 60;
const y = 20 + Math.random() * 60;
circle.style.width = `${size}px`;
circle.style.height = `${size}px`;
circle.style.top = `${y}%`;
circle.style.left = `${x}%`;
// Random color
const hue = 330 + Math.random() * 30;
circle.style.borderColor = `hsla(${hue}, 100%, 65%, 0.3)`;
container.appendChild(circle);
// Remove after animation completes
setTimeout(() => {
circle.remove();
}, 4000);
}, 1000);
}
// Countdown timer to next Valentine's Day
function updateCountdown() {
const now = new Date();
let nextValentine = new Date(now.getFullYear(), 1, 14); // February 14
// If Valentine's Day has passed this year, set for next year
if (now > nextValentine) {
nextValentine.setFullYear(nextValentine.getFullYear() + 1);
}
const diff = nextValentine - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
// Interactive button functions
function setupInteractions() {
const mainHeart = document.getElementById('mainHeart');
const loveMessageBtn = document.getElementById('loveMessageBtn');
const playMusicBtn = document.getElementById('playMusicBtn');
const createHeartsBtn = document.getElementById('createHeartsBtn');
// Main heart click
mainHeart.addEventListener('click', function() {
this.style.animation = 'none';
this.style.transform = 'scale(1.5)';
this.style.color = '#ff1744';
setTimeout(() => {
this.style.animation = 'heartbeat 1.5s infinite';
this.style.transform = '';
this.style.color = '';
}, 500);
// Create burst of hearts
createHeartBurst();
});
// Love message button
loveMessageBtn.addEventListener('click', function() {
const messages = [
"You are the reason I believe in love at first sight.",
"My love for you grows stronger with each passing day.",
"You make my world brighter just by being in it.",
"Every love song reminds me of you.",
"I fall in love with you more every single day."
];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
alert(`💖 ${randomMessage} 💖`);
});
// Play music button
playMusicBtn.addEventListener('click', function() {
const music = document.getElementById('bgMusic');
if (music.paused) {
// Play music
music.play()
.then(() => {
this.innerHTML = '<i class="fas fa-pause"></i> Pause Love Song';
})
.catch((error) => {
console.log("Music playback failed:", error);
alert('ไม่สามารถเล่นเพลงได้ กรุณาตรวจสอบไฟล์เพลง');
});
} else {
// Pause music
music.pause();
this.innerHTML = '<i class="fas fa-music"></i> Play Love Song';
}
});
// Create hearts button
createHeartsBtn.addEventListener('click', function() {
createHeartBurst();
});
}
// Create a burst of hearts from the main heart
function createHeartBurst() {
const container = document.querySelector('.heart-container');
const mainHeart = document.getElementById('mainHeart');
const mainHeartRect = mainHeart.getBoundingClientRect();
const mainHeartCenterX = mainHeartRect.left + mainHeartRect.width / 2;
const mainHeartCenterY = mainHeartRect.top + mainHeartRect.height / 2;
for (let i = 0; i < 20; i++) {
const heart = document.createElement('div');
heart.classList.add('floating-heart');
heart.innerHTML = '<i class="fas fa-heart"></i>';
// Position at the main heart
heart.style.position = 'fixed';
heart.style.left = `${mainHeartCenterX}px`;
heart.style.top = `${mainHeartCenterY}px`;
heart.style.zIndex = '1000';
heart.style.fontSize = `${1 + Math.random()}rem`;
// Random color
const hue = 330 + Math.random() * 30;
heart.style.color = `hsl(${hue}, 100%, 65%)`;
document.body.appendChild(heart);
// Random direction and distance
const angle = Math.random() * Math.PI * 2;
const distance = 100 + Math.random() * 200;
const targetX = mainHeartCenterX + Math.cos(angle) * distance;
const targetY = mainHeartCenterY + Math.sin(angle) * distance;
// Animate
const duration = 1 + Math.random();
heart.animate([
{
transform: 'translate(0, 0) scale(1)',
opacity: 1
},
{
transform: `translate(${targetX - mainHeartCenterX}px, ${targetY - mainHeartCenterY}px) scale(0)`,
opacity: 0
}
], {
duration: duration * 1000,
easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)'
});
// Remove after animation
setTimeout(() => {
heart.remove();
}, duration * 1000);
}
}
// Initialize everything when page loads
document.addEventListener('DOMContentLoaded', function() {
createFloatingHearts();
createHeartbeatEffect();
setupInteractions();
// Update countdown every second
updateCountdown();
setInterval(updateCountdown, 1000);
// Add fade-in animation to elements
const elements = document.querySelectorAll('.message-box, .countdown, .interactive-section');
elements.forEach((el, index) => {
el.style.animation = `fadeInUp 1s ${0.5 + index * 0.2}s forwards`;
el.style.opacity = '0';
});
});
</script>
</body>
</html>