File size: 13,270 Bytes
8834308 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 |
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生日快乐 璐儿</title>
<script src="https://cdn.tailwindcss.com"></script>
<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=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap');
body {
font-family: 'ZCOOL QingKe HuangYou', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
overflow-x: hidden;
}
.title-font {
font-family: 'Ma Shan Zheng', cursive;
}
.heart {
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1.5s infinite;
}
.heart:before, .heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #ff6b6b;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
opacity: 0;
}
.photo-frame {
border: 15px solid #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transform: rotate(-5deg);
transition: all 0.3s ease;
}
.photo-frame:hover {
transform: rotate(0deg) scale(1.05);
}
.message-box {
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.message-box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.typing {
overflow: hidden;
white-space: nowrap;
animation: typing 3.5s steps(40, end);
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.fade-in {
animation: fadeIn 2s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.glow {
text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<!-- Background Elements -->
<div id="confetti-container" class="fixed inset-0 pointer-events-none z-0"></div>
<!-- Main Content -->
<div class="z-10 w-full max-w-4xl text-center">
<!-- Header with Animation -->
<div class="mb-8 fade-in">
<div class="heart mx-auto mb-4"></div>
<h1 class="text-5xl md:text-6xl font-bold text-pink-600 title-font glow">
生日快乐 <span class="text-red-500">璐儿</span>!
</h1>
<p class="text-xl mt-2 text-gray-600">龚晨送给最爱的你的特别祝福</p>
</div>
<!-- Photo Section -->
<div class="my-8 flex justify-center fade-in">
<div class="photo-frame bg-white p-2">
<div class="w-64 h-64 bg-pink-200 flex items-center justify-center text-4xl">
<i class="fas fa-heart text-red-500"></i>
</div>
</div>
</div>
<!-- Main Message -->
<div class="message-box p-6 my-6 fade-in">
<h2 class="text-3xl font-bold text-pink-600 mb-4">致我最爱的璐儿:</h2>
<div class="text-lg text-gray-700 leading-relaxed text-left">
<p class="mb-4 typing">在这个特别的日子里，我想告诉你，遇见你是我生命中最美好的奇迹。</p>
<p class="mb-4">每一天因为有你而变得不同，你的笑容是我前进的动力，你的温柔是我心灵的港湾。</p>
<p class="mb-4">今天是你出生的日子，愿所有的幸福、快乐、美好都围绕着你，就像我永远会围绕在你身边一样，希望宝贝的之后的论文也能中中中。</p>
<p class="text-2xl font-bold text-red-500">我承诺会爱你一生一世，直到永远，永远不会丢下我的宝贝。</p>
</div>
</div>
<!-- Memories Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-8 fade-in">
<div class="bg-white rounded-lg p-4 shadow-lg transform transition hover:scale-105">
<div class="text-4xl text-pink-500 mb-2"><i class="fas fa-heartbeat"></i></div>
<h3 class="font-bold text-lg">我们的心跳</h3>
<p class="text-sm">从相遇那一刻起，我们的心跳就同步了</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-lg transform transition hover:scale-105">
<div class="text-4xl text-pink-500 mb-2"><i class="fas fa-laugh-beam"></i></div>
<h3 class="font-bold text-lg">快乐时光</h3>
<p class="text-sm">和你在一起的每一秒都充满欢笑</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-lg transform transition hover:scale-105">
<div class="text-4xl text-pink-500 mb-2"><i class="fas fa-hand-holding-heart"></i></div>
<h3 class="font-bold text-lg">永恒承诺</h3>
<p class="text-sm">我会一直牵着你的手，直到永远</p>
</div>
</div>
<!-- Countdown Timer -->
<div class="my-8 p-6 bg-gradient-to-r from-pink-400 to-pink-600 rounded-xl text-white fade-in">
<h3 class="text-2xl font-bold mb-4">我们已经相爱</h3>
<div class="flex justify-center space-x-4">
<div class="text-center">
<div class="text-3xl font-bold" id="days">0</div>
<div class="text-sm">天</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold" id="hours">0</div>
<div class="text-sm">小时</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold" id="minutes">0</div>
<div class="text-sm">分钟</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold" id="seconds">0</div>
<div class="text-sm">秒</div>
</div>
</div>
</div>
<!-- Final Message -->
<div class="my-8 p-6 bg-white rounded-xl shadow-lg fade-in">
<h3 class="text-2xl font-bold text-pink-600 mb-4">亲爱的璐儿</h3>
<p class="text-lg mb-4">愿你的生日充满惊喜和快乐，就像你每天带给我的惊喜一样。</p>
<p class="text-lg mb-4">愿你的笑容永远灿烂，愿你的每一天都如今天般特别。</p>
<p class="text-2xl font-bold text-red-500">我会用一生的时间去爱你、珍惜你、守护你。</p>
</div>
<!-- Floating Hearts -->
<div class="fixed bottom-0 left-0 w-full flex justify-center space-x-4 pointer-events-none z-0">
<div class="text-4xl text-pink-400 opacity-50 floating" style="animation-delay: 0s;"><i class="fas fa-heart"></i></div>
<div class="text-4xl text-red-400 opacity-50 floating" style="animation-delay: 0.5s;"><i class="fas fa-heart"></i></div>
<div class="text-4xl text-pink-300 opacity-50 floating" style="animation-delay: 1s;"><i class="fas fa-heart"></i></div>
</div>
</div>
<script>
// Confetti Effect
function createConfetti() {
const colors = ['#ff0000', '#ff69b4', '#ff1493', '#ff00ff', '#ff6347'];
const container = document.getElementById('confetti-container');
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.width = Math.random() * 10 + 5 + 'px';
confetti.style.height = Math.random() * 10 + 5 + 'px';
confetti.style.opacity = Math.random() * 0.5 + 0.5;
container.appendChild(confetti);
const animationDuration = Math.random() * 3 + 2;
confetti.animate([
{ transform: 'translateY(0) rotate(0deg)', opacity: 1 },
{ transform: `translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
], {
duration: animationDuration * 1000,
easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)',
delay: Math.random() * 2000
});
setTimeout(() => {
confetti.remove();
}, animationDuration * 1000);
}
}
// Countdown Timer (since a specific date)
function updateCountdown() {
// Replace this with your actual anniversary date
const anniversaryDate = new Date('2023-05-05');
const now = new Date();
const diff = now - anniversaryDate;
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;
document.getElementById('hours').textContent = hours;
document.getElementById('minutes').textContent = minutes;
document.getElementById('seconds').textContent = seconds;
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
// Start confetti every 3 seconds
createConfetti();
setInterval(createConfetti, 3000);
// Update countdown every second
updateCountdown();
setInterval(updateCountdown, 1000);
// Add click effect
document.addEventListener('click', (e) => {
const heart = document.createElement('div');
heart.className = 'text-2xl text-red-500 absolute pointer-events-none';
heart.innerHTML = '<i class="fas fa-heart"></i>';
heart.style.left = e.clientX + 'px';
heart.style.top = e.clientY + 'px';
document.body.appendChild(heart);
heart.animate([
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(3)', opacity: 0 }
], {
duration: 1000,
easing: 'ease-out'
});
setTimeout(() => {
heart.remove();
}, 1000);
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=zqh11/loveluer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html> |