Countdown timers are essential tools for creating a sense of urgency and excitement in various digital experiences. Whether you're launching a new product, running a limited-time sale, or counting down to an event, these timers can significantly enhance user engagement.
In this article, we'll explore 10 countdown timer examples that showcase different styles and functionalities. From simple designs to more complex integrations, these examples will inspire you to incorporate effective countdown timers into your projects.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your projects with Subframe's drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect countdown timers effortlessly, ensuring a seamless user experience every time.
Loved by professionals, Subframe makes UI design a breeze. Start for free and transform your digital creations today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI designs? With Subframe, you can create pixel-perfect countdown timers and other stunning UIs in minutes. Our drag-and-drop interface ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Transform your digital projects with ease and professionalism today!
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f8f8f8; overflow: hidden; padding: 20px; } .flash-sale-container { width: 100%; max-width: 650px; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border-radius: 12px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; } .lightning-icon { position: absolute; top: -20px; right: -20px; font-size: 160px; color: rgba(255, 63, 63, 0.05); transform: rotate(15deg); z-index: 0; } .header { margin-bottom: 30px; position: relative; z-index: 1; } .flash-label { background-color: #ff3f3f; color: white; padding: 8px 15px; border-radius: 30px; display: inline-block; font-weight: 800; text-transform: uppercase; font-size: 14px; margin-bottom: 15px; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(255, 63, 63, 0.3); transform: translateZ(0); transition: all 0.3s; } .flash-label:hover { transform: translateY(-3px) translateZ(0); box-shadow: 0 8px 20px rgba(255, 63, 63, 0.4); } h1 { color: white; font-size: 36px; font-weight: 900; margin-bottom: 10px; letter-spacing: -0.5px; line-height: 1.1; } .highlight { color: #ff3f3f; position: relative; display: inline-block; } .highlight::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 6px; background-color: rgba(255, 63, 63, 0.3); z-index: -1; } .description { color: #bebebe; font-size: 16px; line-height: 1.5; margin-bottom: 10px; max-width: 90%; } .timer-section { position: relative; z-index: 1; margin-bottom: 30px; } .timer-container { display: flex; gap: 10px; margin-top: 20px; } .timer-box { background: #272727; border: 2px solid #333; border-radius: 8px; padding: 15px 10px; min-width: 80px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; transition: transform 0.3s ease; } .timer-box:hover { transform: translateY(-5px); } .timer-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ff3f3f, #ff7b7b); } .timer-digit { color: white; font-size: 32px; font-weight: 800; position: relative; display: block; } .timer-digit.bounce { animation: bounce 0.5s ease; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .timer-label { color: #898989; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; font-weight: 600; } .cta-section { position: relative; z-index: 1; } .progress-container { background: #272727; height: 10px; border-radius: 5px; margin-bottom: 15px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, #ff3f3f, #ff7b7b); border-radius: 5px; width: 65%; position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); animation: shine 2s infinite; } @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .stock-info { color: #bebebe; font-size: 14px; margin-bottom: 20px; } .stock-number { color: #ff3f3f; font-weight: 600; } .cta-button { background: #ff3f3f; color: white; border: none; padding: 15px 30px; font-size: 16px; font-weight: 800; text-transform: uppercase; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 63, 63, 0.3); letter-spacing: 1px; width: 100%; position: relative; overflow: hidden; } .cta-button:hover { background: #ff2525; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 63, 63, 0.4); } .cta-button:active { transform: translateY(-1px); } .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 63, 63, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 63, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 63, 63, 0); } } .urgency-badge { position: absolute; top: -10px; right: 20px; background: #ffd028; color: #333; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 800; transform: rotate(3deg); box-shadow: 0 3px 10px rgba(0,0,0,0.1); z-index: 2; } .product-grid { display: flex; gap: 10px; margin-top: 30px; overflow-x: auto; padding-bottom: 5px; } .product-grid::-webkit-scrollbar { height: 5px; } .product-grid::-webkit-scrollbar-track { background: #272727; border-radius: 5px; } .product-grid::-webkit-scrollbar-thumb { background: #ff3f3f; border-radius: 5px; } .product-chip { background: #272727; padding: 8px 12px; border-radius: 20px; font-size: 12px; color: white; white-space: nowrap; transition: all 0.3s; cursor: pointer; } .product-chip:hover { background: #ff3f3f; transform: translateY(-3px); } @media (max-width: 600px) { .flash-sale-container { padding: 20px; } h1 { font-size: 28px; } .timer-box { min-width: 65px; padding: 10px 5px; } .timer-digit { font-size: 24px; } .description { font-size: 14px; max-width: 100%; } } @media (max-width: 400px) { .timer-box { min-width: 55px; } .timer-digit { font-size: 20px; } .timer-label { font-size: 10px; } } </style> </head> <body> <div class="flash-sale-container"> <div class="lightning-icon">⚡</div> <div class="header"> <div class="flash-label">24HR FLASH SALE</div> <h1>Score up to <span class="highlight">70% OFF</span> premium tech gadgets</h1> <p class="description">Limited quantities. Hottest gear. Lowest prices of the season.</p> </div> <div class="timer-section"> <div class="timer-container"> <div class="timer-box"> <span class="timer-digit" id="hours">11</span> <span class="timer-label">Hours</span> </div> <div class="timer-box"> <span class="timer-digit" id="minutes">33</span> <span class="timer-label">Minutes</span> </div> <div class="timer-box"> <span class="timer-digit" id="seconds">22</span> <span class="timer-label">Seconds</span> </div> </div> </div> <div class="cta-section"> <div class="progress-container"> <div class="progress-bar"></div> </div> <p class="stock-info">Almost gone! Only <span class="stock-number">17</span> products left in stock</p> <button class="cta-button pulse"> <span class="urgency-badge">SELLING FAST</span> SHOP NOW </button> <div class="product-grid"> <div class="product-chip">Wireless Earbuds</div> <div class="product-chip">Smart Watches</div> <div class="product-chip">Bluetooth Speakers</div> <div class="product-chip">Gaming Headsets</div> <div class="product-chip">Power Banks</div> <div class="product-chip">Phone Accessories</div> </div> </div> </div> <script> // Set the countdown timer let countDownDate = new Date(); countDownDate.setHours(countDownDate.getHours() + 11); countDownDate.setMinutes(countDownDate.getMinutes() + 33); countDownDate.setSeconds(countDownDate.getSeconds() + 22); // Animation elements const hourElement = document.getElementById("hours"); const minuteElement = document.getElementById("minutes"); const secondElement = document.getElementById("seconds"); let lastHour = 11; let lastMinute = 33; let lastSecond = 22; // Update the count down every 1 second const countdownTimer = setInterval(function() { // Get current date and time const now = new Date().getTime(); // Find the distance between now and the countdown date const distance = countDownDate - now; // Time calculations for hours, minutes and seconds const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result hourElement.textContent = hours < 10 ? '0' + hours : hours; minuteElement.textContent = minutes < 10 ? '0' + minutes : minutes; secondElement.textContent = seconds < 10 ? '0' + seconds : seconds; // Add bounce animation when values change if(hours !== lastHour) { addBounceAnimation(hourElement); lastHour = hours; } if(minutes !== lastMinute) { addBounceAnimation(minuteElement); lastMinute = minutes; } if(seconds !== lastSecond) { addBounceAnimation(secondElement); lastSecond = seconds; } // Make timer more urgent when low on time if(hours === 0 && minutes < 30) { document.querySelectorAll('.timer-box').forEach(box => { box.style.borderColor = '#ff3f3f'; }); if(minutes < 5) { document.querySelectorAll('.timer-digit').forEach(digit => { digit.style.color = '#ff3f3f'; }); } } // If the countdown is over if (distance < 0) { clearInterval(countdownTimer); document.getElementById("hours").textContent = "00"; document.getElementById("minutes").textContent = "00"; document.getElementById("seconds").textContent = "00"; document.querySelector('.cta-button').textContent = "SALE ENDED"; document.querySelector('.cta-button').classList.remove('pulse'); document.querySelector('.cta-button').style.backgroundColor = '#555'; } }, 1000); // Function to add bounce animation function addBounceAnimation(element) { element.classList.add('bounce'); setTimeout(() => { element.classList.remove('bounce'); }, 500); } // Stock countdown simulation let stock = 17; const stockElement = document.querySelector('.stock-number'); const progressBar = document.querySelector('.progress-bar'); // Random interval to decrease stock to create urgency setInterval(() => { if(stock > 1 && Math.random() > 0.7) { stock--; stockElement.textContent = stock; // Update progress bar width const percentage = (stock / 25) * 100; progressBar.style.width = `${Math.max(percentage, 5)}%`; // Add urgency if stock is low if(stock < 5) { stockElement.style.color = '#ff2525'; document.querySelector('.stock-info').style.color = '#ff2525'; } } }, 5000); // Add interactive hover effects to product chips const productChips = document.querySelectorAll('.product-chip'); productChips.forEach(chip => { chip.addEventListener('mouseenter', () => { chip.style.transform = 'translateY(-3px)'; }); chip.addEventListener('mouseleave', () => { chip.style.transform = 'translateY(0)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NEON BREACH - Countdown</title> <style> @import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;700;900&display=swap'); :root { --neon-purple: #aa00ff; --neon-blue: #00ccff; --neon-pink: #ff00aa; --neon-green: #00ff99; --dark-bg: #05070f; --darker-bg: #020309; --glitch-duration: 0.5s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dark-bg); font-family: 'Orbitron', sans-serif; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: white; position: relative; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; position: relative; z-index: 1; } .grid-bg { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(var(--darker-bg) 1px, transparent 1px), linear-gradient(90deg, var(--darker-bg) 1px, transparent 1px); background-size: 20px 20px; background-position: center center; opacity: 0.2; z-index: -1; perspective: 1000px; transform-style: preserve-3d; animation: gridPulse 8s infinite ease-in-out; } .game-logo { margin-bottom: 2rem; position: relative; text-align: center; } .game-title { font-size: 4rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple); position: relative; } .game-title::before { content: "NEON BREACH"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: glitch var(--glitch-duration) infinite; clip: rect(44px, 450px, 56px, 0); text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); opacity: 0.8; } .game-title::after { content: "NEON BREACH"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: glitch calc(var(--glitch-duration) * 1.5) infinite reverse; clip: rect(44px, 450px, 46px, 0); text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); opacity: 0.8; } .tagline { font-family: 'VT323', monospace; font-size: 1.4rem; letter-spacing: 1px; text-transform: uppercase; color: var(--neon-green); margin-bottom: 0.5rem; text-shadow: 0 0 5px var(--neon-green); opacity: 0.9; } .countdown-container { display: flex; flex-direction: column; align-items: center; margin-top: 2rem; position: relative; width: 100%; } .countdown-title { font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: 700; position: relative; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-align: center; } .countdown-wrapper { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .countdown-box { display: flex; flex-direction: column; align-items: center; padding: 1rem; position: relative; width: 110px; height: 110px; border: 2px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 20px rgba(170, 0, 255, 0.3), inset 0 0 10px rgba(0, 204, 255, 0.2); transform-style: preserve-3d; transition: transform 0.3s ease; } .countdown-box:hover { transform: translateY(-5px) scale(1.05); } .countdown-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--neon-purple), transparent); opacity: 0.1; z-index: -1; } .digit { font-size: 3rem; font-weight: 700; color: #fff; text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); position: relative; line-height: 1; transform-style: preserve-3d; } .digit-label { font-family: 'VT323', monospace; font-size: 1rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 0.5rem; letter-spacing: 1px; } .pulse { position: absolute; border-radius: 50%; width: 200px; height: 200px; background: radial-gradient(circle, var(--neon-purple) 0%, transparent 70%); opacity: 0; filter: blur(20px); z-index: -1; animation: pulsate 4s infinite; } .cta-container { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; } .notification-form { display: flex; width: 100%; max-width: 500px; position: relative; } .notification-input { width: 100%; padding: 1rem; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: white; font-family: 'Orbitron', sans-serif; font-size: 1rem; outline: none; transition: border 0.3s ease, box-shadow 0.3s ease; } .notification-input:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); } .notification-button { position: absolute; right: 0; top: 0; bottom: 0; padding: 0 1.5rem; background: var(--neon-purple); border: none; color: white; font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; overflow: hidden; } .notification-button:hover { background: var(--neon-blue); } .notification-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: all 0.5s; } .notification-button:hover::before { left: 100%; } .platforms { display: flex; gap: 1rem; margin-top: 2rem; justify-content: center; } .platform-icon { font-size: 1.8rem; color: rgba(255, 255, 255, 0.7); transition: all 0.3s ease; cursor: pointer; } .platform-icon:hover { color: var(--neon-green); transform: scale(1.2); text-shadow: 0 0 10px var(--neon-green); } .game-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; } .feature-tag { background: rgba(0, 0, 0, 0.6); padding: 0.5rem 1rem; font-family: 'VT323', monospace; font-size: 1rem; border-left: 3px solid var(--neon-purple); transition: all 0.3s ease; } .feature-tag:hover { background: rgba(170, 0, 255, 0.2); transform: translateX(5px); } @keyframes pulsate { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1); opacity: 0.2; } 100% { transform: scale(0.8); opacity: 0; } } @keyframes gridPulse { 0% { opacity: 0.1; } 50% { opacity: 0.3; } 100% { opacity: 0.1; } } @keyframes glitch { 0% { clip: rect(31px, 9999px, 94px, 0); } 5% { clip: rect(70px, 9999px, 71px, 0); } 10% { clip: rect(29px, 9999px, 83px, 0); } 15% { clip: rect(16px, 9999px, 91px, 0); } 20% { clip: rect(2px, 9999px, 15px, 0); } 25% { clip: rect(19px, 9999px, 8px, 0); } 30% { clip: rect(42px, 9999px, 70px, 0); } 35% { clip: rect(0px, 9999px, 89px, 0); } 40% { clip: rect(8px, 9999px, 51px, 0); } 45% { clip: rect(60px, 9999px, 27px, 0); } 50% { clip: rect(23px, 9999px, 86px, 0); } 55% { clip: rect(14px, 9999px, 27px, 0); } 60% { clip: rect(64px, 9999px, 8px, 0); } 65% { clip: rect(99px, 9999px, 6px, 0); } 70% { clip: rect(76px, 9999px, 67px, 0); } 75% { clip: rect(5px, 9999px, 80px, 0); } 80% { clip: rect(89px, 9999px, 38px, 0); } 85% { clip: rect(47px, 9999px, 18px, 0); } 90% { clip: rect(20px, 9999px, 76px, 0); } 95% { clip: rect(36px, 9999px, 72px, 0); } 100% { clip: rect(69px, 9999px, 57px, 0); } } .pixel-border { position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); top: -5px; left: -5px; background-color: transparent; border: 2px solid var(--neon-blue); z-index: -1; clip-path: polygon( 0% 5%, 5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95% ); animation: borderGlow 4s infinite alternate; } @keyframes borderGlow { 0% { box-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); border-color: var(--neon-blue); } 50% { box-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple); border-color: var(--neon-purple); } 100% { box-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); border-color: var(--neon-pink); } } /* Response for smaller screens */ @media (max-width: 600px) { .game-title { font-size: 2.5rem; } .tagline { font-size: 1.2rem; } .countdown-wrapper { gap: 0.5rem; } .countdown-box { width: 80px; height: 80px; padding: 0.5rem; } .digit { font-size: 2rem; } .notification-form { flex-direction: column; } .notification-button { position: relative; width: 100%; margin-top: 0.5rem; padding: 0.5rem; } } .success-message { display: none; background-color: rgba(0, 255, 153, 0.2); border-left: 3px solid var(--neon-green); padding: 0.75rem 1rem; width: 100%; max-width: 500px; font-family: 'VT323', monospace; margin-top: 1rem; text-align: center; } </style> </head> <body> <div class="container"> <div class="grid-bg"></div> <div class="pixel-border"></div> <div class="pulse"></div> <div class="game-logo"> <h1 class="game-title">NEON BREACH</h1> <div class="tagline">Hack the System. Survive the Grid.</div> </div> <div class="countdown-container"> <h2 class="countdown-title">System Breach Initiated In</h2> <div class="countdown-wrapper"> <div class="countdown-box"> <div id="days" class="digit">00</div> <div class="digit-label">Days</div> </div> <div class="countdown-box"> <div id="hours" class="digit">00</div> <div class="digit-label">Hours</div> </div> <div class="countdown-box"> <div id="minutes" class="digit">00</div> <div class="digit-label">Minutes</div> </div> <div class="countdown-box"> <div id="seconds" class="digit">00</div> <div class="digit-label">Seconds</div> </div> </div> <div class="cta-container"> <form class="notification-form" id="notifyForm"> <input type="email" class="notification-input" placeholder="Enter your email for launch alert" required> <button type="submit" class="notification-button">NOTIFY ME</button> </form> <div class="success-message" id="successMessage"> ACCESS GRANTED! Launch coordinates will be transmitted to your terminal. </div> </div> <div class="platforms"> <i class="platform-icon">PC</i> <i class="platform-icon">PS5</i> <i class="platform-icon">XBX</i> <i class="platform-icon">NSW</i> </div> <div class="game-features"> <div class="feature-tag">CYBERPUNK RPG</div> <div class="feature-tag">ROGUELIKE</div> <div class="feature-tag">TACTICAL COMBAT</div> <div class="feature-tag">PROCEDURAL WORLD</div> </div> </div> </div> <script> // Set the release date (YYYY, Month-1, Day, Hour, Minute, Second) const releaseDate = new Date(2023, 11, 25, 9, 0, 0); function updateCountdown() { const now = new Date(); const diff = releaseDate - now; // Check if release date has passed if (diff <= 0) { document.getElementById('days').textContent = '00'; document.getElementById('hours').textContent = '00'; document.getElementById('minutes').textContent = '00'; document.getElementById('seconds').textContent = '00'; document.querySelector('.countdown-title').textContent = 'BREACH COMPLETE - NOW AVAILABLE'; return; } // Calculate remaining time 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); // Update the display with padded zeros document.getElementById('days').textContent = days.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); // Add special effects for last minute if (days === 0 && hours === 0 && minutes === 0) { document.querySelectorAll('.digit').forEach(digit => { digit.style.color = 'var(--neon-pink)'; digit.style.textShadow = '0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink)'; }); document.querySelector('.pulse').style.animationDuration = '1s'; } } // Initialize and update countdown every second updateCountdown(); setInterval(updateCountdown, 1000); // Handle notification form submission document.getElementById('notifyForm').addEventListener('submit', function(e) { e.preventDefault(); // Simulate form submission const input = this.querySelector('input'); const button = this.querySelector('button'); const successMessage = document.getElementById('successMessage'); // Simple validation if (input.value.trim() === '' || !input.value.includes('@')) { input.style.borderColor = 'red'; input.style.boxShadow = '0 0 10px red'; return; } // Show loading state button.textContent = 'PROCESSING...'; button.disabled = true; // Simulate server request setTimeout(() => { button.textContent = 'NOTIFY ME'; button.disabled = false; input.value = ''; // Show success message successMessage.style.display = 'block'; // Hide success message after 5 seconds setTimeout(() => { successMessage.style.display = 'none'; }, 5000); }, 1500); }); // Create interactive grid background document.addEventListener('mousemove', function(e) { const gridBg = document.querySelector('.grid-bg'); const container = document.querySelector('.container'); const rect = container.getBoundingClientRect(); // Calculate mouse position relative to container center const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; // Calculate the offset (limited to a small amount) const offsetX = ((e.clientX - centerX) / rect.width) * 5; const offsetY = ((e.clientY - centerY) / rect.height) * 5; // Apply subtle transformation to grid gridBg.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(1.1)`; }); // Glitch effect on hover for game title document.querySelector('.game-title').addEventListener('mouseenter', function() { this.style.setProperty('--glitch-duration', '0.3s'); }); document.querySelector('.game-title').addEventListener('mouseleave', function() { this.style.setProperty('--glitch-duration', '0.5s'); }); // Random flicker animation for neon elements function randomFlicker() { const neonElements = document.querySelectorAll('.tagline, .platform-icon'); const randomElement = neonElements[Math.floor(Math.random() * neonElements.length)]; randomElement.style.opacity = '0.3'; setTimeout(() => { randomElement.style.opacity = '0.9'; setTimeout(() => { randomElement.style.opacity = '0.5'; setTimeout(() => { randomElement.style.opacity = '0.9'; }, 50); }, 50); }, 50); setTimeout(randomFlicker, Math.random() * 3000 + 1000); } randomFlicker(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webinar Countdown</title> <style> :root { --primary-color: #1a1a1a; --accent-color: #2563eb; --background-color: #f7f7f7; --text-color: #333333; --light-gray: #e0e0e0; --white: #ffffff; --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--background-color); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; padding: 20px; } .container { max-width: 600px; width: 100%; background-color: var(--white); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 40px; text-align: center; position: relative; overflow: hidden; } .logo { font-weight: 700; font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); } .logo-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--accent-color); border-radius: 50%; margin-left: 4px; } h1 { font-size: 28px; font-weight: 800; margin-bottom: 16px; line-height: 1.3; color: var(--primary-color); } p { font-size: 16px; line-height: 1.6; margin-bottom: 24px; color: rgba(51, 51, 51, 0.85); max-width: 500px; margin-left: auto; margin-right: auto; } .countdown-container { display: flex; justify-content: center; gap: 20px; margin: 30px 0; } .countdown-item { display: flex; flex-direction: column; align-items: center; position: relative; } .countdown-digit { font-size: 48px; font-weight: 700; background-color: var(--primary-color); color: var(--white); border-radius: 12px; padding: 16px 24px; min-width: 100px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; transition: var(--transition); } .countdown-digit::after { content: ''; position: absolute; top: 50%; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.1); left: 0; } .countdown-label { font-size: 14px; font-weight: 500; color: var(--text-color); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .accent-digit { background-color: var(--accent-color); } .registration-form { margin-top: 32px; } .form-group { margin-bottom: 16px; } input { width: 100%; padding: 14px 16px; border: 1px solid var(--light-gray); border-radius: 8px; font-size: 15px; transition: var(--transition); outline: none; } input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } button { background-color: var(--accent-color); color: var(--white); border: none; border-radius: 8px; padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); width: 100%; margin-top: 8px; position: relative; overflow: hidden; } button:hover { background-color: #1e4fd0; } button::after { content: ''; position: absolute; width: 50px; height: 100%; top: 0; left: -100px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shine-effect 3s infinite; } @keyframes shine-effect { 0% { left: -100px; } 20% { left: 100%; } 100% { left: 100%; } } .event-details { display: flex; gap: 16px; margin-top: 40px; justify-content: center; flex-wrap: wrap; } .event-detail { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; } .event-detail svg { width: 16px; height: 16px; color: var(--accent-color); } .accessibility-toggle { position: absolute; top: 20px; right: 20px; background: none; border: none; width: auto; padding: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .accessibility-toggle svg { width: 24px; height: 24px; color: var(--text-color); } .high-contrast { --primary-color: #000000; --accent-color: #0039cb; --background-color: #ffffff; --text-color: #000000; --light-gray: #cccccc; } .high-contrast .countdown-digit { color: #ffffff; background-color: #000000; border: 2px solid #0039cb; } .high-contrast .accent-digit { background-color: #0039cb; } .ribbon { position: absolute; top: 0; right: 0; width: 150px; height: 150px; overflow: hidden; } .ribbon-content { position: absolute; display: block; width: 225px; padding: 10px 0; background-color: var(--accent-color); box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; font-size: 13px; text-transform: uppercase; text-align: center; left: -25px; top: 30px; transform: rotate(45deg); font-weight: 600; letter-spacing: 0.5px; } .countdown-separator { font-size: 48px; font-weight: 700; color: var(--primary-color); margin-top: 16px; } .flash-animation { animation: flash 0.5s ease; } @keyframes flash { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } /* Responsive styles */ @media (max-width: 600px) { .container { padding: 30px 20px; } h1 { font-size: 24px; } .countdown-container { gap: 10px; } .countdown-digit { font-size: 32px; padding: 12px 16px; min-width: 70px; } .countdown-separator { font-size: 32px; margin-top: 12px; } .countdown-label { font-size: 12px; } .event-details { flex-direction: column; align-items: center; gap: 10px; } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; width: 6px; height: 6px; background-color: var(--accent-color); border-radius: 50%; opacity: 0.2; animation: float 15s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-30px) translateX(20px); } 50% { transform: translateY(-10px) translateX(40px); } 75% { transform: translateY(-40px) translateX(10px); } 100% { transform: translateY(0) translateX(0); } } </style> </head> <body> <div class="container"> <div class="particles" id="particles"></div> <button class="accessibility-toggle" id="accessibilityToggle" aria-label="Toggle high contrast mode"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /> </svg> </button> <div class="ribbon"> <span class="ribbon-content">Limited Seats</span> </div> <div class="logo">DesignSummit<span class="logo-dot"></span></div> <h1>Advanced UX Design Principles for Enterprise Applications</h1> <p>Join our expert panel as they discuss cutting-edge UX strategies that transform complex enterprise systems into intuitive, efficient interfaces. Perfect for senior designers and product leaders.</p> <div class="countdown-container" id="countdown"> <div class="countdown-item"> <div class="countdown-digit" id="days">02</div> <div class="countdown-label">Days</div> </div> <div class="countdown-separator">:</div> <div class="countdown-item"> <div class="countdown-digit" id="hours">18</div> <div class="countdown-label">Hours</div> </div> <div class="countdown-separator">:</div> <div class="countdown-item"> <div class="countdown-digit accent-digit" id="minutes">45</div> <div class="countdown-label">Minutes</div> </div> <div class="countdown-separator">:</div> <div class="countdown-item"> <div class="countdown-digit" id="seconds">33</div> <div class="countdown-label">Seconds</div> </div> </div> <div class="registration-form"> <div class="form-group"> <input type="email" id="email" placeholder="Your work email" aria-label="Your work email"> </div> <button type="button" id="registerButton" class="pulse">Reserve Your Spot</button> </div> <div class="event-details"> <div class="event-detail"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> <span>April 15, 2023</span> </div> <div class="event-detail"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <span>11:00 AM ET (75 min)</span> </div> <div class="event-detail"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> <span>Live + Recording</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create particles const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.top = Math.random() * 100 + '%'; particle.style.left = Math.random() * 100 + '%'; particle.style.animationDelay = Math.random() * 5 + 's'; particle.style.animationDuration = (Math.random() * 10 + 15) + 's'; particlesContainer.appendChild(particle); } // Set the date we're counting down to (2 days, 18 hours, 45 minutes from now) const now = new Date(); const countDownDate = new Date(now.getTime() + (2 * 24 * 60 * 60 * 1000) + (18 * 60 * 60 * 1000) + (45 * 60 * 1000) + (33 * 1000)); // Update the count down every 1 second function updateCountdown() { // Get current date and time const now = new Date().getTime(); // Find the distance between now and the count down date const distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result document.getElementById("days").textContent = days.toString().padStart(2, '0'); document.getElementById("hours").textContent = hours.toString().padStart(2, '0'); document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0'); document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0'); // Animated flash at certain milestones if (seconds === 0 && (minutes === 0 || minutes === 30)) { document.getElementById("minutes").classList.add("flash-animation"); setTimeout(() => { document.getElementById("minutes").classList.remove("flash-animation"); }, 500); } if (seconds === 0 && minutes === 0 && (hours === 0 || hours === 12)) { document.getElementById("hours").classList.add("flash-animation"); setTimeout(() => { document.getElementById("hours").classList.remove("flash-animation"); }, 500); } // If the count down is finished if (distance < 0) { clearInterval(countdownInterval); document.getElementById("days").textContent = "00"; document.getElementById("hours").textContent = "00"; document.getElementById("minutes").textContent = "00"; document.getElementById("seconds").textContent = "00"; // Change button text when countdown ends document.getElementById("registerButton").textContent = "Watch Recording"; document.getElementById("registerButton").classList.remove("pulse"); } } // Initial call updateCountdown(); // Set interval const countdownInterval = setInterval(updateCountdown, 1000); // Form submission handling document.getElementById("registerButton").addEventListener("click", function() { const email = document.getElementById("email").value; if (email && email.includes('@')) { document.getElementById("registerButton").textContent = "Spot Reserved ✓"; document.getElementById("registerButton").style.backgroundColor = "#16a34a"; document.getElementById("registerButton").classList.remove("pulse"); // Clear the input field document.getElementById("email").value = ""; } else { // Highlight the input field for error const emailInput = document.getElementById("email"); emailInput.style.borderColor = "#ef4444"; emailInput.placeholder = "Please enter a valid email"; // Reset after a while setTimeout(() => { emailInput.style.borderColor = ""; emailInput.placeholder = "Your work email"; }, 3000); } }); // Toggle high contrast mode document.getElementById("accessibilityToggle").addEventListener("click", function() { document.body.classList.toggle("high-contrast"); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>World Cup Kickoff Countdown</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Oswald:wght@500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #00b2ff; --secondary: #0aff85; --accent: #ff0062; --dark: #001034; --light: #f0f9ff; } body { font-family: 'Montserrat', sans-serif; background: linear-gradient(135deg, var(--dark), #000814); color: var(--light); display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; user-select: none; } .container { width: 650px; max-width: 90%; height: 650px; max-height: 90vh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .stadium-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at center, rgba(0,30,90,0.15) 0%, rgba(0,0,20,0.7) 70%); z-index: -1; overflow: hidden; } .crowd-wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient(0deg, rgba(0,40,100,0.3) 0%, transparent 100%); transform-origin: bottom center; animation: wave 8s ease-in-out infinite; } .event-details { margin-bottom: 2rem; text-align: center; transform: translateY(-30px); } .tournament { font-family: 'Oswald', sans-serif; font-size: 1.4rem; letter-spacing: 1px; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; margin-bottom: 0.5rem; } .match { font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem; text-shadow: 0 0 20px rgba(0, 178, 255, 0.5); line-height: 1.1; } .venue { font-size: 1rem; opacity: 0.8; margin-top: 0.5rem; } .countdown-wrapper { position: relative; width: 100%; padding: 1rem; } .pulse-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; border-radius: 50%; border: 2px solid rgba(0, 178, 255, 0.3); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .pulse-ring:nth-child(2) { animation-delay: 0.5s; } .pulse-ring:nth-child(3) { animation-delay: 1s; } .countdown-container { display: flex; justify-content: center; perspective: 1000px; margin-top: 1rem; } .countdown-segment { display: flex; flex-direction: column; align-items: center; margin: 0 1rem; position: relative; } .segment-value { font-size: 5rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; margin-bottom: 0.5rem; text-shadow: 0 5px 15px rgba(10, 255, 133, 0.3); transform-style: preserve-3d; } .segment-value::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; } .segment-label { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(240, 249, 255, 0.7); } .ticker { position: absolute; bottom: 2rem; left: 0; right: 0; background: rgba(0, 16, 52, 0.7); padding: 1rem; overflow: hidden; border-top: 1px solid rgba(0, 178, 255, 0.3); border-bottom: 1px solid rgba(0, 178, 255, 0.3); } .ticker-content { display: flex; animation: ticker 20s linear infinite; white-space: nowrap; } .ticker-item { margin-right: 50px; font-weight: 700; color: var(--light); } .ticker-highlight { color: var(--secondary); } .beat-animation { animation: beat 0.5s ease-out; } .cta-button { position: relative; margin-top: 2rem; padding: 0.8rem 2rem; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border: none; border-radius: 30px; color: var(--dark); cursor: pointer; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(10, 255, 133, 0.3); } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(10, 255, 133, 0.5); } .cta-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: translateX(-100%); } .cta-button:hover::before { animation: shimmer 1.5s infinite; } /* Responsiveness */ @media (max-width: 600px) { .tournament { font-size: 1rem; } .match { font-size: 1.8rem; } .segment-value { font-size: 3.5rem; } .countdown-segment { margin: 0 0.7rem; } .segment-label { font-size: 0.7rem; } .pulse-ring { width: 300px; height: 300px; } } /* Animations */ @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 70% { opacity: 0.2; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } } @keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.1); } } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .flare { position: absolute; width: 5px; height: 5px; background-color: white; border-radius: 50%; box-shadow: 0 0 10px 2px rgba(0, 178, 255, 0.7); animation: flare-animation 4s infinite; opacity: 0; } @keyframes flare-animation { 0% { opacity: 0; transform: scale(0); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0); } } </style> </head> <body> <div class="container"> <div class="stadium-bg"> <div class="crowd-wave"></div> </div> <div class="pulse-ring"></div> <div class="pulse-ring"></div> <div class="pulse-ring"></div> <div class="event-details"> <div class="tournament">FIFA World Cup 2026</div> <h1 class="match">BRAZIL vs GERMANY</h1> <div class="venue">Rose Bowl Stadium, Los Angeles</div> </div> <div class="countdown-wrapper"> <div class="countdown-container" id="countdown"> <div class="countdown-segment"> <div class="segment-value" id="days">00</div> <div class="segment-label">Days</div> </div> <div class="countdown-segment"> <div class="segment-value" id="hours">00</div> <div class="segment-label">Hours</div> </div> <div class="countdown-segment"> <div class="segment-value" id="minutes">00</div> <div class="segment-label">Minutes</div> </div> <div class="countdown-segment"> <div class="segment-value" id="seconds">00</div> <div class="segment-label">Seconds</div> </div> </div> </div> <button class="cta-button" id="reminder-btn">Set a Reminder</button> <div class="ticker"> <div class="ticker-content"> <div class="ticker-item">Brazil seeking record <span class="ticker-highlight">sixth World Cup title</span></div> <div class="ticker-item">Germany looking to avenge <span class="ticker-highlight">7-1 loss from 2014</span></div> <div class="ticker-item">Over <span class="ticker-highlight">90,000 fans</span> expected at Rose Bowl</div> <div class="ticker-item">Pre-match show featuring <span class="ticker-highlight">Shakira and Bad Bunny</span></div> <div class="ticker-item">Match broadcast in <span class="ticker-highlight">over 200 countries</span></div> <div class="ticker-item">Brazil seeking record <span class="ticker-highlight">sixth World Cup title</span></div> <div class="ticker-item">Germany looking to avenge <span class="ticker-highlight">7-1 loss from 2014</span></div> <div class="ticker-item">Over <span class="ticker-highlight">90,000 fans</span> expected at Rose Bowl</div> </div> </div> </div> <script> // Set the event date - July 15, 2026 at 20:00 UTC const eventDate = new Date('July 15, 2026 20:00:00 UTC').getTime(); // Elements const daysEl = document.getElementById('days'); const hoursEl = document.getElementById('hours'); const minutesEl = document.getElementById('minutes'); const secondsEl = document.getElementById('seconds'); const countdownContainer = document.getElementById('countdown'); const reminderBtn = document.getElementById('reminder-btn'); // Random flare animation function createFlares() { const container = document.querySelector('.container'); const flareCount = 10; for (let i = 0; i < flareCount; i++) { const flare = document.createElement('div'); flare.className = 'flare'; // Random position const posX = Math.random() * 100; const posY = Math.random() * 100; flare.style.left = `${posX}%`; flare.style.top = `${posY}%`; // Random delay flare.style.animationDelay = `${Math.random() * 5}s`; container.appendChild(flare); } } // Create flares createFlares(); // Update countdown function function updateCountdown() { const now = new Date().getTime(); const distance = eventDate - now; // Time calculations const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Add leading zeros const formatNumber = num => num < 10 ? `0${num}` : num; // Update DOM daysEl.textContent = formatNumber(days); hoursEl.textContent = formatNumber(hours); minutesEl.textContent = formatNumber(minutes); secondsEl.textContent = formatNumber(seconds); // Beat animation on seconds change secondsEl.classList.add('beat-animation'); setTimeout(() => { secondsEl.classList.remove('beat-animation'); }, 500); // When countdown is over if (distance < 0) { clearInterval(countdown); daysEl.textContent = "00"; hoursEl.textContent = "00"; minutesEl.textContent = "00"; secondsEl.textContent = "00"; // Add "LIVE NOW" message const eventDetails = document.querySelector('.event-details'); const liveNow = document.createElement('div'); liveNow.textContent = "LIVE NOW"; liveNow.style.color = "var(--accent)"; liveNow.style.fontSize = "2rem"; liveNow.style.fontWeight = "900"; liveNow.style.marginTop = "1rem"; liveNow.style.animation = "beat 1s infinite"; eventDetails.appendChild(liveNow); } } // Initial call updateCountdown(); // Update every second const countdown = setInterval(updateCountdown, 1000); // Reminder button functionality reminderBtn.addEventListener('click', function() { this.textContent = "Reminder Set!"; this.style.background = "linear-gradient(90deg, #0aff85, #00b2ff)"; setTimeout(() => { this.textContent = "Set a Reminder"; this.style.background = "linear-gradient(90deg, var(--primary), var(--secondary))"; }, 3000); // Trigger more pulse rings on click const container = document.querySelector('.container'); for (let i = 0; i < 3; i++) { const extraPulse = document.createElement('div'); extraPulse.className = 'pulse-ring'; extraPulse.style.animationDelay = `${i * 0.2}s`; extraPulse.style.animationDuration = '1s'; container.appendChild(extraPulse); // Remove the extra pulse after animation setTimeout(() => { extraPulse.remove(); }, 1000); } }); // Make ticker content dynamic const tickerContent = document.querySelector('.ticker-content'); const originalWidth = tickerContent.offsetWidth; tickerContent.style.animationDuration = `${originalWidth / 50}s`; </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elegant Auction Countdown</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Cormorant+Garamond:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --gold-primary: #D4AF37; --gold-secondary: #E6C770; --gold-light: #F8EFD4; --burgundy: #800020; --dark-blue: #14151F; --ivory: #FFFFF0; --serif-primary: 'Playfair Display', serif; --serif-secondary: 'Cormorant Garamond', serif; } body { font-family: var(--serif-primary); background-color: var(--dark-blue); color: var(--ivory); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 1rem; } .auction-container { width: 100%; max-width: 650px; min-height: 650px; background: linear-gradient(135deg, #1c1e2a 0%, #0a0b12 100%); border: 2px solid var(--gold-primary); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.15); border-radius: 8px; padding: 2rem; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: all 0.5s ease; } .auction-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0.4; z-index: 0; } .auction-header { text-align: center; margin-bottom: 2rem; position: relative; z-index: 1; } .auction-title { font-size: 2.4rem; font-weight: 900; color: var(--ivory); margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); letter-spacing: 1px; } .auction-subtitle { font-family: var(--serif-secondary); font-size: 1.3rem; font-weight: 300; color: var(--gold-secondary); font-style: italic; margin-bottom: 1rem; } .item-details { background: rgba(20, 21, 31, 0.7); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 6px; padding: 1.5rem; margin-bottom: 2rem; position: relative; z-index: 1; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .item-image { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; border: 1px solid var(--gold-secondary); margin-bottom: 1rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); } .item-name { font-size: 1.8rem; color: var(--ivory); margin-bottom: 0.5rem; font-weight: 700; } .item-description { font-family: var(--serif-secondary); font-size: 1.1rem; color: var(--gold-light); margin-bottom: 1rem; line-height: 1.4; font-weight: 300; } .item-current-bid { display: flex; justify-content: space-between; align-items: center; background: rgba(128, 0, 32, 0.2); padding: 0.8rem; border-radius: 4px; border: 1px solid rgba(212, 175, 55, 0.4); } .bid-label { font-size: 1.1rem; color: var(--gold-light); } .bid-amount { font-size: 1.4rem; font-weight: 700; color: var(--gold-primary); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } .countdown-section { text-align: center; position: relative; z-index: 1; margin-bottom: 1.5rem; } .countdown-label { font-family: var(--serif-secondary); font-size: 1.2rem; color: var(--gold-secondary); margin-bottom: 0.5rem; font-style: italic; } .countdown-timer { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .countdown-segment { position: relative; width: 90px; text-align: center; background: linear-gradient(145deg, #0a0b12, #1c1e2a); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 8px; padding: 1rem 0; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .countdown-segment.urgent { animation: pulse 1s infinite alternate; border-color: var(--burgundy); background: linear-gradient(145deg, #240107, #800020); } .countdown-number { font-size: 2.5rem; font-weight: 700; color: var(--gold-primary); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); display: block; line-height: 1; } .countdown-unit { font-family: var(--serif-secondary); font-size: 0.9rem; color: var(--gold-light); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.3rem; display: block; } .countdown-warning { font-size: 1.1rem; font-weight: 700; color: #FFF; background: var(--burgundy); padding: 0.5rem 1rem; border-radius: 4px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; display: inline-block; margin-top: 0.5rem; visibility: hidden; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); } .countdown-warning.show { opacity: 1; transform: translateY(0); visibility: visible; } .action-section { display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; } .place-bid-btn { font-family: var(--serif-primary); font-size: 1.2rem; font-weight: 700; color: var(--dark-blue); background: linear-gradient(145deg, var(--gold-secondary), var(--gold-primary)); border: none; border-radius: 6px; padding: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3); position: relative; overflow: hidden; letter-spacing: 1px; } .place-bid-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: all 0.4s ease; } .place-bid-btn:hover::before { left: 100%; } .place-bid-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4); } .view-details-btn { font-family: var(--serif-secondary); font-size: 1rem; color: var(--gold-secondary); background: transparent; border: 1px solid var(--gold-secondary); border-radius: 6px; padding: 0.8rem; cursor: pointer; transition: all 0.3s ease; text-align: center; } .view-details-btn:hover { background: rgba(212, 175, 55, 0.1); color: var(--gold-primary); } .flourish { position: absolute; width: 35px; height: 35px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L12 22M2 12L22 12M4 4L20 20M20 4L4 20'/%3E%3C/svg%3E"); opacity: 0.4; z-index: 0; } .flourish-1 { top: 2rem; left: 2rem; } .flourish-2 { bottom: 2rem; right: 2rem; } .flourish-3 { top: 2rem; right: 2rem; transform: rotate(45deg); } .flourish-4 { bottom: 2rem; left: 2rem; transform: rotate(45deg); } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(128, 0, 32, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(128, 0, 32, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(128, 0, 32, 0); } } @keyframes fadeFlash { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } .ending-soon-ribbon { position: absolute; top: 30px; right: -30px; background: var(--burgundy); color: white; font-size: 0.9rem; font-weight: 700; padding: 0.5rem 2rem; transform: rotate(45deg); z-index: 10; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.5s ease; } .ending-soon-ribbon.show { opacity: 1; visibility: visible; animation: fadeFlash 2s infinite; } .next-item-preview { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); background: rgba(20, 21, 31, 0.9); border: 1px solid var(--gold-primary); padding: 1rem; border-radius: 6px; width: 80%; display: flex; align-items: center; gap: 1rem; opacity: 0; transition: all 0.5s ease; z-index: 5; } .next-item-preview.show { bottom: 20px; opacity: 1; } .next-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid var(--gold-secondary); } .next-item-info { flex: 1; } .next-item-label { font-size: 0.8rem; color: var(--gold-light); margin-bottom: 0.3rem; } .next-item-name { font-size: 1rem; color: var(--ivory); font-weight: 700; } .close-preview { color: var(--gold-light); background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0.3rem; } @media (max-width: 650px) { .auction-container { padding: 1.5rem; min-height: auto; } .auction-title { font-size: 2rem; } .auction-subtitle { font-size: 1.1rem; } .countdown-timer { flex-wrap: wrap; justify-content: center; } .countdown-segment { width: 70px; } .countdown-number { font-size: 2rem; } .item-name { font-size: 1.5rem; } .item-image { height: 150px; } } @media (max-width: 450px) { .countdown-segment { width: 60px; padding: 0.8rem 0; } .countdown-number { font-size: 1.5rem; } .countdown-unit { font-size: 0.8rem; } .auction-title { font-size: 1.8rem; } .item-name { font-size: 1.3rem; } } </style> </head> <body> <div class="auction-container"> <div class="flourish flourish-1"></div> <div class="flourish flourish-2"></div> <div class="flourish flourish-3"></div> <div class="flourish flourish-4"></div> <div class="ending-soon-ribbon">ENDING SOON</div> <div class="auction-header"> <h1 class="auction-title">Sotheby's Elite</h1> <p class="auction-subtitle">Fine Art & Collectibles Auction</p> </div> <div class="item-details"> <img src="https://images.unsplash.com/photo-1577083552760-c6579dad910f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Antique Gilded Clock" class="item-image"> <h2 class="item-name">French Empire Gilded Clock, c. 1810</h2> <p class="item-description">Exquisite Napoleon-era ormolu clock with original gilding and movement. From the private collection of the Rothschild family. Includes certificate of authenticity and provenance documentation.</p> <div class="item-current-bid"> <span class="bid-label">Current Bid:</span> <span class="bid-amount">$24,500</span> </div> </div> <div class="countdown-section"> <p class="countdown-label">Bidding Ends In:</p> <div class="countdown-timer"> <div class="countdown-segment" id="hours-segment"> <span class="countdown-number" id="hours">00</span> <span class="countdown-unit">Hours</span> </div> <div class="countdown-segment" id="minutes-segment"> <span class="countdown-number" id="minutes">00</span> <span class="countdown-unit">Minutes</span> </div> <div class="countdown-segment" id="seconds-segment"> <span class="countdown-number" id="seconds">00</span> <span class="countdown-unit">Seconds</span> </div> </div> <div class="countdown-warning" id="countdown-warning">Last moments to bid! The auction is closing soon.</div> </div> <div class="action-section"> <button class="place-bid-btn" id="place-bid-btn">Place Your Bid</button> <button class="view-details-btn" id="view-details-btn">View Item Details & History</button> </div> <div class="next-item-preview" id="next-item-preview"> <img src="https://images.unsplash.com/photo-1584729751355-8ead54e3c714?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Next item" class="next-item-img"> <div class="next-item-info"> <p class="next-item-label">Up Next:</p> <p class="next-item-name">Fabergé Silver Easter Egg, c. 1896</p> </div> <button class="close-preview" id="close-preview">×</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Set the date we're counting down to (10 minutes from now for demo purposes) const now = new Date(); const countDownDate = new Date(now.getTime() + 10 * 60 * 1000).getTime(); // Elements const hoursEl = document.getElementById('hours'); const minutesEl = document.getElementById('minutes'); const secondsEl = document.getElementById('seconds'); const hoursSegment = document.getElementById('hours-segment'); const minutesSegment = document.getElementById('minutes-segment'); const secondsSegment = document.getElementById('seconds-segment'); const countdownWarning = document.getElementById('countdown-warning'); const endingSoonRibbon = document.querySelector('.ending-soon-ribbon'); const nextItemPreview = document.getElementById('next-item-preview'); const closePreviewBtn = document.getElementById('close-preview'); const placeBidBtn = document.getElementById('place-bid-btn'); const viewDetailsBtn = document.getElementById('view-details-btn'); let warningShown = false; let ribbonShown = false; let nextItemShown = false; // Update the countdown every 1 second const x = setInterval(function() { // Get today's date and time const now = new Date().getTime(); // Find the distance between now and the countdown date const distance = countDownDate - now; // Time calculations for hours, minutes and seconds const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result hoursEl.textContent = hours.toString().padStart(2, '0'); minutesEl.textContent = minutes.toString().padStart(2, '0'); secondsEl.textContent = seconds.toString().padStart(2, '0'); // Visual indicators based on time remaining if (distance < 60000) { // Less than 1 minute secondsSegment.classList.add('urgent'); minutesSegment.classList.add('urgent'); hoursSegment.classList.add('urgent'); if (!warningShown) { countdownWarning.classList.add('show'); warningShown = true; } if (!ribbonShown) { endingSoonRibbon.classList.add('show'); ribbonShown = true; } } else if (distance < 300000) { // Less than 5 minutes secondsSegment.classList.add('urgent'); if (!warningShown) { countdownWarning.classList.add('show'); warningShown = true; } } // Show next item preview at 2 minutes if not already closed if (distance < 120000 && !nextItemShown) { nextItemPreview.classList.add('show'); nextItemShown = true; } // If the countdown is over if (distance < 0) { clearInterval(x); hoursEl.textContent = "00"; minutesEl.textContent = "00"; secondsEl.textContent = "00"; countdownWarning.textContent = "Auction Closed"; countdownWarning.classList.add('show'); hoursSegment.classList.remove('urgent'); minutesSegment.classList.remove('urgent'); secondsSegment.classList.remove('urgent'); placeBidBtn.disabled = true; placeBidBtn.textContent = "Bidding Closed"; placeBidBtn.style.opacity = "0.7"; placeBidBtn.style.cursor = "not-allowed"; endingSoonRibbon.textContent = "AUCTION CLOSED"; endingSoonRibbon.classList.add('show'); } }, 1000); // Close next item preview closePreviewBtn.addEventListener('click', function() { nextItemPreview.classList.remove('show'); }); // Place bid button interaction placeBidBtn.addEventListener('click', function() { // For demo, just show confirmation, would normally open bid modal this.textContent = "Bid Placed: $26,000"; setTimeout(() => { this.textContent = "Increase Your Bid"; document.querySelector('.bid-amount').textContent = "$26,000"; }, 1500); }); // View details button viewDetailsBtn.addEventListener('click', function() { // Toggle details view const itemDescription = document.querySelector('.item-description'); if (itemDescription.style.maxHeight) { itemDescription.style.maxHeight = null; this.textContent = "View Item Details & History"; } else { itemDescription.style.maxHeight = itemDescription.scrollHeight + 100 + "px"; this.textContent = "Hide Item Details"; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Museum Exhibit Countdown</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto+Slab:wght@300;400&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto Slab', serif; background-color: #f5f2e9; color: #3a3226; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; position: relative; } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAOHElEQVR4Xu2diXIUR5rH/5lV1dXd6m5JICHEIQQIjMEeGzPjwezant3xbsyMx7uzG7EbD/vgcXgcHo/H43E8HhuxE/uwd8fj8YNnPAbjB4zBgMFgsA02SMKAEILO7upWd3VVZe6XWdXVXd1qGVTIDVTQYalVmVlZ+cv/l1/mkQf0z+fqR9Cxww+g/yjJvwF5+Odk/HQ0O//uSUhIyEMK7FiJvx89aHjNzUmQkJCQkBAL+PfvBiPbJiQkJCQkJCSkvxLy739xnrGQkJCQkJCQkJD+Ssh//MV1akJCQkJCQkJCQvorIf/5V9cpCQkJCQkJCQkJ6a+E/NdfXackJCQkJCQkJCSkHxLiOiEhISEhISEhISH9lZD/+t199kJCQkJCQkJCQkL6KyF/+7v77IWEhISEhISEhIT0V0L+9nf32QsJCQkJCQkJCQnpr4T87e/usxcSEhISEhISEhLSXwn5rz+4z15ISEhISEhISEhIfyXkPx+4z15ISEhISEhISEhIfyXkvx64z15ISEhISEhISEhIfyXkb3/4/rP23aOvzJ9vO/wHhISEfLdqm3B8eHBw4PuQkcHEZkQ9vTlK+B3rMPAuRSrfJ/4pZA26azkRKZGKe0x8L2dXpNv3cspESEhveUOQbvEpGH+z0yTC6dTWWwD+KUNnKnRa74OZn5+bWQl+2eMcYtN+sC4JnR4rnYRIj5pY0vCWFcHuU0J8SvlJXKKVXy4cC+/DWXBaRp1AK/JeRr7r5SoQ0mPQ4Pc7mZ0ORKLPAbH9v23PNBLAUuDHl3lrQjqCbB9kf5hI+z4vJ9CyLcaazLbL0FvWm9cKYQa25qzFuP7CcEV42+UZLAcScsBZZztl2hbRXYMppM+g22mVFpMQXefjMDKFVcSYl5R9QOIqIazFQo2MpddKqOx36X0u4+hVNdwjv302bSvwUjvk/vKEPOf1G5vW3bBG1UVKEpQGLtWJpWahvBHHiZKWD/o+JMPZ/jKV9m36BdT5hAKvXtBIU0b0hZL+0mskukNuJCYl54wCZPSA8b21Bfhp27QvGOl25jxO+/LFa9dA2UL+fgIpyHbZRhtXoEoqWMdELlNIi8N3tI8/V0hnfCmZAqd6rrOydIPZr41BzxIZx3fvE68sB+8hHS2Q3o75QfKSqQrYlcTaHHSxQaU6JWj50qXLFxcPL9X6UuoxJr3a4ZnP4zyZHJd7mTskrkNR8qEU37r+eoJrT0oa53H/F6d7nE5PuHDGUSpIOe0QXVmJnEcJaR+07EbfRVDU1DdWLAhfGYq1h9nMQ2phsD3E4XGd8kfQUtvKZeGu+rYQBbOdNnSPQc+7LPNWiPR6qFdMTwlsXYQS5a3lOJJZ2p1NnS2OZXtZ5e9Ke+HFi+NTNH2uFrWlpblxMbsNMzwZEW9pD+lScb3nPGcJ8UlGDkR4vHAHfP05q/WlBHWjVP1JwLGGZTUkJaAcnW7tIV2k0B8zT7Wkc5w+Xym8zSJNdckbX3LxJDGkUMnSRBCWKZRoRJQj1rIhQlm6S0uadqZdyDHPVULyZtLpeBH3HJ4O8v9Zid8q4yRYwk5KkPX5rC61qZQwBB1mPpKGEtMUGg8KakoZ7rTwvNlHuuXdQ5Lr5LbJpnFI5+qVF8Q+JZNUJaZNUqMi2jCHaBsS0pQQtEvjTgMjrxwn57QHqenXp0x3OZxUYtNqXkrGXDYwGpI1Uw0MnppCbG6rJHa0+4TbDXRb0vnPl5T8w5aE/LqVZwkxynVy45WIeEUaKdENtJHEMgXUFqfS5lY67pKQtFgdQHrMZQyAE84CpfSxFDqU63Kb/+TIIP36CxrUUkPr8SiWnkzEp57IIimeTXlXJ0nRFR3aeAwuEUlPQlICL8fK+F8QwZcXKE4ehcavWMWzN67gUG/Kc3GhpLfHoB86fVCd8+6ej51CuL1vpNVs1ZKulHUU8TUJKZ/DH7eVsadSw4aniuhkDZRqHSfILl1eHUOkKYG0ORMqq0x0O+YiZfn1nI15SEXnchF56yCG7tzC8PztDEiTlLQHnLZwSEyrPSR4uF3/1EtCPDrRKiH5L6uVY7GmQ3LqQ6RpIpMYr2S0JSKvZIjkxVRKWuuG03/TU37qZaGYeSxtSoPHB5G49IqPKlgNpM6bLlnomHtWu/yFsGDXbqW3xdFBAnzpaEqIsDfS6hizKsEoW5DnJNZyERycWiF8SFbTxprS0VuC7T8iHpLhOc8sIQyBpXRYfBRGYQ9j49zAC1rgjXkF2+9roIYGo2xA1MzMIyJnTKUNt0CUDiV+qsSSGFqDQ2g9r6aVd7dCHKSjXT+KlGFpkx5KOp9bKumpiO/tUlvPjKh8faqTpZZL5nYpEW9+eS2yrqdA/9NFDF64hEw86aVWyGsvlsY82lWVt1xdPJgFwjv6RXxuuNQzHo1FoCfLGDhzGsULl2DqyZZtcQJfBFta+UwipzO0Ls6LbkHovY4OQdAJSFk+1rKZbYYuZbowqw6YzIq6plY6L0p9rjH05RdInDkHPZ60rjOp/AQxDk5Kz+lFr+/Fba4d83TffdZPQpgFtaY0Wh7SZLSwNXsNdC9tWQfS01KkLfXIzVUxHFJQjJXKtRPVtlSJ24qo+GNqHaUL51B8/SqSLkmXCtKxCaZyQtIgAI9mJI6OhKQOdTFvtvxUprVtLZvCZLYxMDSy0tW21bVzq2JXJtXQQSYh95ryvxwZeaTyRg1K8/2wSzVPgM6S0uyhpAHoXIpepCuC+U5OrdXElA0Rc02Z2jZ4cVKQkuGtLDPLoTFPuXuWD2UxNLRUF+fM0FLYqgqyM7OYO38F2vUbiKk6aCB6lAMhSbV0yJNMO3YqkVWvNfH1Lb/8B/eZmQlsU7UEwmiEYZ+mIQqdLwvBmjYN6xfXkNnE4FpbWXjnb13DqHLlMpR6DZGGgRhXtRKPJcZ+ZeEtAb96FnxKiP+7l3NIk8QIpYUTT1ulxVc9dYNEV+fRvV4TJpRHkxxHlSxJFDSXFZbOBitQrtyGevUa9FoVcQAJzZAxRdHM3wQtFmtZ6+38KG2jfBKgFJbeKG1yNIw8qDQkIVYzgylV2+M7Uw1R3FLF8aXFb6uU8nWP8hORgBDSuTatQ4jK8EUlc6qPFfI7+wTGjSOXsCy7RiWM4O/ZE7Pw+wlWbQfWFEXO+1JtaL6j5n83KKYzKVtVDwx6i/qTdGXL6OG2rT8l1UeRfNIQ4eI0m3vHJERSqUOqwCO9CnI0ykITW601VyZJw6+wBpfqHvs1h/tM8lXlnVobg/Ey8rQtj2sEFCeNjjKzJk/STQKatdK2j+QbA0YUY9GNUCIaNvBjfRx3RYIWOm7RJDylTUnZnH6Yjx/rUCMJmHoEsWgUGkW/Kqq1JaouJ92NHl8VFOA+qqHOlzD9VFvfxIq+VaqqRsVp1qgJjbJQG6NRxR/4vokO/FUbWXLQM9mGpNDxR0oN28rz8PQEDF1DUo3ARIwkUkOFdipIJxLCfj+RVVA30hAJA+tLC3h/YRZqfYnuXcgwcylqPzlJjPzYKSEZrcCfbL8OP8oZrVVJX5MvYZqZtSexTnwH01SFf0xPRDCrDuA5jGOzIj4vafuJ+3oGpX6XrO6oLMOojcIojaCSjYKtQm46+7DUMShTaUXFwt1NvUaWYVYNbKpWcUdbgFZZhJ5YRKpeQULXkVQiMBUNaiwKRBTUzSqiZpUaX0e8XEGSGoNMm0BmfAKZ0XGkkylMpeMoJxIQakotkYgZpFLHq6z0FvYhR1RgYKCEj8fPY5s4YVNw/8Sth8MsRFqWlmpCkKR7f6sPNLYpqfuRJamYykTxGaZwUEziGI3hoziS0Upc+uDvUyGbxYJTsGZoDTTMFGoa2X6jBvRMEloshUoiDlOLwsikYKZTiKajqEfiGImnkI4mEBtMI5rNIDE4hFg8AZXSJrNxKEyDGYvh3NgY3pzYAIVaP2YlJyWkkkpgQ2ECN8cm8fboRqwLs6/TfxqBFdJAk+4Eaf58fCuW7AXclbBGcwwdZvZFtIEQ71bRPYQaA3GpFjGrMCZKVdxcvIr66ARiNEmvkW7lEYTJqEHkI9ZU4k6Zx01SUVVdh1JvoEqLuMg7SyQj0NSowEyVZg5cIwrKmRTqEYrVSUXG02nExybRiMYQieiIpFOoJpJQBwdx+vIlfDwxicrQoGHouqKblcWpkeIw3hsrYE88jfPpUZxLFPEBDZyiFXBxlLKWP9a4I43YTJlQFurYM1/B+ZlzSM1fR3FhDvFGBVEarVaNQK+TkxBLIhoaU7cVE9/bGfexyCvd+T2+HoxbM+pAqsHb1xrG+NQ0tnx9DsXPPsfw5L2yd2ZpfQn5yWgULXdRmkIhm8PBHbvw1vp1OMZDcgkkKX9L62v2B3NvETnBpjF47WmRHVrC0KW1OI3nPLbxLkYvf8GC4gHNbZaWn/sFnJyq4eW5WZShiY6oM9E0Znbu0j5cN4nXd2zG2YF8YyoSkdJ5k15WXpLxLZgJYZ+LJuPh9Y8tgzVRpzkGj3jg7QTWAkpnCnGpKNfswucffInMzVsopjNlPZ2ur+zdN1iZHCkWJzLhIQdveU3w8JBRu3A9P4gD+zdifQKiM8rKPKO+WKtGjkmlK8HEJJMqatfLJ5NsQX0rlHK2GpZXTDxPbJMZNyJazVBGlDiuzNzDvfOnkb16DcVGY0qbmqytWbO29vDhw5GHtjvkSQHjH4jV6DxrODN7s42p3ZyBdcqwZA1FtNbPnD9K/aaQSicU7ZE5sYQ2d0cNpxaYGBmJG/nBwdV9P/bYnCDo+3f0XtZ3T/z7+97E/wOlHAJNTWgpPQAAAABJRU5ErkJggg=='); opacity: 0.1; pointer-events: none; } .container { max-width: 650px; width: 100%; padding: 30px; border-radius: 2px; background-color: #f9f6f1; border: 1px solid #d8cdb6; box-shadow: 0 10px 30px rgba(58, 50, 38, 0.1); position: relative; overflow: hidden; animation: fadeIn 1.5s ease-out; } .content { position: relative; z-index: 2; } h1 { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700; color: #4a3c28; margin-bottom: 20px; line-height: 1.2; letter-spacing: 0.5px; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 60px; height: 2px; background-color: #a38f6d; } h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #7d6c55; margin-bottom: 25px; font-weight: 400; letter-spacing: 0.5px; } p { font-size: 1.1rem; line-height: 1.7; color: #665e4c; margin-bottom: 25px; max-width: 580px; } .date-display { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; justify-content: flex-start; } .date-unit { display: flex; flex-direction: column; align-items: center; margin-right: 20px; position: relative; opacity: 0; animation: fadeInUp 0.8s ease-out forwards; } .date-unit:nth-child(1) { animation-delay: 0.3s; } .date-unit:nth-child(2) { animation-delay: 0.5s; } .date-unit:nth-child(3) { animation-delay: 0.7s; } .date-unit:nth-child(4) { animation-delay: 0.9s; } .date-value { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: #5a4a30; background-color: #efe8dc; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border: 1px solid #d8cdb6; border-radius: 2px; margin-bottom: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; transition: transform 0.3s ease; } .date-value::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } .date-value:hover { transform: translateY(-3px); } .date-label { font-family: 'Roboto Slab', serif; font-size: 0.9rem; font-weight: 300; color: #7d6c55; text-transform: uppercase; letter-spacing: 1px; } .notification-form { margin-top: 35px; padding-top: 30px; border-top: 1px solid #d8cdb6; opacity: 0; animation: fadeIn 1s ease-out 1.2s forwards; } .form-heading { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #5a4a30; margin-bottom: 15px; } .input-group { display: flex; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; } input[type="email"] { flex: 1; min-width: 250px; padding: 12px 15px; border: 1px solid #d8cdb6; background-color: #fcf9f5; color: #665e4c; font-family: 'Roboto Slab', serif; font-size: 1rem; border-radius: 2px; transition: all 0.3s ease; } input[type="email"]:focus { outline: none; border-color: #a38f6d; box-shadow: 0 0 0 2px rgba(163, 143, 109, 0.2); } button { background-color: #7d6c55; color: #fff; border: none; padding: 12px 25px; font-family: 'Roboto Slab', serif; font-size: 1rem; cursor: pointer; border-radius: 2px; transition: all 0.3s ease; position: relative; overflow: hidden; } button:hover { background-color: #61543f; } button:active { transform: translateY(1px); } .stamp { position: absolute; top: 25px; right: 25px; width: 100px; height: 100px; border: 2px solid #a38f6d; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(15deg); opacity: 0.7; background-color: rgba(163, 143, 109, 0.1); } .stamp-text { font-family: 'Playfair Display', serif; font-size: 1rem; color: #7d6c55; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 1px; transform: rotate(-15deg); line-height: 1.2; } .success-message { display: none; background-color: rgba(118, 158, 118, 0.2); border: 1px solid #769e76; color: #4a674a; padding: 15px; margin-top: 15px; border-radius: 2px; animation: fadeIn 0.5s ease-out; } .artifact-decoration { position: absolute; bottom: 20px; right: 20px; width: 150px; height: 100px; opacity: 0.1; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDE1MCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwIDUwQzIwIDI4LjkgMzcuOSAxMSA1OSAxMUg5MUMxMTIuMSAxMSAxMzAgMjguOSAxMzAgNTBDMTMwIDcxLjEgMTEyLjEgODkgOTEgODlINTlDMzcuOSA4OSAyMCA3MS4xIDIwIDUwWiIgc3Ryb2tlPSIjNWE0YTMwIiBzdHJva2Utd2lkdGg9IjMiLz48cGF0aCBkPSJNNTUgMzBMOTUgNzAiIHN0cm9rZT0iIzVhNGEzMCIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTk1IDMwTDU1IDcwIiBzdHJva2U9IiM1YTRhMzAiIHN0cm9rZS13aWR0aD0iMyIvPjwvc3ZnPg=='); background-repeat: no-repeat; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .container { padding: 20px; } h1 { font-size: 2rem; } h2 { font-size: 1.3rem; } .date-unit { margin-right: 10px; } .date-value { width: 65px; height: 65px; font-size: 2rem; } .stamp { width: 80px; height: 80px; top: 15px; right: 15px; } .stamp-text { font-size: 0.8rem; } .input-group { flex-direction: column; } button { width: 100%; } } </style> </head> <body> <div class="texture-overlay"></div> <div class="container"> <div class="content"> <h1>Ancient Egypt: Unveiling Pharaoh's Secrets</h1> <h2>A Special Exhibition at The Metropolitan Museum of Antiquities</h2> <p>Join us for an extraordinary journey through time as we showcase rare artifacts from the reign of Ramesses II, many displayed publicly for the first time. Discover meticulously preserved papyrus scrolls, ornate burial chambers, and jewelry from the royal court—each piece telling a story of ancient Egyptian civilization.</p> <div class="date-display"> <div class="date-unit"> <div class="date-value" id="days">00</div> <div class="date-label">Days</div> </div> <div class="date-unit"> <div class="date-value" id="hours">00</div> <div class="date-label">Hours</div> </div> <div class="date-unit"> <div class="date-value" id="minutes">00</div> <div class="date-label">Minutes</div> </div> <div class="date-unit"> <div class="date-value" id="seconds">00</div> <div class="date-label">Seconds</div> </div> </div> <div class="notification-form"> <div class="form-heading">Receive an invitation to our exclusive opening reception:</div> <div class="input-group"> <input type="email" id="email" placeholder="Your email address" aria-label="Your email address"> <button id="notify-btn" type="button">Notify Me</button> </div> <div class="success-message" id="success-message"> Thank you! We'll send you an invitation with all the details to your email address. </div> </div> </div> <div class="stamp"> <div class="stamp-text">Coming Soon</div> </div> <div class="artifact-decoration"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Set the exhibition date - 45 days from now const exhibitionDate = new Date(); exhibitionDate.setDate(exhibitionDate.getDate() + 45); exhibitionDate.setHours(10, 0, 0, 0); // 10 AM on the day // Countdown timer function updateCountdown() { const now = new Date(); const distance = exhibitionDate - now; // Calculate time units const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display time units with leading zeros document.getElementById('days').innerHTML = days < 10 ? `0${days}` : days; document.getElementById('hours').innerHTML = hours < 10 ? `0${hours}` : hours; document.getElementById('minutes').innerHTML = minutes < 10 ? `0${minutes}` : minutes; document.getElementById('seconds').innerHTML = seconds < 10 ? `0${seconds}` : seconds; // Add a subtle animation effect on seconds change const secondsElement = document.getElementById('seconds'); secondsElement.style.transform = 'scale(1.05)'; setTimeout(() => { secondsElement.style.transform = 'scale(1)'; }, 200); // If countdown is over if (distance < 0) { clearInterval(timer); document.getElementById('days').innerHTML = "00"; document.getElementById('hours').innerHTML = "00"; document.getElementById('minutes').innerHTML = "00"; document.getElementById('seconds').innerHTML = "00"; } } // Run countdown immediately and then every second updateCountdown(); const timer = setInterval(updateCountdown, 1000); // Notification form handling const notifyBtn = document.getElementById('notify-btn'); const emailInput = document.getElementById('email'); const successMessage = document.getElementById('success-message'); notifyBtn.addEventListener('click', function() { const email = emailInput.value.trim(); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email && emailPattern.test(email)) { // Simulate form submission notifyBtn.innerHTML = 'Sending...'; setTimeout(() => { emailInput.value = ''; successMessage.style.display = 'block'; notifyBtn.innerHTML = 'Notify Me'; // Fade out success message after 5 seconds setTimeout(() => { successMessage.style.opacity = '0'; successMessage.style.transition = 'opacity 1s ease-out'; // Hide after fade out setTimeout(() => { successMessage.style.display = 'none'; successMessage.style.opacity = '1'; successMessage.style.transition = 'none'; }, 1000); }, 5000); }, 1500); } else { // Simple validation feedback emailInput.style.borderColor = '#c77'; emailInput.style.backgroundColor = 'rgba(255, 230, 230, 0.5)'; setTimeout(() => { emailInput.style.borderColor = '#d8cdb6'; emailInput.style.backgroundColor = '#fcf9f5'; }, 2000); } }); // Add hover effect to countdown units const dateUnits = document.querySelectorAll('.date-value'); dateUnits.forEach(unit => { unit.addEventListener('mouseover', function() { this.style.backgroundColor = '#e8dfd0'; }); unit.addEventListener('mouseout', function() { this.style.backgroundColor = '#efe8dc'; }); }); }); </script> </body> </html>
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif; } body { background: #f8f4f1; color: #3a3a3a; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .campaign-container { width: 100%; max-width: 650px; background: linear-gradient(145deg, #fff8f5, #fff0e8); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(203, 86, 36, 0.1); position: relative; overflow: hidden; } .campaign-header { text-align: center; margin-bottom: 20px; } .campaign-title { font-size: 2.4rem; font-weight: 800; color: #8b2c28; margin-bottom: 10px; position: relative; display: inline-block; } .campaign-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff8642, #cb5624); border-radius: 2px; transform-origin: left; animation: underlinePulse 3s infinite; } @keyframes underlinePulse { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.8); opacity: 0.7; } } .campaign-subtitle { font-size: 1.2rem; color: #cb5624; font-weight: 600; } .progress-container { margin: 30px 0; } .progress-stats { display: flex; justify-content: space-between; margin-bottom: 10px; } .stat { text-align: center; flex: 1; } .stat-value { font-size: 1.8rem; font-weight: 700; color: #8b2c28; } .stat-label { font-size: 0.9rem; color: #cb5624; } .progress-bar-container { height: 15px; background-color: rgba(203, 86, 36, 0.2); border-radius: 10px; overflow: hidden; position: relative; } .progress-bar { height: 100%; background: linear-gradient(90deg, #ff8642, #cb5624); border-radius: 10px; width: 0; transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .countdown-container { display: flex; justify-content: center; margin: 30px 0; } .countdown-box { display: flex; flex-direction: column; align-items: center; margin: 0 10px; width: 75px; height: 90px; background: linear-gradient(145deg, #fff, #ffe6d7); border-radius: 15px; box-shadow: 0 5px 15px rgba(203, 86, 36, 0.1); padding: 10px 0; position: relative; overflow: hidden; transition: transform 0.3s ease; } .countdown-box:hover { transform: translateY(-5px); } .countdown-box::before { content: ''; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; background: linear-gradient(90deg, #ff8642, #cb5624); border-radius: 2px 2px 0 0; } .countdown-value { font-size: 2.5rem; font-weight: 800; color: #8b2c28; line-height: 1; margin-top: 5px; } .countdown-label { font-size: 0.8rem; color: #cb5624; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; } .action-container { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } .action-button { padding: 14px 36px; background: linear-gradient(90deg, #ff8642, #cb5624); color: white; border: none; border-radius: 50px; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(203, 86, 36, 0.3); position: relative; overflow: hidden; } .action-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(203, 86, 36, 0.4); } .action-button:active { transform: translateY(0); } .action-button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); transform: translateX(-100%); } .action-button:hover::after { animation: buttonShine 1.5s; } @keyframes buttonShine { 100% { transform: translateX(100%); } } .social-share { display: flex; margin-top: 20px; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 8px; cursor: pointer; box-shadow: 0 3px 10px rgba(203, 86, 36, 0.1); transition: all 0.3s ease; } .social-icon:hover { transform: translateY(-3px) rotate(10deg); box-shadow: 0 5px 15px rgba(203, 86, 36, 0.2); background: linear-gradient(90deg, #ff8642, #cb5624); } .social-icon:hover svg { fill: white; } .social-icon svg { width: 20px; height: 20px; fill: #cb5624; transition: fill 0.3s ease; } .heartbeat { position: relative; } .heartbeat::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(203, 86, 36, 0.3); transform: scale(0); animation: heartbeat 1.5s infinite; } @keyframes heartbeat { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .floating-badges { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; } .badge { padding: 6px 12px; background: #fff; border-radius: 20px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(203, 86, 36, 0.1); font-size: 0.8rem; font-weight: 700; color: #8b2c28; display: flex; align-items: center; } .badge svg { width: 14px; height: 14px; margin-right: 5px; fill: #ff8642; } .backer-preview { margin-top: 20px; text-align: center; } .recent-backers { display: flex; justify-content: center; margin-top: 10px; } .backer { width: 35px; height: 35px; border-radius: 50%; background: #cb5624; color: white; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 0.8rem; margin: 0 -5px; box-shadow: 0 3px 5px rgba(139, 44, 40, 0.2); transition: transform 0.3s ease; } .backer:hover { transform: translateY(-3px) scale(1.1); z-index: 5; } .backer:nth-child(2n) { background: #ff8642; } .backer:nth-child(3n) { background: #8b2c28; } .backer-count { font-size: 0.9rem; color: #cb5624; margin-top: 10px; font-weight: 600; } @media (max-width: 600px) { .campaign-container { padding: 20px; } .campaign-title { font-size: 1.8rem; } .campaign-subtitle { font-size: 1rem; } .countdown-box { width: 60px; height: 80px; margin: 0 5px; } .countdown-value { font-size: 2rem; } .countdown-label { font-size: 0.7rem; } .action-button { padding: 12px 30px; font-size: 1.1rem; } .stat-value { font-size: 1.5rem; } } .confetti { position: absolute; width: 10px; height: 10px; background-color: #ff8642; border-radius: 50%; opacity: 0; animation: confetti-fall 4s ease-out forwards; z-index: -1; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(300px) rotate(720deg); opacity: 0; } } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } </style> </head> <body> <div class="campaign-container"> <div class="campaign-header"> <h1 class="campaign-title">Save Oakwood Community Garden</h1> <p class="campaign-subtitle">Help us purchase the land before it's sold to developers</p> </div> <div class="progress-container"> <div class="progress-stats"> <div class="stat"> <div class="stat-value">$42,350</div> <div class="stat-label">Raised</div> </div> <div class="stat"> <div class="stat-value">$75,000</div> <div class="stat-label">Goal</div> </div> <div class="stat"> <div class="stat-value">217</div> <div class="stat-label">Backers</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar" id="progressBar"></div> </div> </div> <div class="countdown-container"> <div class="countdown-box"> <div class="countdown-value" id="days">00</div> <div class="countdown-label">Days</div> </div> <div class="countdown-box"> <div class="countdown-value" id="hours">00</div> <div class="countdown-label">Hours</div> </div> <div class="countdown-box"> <div class="countdown-value" id="minutes">00</div> <div class="countdown-label">Minutes</div> </div> <div class="countdown-box"> <div class="countdown-value" id="seconds">00</div> <div class="countdown-label">Seconds</div> </div> </div> <div class="action-container"> <button class="action-button pulse-animation" id="supportButton">Support This Project</button> <div class="social-share"> <div class="social-icon"> <svg viewBox="0 0 24 24"> <path d="M18.3,8.5L13.4,3.6c-0.4-0.4-1-0.4-1.4,0L7.1,8.5c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.1-3.1V16c0,0.6,0.4,1,1,1s1-0.4,1-1V6.8l3.1,3.1c0.4,0.4,1,0.4,1.4,0S18.7,8.9,18.3,8.5z"/> <path d="M21,16v3c0,0.6-0.4,1-1,1H4c-0.6,0-1-0.4-1-1v-3c0-0.6-0.4-1-1-1s-1,0.4-1,1v3c0,1.7,1.3,3,3,3h16c1.7,0,3-1.3,3-3v-3c0-0.6-0.4-1-1-1S21,15.4,21,16z"/> </svg> </div> <div class="social-icon heartbeat"> <svg viewBox="0 0 24 24"> <path d="M20.8,4.6c-2.1-2.1-5.5-2.1-7.6,0L12,5.8l-1.2-1.2c-2.1-2.1-5.5-2.1-7.6,0s-2.1,5.5,0,7.6l1.2,1.2L12,21l7.6-7.6l1.2-1.2C22.9,10.1,22.9,6.7,20.8,4.6z"/> </svg> </div> <div class="social-icon"> <svg viewBox="0 0 24 24"> <path d="M18,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M9,4h6v2H9V4z M12,19c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S14.2,19,12,19z M12,13c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,13,12,13z"/> </svg> </div> </div> </div> <div class="backer-preview"> <div class="recent-backers"> <div class="backer">KS</div> <div class="backer">TD</div> <div class="backer">RJ</div> <div class="backer">MP</div> <div class="backer">AL</div> <div class="backer">+</div> </div> <div class="backer-count">Join 217 others backing this project</div> </div> <div class="floating-badges"> <div class="badge"> <svg viewBox="0 0 24 24"> <path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M10.94,15.54L7.4,12l1.41-1.41l2.12,2.12l4.24-4.24l1.41,1.41L10.94,15.54z"/> </svg> Verified Project </div> <div class="badge"> <svg viewBox="0 0 24 24"> <path d="M16,6l2.29,2.29l-4.88,4.88l-4-4L2,16.59L3.41,18l6-6l4,4l6.3-6.29L22,12V6H16z"/> </svg> Trending </div> </div> <div id="confettiContainer"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Set end date (14 days from now) const endDate = new Date(); endDate.setDate(endDate.getDate() + 14); endDate.setHours(23, 59, 59, 0); // Update countdown function updateCountdown() { const now = new Date(); const diff = endDate - now; // If the campaign has ended if (diff <= 0) { document.getElementById('days').textContent = '00'; document.getElementById('hours').textContent = '00'; document.getElementById('minutes').textContent = '00'; document.getElementById('seconds').textContent = '00'; return; } 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.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); } // Initial countdown update updateCountdown(); // Update countdown every second setInterval(updateCountdown, 1000); // Update progress bar const currentAmount = 42350; const goalAmount = 75000; const progressPercentage = (currentAmount / goalAmount) * 100; setTimeout(() => { document.getElementById('progressBar').style.width = `${progressPercentage}%`; }, 500); // Support button click effect const supportButton = document.getElementById('supportButton'); supportButton.addEventListener('click', function(e) { e.preventDefault(); // Create confetti effect createConfetti(); // Show "thank you" feedback this.textContent = "Thank You!"; setTimeout(() => { this.textContent = "Support This Project"; }, 2000); }); // Create confetti effect function createConfetti() { const confettiContainer = document.getElementById('confettiContainer'); const colors = ['#ff8642', '#cb5624', '#8b2c28', '#ffb88c']; for (let i = 0; i < 50; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.left = `${Math.random() * 100}%`; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.animationDuration = `${Math.random() * 3 + 2}s`; confetti.style.animationDelay = `${Math.random() * 0.5}s`; confettiContainer.appendChild(confetti); // Remove confetti after animation setTimeout(() => { confetti.remove(); }, 4000); } } // Hover effects for backers preview const backers = document.querySelectorAll('.backer'); backers.forEach(backer => { backer.addEventListener('mouseenter', function() { this.style.zIndex = '10'; }); backer.addEventListener('mouseleave', function() { setTimeout(() => { this.style.zIndex = ''; }, 300); }); }); // Simulate new backer joining occasionally setInterval(() => { const statValue = document.querySelector('.stat:nth-child(3) .stat-value'); const currentBackers = parseInt(statValue.textContent); statValue.textContent = (currentBackers + 1).toString(); const backerCount = document.querySelector('.backer-count'); backerCount.textContent = `Join ${currentBackers + 1} others backing this project`; // Flash effect on the backer count backerCount.style.color = '#8b2c28'; setTimeout(() => { backerCount.style.color = '#cb5624'; }, 1000); }, 30000); // Every 30 seconds }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>APEX Limited Edition Drop</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } :root { --accent-color: #FF3366; --bg-color: #121212; --text-color: #FFFFFF; --text-secondary: #AAAAAA; --surface-color: #1E1E1E; } body { background-color: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; } .container { width: 100%; max-width: 700px; height: 700px; padding: 2rem; display: flex; flex-direction: column; position: relative; overflow: hidden; } .product-teaser { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } .logo { font-weight: 800; font-size: 2rem; letter-spacing: 3px; margin-bottom: 1rem; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.8s ease forwards 0.2s; } .product-name { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; letter-spacing: -1px; line-height: 1.1; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.8s ease forwards 0.4s; } .product-description { text-align: center; color: var(--text-secondary); max-width: 80%; margin-bottom: 2.5rem; line-height: 1.6; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.8s ease forwards 0.6s; } .countdown-wrapper { display: flex; justify-content: center; align-items: center; margin-bottom: 3rem; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.8s ease forwards 0.8s; } .countdown-box { display: flex; flex-direction: column; align-items: center; margin: 0 1rem; position: relative; } .countdown-number { font-size: 3rem; font-weight: 700; width: 80px; height: 80px; background-color: var(--surface-color); display: flex; justify-content: center; align-items: center; border-radius: 8px; margin-bottom: 0.5rem; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .countdown-number::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); animation: scanline 2s linear infinite; } .countdown-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } .cta-section { display: flex; flex-direction: column; align-items: center; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.8s ease forwards 1s; } .notify-me { background-color: transparent; color: var(--text-color); border: 2px solid var(--text-color); padding: 0.8rem 2.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 30px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; margin-bottom: 1.5rem; } .notify-me:hover { background-color: var(--accent-color); border-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 51, 102, 0.3); } .notify-me:active { transform: translateY(-1px); } .notify-form { display: flex; width: 100%; max-width: 400px; border-radius: 30px; overflow: hidden; height: 50px; margin-bottom: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); opacity: 0; transform: scale(0.95); pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .notify-form.visible { opacity: 1; transform: scale(1); pointer-events: all; } .notify-form input { flex: 1; border: none; background-color: var(--surface-color); color: var(--text-color); padding: 0 1.5rem; font-size: 0.9rem; } .notify-form input:focus { outline: none; } .notify-form button { background-color: var(--accent-color); color: white; border: none; padding: 0 1.5rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; } .notify-form button:hover { background-color: #FF144A; } .accent-circle { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: var(--accent-color); filter: blur(80px); opacity: 0.1; z-index: 0; animation: pulse 8s ease-in-out infinite alternate; } .accent-circle:nth-child(1) { top: -50px; right: -50px; animation-delay: 0s; } .accent-circle:nth-child(2) { bottom: -50px; left: -50px; animation-delay: 2s; } .grid-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; } .success-message { position: absolute; bottom: 0; left: 0; width: 100%; background-color: var(--accent-color); color: white; text-align: center; padding: 1rem; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .success-message.visible { transform: translateY(0); } .product-image { position: absolute; width: 200px; height: 200px; background-color: var(--surface-color); border-radius: 10px; display: flex; justify-content: center; align-items: center; opacity: 0; transform: translate(-50%, -50%) scale(0.8); pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 5; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .product-image::after { content: 'SNEAK PEEK'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; letter-spacing: 2px; color: var(--accent-color); } .exclusivity-badge { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 0.8rem; padding: 0.5rem 1rem; background-color: var(--accent-color); color: white; border-radius: 20px; font-weight: 600; letter-spacing: 1px; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.8s ease forwards 0.2s; } @keyframes fadeInUp { to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.05; } 50% { transform: scale(1.5); opacity: 0.15; } 100% { transform: scale(1); opacity: 0.05; } } @keyframes scanline { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } 20%, 40%, 60%, 80% { transform: translateX(2px); } } @media (max-width: 600px) { .product-name { font-size: 2.5rem; } .countdown-number { font-size: 2rem; width: 60px; height: 60px; } .countdown-box { margin: 0 0.5rem; } .container { padding: 1.5rem; } } </style> </head> <body> <div class="container"> <div class="grid-pattern"></div> <div class="accent-circle"></div> <div class="accent-circle"></div> <div class="exclusivity-badge">EXTREMELY LIMITED</div> <div class="product-teaser"> <div class="logo">APEX</div> <h1 class="product-name">PHANTOM X-1<br>SNEAKERS</h1> <p class="product-description">Only 100 pairs worldwide. Crafted with sustainable materials and advanced cushioning technology. Each pair comes with a unique NFT authentication.</p> <div class="countdown-wrapper"> <div class="countdown-box"> <div class="countdown-number" id="days">00</div> <div class="countdown-label">Days</div> </div> <div class="countdown-box"> <div class="countdown-number" id="hours">00</div> <div class="countdown-label">Hours</div> </div> <div class="countdown-box"> <div class="countdown-number" id="minutes">00</div> <div class="countdown-label">Minutes</div> </div> <div class="countdown-box"> <div class="countdown-number" id="seconds">00</div> <div class="countdown-label">Seconds</div> </div> </div> <div class="cta-section"> <button class="notify-me" id="notifyBtn">Get Early Access</button> <div class="notify-form" id="notifyForm"> <input type="email" placeholder="Enter your email for early access" id="emailInput"> <button type="button" id="submitBtn">Submit</button> </div> </div> </div> <div class="product-image" id="productImage"></div> <div class="success-message" id="successMessage"> You're in! You'll be notified 1 hour before the drop. </div> </div> <script> // Set the release date (7 days from now for this example) const releaseDate = new Date(); releaseDate.setDate(releaseDate.getDate() + 7); releaseDate.setHours(11, 0, 0, 0); // 11:00 AM // Elements const daysEl = document.getElementById('days'); const hoursEl = document.getElementById('hours'); const minutesEl = document.getElementById('minutes'); const secondsEl = document.getElementById('seconds'); const notifyBtn = document.getElementById('notifyBtn'); const notifyForm = document.getElementById('notifyForm'); const submitBtn = document.getElementById('submitBtn'); const emailInput = document.getElementById('emailInput'); const successMessage = document.getElementById('successMessage'); const productImage = document.getElementById('productImage'); // Update countdown timer function updateCountdown() { const now = new Date(); const diff = releaseDate - now; if (diff <= 0) { // Release time has passed daysEl.textContent = "00"; hoursEl.textContent = "00"; minutesEl.textContent = "00"; secondsEl.textContent = "00"; return; } 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); daysEl.textContent = days.toString().padStart(2, '0'); hoursEl.textContent = hours.toString().padStart(2, '0'); minutesEl.textContent = minutes.toString().padStart(2, '0'); secondsEl.textContent = seconds.toString().padStart(2, '0'); // Add pulse effect to seconds secondsEl.style.color = 'var(--accent-color)'; setTimeout(() => { secondsEl.style.color = 'var(--text-color)'; }, 500); } // Initialize countdown updateCountdown(); setInterval(updateCountdown, 1000); // Event listeners notifyBtn.addEventListener('click', () => { notifyForm.classList.add('visible'); emailInput.focus(); }); submitBtn.addEventListener('click', () => { const email = emailInput.value.trim(); if (!email || !email.includes('@') || !email.includes('.')) { emailInput.style.animation = 'shake 0.5s'; setTimeout(() => { emailInput.style.animation = ''; }, 500); return; } notifyForm.classList.remove('visible'); successMessage.classList.add('visible'); setTimeout(() => { successMessage.classList.remove('visible'); }, 3000); }); // Mousemove effect for countdown numbers document.querySelectorAll('.countdown-number').forEach(box => { box.addEventListener('mouseover', function() { this.style.transform = 'scale(1.05)'; this.style.backgroundColor = '#2A2A2A'; this.style.transition = 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; }); box.addEventListener('mouseout', function() { this.style.transform = 'scale(1)'; this.style.backgroundColor = 'var(--surface-color)'; }); }); // Product image sneak peek on hover document.addEventListener('mousemove', (e) => { if (e.clientY < window.innerHeight / 2) { productImage.style.opacity = '0'; productImage.style.transform = 'translate(-50%, -50%) scale(0.8)'; return; } const x = e.clientX; const y = e.clientY; productImage.style.left = `${x}px`; productImage.style.top = `${y}px`; productImage.style.opacity = '1'; productImage.style.transform = 'translate(-50%, -50%) scale(1)'; }); document.addEventListener('mouseleave', () => { productImage.style.opacity = '0'; }); // Add glitch effect to logo on click document.querySelector('.logo').addEventListener('click', function() { this.style.animation = 'none'; this.offsetHeight; // Trigger reflow this.style.animation = 'glitch 0.5s'; // Flash accent color circles document.querySelectorAll('.accent-circle').forEach(circle => { circle.style.opacity = '0.3'; setTimeout(() => { circle.style.opacity = '0.1'; }, 300); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Limited Time Offer</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } :root { --primary: #ff6b6b; --secondary: #5f27cd; --accent: #feca57; --text: #2c3e50; --light: #f9f9f9; --shadow: rgba(0, 0, 0, 0.1); } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f6f6f6 0%, #e9e9e9 100%); } .app-container { position: relative; width: 100%; max-width: 360px; height: 640px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px var(--shadow); } .app-header { position: relative; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); height: 180px; padding: 20px; color: white; display: flex; flex-direction: column; justify-content: space-between; } .app-title { display: flex; justify-content: space-between; align-items: center; } .app-title h1 { font-size: 1.4rem; font-weight: 600; } .close-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; } .close-btn:hover { background: rgba(255, 255, 255, 0.4); transform: rotate(90deg); } .offer-content { padding: 25px; text-align: center; } .offer-badge { background: var(--accent); color: var(--text); font-weight: 600; font-size: 0.9rem; padding: 8px 16px; border-radius: 20px; display: inline-block; margin-bottom: 16px; box-shadow: 0 4px 10px rgba(254, 202, 87, 0.3); transform: translateY(-50%); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 4px 10px rgba(254, 202, 87, 0.3); } 50% { box-shadow: 0 4px 20px rgba(254, 202, 87, 0.5); } 100% { box-shadow: 0 4px 10px rgba(254, 202, 87, 0.3); } } .product-img { width: 180px; height: 180px; margin: 0 auto 24px; position: relative; } .product-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 15px var(--shadow)); transition: transform 0.3s ease; } .product-img:hover img { transform: translateY(-5px) scale(1.05); } .offer-title { font-size: 1.6rem; color: var(--text); margin-bottom: 12px; font-weight: 700; } .offer-description { color: #7a8a9e; font-size: 0.95rem; line-height: 1.5; margin-bottom: 24px; } .countdown-container { display: flex; justify-content: center; gap: 10px; margin-bottom: 32px; } .countdown-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; padding: 12px; width: 64px; box-shadow: 0 4px 8px var(--shadow); } .countdown-number { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .countdown-label { font-size: 0.7rem; color: #7a8a9e; text-transform: uppercase; letter-spacing: 1px; } .price-container { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 32px; } .original-price { color: #7a8a9e; font-size: 1.1rem; text-decoration: line-through; } .discount-price { color: var(--primary); font-size: 1.8rem; font-weight: 700; } .cta-button { display: block; width: 100%; padding: 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 8px 16px rgba(95, 39, 205, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(95, 39, 205, 0.4); } .cta-button:active { transform: translateY(1px); box-shadow: 0 5px 10px rgba(95, 39, 205, 0.4); } .cta-button::after { content: ''; position: absolute; width: 30px; height: 100px; background: rgba(255, 255, 255, 0.3); top: -50%; left: -100px; transform: rotate(30deg); transition: all 0.6s ease; } .cta-button:hover::after { left: 120%; } .terms-text { font-size: 0.7rem; color: #a1a8b3; margin-top: 16px; text-align: center; } .confetti { position: absolute; width: 10px; height: 10px; background-color: #FFC107; border-radius: 50%; pointer-events: none; opacity: 0; } @keyframes confettiFall { 0% { transform: translateY(-50px) rotate(0deg); opacity: 1; } 100% { transform: translateY(500px) rotate(360deg); opacity: 0; } } .wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,261.3C672,256,768,224,864,224C960,224,1056,256,1152,261.3C1248,267,1344,245,1392,234.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); background-size: cover; background-repeat: no-repeat; } @media (max-width: 380px) { .app-container { width: 95%; height: 600px; } .countdown-item { width: 50px; padding: 8px; } .countdown-number { font-size: 1.2rem; } .offer-title { font-size: 1.4rem; } } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="app-title"> <h1>Summer Fitness App</h1> <div class="close-btn">✕</div> </div> <div class="wave"></div> </div> <div class="offer-content"> <div class="offer-badge">LIMITED TIME ONLY</div> <div class="product-img"> <img src="https://assets.codepen.io/10602517/Fitness_App.png" alt="Premium Fitness Package"> </div> <h2 class="offer-title">Premium Fitness Package</h2> <p class="offer-description">Unlock 500+ personalized workouts, nutrition plans, and live coaching sessions with our top trainers.</p> <div class="countdown-container"> <div class="countdown-item"> <span class="countdown-number" id="days">02</span> <span class="countdown-label">Days</span> </div> <div class="countdown-item"> <span class="countdown-number" id="hours">14</span> <span class="countdown-label">Hours</span> </div> <div class="countdown-item"> <span class="countdown-number" id="minutes">33</span> <span class="countdown-label">Mins</span> </div> <div class="countdown-item"> <span class="countdown-number" id="seconds">59</span> <span class="countdown-label">Secs</span> </div> </div> <div class="price-container"> <span class="original-price">$89.99</span> <span class="discount-price">$49.99</span> </div> <button class="cta-button" id="claimButton">Claim 45% Off Now</button> <p class="terms-text">Offer valid until June 30. Cancel anytime during the first 14 days.</p> </div> </div> <script> // Countdown timer functionality function updateCountdown() { // Fixed values for demonstration const days = parseInt(document.getElementById('days').textContent); const hours = parseInt(document.getElementById('hours').textContent); const minutes = parseInt(document.getElementById('minutes').textContent); let seconds = parseInt(document.getElementById('seconds').textContent); seconds--; if (seconds < 0) { seconds = 59; let mins = parseInt(document.getElementById('minutes').textContent); mins--; if (mins < 0) { mins = 59; let hrs = parseInt(document.getElementById('hours').textContent); hrs--; if (hrs < 0) { hrs = 23; let d = parseInt(document.getElementById('days').textContent); d--; if (d < 0) { // Timer ended document.getElementById('days').textContent = '00'; document.getElementById('hours').textContent = '00'; document.getElementById('minutes').textContent = '00'; document.getElementById('seconds').textContent = '00'; return; } document.getElementById('days').textContent = d < 10 ? '0' + d : d; } document.getElementById('hours').textContent = hrs < 10 ? '0' + hrs : hrs; } document.getElementById('minutes').textContent = mins < 10 ? '0' + mins : mins; } document.getElementById('seconds').textContent = seconds < 10 ? '0' + seconds : seconds; } setInterval(updateCountdown, 1000); // Close button functionality document.querySelector('.close-btn').addEventListener('click', function() { const container = document.querySelector('.app-container'); container.style.animation = 'scaleDown 0.3s forwards'; setTimeout(() => { container.style.display = 'none'; }, 300); }); // Confetti animation when button is clicked document.getElementById('claimButton').addEventListener('click', function(e) { // Button press effect this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); // Create confetti createConfetti(e.clientX, e.clientY); // Change button text to show success this.textContent = 'Offer Claimed!'; this.style.background = 'linear-gradient(135deg, #20bf6b 0%, #0fb9b1 100%)'; // Change button back after 3 seconds setTimeout(() => { this.textContent = 'Claim 45% Off Now'; this.style.background = 'linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%)'; }, 3000); }); function createConfetti(x, y) { const colors = ['#FF6B6B', '#5F27CD', '#FECA57', '#48DBFB', '#1DD1A1']; for (let i = 0; i < 50; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.left = x + 'px'; confetti.style.top = y + 'px'; // Random size const size = Math.random() * 10 + 5; confetti.style.width = size + 'px'; confetti.style.height = size + 'px'; // Random opacity confetti.style.opacity = Math.random() + 0.5; // Animation const duration = Math.random() * 3 + 1; confetti.style.animation = `confettiFall ${duration}s ease forwards`; document.body.appendChild(confetti); setTimeout(() => { confetti.remove(); }, duration * 1000); } } // Set a placeholder image if the actual one fails to load document.querySelector('.product-img img').onerror = function() { this.src = 'data:image/svg+xml;utf8,<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="180" height="180" rx="90" fill="%23f0f0f0"/><path d="M90 65C82.8203 65 77 70.8203 77 78C77 85.1797 82.8203 91 90 91C97.1797 91 103 85.1797 103 78C103 70.8203 97.1797 65 90 65ZM90 88.5C84.2109 88.5 79.5 83.7891 79.5 78C79.5 72.2109 84.2109 67.5 90 67.5C95.7891 67.5 100.5 72.2109 100.5 78C100.5 83.7891 95.7891 88.5 90 88.5Z" fill="%23888888"/><path d="M109.062 109.062C108.25 107.5 106.562 106.5 104.688 106.5H75.3125C73.4375 106.5 71.75 107.5 70.9375 109.062C70.125 110.625 70.25 112.5 71.25 113.938L85.9375 135.562C86.875 136.938 88.375 137.75 90 137.75C91.625 137.75 93.125 136.938 94.0625 135.562L108.75 113.938C109.75 112.5 109.875 110.625 109.062 109.062ZM90 135.25C89.125 135.25 88.375 134.812 87.875 134.062L73.1875 112.438C72.6875 111.688 72.625 110.75 73.0625 110C73.5 109.25 74.375 108.75 75.3125 108.75H104.688C105.625 108.75 106.5 109.25 106.938 110C107.375 110.75 107.312 111.688 106.812 112.438L92.125 134.062C91.625 134.812 90.875 135.25 90 135.25Z" fill="%23888888"/></svg>'; }; </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>New Episode Countdown</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap'); body { width: 100%; height: 100vh; overflow: hidden; background: linear-gradient(135deg, #0f0f1a 0%, #2c2c54 100%); color: white; display: flex; justify-content: center; align-items: center; } .container { position: relative; width: 100%; max-width: 700px; height: 700px; padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } .cinematic-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px ); pointer-events: none; z-index: 2; } .vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.8); pointer-events: none; z-index: 1; } .content { position: relative; z-index: 3; text-align: center; width: 100%; } .show-logo { margin-bottom: 1.5rem; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.2s; } .logo-text { font-size: 3rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(to right, #ff8a00, #e52e71); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.5rem; text-shadow: 0 0 15px rgba(229, 46, 113, 0.3); } .season-info { font-size: 1.2rem; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.8); transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.4s; } .episode-title { font-size: 2rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 2.5rem; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.6s; } .countdown-container { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 3rem; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.8s; } .countdown-block { display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; } .time-value { font-size: 3.5rem; font-weight: 800; background: linear-gradient(to bottom, #ffffff, #b8b8b8); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; width: 70px; height: 80px; display: flex; align-items: center; justify-content: center; } .time-unit { font-size: 0.9rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; margin-top: 0.5rem; color: rgba(255, 255, 255, 0.6); } .time-separator { font-size: 2.5rem; align-self: center; margin-top: -1rem; color: rgba(255, 255, 255, 0.4); } .notification-block { margin-top: 1rem; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 1s; } .notification-button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.8rem 2rem; color: white; font-size: 1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; letter-spacing: 1px; backdrop-filter: blur(10px); } .notification-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.8s ease; } .notification-button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .notification-button:hover::before { left: 100%; } .notification-text { margin-top: 0.8rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); } .streaming-platforms { margin-top: 2rem; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 1.2s; } .platform-text { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.5rem; } .platform-icons { display: flex; justify-content: center; gap: 1.2rem; } .platform-icon { width: 35px; height: 35px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); } .platform-icon:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.2); } /* Animated background element */ .bg-circles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .circle { position: absolute; border-radius: 50%; background: radial-gradient(circle at center, rgba(229, 46, 113, 0.2), transparent 70%); animation: pulse 8s infinite alternate ease-in-out; opacity: 0.3; } .circle:nth-child(1) { top: 20%; left: -10%; width: 500px; height: 500px; animation-delay: 0s; } .circle:nth-child(2) { top: 60%; right: -5%; width: 400px; height: 400px; background: radial-gradient(circle at center, rgba(255, 138, 0, 0.2), transparent 70%); animation-delay: 2s; } .circle:nth-child(3) { bottom: -10%; left: 30%; width: 300px; height: 300px; background: radial-gradient(circle at center, rgba(103, 65, 217, 0.2), transparent 70%); animation-delay: 4s; } .flip-animation { position: relative; overflow: hidden; height: 80px; } .flip-number-current, .flip-number-next { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .flip-number-current { transform: rotateX(0deg); } .flip-number-next { transform: rotateX(-90deg); } .flip-animation.flip .flip-number-current { transform: rotateX(90deg); } .flip-animation.flip .flip-number-next { transform: rotateX(0deg); } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.2; } 50% { transform: scale(1.1); opacity: 0.3; } 100% { transform: scale(1); opacity: 0.2; } } .notification-success { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: linear-gradient(135deg, rgba(0, 184, 148, 0.9), rgba(0, 206, 201, 0.9)); color: white; padding: 15px 25px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 100; opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 10px; } .notification-success.show { transform: translateX(-50%) translateY(0); opacity: 1; } @media (max-width: 600px) { .logo-text { font-size: 2.2rem; } .season-info { font-size: 1rem; letter-spacing: 3px; } .episode-title { font-size: 1.5rem; } .countdown-container { gap: 0.8rem; } .time-value { font-size: 2.5rem; width: 60px; height: 60px; } .time-unit { font-size: 0.7rem; } .time-separator { font-size: 2rem; } .notification-button { padding: 0.7rem 1.5rem; font-size: 0.9rem; } } </style> </head> <body> <div class="container"> <div class="bg-circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <div class="vignette"></div> <div class="cinematic-overlay"></div> <div class="content"> <div class="show-logo"> <div class="logo-text">ECHOSPHERE</div> </div> <div class="season-info">Season 2</div> <div class="episode-title">"The Quantum Paradox"</div> <div class="countdown-container"> <div class="countdown-block"> <div class="time-value" id="days">00</div> <div class="time-unit">Days</div> </div> <div class="time-separator">:</div> <div class="countdown-block"> <div class="time-value" id="hours">00</div> <div class="time-unit">Hours</div> </div> <div class="time-separator">:</div> <div class="countdown-block"> <div class="time-value" id="minutes">00</div> <div class="time-unit">Minutes</div> </div> <div class="time-separator">:</div> <div class="countdown-block"> <div class="time-value" id="seconds">00</div> <div class="time-unit">Seconds</div> </div> </div> <div class="notification-block"> <button class="notification-button" id="notify-button"> <span>Remind Me</span> </button> <div class="notification-text">Get notified when the episode goes live</div> </div> <div class="streaming-platforms"> <div class="platform-text">Available on</div> <div class="platform-icons"> <div class="platform-icon" title="StreamFlix">SF</div> <div class="platform-icon" title="QuantumView">QV</div> <div class="platform-icon" title="NeoStream">NS</div> </div> </div> </div> </div> <div class="notification-success" id="success-notification"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM11.707 6.707L7.5 10.914L4.293 7.707C3.90237 7.31637 3.90237 6.68363 4.293 6.293C4.68363 5.90237 5.31637 5.90237 5.707 6.293L7.5 8.086L10.293 5.293C10.6836 4.90237 11.3164 4.90237 11.707 5.293C12.0976 5.68363 12.0976 6.31637 11.707 6.707Z" fill="white"/> </svg> <span>Reminder set! We'll notify you when the episode is live.</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Set the release date (1 week from now) const releaseDate = new Date(); releaseDate.setDate(releaseDate.getDate() + 7); releaseDate.setHours(20, 0, 0, 0); // 8:00 PM // Elements const daysEl = document.getElementById('days'); const hoursEl = document.getElementById('hours'); const minutesEl = document.getElementById('minutes'); const secondsEl = document.getElementById('seconds'); const notifyButton = document.getElementById('notify-button'); const successNotification = document.getElementById('success-notification'); // Update countdown function updateCountdown() { const now = new Date(); const diff = releaseDate - now; if (diff <= 0) { // Release time has arrived daysEl.textContent = '00'; hoursEl.textContent = '00'; minutesEl.textContent = '00'; secondsEl.textContent = '00'; return; } 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); // Update with leading zeros daysEl.textContent = days < 10 ? `0${days}` : days; hoursEl.textContent = hours < 10 ? `0${hours}` : hours; minutesEl.textContent = minutes < 10 ? `0${minutes}` : minutes; secondsEl.textContent = seconds < 10 ? `0${seconds}` : seconds; // Add flip animation on seconds change if (seconds !== previousSeconds) { const secondsBlock = secondsEl.parentElement; secondsBlock.classList.add('flip'); setTimeout(() => { secondsBlock.classList.remove('flip'); }, 500); previousSeconds = seconds; } } let previousSeconds = -1; // Initial call and set interval updateCountdown(); setInterval(updateCountdown, 1000); // Notification button notifyButton.addEventListener('click', function() { successNotification.classList.add('show'); setTimeout(() => { successNotification.classList.remove('show'); }, 4000); }); // Platform icons hover effect const platformIcons = document.querySelectorAll('.platform-icon'); platformIcons.forEach(icon => { icon.addEventListener('mouseenter', () => { icon.style.boxShadow = `0 0 20px rgba(255, 255, 255, 0.5)`; }); icon.addEventListener('mouseleave', () => { icon.style.boxShadow = 'none'; }); }); }); </script> </body> </html>
