Promote version b1b47f7 to main

Promoted commit b1b47f7ded4cde1cdcbb23480f4897d60b211a61 to main branch

index.html

@@ -92,71 +92,65 @@
                     <span class="flex items-center group"><img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-5 h-5 mr-2" alt="BNB"> BNB<span class="provider-tooltip">BNB</span></span>
 </p>
             </div>
-            <!-- Featured Games Carousel -->
-            <div class="featured-games-container relative mb-12 w-full max-w-5xl">
-                <h2 class="text-3xl font-bold text-center mb-8 text-white">
-                    <span class="text-neonblue">Featured</span> 
-                    <span class="text-neonmagenta">Games</span>
-                </h2>
-                <div class="featured-games-carousel relative overflow-hidden">
-                    <div class="featured-games-track flex gap-6">
-                        <!-- Game 1 -->
-                        <div class="featured-game-card">
-                            <div class="game-image" style="background-image: url('http://static.photos/gaming/640x360/1')"></div>
-                            <div class="game-info">
-                                <h3 class="game-title">Lucky Spin</h3>
-                                <div class="game-provider">FiveXBet Originals</div>
-                            </div>
-                        </div>
-                        
-                        <!-- Game 2 -->
-                        <div class="featured-game-card">
-                            <div class="game-image" style="background-image: url('http://static.photos/gaming/640x360/2')"></div>
-                            <div class="game-info">
-                                <h3 class="game-title">Crypto Fortune</h3>
-                                <div class="game-provider">FiveXBet Originals</div>
-                            </div>
+            <!-- Countdown Timer -->
+            <div class="countdown-container relative mb-12">
+                <div class="countdown-grid">
+                    <!-- Days -->
+                    <div class="countdown-item">
+                        <svg class="countdown-svg" viewBox="0 0 100 100">
+                            <circle class="countdown-track" cx="50" cy="50" r="45"></circle>
+                            <circle class="countdown-progress days-progress" cx="50" cy="50" r="45" 
+                                stroke-dasharray="283" stroke-dashoffset="0"></circle>
+                        </svg>
+                        <div class="countdown-content">
+                            <div class="text-4xl md:text-5xl font-bold text-white" id="days">00</div>
+                            <div class="text-neonblue text-sm uppercase tracking-wider">Days</div>
                         </div>
-                        
-                        <!-- Game 3 -->
-                        <div class="featured-game-card">
-                            <div class="game-image" style="background-image: url('http://static.photos/gaming/640x360/3')"></div>
-                            <div class="game-info">
-                                <h3 class="game-title">Diamond Rush</h3>
-                                <div class="game-provider">FiveXBet Originals</div>
-                            </div>
+                    </div>
+                    
+                    <!-- Hours -->
+                    <div class="countdown-item">
+                        <svg class="countdown-svg" viewBox="0 0 100 100">
+                            <circle class="countdown-track" cx="50" cy="50" r="45"></circle>
+                            <circle class="countdown-progress hours-progress" cx="50" cy="50" r="45" 
+                                stroke-dasharray="283" stroke-dashoffset="0"></circle>
+                        </svg>
+                        <div class="countdown-content">
+                            <div class="text-4xl md:text-5xl font-bold text-white" id="hours">00</div>
+                            <div class="text-neonmagenta text-sm uppercase tracking-wider">Hours</div>
                         </div>
-                        
-                        <!-- Game 4 -->
-                        <div class="featured-game-card">
-                            <div class="game-image" style="background-image: url('http://static.photos/gaming/640x360/4')"></div>
-                            <div class="game-info">
-                                <h3 class="game-title">Bitcoin Blast</h3>
-                                <div class="game-provider">FiveXBet Originals</div>
-                            </div>
+                    </div>
+                    
+                    <!-- Minutes -->
+                    <div class="countdown-item">
+                        <svg class="countdown-svg" viewBox="0 0 100 100">
+                            <circle class="countdown-track" cx="50" cy="50" r="45"></circle>
+                            <circle class="countdown-progress minutes-progress" cx="50" cy="50" r="45" 
+                                stroke-dasharray="283" stroke-dashoffset="0"></circle>
+                        </svg>
+                        <div class="countdown-content">
+                            <div class="text-4xl md:text-5xl font-bold text-white" id="minutes">00</div>
+                            <div class="text-neonblue text-sm uppercase tracking-wider">Minutes</div>
                         </div>
