Spaces:

ProjectGenesis
/

new-ui-1

Running

App Files Files Community

ProjectGenesis commited on Jul 30, 2025

Commit

1fa1e41

verified ·

1 Parent(s): 9d7c6b1

Generate a sleek, modern, mobile-first online casino lobby UI design for Nioplay, optimized for speed, engagement, and a premium player experience. Top-to-Bottom Layout: Dynamic hero banner spanning the full width, showcasing rotating featured offers, new games, and major events. Stacked promotional banners directly below for daily bonuses, jackpots, and time-limited promotions. Extra-small horizontally sliding marquee of game thumbnails showing popular games currently being played, with a subtle “live now” indicator for social proof. Compact rewards & tournaments section — includes a slim daily login rewards tracker, VIP progress bar, tournament leaderboard, and countdown timer, designed to use minimal vertical space while remaining visually engaging. Game selection area featuring interactive, swipeable category carousels (Slots, Live Dealer, Crash, Table Games, Featured). Each category contains sliding game cards with smooth animations, quick-play buttons, and hover effects. Floating UI elements: a wallet balance widget (Gold Coins & Sweeps Coins), a quick deposit button in the bottom right corner, and a floating live chat widget for instant support. A real-time jackpot counter and scrolling ‘live winnings’ ticker integrated into the header or footer for social proof without clutter. VIP & Premium Layer (for a high-roller appeal): Subtle animated particle effects or glowing gradient backgrounds behind banners and key UI sections. A floating 3D carousel effect for the Featured Games section, with soft depth-of-field lighting to create a premium, immersive vibe. Smooth micro-interactions like pulsing call-to-action buttons, glowing jackpot counters, and animated progress bars for VIP tiers and tournaments. General Style & Design Notes: Dark luxury theme with rich accents in black, gold, and purple, using glassmorphism panels, soft shadows, and neon glows to convey a modern, high-end look. Slim left-side vertical navigation bar with clean glowing icons (Home, Games, Promotions, VIP, Wallet, Support), expandable labels on hover/tap. Search bar and filter controls placed subtly in the header for fast game discovery without breaking the visual flow. The design must be lightweight, touch-friendly, and optimized for fast mobile loading, avoiding oversized or overly complex assets while maintaining a premium aesthetic. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +628 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: New Ui 1
-emoji: 👁
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: new-ui-1
+emoji: 🐳
+colorFrom: red
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,628 @@
-<!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>Nioplay Casino Lobby</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'niogold': '#D4AF37',
+                        'niopurple': '#7D3C98',
+                        'nioblack': '#0F0F0F',
+                        'nioglass': 'rgba(30, 30, 30, 0.75)'
+                    },
+                    boxShadow: {
+                        'glass': '0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.4)',
+                        'glow': '0 0 15px rgba(212, 175, 55, 0.7)',
+                        'button': '0 0 10px rgba(212, 175, 55, 0.7)'
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/css">
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background: linear-gradient(135deg, #0F0F0F, #1A1A1A);
+            color: white;
+            overflow-x: hidden;
+        }
+        .glass-panel {
+            background: rgba(40, 40, 40, 0.6);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(212, 175, 55, 0.3);
+            border-radius: 12px;
+        }
+        .premium-gradient {
+            background: linear-gradient(45deg, rgba(125, 60, 152, 0.4), rgba(212, 175, 55, 0.4));
+        }
+        .card-hover {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4), 0 0 20px rgba(125, 60, 152, 0.5);
+        }
+        .marquee-container {
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .marquee {
+            display: inline-block;
+            animation: marquee 25s linear infinite;
+        }
+        @keyframes marquee {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); }
+            70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .glow-text {
+            text-shadow: 0 0 5px rgba(212, 175, 55, 0.8);
+        }
+        .category-btn.active {
+            background: linear-gradient(to right, #D4AF37, #7D3C98);
+            box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
+        }
+        .particles-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .particle {
+            position: absolute;
+            background: rgba(212, 175, 55, 0.8);
+            border-radius: 50%;
+            pointer-events: none;
+            opacity: 0.5;
+        }
+        .vip-gradient-bg {
+            background: linear-gradient(to right, #1A1A1A, #2D1420, #1A1A1A);
+            position: relative;
+            overflow: hidden;
+        }
+        .vip-gradient-bg::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg,
+                rgba(212, 175, 55, 0.1) 0%,
+                rgba(125, 60, 152, 0.1) 20%,
+                rgba(212, 175, 55, 0.1) 40%,
+                rgba(125, 60, 152, 0.1) 60%,
+                rgba(212, 175, 55, 0.1) 80%,
+                rgba(125, 60, 152, 0.1) 100%);
+            animation: gradient-move 8s linear infinite;
+            z-index: 0;
+        }
+        @keyframes gradient-move {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .scroll-container {
+            scrollbar-width: thin;
+            scrollbar-color: #D4AF37 transparent;
+        }
+        .scroll-container::-webkit-scrollbar {
+            height: 6px;
+        }
+        .scroll-container::-webkit-scrollbar-track {
+            background: rgba(30, 30, 30, 0.5);
+            border-radius: 10px;
+        }
+        .scroll-container::-webkit-scrollbar-thumb {
+            background: linear-gradient(to right, #D4AF37, #7D3C98);
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body class="relative min-h-screen overflow-x-hidden">
+    <!-- Particles container -->
+    <div id="particles-container" class="particles-container"></div>
+    <!-- Navbar -->
+    <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel">
+        <div class="flex items-center">
+            <div class="w-10 h-10 flex items-center justify-center bg-niopurple rounded-full">
+                <span class="text-xl font-bold text-niogold">N</span>
+            </div>
+            <span class="ml-2 text-xl font-bold text-niogold">Nioplay</span>
+        </div>
+        <div class="flex-1 mx-4">
+            <div class="relative">
+                <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-nioglass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-niogold">
+                <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
+            </div>
+        </div>
+        <div class="glass-panel px-4 py-1 flex items-center">
+            <i class="fas fa-coins text-niogold mr-2"></i>
+            <span class="mr-2">GC: 25,000</span>
+            <div class="h-5 w-px bg-gray-600 mx-2"></div>
+            <i class="fas fa-trophy text-niogold mr-2"></i>
+            <span>SC: 450</span>
+        </div>
+    </header>
+    <!-- Side Navigation -->
+    <div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40">
+        <div class="flex flex-col space-y-6 mt-4">
+            <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
+                <i class="fas fa-home text-xl"></i>
+                <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
+            </a>
+            <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
+                <i class="fas fa-dice text-xl"></i>
+                <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Games</span>
+            </a>
+            <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
+                <i class="fas fa-gift text-xl"></i>
+                <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Promotions</span>
+            </a>
+            <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
+                <i class="fas fa-crown text-xl"></i>
+                <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">VIP</span>
+            </a>
+            <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
+                <i class="fas fa-wallet text-xl"></i>
+                <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Wallet</span>
+            </a>
+        </div>
+    </div>
+    <main class="ml-16 pt-16 pb-28 px-4 relative">
+        <!-- Jackpot Ticker -->
+        <div class="glass-panel px-4 py-2 mb-4 overflow-hidden">
+            <div class="marquee-container">
+                <div class="marquee">
+                    <span class="text-niogold mr-6 font-bold">Jackpot: $2,452,120 <i class="fas fa-crown text-yellow-300"></i></span>
+                    <span class="text-green-400 mr-6"><i class="fas fa-user mr-1"></i> PlayerWonNow won $4,350 on Lightning Roulette!</span>
+                    <span class="text-niogold mr-6 font-bold">Mega Jackpot: $5,212,890 <i class="fas fa-fire-alt text-red-500"></i></span>
+                    <span class="text-green-400 mr-6"><i class="fas fa-user mr-1"></i> LuckyStar777 hit 750x on Gates of Olympus!</span>
+                </div>
+            </div>
+        </div>
+        <!-- Hero Banner -->
+        <div class="relative rounded-xl overflow-hidden mb-4 h-52 glass-panel premium-gradient">
+            <div class="absolute inset-0 flex">
+                <div class="w-full h-full bg-black opacity-30"></div>
+            </div>
+            <div class="absolute bottom-0 left-0 right-0 p-4">
+                <h2 class="text-2xl font-bold glow-text">NEW: Diamond Riches Megaways™</h2>
+                <p class="text-sm mb-3">Unlock unlimited ways to win with cascading symbols!</p>
+                <button class="px-6 py-2 bg-gradient-to-r from-niogold to-niopurple rounded-full text-sm font-semibold pulse">PLAY NOW</button>
+            </div>
+        </div>
+        <!-- Promotional Banners -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+            <div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg">
+                <div class="relative z-10">
+                    <div class="flex items-center mb-2">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-niogold to-niopurple flex items-center justify-center mr-2">
+                            <i class="fas fa-calendar-day"></i>
+                        </div>
+                        <h3 class="font-bold">Daily Bonus</h3>
+                    </div>
+                    <p class="text-sm mb-3">Login now to get 100 free spins!</p>
+                    <div class="h-1 w-full bg-gray-700 rounded-full mb-1">
+                        <div class="h-1 bg-gradient-to-r from-niogold to-yellow-300 rounded-full w-4/5"></div>
+                    </div>
+                    <p class="text-xs text-gray-400">1h 23m remaining</p>
+                </div>
+            </div>
+            <div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg">
+                <div class="relative z-10">
+                    <div class="flex items-center mb-2">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-emerald-400 flex items-center justify-center mr-2">
+                            <i class="fas fa-piggy-bank"></i>
+                        </div>
+                        <h3 class="font-bold">Jackpot Pool</h3>
+                    </div>
+                    <p class="text-xl text-niogold mb-2 font-bold">$1,245,120</p>
+                    <p class="text-xs">Next draw in 3h 15m</p>
+                </div>
+            </div>
+            <div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg">
+                <div class="relative z-10">
+                    <div class="flex items-center mb-2">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-pink-600 flex items-center justify-center mr-2">
+                            <i class="fas fa-clock"></i>
+                        </div>
+                        <h3 class="font-bold">Flash Offer</h3>
+                    </div>
+                    <p class="text-sm mb-3">200% bonus + 50 free spins on first deposit!</p>
+                    <button class="px-4 py-1.5 bg-gradient-to-r from-red-500 to-pink-600 rounded-full text-xs font-semibold">CLAIM NOW</button>
+                </div>
+            </div>
+        </div>
+        <!-- Live Now Marquee -->
+        <div class="glass-panel px-3 py-4 rounded-xl mb-6">
+            <div class="flex items-center mb-3">
+                <div class="w-3 h-6 bg-gradient-to-r from-niogold to-amber-200 rounded mr-2"></div>
+                <h3 class="font-bold">Live Now</h3>
+                <span class="ml-2 text-red-500 flex items-center">
+                    <span class="w-2 h-2 bg-red-500 rounded-full mr-1 animate-pulse"></span> LIVE
+                </span>
+            </div>
+            <div class="scroll-container overflow-x-auto pb-2">
+                <div class="flex space-x-4" style="min-width: max-content;">
+                    <!-- Repeat 10 game cards -->
+                    <div class="relative card-hover">
+                        <div class="w-28 h-28 rounded-xl overflow-hidden">
+                            <div class="relative w-full h-full">
+                                <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
+                                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
+                                    <i class="fas fa-play text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-xs text-center mt-1">Starburst</div>
+                        <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
+                    </div>
+                    <div class="relative card-hover">
+                        <div class="w-28 h-28 rounded-xl overflow-hidden">
+                            <div class="relative w-full h-full">
+                                <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
+                                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
+                                    <i class="fas fa-play text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-xs text-center mt-1">Sweet Bonanza</div>
+                    </div>
+                    <div class="relative card-hover">
+                        <div class="w-28 h-28 rounded-xl overflow-hidden">
+                            <div class="relative w-full h-full">
+                                <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
+                                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
+                                    <i class="fas fa-play text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-xs text-center mt-1">Book of Dead</div>
+                        <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
+                    </div>
+                    <div class="relative card-hover">
+                        <div class="w-28 h-28 rounded-xl overflow-hidden">
+                            <div class="relative w-full h-full">
+                                <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
+                                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
+                                    <i class="fas fa-play text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-xs text-center mt-1">Gates of Olympus</div>
+                    </div>
+                    <div class="relative card-hover">
+                        <div class="w-28 h-28 rounded-xl overflow-hidden">
+                            <div class="relative w-full h-full">
+                                <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
+                                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
+                                    <i class="fas fa-play text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-xs text-center mt-1">Big Bass Bonanza</div>
+                        <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Rewards & Tournaments -->
+        <div class="glass-panel p-4 rounded-xl mb-6">
+            <h3 class="font-bold mb-4 text-center">Rewards & Tournaments</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <!-- Daily Rewards -->
+                <div class="glass-panel p-4 rounded-xl">
+                    <h4 class="font-bold mb-3 text-niogold">Daily Login Rewards</h4>
+                    <div class="flex justify-between mb-3">
+                        <div class="text-center">
+                            <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mx-auto">
+                                <i class="fas fa-gem text-green-500"></i>
+                            </div>
+                            <p class="text-xs mt-1">Day 1</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-12 h-12 rounded-full bg-gradient-to-b from-niogold to-amber-100 flex items-center justify-center mx-auto">
+                                <i class="fas fa-coins text-gray-900"></i>
+                            </div>
+                            <p class="text-xs mt-1">Day 2</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mx-auto">
+                                <i class="fas fa-ticket-alt text-blue-400"></i>
+                            </div>
+                            <p class="text-xs mt-1">Day 3</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mx-auto">
+                                <i class="fas fa-gift text-purple-500"></i>
+                            </div>
+                            <p class="text-xs mt-1">Day 4</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mx-auto">
+                                <i class="fas fa-crown text-yellow-400"></i>
+                            </div>
+                            <p class="text-xs mt-1">Day 5</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center text-sm mt-2">
+                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                        <p>Login streak: 4 days</p>
+                    </div>
+                </div>
+                <!-- Tournament Leaderboard -->
+                <div class="glass-panel p-4 rounded-xl">
+                    <div class="flex justify-between items-center mb-3">
+                        <h4 class="font-bold text-niogold">Mega Tournament</h4>
+                        <div class="text-sm flex items-center">
+                            <i class="far fa-clock mr-1 text-amber-300"></i>
+                            <span>12:45:21</span>
+                        </div>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between py-1 px-2 bg-gray-800 rounded">
+                            <div class="flex items-center">
+                                <span class="w-5 h-5 bg-gradient-to-r from-amber-300 to-amber-100 text-xs text-gray-900 rounded-full flex items-center justify-center mr-2">1</span>
+                                <span class="text-sm">BigWinner88</span>
+                            </div>
+                            <span class="text-niogold font-bold">$1,250</span>
+                        </div>
+                        <div class="flex items-center justify-between py-1 px-2">
+                            <div class="flex items-center">
+                                <span class="w-5 h-5 bg-gray-700 text-xs rounded-full flex items-center justify-center mr-2">2</span>
+                                <span class="text-sm">LuckySpin99</span>
+                            </div>
+                            <span>$850</span>
+                        </div>
+                        <div class="flex items-center justify-between py-1 px-2 bg-gray-800 rounded">
+                            <div class="flex items-center">
+                                <span class="w-5 h-5 bg-gray-700 text-xs rounded-full flex items-center justify-center mr-2">3</span>
+                                <span class="text-sm">MidasTouch</span>
+                            </div>
+                            <span>$620</span>
+                        </div>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-sm">Your position: #24</span>
+                        <button class="px-3 py-1 bg-gradient-to-r from-niopurple to-purple-600 rounded-full text-xs font-semibold">PLAY NOW</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Game Categories -->
+        <div class="glass-panel p-4 rounded-xl">
+            <div class="flex items-center mb-4">
+                <h3 class="font-bold text-xl mr-4">Featured Games</h3>
+                <div class="flex-1 scroll-container overflow-x-auto pb-2">
+                    <div class="flex space-x-2" style="min-width: max-content;">
+                        <button class="category-btn active px-4 py-2 rounded-full text-sm">Slots</button>
+                        <button class="category-btn glass-panel px-4 py-2 rounded-full text-sm">Live Casino</button>
+                        <button class="category-btn glass-panel px-4 py-2 rounded-full text-sm">Table Games</button>
+                        <button class="category-btn glass-panel px-4 py-2 rounded-full text-sm">Jackpots</button>
+                        <button class="category-btn glass-panel px-4 py-2 rounded-full text-sm">New Games</button>
+                        <button class="category-btn glass-panel px-4 py-2 rounded-full text-sm">Popular</button>
+                    </div>
+                </div>
+            </div>
+            <div class="relative">
+                <!-- Featured Games Carousel with 3D effect -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(5deg) rotateX(5deg);">
+                        <div class="relative">
+                            <div class="rounded-xl overflow-hidden h-40">
+                                <img src="https://via.placeholder.com/300x160/1A1A1A/333333?text=Featured" class="w-full h-full object-cover">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+                            </div>
+                            <div class="absolute bottom-0 left-0 right-0 p-3">
+                                <h4 class="font-bold text-sm mb-1">Diamond Riches Megaways™</h4>
+                                <div class="flex justify-between items-center">
+                                    <div class="text-xs">
+                                        <i class="fas fa-star text-amber-300"></i> 4.8
+                                    </div>
+                                    <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
+                        <div class="relative">
+                            <div class="rounded-xl overflow-hidden h-40">
+                                <img src="https://via.placeholder.com/300x160/1A1A1A/333333?text=Featured" class="w-full h-full object-cover">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+                                <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
+                                    New
+                                </div>
+                            </div>
+                            <div class="absolute bottom-0 left-0 right-0 p-3">
+                                <h4 class="font-bold text-sm mb-1">Fortune Tiger</h4>
+                                <div class="flex justify-between items-center">
+                                    <div class="text-xs">
+                                        <i class="fas fa-star text-amber-300"></i> 4.9
+                                    </div>
+                                    <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);">
+                        <div class="relative">
+                            <div class="rounded-xl overflow-hidden h-40">
+                                <img src="https://via.placeholder.com/300x160/1A1A1A/333333?text=Featured" class="w-full h-full object-cover">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+                            </div>
+                            <div class="absolute bottom-0 left-0 right-0 p-3">
+                                <h4 class="font-bold text-sm mb-1">Pirates Plenty: Battle</h4>
+                                <div class="flex justify-between items-center">
+                                    <div class="text-xs">
+                                        <i class="fas fa-star text-amber-300"></i> 4.7
+                                    </div>
+                                    <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Floating UI Elements -->
+    <div class="fixed bottom-24 right-4 z-50">
+        <button class="w-14 h-14 rounded-full bg-gradient-to-r from-niogold to-amber-100 flex items-center justify-center shadow-glow">
+            <i class="fas fa-plus text-gray-900"></i>
+        </button>
+    </div>
+    <div class="fixed bottom-28 left-4 z-50">
+        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-niopurple to-purple-600 flex items-center justify-center shadow-glow">
+            <i class="fas fa-comment-alt"></i>
+        </div>
+    </div>
+    <footer class="fixed bottom-0 left-0 right-0 z-50 glass-panel py-3 px-4 flex justify-between">
+        <div class="flex">
+            <i class="fas fa-info-circle mr-3 text-gray-400"></i>
+            <i class="fas fa-history mr-3 text-gray-400"></i>
+            <i class="fas fa-cog text-gray-400"></i>
+        </div>
+        <div class="flex">
+            <div class="w-4 h-4 bg-gradient-to-r from-niogold to-amber-100 rounded-full flex items-center justify-center mr-2">
+                <div class="w-2 h-2 bg-black rounded-full animate-pulse"></div>
+            </div>
+            <span class="text-xs">Connected</span>
+        </div>
+    </footer>
+    <script>
+        // Create particle effect
+        function createParticles() {
+            const container = document.getElementById('particles-container');
+            const particleCount = 30;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                // Random properties
+                const size = Math.random() * 5 + 1;
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100;
+                const animationDuration = Math.random() * 10 + 5;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${posX}%`;
+                particle.style.top = `${posY}%`;
+                particle.style.animation = `floating ${animationDuration}s ease-in-out infinite`;
+                particle.style.animationDelay = `${Math.random() * 5}s`;
+                container.appendChild(particle);
+            }
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            createParticles();
+            // Category buttons interaction
+            const categoryButtons = document.querySelectorAll('.category-btn');
+            categoryButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    categoryButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                });
+            });
+            // Simulate game hover effects
+            const gameCards = document.querySelectorAll('.card-hover');
+            gameCards.forEach(card => {
+                card.addEventListener('mouseenter', () => {
+                    card.style.transform = 'translateY(-5px)';
+                });
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = '';
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/new-ui-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>