Error code
ERRW:SS1.0
Were you logged in?
No
Your username (if logged in)
No response
Your HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap" rel="stylesheet">
<div id="confetti-wrapper"></div>
<div class="birthday-card">
<div class="star float-animation" style="top: 4%; left: 8%;">✦</div>
<div class="star float-animation" style="top: 15%; right: 5%; animation-delay: 1.5s;">✦</div>
<div class="star float-animation" style="bottom: 5%; left: 14%; animation-delay: 0.8s;">✦</div>
<div class="star float-animation" style="bottom: 28%; right: 9%; animation-delay: 2.2s;">✦</div>
<div class="spiral spin-animation" style="top: 32%; left: 4%;">
<svg width="35" height="35" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<div class="spiral spin-animation" style="bottom: 15%; left: 5%;">
<svg width="30" height="30" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<div class="spiral spin-animation" style="top: 48%; right: 4%; animation-delay: 3s;">
<svg width="32" height="32" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<h1>happy birthday, my sweet baby!</h1>
<button onclick="revealSecret()">tap for your surprise <span class="btn-heart">♥</span></button>
<div id="secret-message" style="display:none;">
<p>⋆˚꩜｡ happy 18th birthday, my sweet baby. i can't believe you're all grown up. feels like it was yesterday that we were new to this, but anyways, i hope your birthday this year is filled with joy. truth be told, i have no idea what to write in this card. it's probably because i can't quite put my thoughts into words. it sure feels bizarre to have been in a relationship this long—it kind of rattles me—but nonetheless, i'm glad we're still together. i genuinely can't think about the future without you. man, i don't want to be corny, but it's the truthhhh. like, i tried to think about what would happen if we broke up, but LIKE LEGIT, MY IMAGINATION JUST WENT BLANK. i can't imagine my life without your presence. anywayssss, i know that i don't always show my gratitude for everything you've done for me, so i'm taking the initiative to say it here. thank you, my love, for being there for me. even though i'm complicated and sometimes frustrating to deal with, you've never given up on me because of that. i deeply apologize and feel bad because sometimes i push you away and never tell you what's going on. i'll try not to keep anything from you. it's going to be hard, but i'll try. also, thank you for always treating meee to food and taking such good care of me. i really appreciate itttt. no words can describe how grateful i am to have you in my life. i hope you know that you're a lovable person. loving you is like breathing the summer air—refreshing and warm. i know some days you doubt it, but don't let those thoughts make you question your worth. i hope this year treats you kindly and brings you closer to every dream you've been working so hard for. i'll be cheering you on through every little win and every rough day, just like you've always done for me—and just so y'know, i will always be proud of your achievements, no matter if they're small or big. i'll always be so freaking proud of you. i don't know what the future has in store for us, but i do hope that we'll still be together in each other's lives, because it'll be less tiring for me to have you in my life. andddd, welcome to adulthood, my love. i hope eighteen brings you countless reasons to smile, opportunities that make you proud of yourself, and memories we'll look back on years from now. happy birthday once again. i love you more than words could ever hold, and i'm sorry if i can never express it in the way you feel loved, but i really do love and cherish our relationship. ⊹ ࣪ ˖</p>
<div class="cake-wrapper">
<div class="candle-row">
<div class="candle-item">
<div class="candle-flame"></div>
<div class="candle-stick"></div>
</div>
<div class="candle-item">
<div class="candle-flame" style="animation-delay: 0.2s;"></div>
<div class="candle-stick"></div>
</div>
<div class="candle-item">
<div class="candle-flame" style="animation-delay: 0.4s;"></div>
<div class="candle-stick"></div>
</div>
</div>
<div class="cake-frosting"></div>
<div class="cake-base"></div>
<div class="cake-dish"></div>
</div>
</div>
</div>
<script>
function revealSecret() {
document.getElementById('secret-message').style.display = 'block';
const wrapper = document.getElementById('confetti-wrapper');
wrapper.innerHTML = '';
const customPalette = [
'#ffb3b3', // Pastel Red
'#ffd1b3', // Soft Orange
'#fff0b3', // Pale Yellow
'#d1ffb3', // Sage Green
'#b3d1ff', // Light Blue
'#3e5c76', // Muted Navy Blue
'#e0b3ff' // Dusty Purple
];
for (let i = 0; i < 75; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti-piece';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = customPalette[Math.floor(Math.random() * customPalette.length)];
confetti.style.width = (Math.random() * 7 + 5) + 'px';
confetti.style.height = (Math.random() * 11 + 5) + 'px';
confetti.style.animationDuration = (Math.random() * 2 + 1.5) + 's';
confetti.style.animationDelay = (Math.random() * 0.3) + 's';
wrapper.appendChild(confetti);
}
}
</script>
<style>
body {
background-color: #0d0000;
background-image: linear-gradient(45deg, #2a0202 25%, transparent 25%, transparent 75%, #2a0202 75%, #2a0202),
linear-gradient(45deg, #2a0202 25%, #0d0000 25%, #0d0000 75%, #2a0202 75%, #2a0202);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
font-family: 'Dancing Script', cursive;
color: #ffffff;
text-align: center;
padding: 60px 20px;
overflow-x: hidden;
position: relative;
}
.birthday-card {
background-color: #121212;
background-image: linear-gradient(rgba(255, 51, 51, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 51, 51, 0.15) 1px, transparent 1px);
background-size: 25px 25px;
padding: 95px 30px;
border-radius: 20px;
border: 2px solid #ff3333;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
max-width: 90%;
margin: 0 auto;
position: relative;
z-index: 10;
}
h1 {
font-size: 32px;
color: #ff3333;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* --- WHITE SCATTERED ELEMENTS --- */
.star {
position: absolute;
color: #ffffff;
font-size: 26px;
z-index: 20;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.spiral {
position: absolute;
z-index: 20;
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(10deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.float-animation {
animation: float 3.5s ease-in-out infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-animation {
animation: spin 6s linear infinite;
}
/* --- BUTTON & SURPRISE STYLES --- */
button {
background: #ff3333;
color: #ffffff;
border: none;
padding: 12px 28px;
font-size: 18px;
font-family: 'Dancing Script', cursive;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 51, 51, 0.4);
position: relative;
z-index: 30;
}
.btn-heart {
color: #ffffff;
display: inline-block;
margin-left: 5px;
}
#secret-message {
margin-top: 25px;
font-size: 26px;
color: #ffffff;
}
/* --- Confetti Layer --- */
#confetti-wrapper {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 999; overflow: hidden;
}
.confetti-piece {
position: absolute; top: -20px; border-radius: 2px;
animation: fall linear forwards;
}
@keyframes fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg) translateX(25px); opacity: 0; }
}
/* --- CLEAN AESTHETIC CAKE SYSTEM --- */
.cake-wrapper {
position: relative;
width: 140px;
margin: 35px auto 10px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.candle-row {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: -1px;
z-index: 6;
}
.candle-item {
display: flex;
flex-direction: column;
align-items: center;
}
/* White candle sticks with a very light, soft subtle red tint overlay */
.candle-stick {
width: 5px;
height: 20px;
background: linear-gradient(180deg, #fff0f0 0%, #ffe3e3 100%);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.candle-flame {
width: 8px;
height: 12px;
background: radial-gradient(circle at bottom, #ffcc00 40%, #ff6600 90%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
animation: flickerSmooth 0.4s infinite alternate ease-in-out;
}
@keyframes flickerSmooth {
0% { transform: scale(1) rotate(-3deg); opacity: 0.9; }
100% { transform: scale(1.15) rotate(4deg); opacity: 1; box-shadow: 0 0 8px #ffcc00; }
}
/* White Frosting Layer */
.cake-frosting {
width: 110px;
height: 18px;
background: #ffffff;
border-radius: 8px 8px 0 0;
position: relative;
z-index: 5;
}
/* Soft Brown Cake Color Base */
.cake-base {
width: 110px;
height: 36px;
background: #c29470;
border-radius: 0 0 6px 6px;
position: relative;
z-index: 4;
margin-top: -2px;
}
.cake-dish {
width: 136px;
height: 6px;
background: #2a2a2a;
border-radius: 3px;
margin-top: 2px;
z-index: 3;
}
</style>Your JavaScript
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap" rel="stylesheet">
<div id="confetti-wrapper"></div>
<div class="birthday-card">
<div class="star float-animation" style="top: 4%; left: 8%;">✦</div>
<div class="star float-animation" style="top: 15%; right: 5%; animation-delay: 1.5s;">✦</div>
<div class="star float-animation" style="bottom: 5%; left: 14%; animation-delay: 0.8s;">✦</div>
<div class="star float-animation" style="bottom: 28%; right: 9%; animation-delay: 2.2s;">✦</div>
<div class="spiral spin-animation" style="top: 32%; left: 4%;">
<svg width="35" height="35" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<div class="spiral spin-animation" style="bottom: 15%; left: 5%;">
<svg width="30" height="30" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<div class="spiral spin-animation" style="top: 48%; right: 4%; animation-delay: 3s;">
<svg width="32" height="32" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<h1>happy birthday, my sweet baby!</h1>
<button onclick="revealSecret()">tap for your surprise <span class="btn-heart">♥</span></button>
<div id="secret-message" style="display:none;">
<p>⋆˚꩜｡ happy 18th birthday, my sweet baby. i can't believe you're all grown up. feels like it was yesterday that we were new to this, but anyways, i hope your birthday this year is filled with joy. truth be told, i have no idea what to write in this card. it's probably because i can't quite put my thoughts into words. it sure feels bizarre to have been in a relationship this long—it kind of rattles me—but nonetheless, i'm glad we're still together. i genuinely can't think about the future without you. man, i don't want to be corny, but it's the truthhhh. like, i tried to think about what would happen if we broke up, but LIKE LEGIT, MY IMAGINATION JUST WENT BLANK. i can't imagine my life without your presence. anywayssss, i know that i don't always show my gratitude for everything you've done for me, so i'm taking the initiative to say it here. thank you, my love, for being there for me. even though i'm complicated and sometimes frustrating to deal with, you've never given up on me because of that. i deeply apologize and feel bad because sometimes i push you away and never tell you what's going on. i'll try not to keep anything from you. it's going to be hard, but i'll try. also, thank you for always treating meee to food and taking such good care of me. i really appreciate itttt. no words can describe how grateful i am to have you in my life. i hope you know that you're a lovable person. loving you is like breathing the summer air—refreshing and warm. i know some days you doubt it, but don't let those thoughts make you question your worth. i hope this year treats you kindly and brings you closer to every dream you've been working so hard for. i'll be cheering you on through every little win and every rough day, just like you've always done for me—and just so y'know, i will always be proud of your achievements, no matter if they're small or big. i'll always be so freaking proud of you. i don't know what the future has in store for us, but i do hope that we'll still be together in each other's lives, because it'll be less tiring for me to have you in my life. andddd, welcome to adulthood, my love. i hope eighteen brings you countless reasons to smile, opportunities that make you proud of yourself, and memories we'll look back on years from now. happy birthday once again. i love you more than words could ever hold, and i'm sorry if i can never express it in the way you feel loved, but i really do love and cherish our relationship. ⊹ ࣪ ˖</p>
<div class="cake-wrapper">
<div class="candle-row">
<div class="candle-item">
<div class="candle-flame"></div>
<div class="candle-stick"></div>
</div>
<div class="candle-item">
<div class="candle-flame" style="animation-delay: 0.2s;"></div>
<div class="candle-stick"></div>
</div>
<div class="candle-item">
<div class="candle-flame" style="animation-delay: 0.4s;"></div>
<div class="candle-stick"></div>
</div>
</div>
<div class="cake-frosting"></div>
<div class="cake-base"></div>
<div class="cake-dish"></div>
</div>
</div>
</div>
<script>
function revealSecret() {
document.getElementById('secret-message').style.display = 'block';
const wrapper = document.getElementById('confetti-wrapper');
wrapper.innerHTML = '';
const customPalette = [
'#ffb3b3', // Pastel Red
'#ffd1b3', // Soft Orange
'#fff0b3', // Pale Yellow
'#d1ffb3', // Sage Green
'#b3d1ff', // Light Blue
'#3e5c76', // Muted Navy Blue
'#e0b3ff' // Dusty Purple
];
for (let i = 0; i < 75; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti-piece';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = customPalette[Math.floor(Math.random() * customPalette.length)];
confetti.style.width = (Math.random() * 7 + 5) + 'px';
confetti.style.height = (Math.random() * 11 + 5) + 'px';
confetti.style.animationDuration = (Math.random() * 2 + 1.5) + 's';
confetti.style.animationDelay = (Math.random() * 0.3) + 's';
wrapper.appendChild(confetti);
}
}
</script>
<style>
body {
background-color: #0d0000;
background-image: linear-gradient(45deg, #2a0202 25%, transparent 25%, transparent 75%, #2a0202 75%, #2a0202),
linear-gradient(45deg, #2a0202 25%, #0d0000 25%, #0d0000 75%, #2a0202 75%, #2a0202);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
font-family: 'Dancing Script', cursive;
color: #ffffff;
text-align: center;
padding: 60px 20px;
overflow-x: hidden;
position: relative;
}
.birthday-card {
background-color: #121212;
background-image: linear-gradient(rgba(255, 51, 51, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 51, 51, 0.15) 1px, transparent 1px);
background-size: 25px 25px;
padding: 95px 30px;
border-radius: 20px;
border: 2px solid #ff3333;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
max-width: 90%;
margin: 0 auto;
position: relative;
z-index: 10;
}
h1 {
font-size: 32px;
color: #ff3333;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* --- WHITE SCATTERED ELEMENTS --- */
.star {
position: absolute;
color: #ffffff;
font-size: 26px;
z-index: 20;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.spiral {
position: absolute;
z-index: 20;
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(10deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.float-animation {
animation: float 3.5s ease-in-out infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-animation {
animation: spin 6s linear infinite;
}
/* --- BUTTON & SURPRISE STYLES --- */
button {
background: #ff3333;
color: #ffffff;
border: none;
padding: 12px 28px;
font-size: 18px;
font-family: 'Dancing Script', cursive;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 51, 51, 0.4);
position: relative;
z-index: 30;
}
.btn-heart {
color: #ffffff;
display: inline-block;
margin-left: 5px;
}
#secret-message {
margin-top: 25px;
font-size: 26px;
color: #ffffff;
}
/* --- Confetti Layer --- */
#confetti-wrapper {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 999; overflow: hidden;
}
.confetti-piece {
position: absolute; top: -20px; border-radius: 2px;
animation: fall linear forwards;
}
@keyframes fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg) translateX(25px); opacity: 0; }
}
/* --- CLEAN AESTHETIC CAKE SYSTEM --- */
.cake-wrapper {
position: relative;
width: 140px;
margin: 35px auto 10px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.candle-row {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: -1px;
z-index: 6;
}
.candle-item {
display: flex;
flex-direction: column;
align-items: center;
}
/* White candle sticks with a very light, soft subtle red tint overlay */
.candle-stick {
width: 5px;
height: 20px;
background: linear-gradient(180deg, #fff0f0 0%, #ffe3e3 100%);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.candle-flame {
width: 8px;
height: 12px;
background: radial-gradient(circle at bottom, #ffcc00 40%, #ff6600 90%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
animation: flickerSmooth 0.4s infinite alternate ease-in-out;
}
@keyframes flickerSmooth {
0% { transform: scale(1) rotate(-3deg); opacity: 0.9; }
100% { transform: scale(1.15) rotate(4deg); opacity: 1; box-shadow: 0 0 8px #ffcc00; }
}
/* White Frosting Layer */
.cake-frosting {
width: 110px;
height: 18px;
background: #ffffff;
border-radius: 8px 8px 0 0;
position: relative;
z-index: 5;
}
/* Soft Brown Cake Color Base */
.cake-base {
width: 110px;
height: 36px;
background: #c29470;
border-radius: 0 0 6px 6px;
position: relative;
z-index: 4;
margin-top: -2px;
}
.cake-dish {
width: 136px;
height: 6px;
background: #2a2a2a;
border-radius: 3px;
margin-top: 2px;
z-index: 3;
}
</style>Your CSS
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap" rel="stylesheet">
<div id="confetti-wrapper"></div>
<div class="birthday-card">
<div class="star float-animation" style="top: 4%; left: 8%;">✦</div>
<div class="star float-animation" style="top: 15%; right: 5%; animation-delay: 1.5s;">✦</div>
<div class="star float-animation" style="bottom: 5%; left: 14%; animation-delay: 0.8s;">✦</div>
<div class="star float-animation" style="bottom: 28%; right: 9%; animation-delay: 2.2s;">✦</div>
<div class="spiral spin-animation" style="top: 32%; left: 4%;">
<svg width="35" height="35" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<div class="spiral spin-animation" style="bottom: 15%; left: 5%;">
<svg width="30" height="30" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<div class="spiral spin-animation" style="top: 48%; right: 4%; animation-delay: 3s;">
<svg width="32" height="32" viewBox="0 0 100 100">
<path d="M50,50 C60,40 60,60 50,70 C30,80 30,40 50,30 C80,20 80,80 50,90 C10,100 0,20 50,10" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round"/>
</svg>
</div>
<h1>happy birthday, my sweet baby!</h1>
<button onclick="revealSecret()">tap for your surprise <span class="btn-heart">♥</span></button>
<div id="secret-message" style="display:none;">
<p>⋆˚꩜｡ happy 18th birthday, my sweet baby. i can't believe you're all grown up. feels like it was yesterday that we were new to this, but anyways, i hope your birthday this year is filled with joy. truth be told, i have no idea what to write in this card. it's probably because i can't quite put my thoughts into words. it sure feels bizarre to have been in a relationship this long—it kind of rattles me—but nonetheless, i'm glad we're still together. i genuinely can't think about the future without you. man, i don't want to be corny, but it's the truthhhh. like, i tried to think about what would happen if we broke up, but LIKE LEGIT, MY IMAGINATION JUST WENT BLANK. i can't imagine my life without your presence. anywayssss, i know that i don't always show my gratitude for everything you've done for me, so i'm taking the initiative to say it here. thank you, my love, for being there for me. even though i'm complicated and sometimes frustrating to deal with, you've never given up on me because of that. i deeply apologize and feel bad because sometimes i push you away and never tell you what's going on. i'll try not to keep anything from you. it's going to be hard, but i'll try. also, thank you for always treating meee to food and taking such good care of me. i really appreciate itttt. no words can describe how grateful i am to have you in my life. i hope you know that you're a lovable person. loving you is like breathing the summer air—refreshing and warm. i know some days you doubt it, but don't let those thoughts make you question your worth. i hope this year treats you kindly and brings you closer to every dream you've been working so hard for. i'll be cheering you on through every little win and every rough day, just like you've always done for me—and just so y'know, i will always be proud of your achievements, no matter if they're small or big. i'll always be so freaking proud of you. i don't know what the future has in store for us, but i do hope that we'll still be together in each other's lives, because it'll be less tiring for me to have you in my life. andddd, welcome to adulthood, my love. i hope eighteen brings you countless reasons to smile, opportunities that make you proud of yourself, and memories we'll look back on years from now. happy birthday once again. i love you more than words could ever hold, and i'm sorry if i can never express it in the way you feel loved, but i really do love and cherish our relationship. ⊹ ࣪ ˖</p>
<div class="cake-wrapper">
<div class="candle-row">
<div class="candle-item">
<div class="candle-flame"></div>
<div class="candle-stick"></div>
</div>
<div class="candle-item">
<div class="candle-flame" style="animation-delay: 0.2s;"></div>
<div class="candle-stick"></div>
</div>
<div class="candle-item">
<div class="candle-flame" style="animation-delay: 0.4s;"></div>
<div class="candle-stick"></div>
</div>
</div>
<div class="cake-frosting"></div>
<div class="cake-base"></div>
<div class="cake-dish"></div>
</div>
</div>
</div>
<script>
function revealSecret() {
document.getElementById('secret-message').style.display = 'block';
const wrapper = document.getElementById('confetti-wrapper');
wrapper.innerHTML = '';
const customPalette = [
'#ffb3b3', // Pastel Red
'#ffd1b3', // Soft Orange
'#fff0b3', // Pale Yellow
'#d1ffb3', // Sage Green
'#b3d1ff', // Light Blue
'#3e5c76', // Muted Navy Blue
'#e0b3ff' // Dusty Purple
];
for (let i = 0; i < 75; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti-piece';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = customPalette[Math.floor(Math.random() * customPalette.length)];
confetti.style.width = (Math.random() * 7 + 5) + 'px';
confetti.style.height = (Math.random() * 11 + 5) + 'px';
confetti.style.animationDuration = (Math.random() * 2 + 1.5) + 's';
confetti.style.animationDelay = (Math.random() * 0.3) + 's';
wrapper.appendChild(confetti);
}
}
</script>
<style>
body {
background-color: #0d0000;
background-image: linear-gradient(45deg, #2a0202 25%, transparent 25%, transparent 75%, #2a0202 75%, #2a0202),
linear-gradient(45deg, #2a0202 25%, #0d0000 25%, #0d0000 75%, #2a0202 75%, #2a0202);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
font-family: 'Dancing Script', cursive;
color: #ffffff;
text-align: center;
padding: 60px 20px;
overflow-x: hidden;
position: relative;
}
.birthday-card {
background-color: #121212;
background-image: linear-gradient(rgba(255, 51, 51, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 51, 51, 0.15) 1px, transparent 1px);
background-size: 25px 25px;
padding: 95px 30px;
border-radius: 20px;
border: 2px solid #ff3333;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
max-width: 90%;
margin: 0 auto;
position: relative;
z-index: 10;
}
h1 {
font-size: 32px;
color: #ff3333;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* --- WHITE SCATTERED ELEMENTS --- */
.star {
position: absolute;
color: #ffffff;
font-size: 26px;
z-index: 20;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.spiral {
position: absolute;
z-index: 20;
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(10deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.float-animation {
animation: float 3.5s ease-in-out infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-animation {
animation: spin 6s linear infinite;
}
/* --- BUTTON & SURPRISE STYLES --- */
button {
background: #ff3333;
color: #ffffff;
border: none;
padding: 12px 28px;
font-size: 18px;
font-family: 'Dancing Script', cursive;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 51, 51, 0.4);
position: relative;
z-index: 30;
}
.btn-heart {
color: #ffffff;
display: inline-block;
margin-left: 5px;
}
#secret-message {
margin-top: 25px;
font-size: 26px;
color: #ffffff;
}
/* --- Confetti Layer --- */
#confetti-wrapper {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 999; overflow: hidden;
}
.confetti-piece {
position: absolute; top: -20px; border-radius: 2px;
animation: fall linear forwards;
}
@keyframes fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg) translateX(25px); opacity: 0; }
}
/* --- CLEAN AESTHETIC CAKE SYSTEM --- */
.cake-wrapper {
position: relative;
width: 140px;
margin: 35px auto 10px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.candle-row {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: -1px;
z-index: 6;
}
.candle-item {
display: flex;
flex-direction: column;
align-items: center;
}
/* White candle sticks with a very light, soft subtle red tint overlay */
.candle-stick {
width: 5px;
height: 20px;
background: linear-gradient(180deg, #fff0f0 0%, #ffe3e3 100%);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.candle-flame {
width: 8px;
height: 12px;
background: radial-gradient(circle at bottom, #ffcc00 40%, #ff6600 90%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
animation: flickerSmooth 0.4s infinite alternate ease-in-out;
}
@keyframes flickerSmooth {
0% { transform: scale(1) rotate(-3deg); opacity: 0.9; }
100% { transform: scale(1.15) rotate(4deg); opacity: 1; box-shadow: 0 0 8px #ffcc00; }
}
/* White Frosting Layer */
.cake-frosting {
width: 110px;
height: 18px;
background: #ffffff;
border-radius: 8px 8px 0 0;
position: relative;
z-index: 5;
}
/* Soft Brown Cake Color Base */
.cake-base {
width: 110px;
height: 36px;
background: #c29470;
border-radius: 0 0 6px 6px;
position: relative;
z-index: 4;
margin-top: -2px;
}
.cake-dish {
width: 136px;
height: 6px;
background: #2a2a2a;
border-radius: 3px;
margin-top: 2px;
z-index: 3;
}
</style>
Error code
ERRW:SS1.0
Were you logged in?
No
Your username (if logged in)
No response
Your HTML
Your JavaScript
Your CSS