-                        
-                        <!-- Game 5 -->
-                        <div class="featured-game-card">
-                            <div class="game-image" style="background-image: url('http://static.photos/gaming/640x360/5')"></div>
-                            <div class="game-info">
-                                <h3 class="game-title">Neon Jackpot</h3>
-                                <div class="game-provider">FiveXBet Originals</div>
-                            </div>
+                    </div>
+                    
+                    <!-- Seconds -->
+                    <div class="countdown-item">
+                        <svg class="countdown-svg" viewBox="0 0 100 100">
+                            <circle class="countdown-track" cx="50" cy="50" r="45"></circle>
+                            <circle class="countdown-progress seconds-progress" cx="50" cy="50" r="45" 
+                                stroke-dasharray="283" stroke-dashoffset="0"></circle>
+                        </svg>
+                        <div class="countdown-content">
+                            <div class="text-4xl md:text-5xl font-bold text-white" id="seconds">00</div>
+                            <div class="text-neonmagenta text-sm uppercase tracking-wider">Seconds</div>
                         </div>
                     </div>
                 </div>
-                <div class="carousel-controls flex justify-center gap-4 mt-6">
-                    <button class="carousel-prev w-10 h-10 rounded-full bg-black/30 border border-neonblue/50 flex items-center justify-center hover:bg-neonblue/20 transition">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neonblue">
-                            <polyline points="15 18 9 12 15 6"></polyline>
-                        </svg>
-                    </button>
-                    <button class="carousel-next w-10 h-10 rounded-full bg-black/30 border border-neonmagenta/50 flex items-center justify-center hover:bg-neonmagenta/20 transition">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neonmagenta">
-                            <polyline points="9 18 15 12 9 6"></polyline>
-                        </svg>
-                    </button>
+                <div class="text-center mt-6">
+                    <div class="inline-block px-4 py-2 bg-black/30 backdrop-blur-sm border border-neonblue/30 rounded-full">
+                        <p class="text-neonblue text-sm tracking-wider">Launch Window: Q1 2026</p>
+                    </div>
                 </div>
             </div>
 <!-- Pre-Registration CTA -->

script.js

@@ -22,34 +22,38 @@ const cosmicWeb = document.querySelector('.cosmic-web');
     while (cosmicWeb.firstChild) {
         cosmicWeb.removeChild(cosmicWeb.firstChild);
     }
