|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Interactive Greeting</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.greeting-card { |
|
|
position: relative; |
|
|
width: 90%; |
|
|
max-width: 500px; |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
|
|
padding: 40px; |
|
|
text-align: center; |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 0.5s; |
|
|
overflow: hidden; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.greeting-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); |
|
|
transform: rotate(45deg); |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.greeting-card:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
color: #444; |
|
|
margin-bottom: 20px; |
|
|
font-weight: 700; |
|
|
font-size: 2.2rem; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
p { |
|
|
color: #666; |
|
|
line-height: 1.6; |
|
|
margin-bottom: 30px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 12px 30px; |
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
border-radius: 30px; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); |
|
|
transition: all 0.3s; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
.bubbles { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: -1; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.bubble { |
|
|
position: absolute; |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
border-radius: 50%; |
|
|
animation: float 15s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { |
|
|
transform: translateY(0) rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-1000px) rotate(720deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.emoji-container { |
|
|
font-size: 3rem; |
|
|
margin: 20px 0; |
|
|
height: 80px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.emoji { |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); |
|
|
} |
|
|
|
|
|
.hidden { |
|
|
opacity: 0; |
|
|
transform: translateX(-50%) scale(0.5); |
|
|
} |
|
|
|
|
|
.stars { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.star { |
|
|
position: absolute; |
|
|
background: white; |
|
|
width: 3px; |
|
|
height: 3px; |
|
|
border-radius: 50%; |
|
|
animation: twinkle 4s infinite; |
|
|
} |
|
|
|
|
|
@keyframes twinkle { |
|
|
0% { opacity: 0.2; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.2; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="greeting-card" id="card"> |
|
|
<div class="bubbles"></div> |
|
|
<div class="stars"></div> |
|
|
<div class="card-content"> |
|
|
<div class="emoji-container"> |
|
|
<div class="emoji" id="hello-emoji">👋</div> |
|
|
<div class="emoji hidden" id="smile-emoji">😊</div> |
|
|
<div class="emoji hidden" id="heart-emoji">❤️</div> |
|
|
</div> |
|
|
<h1 id="greeting-text">Hello!</h1> |
|
|
<p id="message-text">Thanks for stopping by! Click me to see some magic happen.</p> |
|
|
<button class="btn" id="action-btn">Surprise Me!</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const card = document.getElementById('card'); |
|
|
const greetingText = document.getElementById('greeting-text'); |
|
|
const messageText = document.getElementById('message-text'); |
|
|
const actionBtn = document.getElementById('action-btn'); |
|
|
const helloEmoji = document.getElementById('hello-emoji'); |
|
|
const smileEmoji = document.getElementById('smile-emoji'); |
|
|
const heartEmoji = document.getElementById('heart-emoji'); |
|
|
const bubblesContainer = document.querySelector('.bubbles'); |
|
|
const starsContainer = document.querySelector('.stars'); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 20; i++) { |
|
|
createBubble(); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i < 50; i++) { |
|
|
createStar(); |
|
|
} |
|
|
|
|
|
|
|
|
let state = 0; |
|
|
const messages = [ |
|
|
{ greeting: "Hello!", message: "Thanks for stopping by! Click me to see some magic happen.", emoji: "👋" }, |
|
|
{ greeting: "Have a wonderful day!", message: "I hope your day is filled with joy and happiness.", emoji: "😊" }, |
|
|
{ greeting: "You're awesome!", message: "Just wanted to remind you how amazing you are!", emoji: "❤️" }, |
|
|
{ greeting: "Hello again!", message: "The magic continues! Click the button for another surprise.", emoji: "✨" } |
|
|
]; |
|
|
|
|
|
|
|
|
card.addEventListener('click', function() { |
|
|
state = (state + 1) % 4; |
|
|
updateCard(); |
|
|
animateCard(); |
|
|
}); |
|
|
|
|
|
|
|
|
actionBtn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
createConfetti(); |
|
|
}); |
|
|
|
|
|
function updateCard() { |
|
|
const currentMessage = messages[state]; |
|
|
greetingText.textContent = currentMessage.greeting; |
|
|
messageText.textContent = currentMessage.message; |
|
|
|
|
|
|
|
|
[helloEmoji, smileEmoji, heartEmoji].forEach(emoji => { |
|
|
emoji.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
switch(state) { |
|
|
case 0: |
|
|
helloEmoji.classList.remove('hidden'); |
|
|
break; |
|
|
case 1: |
|
|
smileEmoji.classList.remove('hidden'); |
|
|
break; |
|
|
case 2: |
|
|
heartEmoji.classList.remove('hidden'); |
|
|
break; |
|
|
case 3: |
|
|
|
|
|
[helloEmoji, smileEmoji, heartEmoji].forEach((emoji, index) => { |
|
|
setTimeout(() => { |
|
|
emoji.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
emoji.classList.add('hidden'); |
|
|
}, 500); |
|
|
}, index * 300); |
|
|
}); |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
function animateCard() { |
|
|
card.style.transform = 'rotateY(10deg)'; |
|
|
setTimeout(() => { |
|
|
card.style.transform = 'rotateY(-10deg)'; |
|
|
setTimeout(() => { |
|
|
card.style.transform = 'rotateY(0)'; |
|
|
}, 150); |
|
|
}, 150); |
|
|
} |
|
|
|
|
|
function createBubble() { |
|
|
const bubble = document.createElement('div'); |
|
|
bubble.classList.add('bubble'); |
|
|
|
|
|
const size = Math.random() * 40 + 10; |
|
|
const posX = Math.random() * 100; |
|
|
const delay = Math.random() * 15; |
|
|
const duration = Math.random() * 10 + 10; |
|
|
|
|
|
bubble.style.width = `${size}px`; |
|
|
bubble.style.height = `${size}px`; |
|
|
bubble.style.left = `${posX}%`; |
|
|
bubble.style.bottom = `-${size}px`; |
|
|
bubble.style.animationDuration = `${duration}s`; |
|
|
bubble.style.animationDelay = `${delay}s`; |
|
|
|
|
|
bubblesContainer.appendChild(bubble); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
bubble.remove(); |
|
|
createBubble(); |
|
|
}, (duration + delay) * 1000); |
|
|
} |
|
|
|
|
|
function createStar() { |
|
|
const star = document.createElement('div'); |
|
|
star.classList.add('star'); |
|
|
|
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100; |
|
|
const delay = Math.random() * 4; |
|
|
const size = Math.random() * 2 + 1; |
|
|
|
|
|
star.style.left = `${posX}%`; |
|
|
star.style.top = `${posY}%`; |
|
|
star.style.width = `${size}px`; |
|
|
star.style.height = `${size}px`; |
|
|
star.style.animationDelay = `${delay}s`; |
|
|
|
|
|
starsContainer.appendChild(star); |
|
|
} |
|
|
|
|
|
function createConfetti() { |
|
|
|
|
|
const existingConfetti = document.querySelectorAll('.confetti'); |
|
|
existingConfetti.forEach(el => el.remove()); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 50; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.classList.add('confetti'); |
|
|
|
|
|
|
|
|
const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1', '#f368e0']; |
|
|
const color = colors[Math.floor(Math.random() * colors.length)]; |
|
|
const size = Math.random() * 10 + 5; |
|
|
const posX = Math.random() * 100; |
|
|
const rotation = Math.random() * 360; |
|
|
const animationDuration = Math.random() * 3 + 2; |
|
|
|
|
|
|
|
|
confetti.style.position = 'absolute'; |
|
|
confetti.style.width = `${size}px`; |
|
|
confetti.style.height = `${size}px`; |
|
|
confetti.style.backgroundColor = color; |
|
|
confetti.style.left = `${posX}%`; |
|
|
confetti.style.top = '20%'; |
|
|
confetti.style.borderRadius = '50%'; |
|
|
confetti.style.transform = `rotate(${rotation}deg)`; |
|
|
confetti.style.zIndex = '10'; |
|
|
|
|
|
|
|
|
confetti.style.animation = `confetti-fall ${animationDuration}s forwards`; |
|
|
|
|
|
card.appendChild(confetti); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
}, animationDuration * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = ` |
|
|
@keyframes confetti-fall { |
|
|
0% { |
|
|
transform: translateY(0) rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(300px) rotate(720deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
state = (state + 1) % 4; |
|
|
updateCard(); |
|
|
animateCard(); |
|
|
}, 8000); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
