<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Interactive Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.cdnfonts.com/css/segoe-ui-4" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
padding: 20px;
perspective: 1000px;
}
.card-container {
width: 300px;
height: 400px;
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 1s;
}
.card-container.opened {
transform: rotateY(-180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 20px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background: white;
overflow: hidden;
}
.card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #fff5f5 0%, #ffe9e9 100%);
}
.heart-icon {
font-size: 4rem;
color: #ff4d6d;
animation: pulse 1.5s infinite;
margin-bottom: 20px;
}
.card-text {
text-align: center;
color: #ff4d6d;
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: bold;
}
.click-hint {
font-size: 0.9rem;
color: #666;
position: absolute;
bottom: 20px;
animation: bounce 2s infinite;
}
.hearts-decoration {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.mini-heart {
position: absolute;
font-size: 1rem;
color: #ff4d6d;
opacity: 0.5;
animation: float 3s ease-in infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
/* Inside message styles */
.message-content {
text-align: center;
max-width: 100%;
transform: translateY(20px);
opacity: 0;
transition: all 0.5s ease-out;
}
.opened .card-back .message-content {
transform: translateY(0);
opacity: 1;
transition-delay: 0.5s;
}
.message-title {
font-size: 1.8rem;
color: #ff4d6d;
margin-bottom: 15px;
font-weight: bold;
}
.message-body {
font-size: 1rem;
color: #666;
line-height: 1.5;
margin-bottom: 20px;
}
.love-signature {
font-style: italic;
color: #ff4d6d;
font-size: 1.2rem;
}
/* Add some decorative elements */
.corner-decoration {
position: absolute;
width: 50px;
height: 50px;
color: #ff4d6d;
opacity: 0.3;
}
.top-left {
top: 10px;
left: 10px;
}
.top-right {
top: 10px;
right: 10px;
transform: rotate(90deg);
}
.bottom-left {
bottom: 10px;
left: 10px;
transform: rotate(-90deg);
}
.bottom-right {
bottom: 10px;
right: 10px;
transform: rotate(180deg);
}
/* Responsive adjustments */
@media (max-width: 350px) {
.card-container {
width: 260px;
height: 350px;
}
.message-title {
font-size: 1.5rem;
}
.message-body {
font-size: 0.9rem;
}
}
.audio-controls {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 10px;
}
.audio-controls button {
background: none;
border: none;
cursor: pointer;
color: #ff4d6d;
font-size: 1.5rem;
padding: 5px;
transition: transform 0.2s;
}
.audio-controls button:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="card-container" onclick="toggleCard(this)">
<div class="card-front">
<i class="fas fa-heart heart-icon"></i>
<div class="card-text">Happy Valentine's Day</div>
<div class="click-hint">Click to open ❤️</div>
<!-- Decorative corners -->
<i class="fas fa-heart corner-decoration top-left"></i>
<i class="fas fa-heart corner-decoration top-right"></i>
<i class="fas fa-heart corner-decoration bottom-left"></i>
<i class="fas fa-heart corner-decoration bottom-right"></i>
</div>
<div class="card-back">
<div class="message-content">
<h2 class="message-title">My Love</h2>
<p class="message-body">
Every moment with you is a gift I cherish deeply.
Your love makes my world brighter, and your smile
lights up my darkest days. Thank you for being
the most amazing person in my life.
</p>
<div class="love-signature">Forever Yours ❤️</div>
</div>
<!-- Floating hearts decoration -->
<div class="hearts-decoration" id="heartsContainer"></div>
</div>
</div>
<!-- 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 class="audio-controls">
<button onclick="toggleMusic()" id="musicToggle">
<i class="fas fa-volume-up"></i>
</button>
</div>
<script>
function toggleCard(card) {
card.classList.toggle('opened');
// Play music when card is opened
if (card.classList.contains('opened')) {
playMusic();
}
}
// Audio control functions
let isMusicPlaying = false;
const music = document.getElementById('bgMusic');
const musicToggle = document.getElementById('musicToggle');
function toggleMusic() {
if (isMusicPlaying) {
pauseMusic();
} else {
playMusic();
}
}
function playMusic() {
music.play()
.then(() => {
isMusicPlaying = true;
musicToggle.innerHTML = '<i class="fas fa-volume-up"></i>';
})
.catch((error) => {
console.log("Music playback failed:", error);
});
}
function pauseMusic() {
music.pause();
isMusicPlaying = false;
musicToggle.innerHTML = '<i class="fas fa-volume-mute"></i>';
}
// Create floating hearts
function createFloatingHearts() {
const container = document.getElementById('heartsContainer');
const heartCount = 15;
for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('i');
heart.classList.add('fas', 'fa-heart', 'mini-heart');
heart.style.left = Math.random() * 100 + '%';
heart.style.top = Math.random() * 100 + '%';
heart.style.animationDelay = Math.random() * 3 + 's';
container.appendChild(heart);
}
}
// Initialize floating hearts
createFloatingHearts();
</script>
</body>
</html>