Spaces:

ProjectGenesis
/

crypto-casino-glowscape

Running

App Files Files Community

ProjectGenesis commited on Nov 26, 2025

Commit

013faa4

verified ·

1 Parent(s): bcc93aa

Create the top portion of a “Coming Soon” page for FiveXBet.com. Only generate the elements listed below — do not add additional sections.

Browse files

🔷 1. Infinite Horizontal Scrolling Crypto Icon Carousel (Top Section)
Place this at the very top of the page.
Full-width, edge-to-edge
Continuous infinite loop scrolling horizontally
Crypto icons (or icon placeholders):
BTC, ETH, USDT, BNB, SOL, DOGE, XRP, LTC
Even spacing between icons
Each icon has a neon blue + neon magenta glow animation
No background box, no header bar — icons float directly on the background
Smooth loop animation (no start/stop, no snapping)
🔷 2. Particle Network Background Layer
Apply an interactive-style particle network background behind all elements.
Thin neon lines connecting glowing dots
Soft animated movement
Subtle neon blue and neon magenta color tones
Light, elegant animation (not heavy or distracting)
Must stretch full width of the page
Should blend naturally behind the hero section and icon carousel
Do NOT place it inside a box — it should be part of the global background.
🔷 3. Hero Section Below the Crypto Carousel
Centered hero block containing:
Main Title
“FiveXBet.com — Crypto Casino Coming Soon”
Large, bold, futuristic font
Neon blue inner glow
Neon magenta rim light
Subtitle
“BTC • ETH • USDT • Pre-Launch Rewards & Bonuses”
Clean white text with slight neon tint
Atmospheric Graphics
Behind and around the title:
Soft floating crypto symbols (BTC, ETH, USDT)
Blurred slot machine lights or casino silhouettes
Neon ambient glow / subtle light streaks
Do not add CTAs, countdown timers, thumbnail grids, or any additional sections yet.
🔷 4. Spacing & Layout Rules
Everything must be centered
The width must extend fully across the browser window (no large empty margins on left/right)
Keep vertical spacing clean and proportional
No extra UI sections — only the carousel, particle background, and hero area
⚠️ Important
Do NOT generate:
❌ CTAs
❌ Countdown timers
❌ Thumbnail grids
❌ Sticky pop-ups
❌ Vertical scroll columns
❌ Footer
❌ Extra modules
This step is ONLY for the crypto carousel, hero section, and particle-network background.

Files changed (4) hide show

README.md +8 -5
index.html +96 -19
script.js +91 -0
style.css +87 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Crypto Casino Glowscape
-emoji: 📉
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Crypto Casino Glowscape 🎰✨
+colorFrom: gray
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,96 @@
-<!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 - Crypto Casino 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>
+    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-black overflow-x-hidden">
+    <!-- Particle Network Background -->
+    <div id="particles-js" class="fixed inset-0 -z-10"></div>
+    <!-- Infinite Crypto Carousel -->
+    <div class="w-full overflow-hidden py-4">
+        <div class="scrolling-carousel whitespace-nowrap">
+            <div class="inline-flex items-center space-x-16 animate-scroll">
+                <!-- Crypto Icons with Glow Effect -->
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/tether-usdt-logo.png" alt="Tether" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" alt="BNB" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="Dogecoin" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/xrp-xrp-logo.png" alt="XRP" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/litecoin-ltc-logo.png" alt="Litecoin" class="h-12 w-12 object-contain">
+                </div>
+                <!-- Duplicate for seamless looping -->
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/tether-usdt-logo.png" alt="Tether" class="h-12 w-12 object-contain">
+                </div>
+                <div class="crypto-icon glow-effect">
+                    <img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" alt="BNB" class="h-12 w-12 object-contain">
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <div class="min-h-screen flex flex-col items-center justify-center px-4 relative">
+        <div class="max-w-4xl mx-auto text-center relative z-10">
+            <!-- Floating Crypto Symbols -->
+            <div class="absolute -top-20 -left-20 opacity-30">
+                <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="h-16 w-16 animate-float">
+            </div>
+            <div class="absolute -bottom-20 -right-20 opacity-30">
+                <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="h-16 w-16 animate-float-delay">
+            </div>
+            <div class="absolute top-1/4 right-10 opacity-20">
+                <img src="https://cryptologos.cc/logos/tether-usdt-logo.png" alt="USDT" class="h-12 w-12 animate-float">
+            </div>
+            <!-- Main Title -->
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-title">
+                FiveXBet.com
+                <span class="block text-xl md:text-2xl mt-4 font-normal">Crypto Casino Coming Soon</span>
+            </h1>
+            <!-- Subtitle -->
+            <p class="text-xl md:text-2xl text-white/80 mb-8 neon-subtitle">
+                BTC • ETH • USDT • Pre-Launch Rewards & Bonuses
+            </p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,91 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize particles.js
+    particlesJS('particles-js', {
+        "particles": {
+            "number": {
+                "value": 30,
+                "density": {
+                    "enable": true,
+                    "value_area": 800
+                }
+            },
+            "color": {
+                "value": ["#00a2ff", "#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": "#00a2ff",
+                "opacity": 0.3,
+                "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": 1
+                    }
+                },
+                "push": {
+                    "particles_nb": 4
+                }
+            }
+        },
+        "retina_detect": true
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,96 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
 }
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
 }
+@keyframes float-delay {
+    0%, 100% {
+        transform: translateY(-10px);
+    }
+    50% {
+        transform: translateY(10px);
+    }
 }
+@keyframes glow {
+    0% {
+        filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.5));
+    }
+    50% {
+        filter: drop-shadow(0 0 10px rgba(0, 162, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 0, 255, 0.8));
+    }
+    100% {
+        filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.5));
+    }
 }
+@keyframes title-glow {
+    0% {
+        text-shadow: 0 0 5px rgba(0, 162, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.5);
+    }
+    50% {
+        text-shadow: 0 0 10px rgba(0, 162, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.8);
+    }
+    100% {
+        text-shadow: 0 0 5px rgba(0, 162, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.5);
+    }
 }
+.animate-scroll {
+    animation: scroll 20s linear infinite;
+}
+.animate-float {
+    animation: float 5s ease-in-out infinite;
+}
+.animate-float-delay {
+    animation: float-delay 6s ease-in-out infinite 1s;
+}
+.glow-effect {
+    animation: glow 3s ease-in-out infinite;
+}
+.neon-title {
+    color: white;
+    animation: title-glow 3s ease-in-out infinite;
+}
+.neon-subtitle {
+    text-shadow: 0 0 8px rgba(0, 162, 255, 0.6), 0 0 15px rgba(255, 0, 255, 0.4);
+}
+#particles-js {
+    background: transparent;
+    width: 100%;
+    height: 100%;
+}
+.scrolling-carousel {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+.crypto-icon {
+    display: inline-block;
+    transition: transform 0.3s ease;
+}
+.crypto-icon:hover {
+    transform: scale(1.1);
+}