Gift Box Surprise

body { margin: 0; padding: 20px; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #1a0033; /* Dark purple background */ color: #e0b0ff; /* Light purple text */ text-align: center; overflow: hidden; /* Prevent confetti overflow from causing scrollbars */ } .container { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; /* Needed for absolute positioning of box/cake */ z-index: 1; /* Ensure content is above confetti */ } /* Gift Box Styles */ .box { width: 120px; height: 120px; position: relative; cursor: pointer; transition: opacity 0.5s ease, transform 0.5s ease; } .box-body { width: 100%; height: 100%; background-color: #8a2be2; /* Medium purple box */ border: 4px solid #6a0dad; /* Darker purple border */ box-sizing: border-box; position: absolute; } .box-ribbon-v, .box-ribbon-h { position: absolute; background-color: #e0b0ff; /* Light purple ribbon */ } .box-ribbon-v { width: 20px; height: 100%; left: 50%; transform: translateX(-50%); } .box-ribbon-h { width: 100%; height: 20px; top: 50%; transform: translateY(-50%); } .box-bow { width: 40px; height: 40px; background-color: #e0b0ff; /* Light purple bow */ border-radius: 50%; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; /* Ensure bow is on top */ } .box-bow::before, .box-bow::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: #e0b0ff; border-radius: 50%; } .box-bow::before { left: -10px; top: 10px; } .box-bow::after { right: -10px; top: 10px; } /* Box opening animation */ .box.opening { opacity: 0; transform: scale(0.5); } .hidden { display: none; } /* Cake Styles */ .cake { width: 150px; height: 120px; position: relative; margin-bottom: 20px; opacity: 0; /* Start hidden for animation */ transform: scale(0.8); /* Start smaller for animation */ transition: opacity 0.8s ease, transform 0.8s ease; } .cake-reveal .cake { opacity: 1; transform: scale(1); } .cake-layer { width: 100%; background-color: #ffb6c1; /* Light pink cake */ border: 2px solid #ff69b4; /* Hot pink border */ box-sizing: border-box; position: absolute; left: 0; } .layer-bottom { height: 40px; bottom: 0; border-radius: 0 0 10px 10px; } .layer-middle { height: 35px; bottom: 38px; /* Adjust based on border */ border-radius: 5px; } .layer-top { height: 30px; bottom: 71px; /* Adjust based on border */ border-radius: 5px 5px 0 0; } .cake-frosting { width: 105%; /* Slightly wider than layers */ height: 20px; background-color: #ffffff; /* White frosting */ border-radius: 10px / 5px; /* Oval shape */ position: absolute; bottom: 99px; /* Position above top layer */ left: 50%; transform: translateX(-50%); z-index: 1; /* Ensure frosting is on top of layers */ } /* Candle Styles (Keep similar) */ .candles { position: absolute; top: -10px; /* Adjust position above the cake */ left: 50%; transform: translateX(-50%); display: flex; gap: 8px; /* Increased gap */ z-index: 2; /* Ensure candles are on top */ } .candle { width: 6px; /* Slightly thinner */ height: 18px; /* Slightly shorter */ background-color: #ffffff; /* White candle body */ position: relative; border-radius: 2px; } .candle.lit::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #ffcc00; /* Yellow flame */ filter: drop-shadow(0 0 5px #ffcc00); } /* Buttons Styles */ .buttons { display: flex; gap: 10px; flex-wrap: wrap; /* Allow buttons to wrap on small screens */ justify-content: center; } button { padding: 10px 15px; font-size: 1em; background-color: #6a0dad; /* Medium purple */ color: #ffffff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #8a2be2; /* Slightly lighter purple */ } /* Confetti Styles */ #confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Allow clicks to pass through */ z-index: 0; /* Below content */ } .confetti { position: absolute; width: 8px; height: 8px; background-color: #e0b0ff; /* Light purple */ opacity: 1; animation: confetti-fall linear infinite; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* Mobile-first styles are the default. Add larger screen styles if needed */ @media (min-width: 600px) { /* Optional: Add styles for larger screens here */ } const giftBox = document.getElementById('gift-box'); const cakeReveal = document.getElementById('cake-reveal'); const makeWishButton = document.getElementById('make-wish'); const relightCandlesButton = document.getElementById('relight-candles'); const candles = document.querySelectorAll('.candle'); const confettiContainer = document.getElementById('confetti-container'); function createConfetti() { const confettiCount = 50; // Number of confetti pieces const boxRect = giftBox.getBoundingClientRect(); const boxCenterX = boxRect.left + boxRect.width / 2; const boxCenterY = boxRect.top + boxRect.height / 2; for (let i = 0; i < confettiCount; i++) { const confetti = document.createElement('div'); confetti.classList.add('confetti'); // Position confetti near the box center initially const startX = boxCenterX + (Math.random() - 0.5) * 50; // Random slight offset const startY = boxCenterY + (Math.random() - 0.5) * 50; // Random slight offset confetti.style.left = `${startX}px`; confetti.style.top = `${startY}px`; confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 70%)`; // Random color confetti.style.animationDuration = `${Math.random() * 2 + 1}s`; // Random duration confetti.style.animationDelay = `${Math.random() * 0.5}s`; // Random delay confettiContainer.appendChild(confetti); // Remove confetti after animation confetti.addEventListener('animationend', () => { confetti.remove(); }); } } giftBox.addEventListener('click', () => { // Start box opening animation giftBox.classList.add('opening'); // Create and animate confetti createConfetti(); // Wait for box animation to finish before revealing cake giftBox.addEventListener('transitionend', () => { giftBox.classList.add('hidden'); cakeReveal.classList.remove('hidden'); // Add a class to trigger cake reveal animation setTimeout(() => { cakeReveal.classList.add('cake-reveal'); }, 10); // Small delay to allow display:block to apply }, { once: true }); // Ensure the event listener is removed after it runs once }); makeWishButton.addEventListener('click', () => { candles.forEach(candle => { candle.classList.remove('lit'); }); }); relightCandlesButton.addEventListener('click', () => { candles.forEach(candle => { candle.classList.add('lit'); }); });