-    // Initialize featured games carousel
-    const track = document.querySelector('.featured-games-track');
-    const cards = document.querySelectorAll('.featured-game-card');
-    const prevBtn = document.querySelector('.carousel-prev');
-    const nextBtn = document.querySelector('.carousel-next');
-    
-    let currentIndex = 0;
-    const cardWidth = cards[0].offsetWidth;
-    const gap = 20; // Gap between cards in px
-    
-    function updateCarousel() {
-        const offset = -currentIndex * (cardWidth + gap);
-        track.style.transform = `translateX(${offset}px)`;
-    }
-    
-    prevBtn.addEventListener('click', () => {
-        if (currentIndex > 0) {
-            currentIndex--;
-            updateCarousel();
-        }
-    });
-    
-    nextBtn.addEventListener('click', () => {
-        if (currentIndex < cards.length - 3) { // Show 3 at a time
-            currentIndex++;
-            updateCarousel();
-        }
-    });
+// Set the date we're counting down to (Q1 2026)
+const countDownDate = new Date("Jan 1, 2026 00:00:00").getTime();
+
+    // Update the countdown every 1 second
+    const countdownFunction = 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 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").innerHTML = days.toString().padStart(2, '0');
+        document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
+        document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
+        document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
+        
+        // Update circle progress
+        const dayProgress = 283 - (283 * (days / 365));
+        const hourProgress = 283 - (283 * (hours / 24));
+        const minuteProgress = 283 - (283 * (minutes / 60));
+        const secondProgress = 283 - (283 * (seconds / 60));
+        
+        document.querySelector('.days-progress').style.strokeDashoffset = dayProgress;
+        document.querySelector('.hours-progress').style.strokeDashoffset = hourProgress;
+        document.querySelector('.minutes-progress').style.strokeDashoffset = minuteProgress;
+        document.querySelector('.seconds-progress').style.strokeDashoffset = secondProgress;
 // If the countdown is finished, clear it
         if (distance < 0) {
             clearInterval(countdownFunction);

style.css

@@ -250,81 +250,78 @@ header {
         filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7));
     }
 }
-/* Featured Games Carousel */
-.featured-games-container {
-    max-width: 100%;
-    overflow: hidden;
+/* Countdown Timer Styles */
+.countdown-container {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
-.featured-games-carousel {
-    position: relative;
-    padding: 1rem 0;
+.countdown-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    justify-items: center;
 }
 
-.featured-games-track {
+.countdown-item {
+    position: relative;
+    width: 120px;
+    height: 120px;
     display: flex;
-    transition: transform 0.5s ease;
+    justify-content: center;
+    align-items: center;
 }
 
-.featured-game-card {
-    flex: 0 0 280px;
-    background: rgba(10, 10, 10, 0.5);
-    backdrop-filter: blur(10px);
-    border-radius: 12px;
-    overflow: hidden;
-    border: 1px solid rgba(15, 240, 252, 0.2);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s ease;
-    margin: 0 10px;
+.countdown-svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
 }
 
-.featured-game-card:hover {
-    transform: translateY(-5px);
-    border-color: rgba(255, 0, 255, 0.5);
-    box-shadow: 0 10px 25px rgba(15, 240, 252, 0.4),
-                0 0 20px rgba(255, 0, 255, 0.3);
+.countdown-track {
+    fill: transparent;
+    stroke: rgba(255, 255, 255, 0.1);
+    stroke-width: 5px;
 }
 
-.game-image {
-    height: 160px;
-    background-size: cover;
-    background-position: center;
-    position: relative;
+.countdown-progress {
+    fill: transparent;
+    stroke-width: 5px;
+    stroke-linecap: round;
+    stroke-dashoffset: 283;
+    transition: stroke-dashoffset 0.5s ease;
 }
 
-.game-image::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.8) 100%);
+.days-progress {
+    stroke: url(#days-gradient);
+    filter: drop-shadow(0 0 5px rgba(15, 240, 252, 0.7));
 }
 
-.game-info {
-    padding: 1rem;
-    text-align: center;
+.hours-progress {
+    stroke: url(#hours-gradient);
+    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.7));
 }
 
-.game-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 0.25rem;
-    color: white;
-    font-family: 'Orbitron', sans-serif;
+.minutes-progress {
+    stroke: url(#days-gradient);
+    filter: drop-shadow(0 0 5px rgba(15, 240, 252, 0.5));
 }
 
-.game-provider {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.7);
+.seconds-progress {
+    stroke: url(#hours-gradient);
+    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.5));
 }
 
-.carousel-controls button {
-    transition: all 0.3s ease;
+.countdown-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 2;
 }
 
-.carousel-controls button:hover {
-    transform: scale(1.1);
-    box-shadow: 0 0 10px currentColor;
-}
 /* Glass Panel Effect */
 .glass-panel {
     background: rgba(10, 10, 10, 0.5);