Design a single-screen “COMING SOON” page for FiveXBet.com, using a neon blue + neon magenta cyber-casino theme.

Ultra-high quality, dark mode, premium look.
One page only — above-the-fold hero section.
1. Theme & Background
Deep black background with neon gradients (neon blue → neon magenta)
Subtle cyberpunk lines, glowing grid, particles, and soft lens flares
Futuristic casino + crypto aesthetic
2. Header
Top-left: FiveXBet.com neon wordmark (FiveX = blue glow, Bet = magenta glow)
Top-right: small ghost-text nav (About · Rewards · Support)
Transparent header with a soft neon divider line
3. Main Hero Title Block (Center)
Giant title: “FiveXBet.com – Crypto Casino Coming Soon”
Metallic edges, neon blue inner glow, magenta rim light
Subheadline:
“BTC • ETH • USDT • Pre-Launch Bonuses • Early Access Rewards”
Add soft 3D floating crypto coins (BTC/ETH/USDT) + blurred casino silhouettes behind the text
4. Countdown Timer
Glassmorphism timer panel
Neon blue left edge / neon magenta right edge
Four compartments: DAYS — HOURS — MINUTES — SECONDS
Large glowing white numbers
Tiny text below: “Launch Window: Q1 2026.”
5. Pre-Registration CTA
Email field (neon outline, dark frosted interior)
Pill button: “Pre-Register for Rewards”
Neon blue → neon magenta gradient
Soft glow, premium shine
Subtext: “Get freespins, credit boosts & special pre-launch offers.”
6. Horizontal Game Thumbnail Carousel (DETAILED + MOTION + HOVER ANIMATIONS)
Place the carousel directly below the CTA, still within the same hero section.
This must look animated, even if Deepsite produces static visuals — specify the animation in detail.
Carousel Container
Long horizontal strip spanning 80% of the hero width
Frosted glass base panel with neon borders
Soft floating glow beneath it
Slight perspective depth, but not exaggerated
Thumbnail Cards (10 total)
Each thumbnail specs:
Aspect ratio: 1:1 square
Size: medium-large
Background: dark glossy panel with faint texture
Borders: neon blue primary glow + thin magenta rim highlights
Subtle bevel/emboss for premium feel
Title text centered: “GAME PREVIEW”
Neon outline text, small and subtle
Placeholder interior: faint abstract casino shapes (slot reel glow, poker chip silhouette)
Horizontal Motion Animation (explicit)
Make the carousel visually indicate it is animated:
Thumbnails arranged in a continuous infinite horizontal loop
Cards should be slightly offset to show left-to-right scrolling motion
Use motion blur streaks, soft trails, and fading edges on the left/right ends
The first and last cards should appear partially clipped to show the loop cycle
Direction: slow left-to-right scrolling
Hover Animation (explicit)
Each card has a clear interactive hover effect:
When hovered:
Card lifts upward slightly (5–10px elevation)
Outer glow intensifies (neon blue + magenta)
Border becomes thicker
Background brightens subtly
Small particle sparkles emanate from the edges
A faint ripple shimmer moves across the card surface
When not hovered:
Cards sit flush with minimal glow
Slight ambient pulsing light every 2–3 seconds
Control Indicators (minimal)
Tiny neon arrow hints on left and right sides
Ultra-simple, thin-line arrow shapes
No heavy UI elements
7. Facebook Promo Pop-Up (Right Side)
Floating holographic pop-up panel
Neon magenta animated border strips
Inside:
Neon blue Facebook icon
Bold text: “Follow Us for Freespins & Credit Drops”
Smaller text: “Pre-registration followers receive bonus rewards.”
Mini neon button: “Follow FiveXBet”
Slight tilt + hologram shimmer effect
8. Footer Strip
Tiny footer at the bottom:
“© FiveXBet.com – All Rights Reserved.”
Thin neon divider line above it
9. Hard Constraints
Only generate ONE hero screen
Do NOT add additional pages, sections, content, or long scrolling layouts
Carousel, countdown, title, pop-up — all contained in a single hero layout
No stock images, no extra text blocks beyond what's instructed

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neon Crypto Casino Countdown
-emoji: 🌖
-colorFrom: pink
-colorTo: purple
+title: Neon Crypto Casino Countdown 🎰
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,155 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FiveXBet.com - Coming Soon</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        neonblue: '#0ff0fc',
+                        neonmagenta: '#ff00ff',
+                        dark: '#0a0a0a',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-dark overflow-hidden h-screen w-full relative">
+    <!-- Background Elements -->
+    <div class="absolute inset-0 overflow-hidden">
+        <div class="particle-network-animation absolute inset-0"></div>
+        <div class="grid-pattern absolute inset-0 opacity-10"></div>
+        <div class="lens-flare absolute top-1/4 right-1/4 w-20 h-20 rounded-full bg-neonblue blur-3xl opacity-10"></div>
+        <div class="lens-flare absolute bottom-1/4 left-1/4 w-20 h-20 rounded-full bg-neonmagenta blur-3xl opacity-10"></div>
+    </div>
+
+    <!-- Header -->
+    <header class="relative z-10">
+        <div class="container mx-auto px-6 py-6 flex justify-between items-center">
+            <div class="brand-logo text-3xl font-bold">
+                <span class="text-neonblue drop-shadow-[0_0_8px_rgba(15,240,252,0.7)]">FiveX</span>
+                <span class="text-neonmagenta drop-shadow-[0_0_8px_rgba(255,0,255,0.7)]">Bet</span>
+                <span class="text-white text-sm">.com</span>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a>
+                <a href="#" class="text-gray-400 hover:text-white transition duration-300">Rewards</a>
+                <a href="#" class="text-gray-400 hover:text-white transition duration-300">Support</a>
+            </nav>
+        </div>
+        <div class="header-divider h-px w-full bg-gradient-to-r from-neonblue to-neonmagenta opacity-30"></div>
+    </header>
+
+    <!-- Main Hero -->
+    <main class="relative z-10 h-full">
+        <div class="container mx-auto px-6 h-full flex flex-col justify-center items-center">
+            <!-- Title Block -->
+            <div class="text-center mb-12 relative">
+                <div class="crypto-coins absolute -top-20 -left-20 w-40 h-40 rounded-full bg-neonblue/10 blur-xl"></div>
+                <div class="crypto-coins absolute -bottom-20 -right-20 w-40 h-40 rounded-full bg-neonmagenta/10 blur-xl"></div>
+                <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">
+                    <span class="text-neonblue drop-shadow-[0_0_8px_rgba(15,240,252,0.7)]">FiveXBet</span>
+                    <span class="text-neonmagenta">.com</span>
+                    <span class="block text-2xl md:text-4xl mt-4 font-medium text-white">Crypto Casino Coming Soon</span>
+                </h1>
+                <p class="text-gray-300 text-lg md:text-xl mb-8 flex flex-wrap justify-center gap-4">
+                    <span class="flex items-center"><i data-feather="bitcoin" class="w-5 h-5 mr-2 text-yellow-400"></i> BTC</span>
+                    <span class="flex items-center"><i data-feather="dollar-sign" class="w-5 h-5 mr-2 text-purple-400"></i> ETH</span>
+                    <span class="flex items-center"><i data-feather="dollar-sign" class="w-5 h-5 mr-2 text-blue-400"></i> USDT</span>
+                    <span class="flex items-center"><i data-feather="gift" class="w-5 h-5 mr-2 text-neonblue"></i> Pre-Launch Bonuses</span>
+                    <span class="flex items-center"><i data-feather="award" class="w-5 h-5 mr-2 text-neonmagenta"></i> Early Access Rewards</span>
+                </p>
+            </div>
+
+            <!-- Countdown Timer -->
+            <div class="glass-panel p-8 mb-12 relative overflow-hidden">
+                <div class="absolute left-0 top-0 h-full w-1 bg-neonblue"></div>
+                <div class="absolute right-0 top-0 h-full w-1 bg-neonmagenta"></div>
+                <div class="countdown-timer flex justify-center gap-4 md:gap-8">
+                    <div class="text-center">
+                        <div class="text-4xl md:text-6xl font-bold text-white mb-2" id="days">00</div>
+                        <div class="text-gray-400 text-sm">DAYS</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-4xl md:text-6xl font-bold text-white mb-2" id="hours">00</div>
+                        <div class="text-gray-400 text-sm">HOURS</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-4xl md:text-6xl font-bold text-white mb-2" id="minutes">00</div>
+                        <div class="text-gray-400 text-sm">MINUTES</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-4xl md:text-6xl font-bold text-white mb-2" id="seconds">00</div>
+                        <div class="text-gray-400 text-sm">SECONDS</div>
+                    </div>
+                </div>
+                <div class="text-center text-gray-400 text-xs mt-4">Launch Window: Q1 2026</div>
+            </div>
+
+            <!-- Pre-Registration CTA -->
+            <div class="w-full max-w-md mb-16">
+                <div class="flex flex-col md:flex-row gap-2">
+                    <input type="email" placeholder="Enter your email" class="flex-grow bg-black/30 backdrop-blur-sm border border-neonblue/50 text-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-neonblue focus:border-transparent placeholder-gray-500">
+                    <button class="bg-gradient-to-r from-neonblue to-neonmagenta text-white font-bold px-6 py-3 rounded-lg hover:opacity-90 transition duration-300 shadow-lg hover:shadow-neonblue/30">Pre-Register for Rewards</button>
+                </div>
+                <p class="text-center text-gray-400 text-sm mt-2">Get freespins, credit boosts & special pre-launch offers.</p>
+            </div>
+
+            <!-- Game Thumbnail Carousel -->
+            <div class="w-full max-w-5xl relative mb-8">
+                <div class="game-carousel-container relative overflow-hidden">
+                    <div class="game-carousel flex gap-6 py-4">
+                        <!-- 10 game thumbnails -->
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                        <div class="game-thumbnail"></div>
+                    </div>
+                </div>
+                <div class="carousel-arrows absolute top-1/2 left-0 right-0 flex justify-between transform -translate-y-1/2 px-4 pointer-events-none">
+                    <div class="arrow-left w-6 h-6 border-l-2 border-t-2 border-neonblue transform -rotate-45 opacity-70"></div>
+                    <div class="arrow-right w-6 h-6 border-r-2 border-t-2 border-neonmagenta transform rotate-45 opacity-70"></div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Facebook Promo Popup -->
+    <div class="facebook-popup absolute right-8 bottom-1/4 z-20 hidden md:block">
+        <div class="holographic-panel bg-black/50 backdrop-blur-sm border-l-4 border-neonmagenta p-4 rounded-lg transform rotate-3 w-64">
+            <div class="flex items-center mb-2">
+                <i data-feather="facebook" class="w-5 h-5 mr-2 text-neonblue"></i>
+                <span class="font-bold text-white">Follow Us for Freespins</span>
+            </div>
+            <p class="text-gray-300 text-sm mb-3">Pre-registration followers receive bonus rewards.</p>
+            <button class="w-full bg-gradient-to-r from-neonblue/80 to-neonmagenta/80 text-white text-sm font-bold py-2 rounded hover:opacity-90 transition duration-300">Follow FiveXBet</button>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="absolute bottom-0 w-full py-4 text-center text-gray-500 text-xs">
+        <div class="footer-divider h-px w-full bg-gradient-to-r from-neonblue to-neonmagenta opacity-20 mb-2"></div>
+        <p>© FiveXBet.com – All Rights Reserved.</p>
+    </footer>
+
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,92 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 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');
+        
+        // If the countdown is finished, clear it
+        if (distance < 0) {
+            clearInterval(countdownFunction);
+            document.getElementById("days").innerHTML = "00";
+            document.getElementById("hours").innerHTML = "00";
+            document.getElementById("minutes").innerHTML = "00";
+            document.getElementById("seconds").innerHTML = "00";
+        }
+    }, 1000);
+
+    // Create particle network
+    createParticleNetwork();
+});
+
+function createParticleNetwork() {
+    const container = document.querySelector('.particle-network-animation');
+    
+    // Create 50 particles
+    for (let i = 0; i < 50; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('particle');
+        
+        // Random position
+        const posX = Math.random() * 100;
+        const posY = Math.random() * 100;
+        
+        // Random size between 1px and 3px
+        const size = Math.random() * 2 + 1;
+        
+        // Random color between neon blue and magenta
+        const colors = ['rgba(15, 240, 252, 0.5)', 'rgba(255, 0, 255, 0.5)'];
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        
+        // Apply styles
+        particle.style.position = 'absolute';
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+        particle.style.backgroundColor = color;
+        particle.style.borderRadius = '50%';
+        particle.style.left = `${posX}%`;
+        particle.style.top = `${posY}%`;
+        particle.style.pointerEvents = 'none';
+        particle.style.opacity = '0.7';
+        
+        // Add animation
+        particle.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out alternate`;
+        particle.style.animationDelay = `${Math.random() * 5}s`;
+        
+        container.appendChild(particle);
+    }
+    
+    // Add CSS for animation
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes float {
+            0% {
+                transform: translate(0, 0);
+            }
+            50% {
+                transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px);
+            }
+            100% {
+                transform: translate(0, 0);
+            }
+        }
+    `;
+    document.head.appendChild(style);
+}

style.css

@@ -1,28 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    color: white;
+}
+
+h1, h2, h3, .countdown-timer {
+    font-family: 'Orbitron', sans-serif;
+    letter-spacing: 0.05em;
+}
+
+/* Glass Panel Effect */
+.glass-panel {
+    background: rgba(10, 10, 10, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+}
+
+/* Game Thumbnail Styles */
+.game-thumbnail {
+    min-width: 150px;
+    height: 150px;
+    background: rgba(20, 20, 20, 0.7);
+    border-radius: 12px;
+    border: 1px solid rgba(15, 240, 252, 0.3);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.game-thumbnail::before {
+    content: 'GAME PREVIEW';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.7);
+    text-shadow: 0 0 8px rgba(15, 240, 252, 0.5);
+    font-size: 0.8rem;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+}
+
+.game-thumbnail::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center, transparent 60%, rgba(15, 240, 252, 0.1) 100%);
+    border-radius: 12px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Hover Effects */
+.game-thumbnail:hover {
+    transform: translateY(-5px);
+    border-color: rgba(15, 240, 252, 0.8);
+    box-shadow: 0 10px 20px rgba(15, 240, 252, 0.2);
+    background: rgba(30, 30, 30, 0.8);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.game-thumbnail:hover::after {
+    background: radial-gradient(circle at center, transparent 40%, rgba(15, 240, 252, 0.2) 100%);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Carousel Animation */
+.game-carousel {
+    animation: scroll 30s linear infinite;
+    width: calc(150px * 20);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(calc(-150px * 10));
+    }
 }
+
+.game-carousel-container {
+    mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        black 10%,
+        black 90%,
+        transparent 100%
+    );
+}
+
+/* Holographic Panel Effect */
+.holographic-panel {
+    position: relative;
+    overflow: hidden;
+}
+
+.holographic-panel::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        45deg,
+        rgba(15, 240, 252, 0.1) 0%,
+        rgba(255, 0, 255, 0.1) 50%,
+        rgba(15, 240, 252, 0.1) 100%
+    );
+    animation: hologram 3s infinite alternate;
+}
+
+@keyframes hologram {
+    0% {
+        opacity: 0.1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0.3;
+        transform: translateY(-10px);
+    }
+}
+
+/* Particle Network Animation */
+.particle-network-animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-color: transparent;
+}
+
+/* Grid Pattern */
+.grid-pattern {
+    background-image: 
+        linear-gradient(rgba(15, 240, 252, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(15, 240, 252, 0.1) 1px, transparent 1px);
+    background-size: 50px 50px;
+}