Design a single-screen “COMING SOON” landing page for FiveXBet.com, built in a neon blue + neon magenta cyber-casino aesthetic.

High resolution, premium, modern, above-the-fold only.
Everything lives on one hero screen. Do NOT create additional sections or full pages.
1. Overall Theme
Dark black background with smooth neon gradients (neon blue upper-left → neon magenta lower-right).
Futuristic crypto-casino vibe with glowing particles, faint wireframe grids, light streaks, and soft flares.
Aesthetic: high-end cyberpunk casino + crypto fintech + neon esports.
2. Header
Top-left: FiveXBet.com logo — “FiveX” in neon blue, “Bet” in neon magenta, subtle rim glow.
Top-right: lightweight ghost navigation (About · Rewards · Support) in tiny, low-opacity neon outline text.
Transparent header bar with soft neon line below it.
3. Hero Title Block
Centered:
Massive title:
“FiveXBet.com – Crypto Casino Coming Soon”
Style: metallic, sharp sans-serif, neon blue inner glow + magenta rim light.
Subheadline:
“Powered by BTC • ETH • USDT • Play-to-Win Rewards • Pre-Launch Bonuses”
Clean white text with soft blue tint.
Behind/around the text:
Floating BTC, ETH, USDT 3D neon coins
Blurred casino silhouettes (slot machine lights, roulette rim glows, card suits)
Light particles + smooth cyber streaks
4. Countdown Timer Block
Placed directly under the hero text.
Glassmorphism countdown panel:
Frosted black transparency
Neon blue left-edge glow / neon magenta right-edge glow
Four compartments: DAYS — HOURS — MINUTES — SECONDS
Large glowing white numbers with subtle neon halo
Tiny line beneath:
“Launch Window: Q1 2026 – Stay Ahead of the Drop.”
5. Pre-Registration CTA (Under Timer)
Horizontal bar with:
Left: email field (placeholder “Enter your email for early access” with neon outline)
Right: pill button “Pre-Register for Rewards” in a neon blue→magenta gradient with inner glow
Small caption:
“Pre-launch users receive freespins, credit boosts, and exclusive bonus drops.”
6. Horizontal Game Image Carousel (NEW)
Place this directly BELOW the CTA bar, still inside the hero screen.
Carousel Specs:
A horizontal scrolling ribbon with 6–10 square image placeholders representing game thumbnails.
Each placeholder:
1:1 card ratio
Dark glossy background
Neon blue border glow
Thin magenta rim highlights
Subtle reflection as if embossed
Centered text: “GAME PREVIEW” in tiny neon outline letters (not actual game art)
Cards slightly angled (2–3 degrees) for a cinematic arcade feel.
Add soft drop shadows + floating particles behind the carousel.
Left and right edges should show partial cards to indicate it scrolls horizontally.
Optional small neon arrows on both sides — minimal, sleek.
Carousel Container Design:
Semi-transparent frosted bar behind the cards
Neon gradient edges
Light glow under it to make the row float
Keep the carousel compact — it must NOT feel like a second section.
It should visually fit inside the same hero block, aligned under the timer + CTA.
7. Facebook Promo Pop-Up
Right side of the hero screen:
Floating holographic pop-up panel
Neon magenta outer border with animated glow lines running around the perimeter
Inside:
Large neon blue Facebook “f” icon
Bold text:
“Follow Us for Freespins & Credit Drops”
Smaller subtext:
“Get extra bonuses for pre-registration and Facebook followers.”
Mini neon-blue pill button: “Follow FiveXBet”
Add a faint neon tether line connecting the pop-up to the main hero content.
8. Micro-Details
Thin vertical neon accent bars along far left and right screen edges
Sparse hologram pixels floating subtly
A minimal rising crypto-line graph in the background (no numbers, just glow)
Consistent accent colors: Neon Blue #00E4FF & Neon Magenta #FF00FF
9. Footer Strip
A thin footer at the bottom:
Center text:
“© FiveXBet.com – All Rights Reserved”
Small neon divider line above it.
10. Hard Restrictions
Only generate this one single-screen coming soon layout.
Do NOT create additional pages, sections, mockups, or scrolling content beyond what is described here.
No extra fluff — keep everything tightly framed as a coming soon hero splash.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neon Cyber Casino Blitz
-emoji: 🐨
-colorFrom: blue
-colorTo: indigo
+title: Neon Cyber Casino Blitz 🎰
+colorFrom: gray
+colorTo: purple
+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,169 @@
-<!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>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        neonblue: '#00E4FF',
+                        neonmagenta: '#FF00FF',
+                        darkbg: '#05050A',
+                    },
+                    boxShadow: {
+                        'neon-blue': '0 0 15px rgba(0, 228, 255, 0.8)',
+                        'neon-magenta': '0 0 15px rgba(255, 0, 255, 0.8)',
+                        'double-glow': '0 0 15px rgba(0, 228, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6)',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-darkbg overflow-hidden h-screen flex flex-col">
+    <!-- Particle Background -->
+    <div id="particles-js" class="absolute w-full h-full"></div>
+    
+    <!-- Main Container -->
+    <div class="relative z-10 flex flex-col h-full px-6">
+        <!-- Header -->
+        <header class="py-6 flex justify-between items-center border-b border-opacity-20 border-neonblue">
+            <div class="text-3xl font-bold tracking-tighter">
+                <span class="text-neonblue drop-shadow-neon-blue">FiveX</span>
+                <span class="text-neonmagenta drop-shadow-neon-magenta">Bet</span>
+                <span class="text-xs text-white ml-1">.com</span>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="text-xs text-white opacity-60 hover:opacity-100 hover:text-neonblue transition-all duration-300">About</a>
+                <a href="#" class="text-xs text-white opacity-60 hover:opacity-100 hover:text-neonmagenta transition-all duration-300">Rewards</a>
+                <a href="#" class="text-xs text-white opacity-60 hover:opacity-100 hover:text-neonblue transition-all duration-300">Support</a>
+            </nav>
+        </header>
+
+        <!-- Main Hero Content -->
+        <main class="flex-grow flex flex-col justify-center items-center text-center px-4">
+            <!-- Title Block -->
+            <div class="max-w-3xl relative mb-12">
+                <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+                    <span class="text-white bg-clip-text text-transparent bg-gradient-to-r from-neonblue to-neonmagenta">
+                        FiveXBet.com
+                    </span>
+                    <span class="block text-xl md:text-2xl text-white opacity-90 mt-4 font-normal">
+                        Crypto Casino Coming Soon
+                    </span>
+                </h1>
+                <div class="text-white opacity-80 text-sm md:text-base mb-8">
+                    Powered by <span class="text-neonblue">BTC</span> • <span class="text-neonblue">ETH</span> • <span class="text-neonblue">USDT</span> • Play-to-Win Rewards • Pre-Launch Bonuses
+                </div>
+                <!-- Crypto Icons Floating -->
+                <div class="absolute -top-20 -left-20 opacity-30">
+                    <i data-feather="dollar-sign" class="w-16 h-16 text-neonblue"></i>
+                </div>
+                <div class="absolute -bottom-10 -right-20 opacity-30">
+                    <i data-feather="activity" class="w-16 h-16 text-neonmagenta"></i>
+                </div>
+            </div>
+
+            <!-- Countdown Timer -->
+            <div class="glass-panel mb-10 p-6 md:p-8 rounded-lg backdrop-blur-sm">
+                <div class="flex justify-center space-x-2 md:space-x-6">
+                    <div class="text-center">
+                        <div class="text-4xl md:text-5xl font-bold text-white">00</div>
+                        <div class="text-xs text-white opacity-70">DAYS</div>
+                    </div>
+                    <div class="text-4xl text-white opacity-50 self-center">:</div>
+                    <div class="text-center">
+                        <div class="text-4xl md:text-5xl font-bold text-white">00</div>
+                        <div class="text-xs text-white opacity-70">HOURS</div>
+                    </div>
+                    <div class="text-4xl text-white opacity-50 self-center">:</div>
+                    <div class="text-center">
+                        <div class="text-4xl md:text-5xl font-bold text-white">00</div>
+                        <div class="text-xs text-white opacity-70">MINUTES</div>
+                    </div>
+                    <div class="text-4xl text-white opacity-50 self-center">:</div>
+                    <div class="text-center">
+                        <div class="text-4xl md:text-5xl font-bold text-white">00</div>
+                        <div class="text-xs text-white opacity-70">SECONDS</div>
+                    </div>
+                </div>
+                <div class="text-xs text-white opacity-60 mt-4">
+                    Launch Window: Q1 2026 – Stay Ahead of the Drop.
+                </div>
+            </div>
+
+            <!-- CTA Form -->
+            <div class="w-full max-w-md mb-12">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <input type="email" placeholder="Enter your email for early access" 
+                           class="flex-grow bg-black bg-opacity-30 border border-neonblue border-opacity-50 text-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-neonblue focus:border-transparent placeholder-white placeholder-opacity-50">
+                    <button class="bg-gradient-to-r from-neonblue to-neonmagenta text-white font-semibold px-6 py-3 rounded-lg hover:shadow-double-glow transition-all duration-300">
+                        Pre-Register for Rewards
+                    </button>
+                </div>
+                <div class="text-xs text-white opacity-60 mt-2">
+                    Pre-launch users receive freespins, credit boosts, and exclusive bonus drops.
+                </div>
+            </div>
+
+            <!-- Game Carousel -->
+            <div class="relative w-full max-w-4xl mb-12">
+                <div class="flex space-x-4 overflow-x-auto py-4 px-2 scrollbar-hide">
+                    <div class="game-card"></div>
+                    <div class="game-card"></div>
+                    <div class="game-card"></div>
+                    <div class="game-card"></div>
+                    <div class="game-card"></div>
+                    <div class="game-card"></div>
+                </div>
+                <div class="absolute inset-y-0 left-0 flex items-center">
+                    <button class="carousel-nav opacity-50 hover:opacity-100">
+                        <i data-feather="chevron-left" class="w-6 h-6 text-neonblue"></i>
+                    </button>
+                </div>
+                <div class="absolute inset-y-0 right-0 flex items-center">
+                    <button class="carousel-nav opacity-50 hover:opacity-100">
+                        <i data-feather="chevron-right" class="w-6 h-6 text-neonmagenta"></i>
+                    </button>
+                </div>
+            </div>
+        </main>
+
+        <!-- Facebook Promo -->
+        <div class="facebook-promo absolute right-10 bottom-1/4 transform translate-y-1/4 hidden lg:block">
+            <div class="relative">
+                <div class="absolute -inset-1 bg-neonmagenta rounded-lg blur opacity-75 animate-pulse"></div>
+                <div class="relative bg-black bg-opacity-80 p-4 rounded-lg border border-neonmagenta border-opacity-50">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="facebook" class="w-8 h-8 text-neonblue mr-2"></i>
+                        <div class="font-bold text-white">Follow Us for Freespins & Credit Drops</div>
+                    </div>
+                    <div class="text-xs text-white opacity-80 mb-3">Get extra bonuses for pre-registration and Facebook followers.</div>
+                    <button class="text-xs bg-neonblue text-black px-4 py-1 rounded-full font-bold">Follow FiveXBet</button>
+                    <div class="absolute -left-8 top-1/2 h-16 w-0.5 bg-neonmagenta bg-opacity-50"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="py-4 border-t border-opacity-20 border-neonmagenta text-center">
+            <div class="text-xs text-white opacity-60">© FiveXBet.com – All Rights Reserved</div>
+        </footer>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,152 @@
+// Initialize particles.js
+document.addEventListener('DOMContentLoaded', function() {
+    particlesJS('particles-js', {
+        "particles": {
+            "number": {
+                "value": 80,
+                "density": {
+                    "enable": true,
+                    "value_area": 800
+                }
+            },
+            "color": {
+                "value": ["#00E4FF", "#FF00FF"]
+            },
+            "shape": {
+                "type": "circle",
+                "stroke": {
+                    "width": 0,
+                    "color": "#000000"
+                }
+            },
+            "opacity": {
+                "value": 0.5,
+                "random": true,
+                "anim": {
+                    "enable": true,
+                    "speed": 1,
+                    "opacity_min": 0.1,
+                    "sync": false
+                }
+            },
+            "size": {
+                "value": 3,
+                "random": true,
+                "anim": {
+                    "enable": true,
+                    "speed": 2,
+                    "size_min": 0.1,
+                    "sync": false
+                }
+            },
+            "line_linked": {
+                "enable": true,
+                "distance": 150,
+                "color": "#00E4FF",
+                "opacity": 0.2,
+                "width": 1
+            },
+            "move": {
+                "enable": true,
+                "speed": 1,
+                "direction": "none",
+                "random": true,
+                "straight": false,
+                "out_mode": "out",
+                "bounce": false,
+                "attract": {
+                    "enable": true,
+                    "rotateX": 600,
+                    "rotateY": 1200
+                }
+            }
+        },
+        "interactivity": {
+            "detect_on": "canvas",
+            "events": {
+                "onhover": {
+                    "enable": true,
+                    "mode": "grab"
+                },
+                "onclick": {
+                    "enable": true,
+                    "mode": "push"
+                },
+                "resize": true
+            },
+            "modes": {
+                "grab": {
+                    "distance": 140,
+                    "line_linked": {
+                        "opacity": 0.5
+                    }
+                },
+                "push": {
+                    "particles_nb": 4
+                }
+            }
+        },
+        "retina_detect": true
+    });
+
+    // Countdown Timer
+    const countdown = () => {
+        const countDate = new Date('January 1, 2026 00:00:00').getTime();
+        const now = new Date().getTime();
+        const gap = countDate - now;
+
+        // Time calculations
+        const second = 1000;
+        const minute = second * 60;
+        const hour = minute * 60;
+        const day = hour * 24;
+
+        // Calculate remaining time
+        const textDay = Math.floor(gap / day);
+        const textHour = Math.floor((gap % day) / hour);
+        const textMinute = Math.floor((gap % hour) / minute);
+        const textSecond = Math.floor((gap % minute) / second);
+
+        // Update HTML
+        document.querySelectorAll('.text-4xl').forEach((el, index) => {
+            if (index === 0) el.textContent = textDay.toString().padStart(2, '0');
+            if (index === 1) el.textContent = textHour.toString().padStart(2, '0');
+            if (index === 2) el.textContent = textMinute.toString().padStart(2, '0');
+            if (index === 3) el.textContent = textSecond.toString().padStart(2, '0');
+        });
+    };
+
+    // Run countdown every second
+    setInterval(countdown, 1000);
+    countdown(); // Initial call
+
+    // Carousel Navigation
+    const carousel = document.querySelector('.flex.space-x-4');
+    const leftBtn = document.querySelector('.carousel-nav:first-child');
+    const rightBtn = document.querySelector('.carousel-nav:last-child');
+
+    if (leftBtn && rightBtn) {
+        leftBtn.addEventListener('click', () => {
+            carousel.scrollBy({ left: -150, behavior: 'smooth' });
+        });
+
+        rightBtn.addEventListener('click', () => {
+            carousel.scrollBy({ left: 150, behavior: 'smooth' });
+        });
+    }
+
+    // Form Submission
+    const form = document.querySelector('input[type="email"]');
+    const submitBtn = document.querySelector('button.bg-gradient-to-r');
+
+    if (submitBtn) {
+        submitBtn.addEventListener('click', () => {
+            if (form.value && form.value.includes('@')) {
+                alert('Thank you for pre-registering! Check your email for confirmation.');
+                form.value = '';
+            } else {
+                alert('Please enter a valid email address.');
+            }
+        });
+    }
+});

style.css

@@ -1,28 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Oxanium', sans-serif;
+}
+
+/* Glass Panel Effect */
+.glass-panel {
+    background: rgba(5, 5, 10, 0.5);
+    border: 1px solid rgba(0, 228, 255, 0.2);
+    box-shadow: 0 0 20px rgba(0, 228, 255, 0.1), 
+                0 0 40px rgba(255, 0, 255, 0.1);
+    position: relative;
+}
+
+.glass-panel::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, 
+                rgba(0, 228, 255, 0.05) 0%, 
+                rgba(255, 0, 255, 0.05) 100%);
+    pointer-events: none;
+}
+
+/* Game Cards */
+.game-card {
+    flex: 0 0 120px;
+    height: 120px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(0, 228, 255, 0.3);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(2deg);
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.game-card:hover {
+    transform: rotate(0deg) scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 228, 255, 0.5);
+}
+
+.game-card::before {
+    content: 'GAME PREVIEW';
+    color: white;
+    font-size: 10px;
+    opacity: 0.5;
+    letter-spacing: 1px;
+}
+
+.game-card:nth-child(even) {
+    transform: rotate(-2deg);
+}
+
+/* Scrollbar Hide */
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Neon Text Shadows */
+.drop-shadow-neon-blue {
+    text-shadow: 0 0 10px rgba(0, 228, 255, 0.7);
+}
+
+.drop-shadow-neon-magenta {
+    text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Carousel Navigation */
+.carousel-nav {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Facebook Promo */
+.facebook-promo {
+    animation: float 6s ease-in-out infinite;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes float {
+    0% { transform: translateY(0px) translateX(0px); }
+    50% { transform: translateY(-10px) translateX(5px); }
+    100% { transform: translateY(0px) translateX(0px); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Side Accents */
+body::before, body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: linear-gradient(to bottom, 
+                transparent 0%, 
+                rgba(0, 228, 255, 0.5) 50%, 
+                transparent 100%);
+    z-index: 10;
 }
+
+body::before {
+    left: 20px;
+}
+
+body::after {
+    right: 20px;
+}