Spaces:

ProjectGenesis
/

tournament-redesign

Running

App Files Files Community

ProjectGenesis commited on Aug 4, 2025

Commit

2cd04da

verified ·

1 Parent(s): da91f33

Generate a online casino tournament page with modern, dark neon yellow/orange and black design theme, with glass morphism card to include Current Tournament Banner, a carousel of past, ongoing, live, and upcoming tournaments, user stats panel to show ranking and history, leaderboard list showing top 10 players, tournament details modal, share/invite a friend & earn rewards, hall of fame section - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tournament Redesign
-emoji: 💻
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tournament-redesign
+emoji: 🐳
+colorFrom: red
+colorTo: blue
 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,696 @@
-<!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>Neon Spin | Casino Tournament Hub</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: {
+                        dark: '#121212',
+                        primary: '#FFA500',
+                        secondary: '#FFFF00',
+                        accent: '#FF6B00',
+                        glass: 'rgba(30, 30, 30, 0.7)',
+                        borderColor: 'rgba(255, 165, 0, 0.2)',
+                        bghover: 'rgba(255, 165, 0, 0.1)',
+                    },
+                    boxShadow: {
+                        glass: '0 4px 30px rgba(0, 0, 0, 0.1)',
+                        neon: '0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.3)',
+                        glow: '0 0 15px rgba(255, 230, 0, 0.7)',
+                    },
+                    backdropBlur: {
+                        xs: '2px',
+                        sm: '4px',
+                        DEFAULT: '12px',
+                        md: '16px',
+                        lg: '20px',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;600;800&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Exo 2', sans-serif;
+            background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
+            min-height: 100vh;
+            color: #f5f5f5;
+            overflow-x: hidden;
+        }
+        h1, h2, h3, h4, h5 {
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 700;
+        }
+        .glass-card {
+            background: rgba(20, 20, 20, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 165, 0, 0.2);
+            border-radius: 16px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5),
+                        0 0 10px rgba(255, 165, 0, 0.2);
+            transition: all 0.3s ease;
+        }
+        .glass-card:hover {
+            box-shadow: 0 0 15px rgba(255, 230, 0, 0.7),
+                        0 0 25px rgba(255, 165, 0, 0.3);
+        }
+        .neon-text {
+            text-shadow: 0 0 5px rgba(255, 230, 0, 0.8);
+            color: #fff;
+        }
+        .gradient-text {
+            background: linear-gradient(45deg, #FFFF00, #FFA500);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .tabs .tab.active {
+            border-bottom: 3px solid #FFA500;
+            color: #FFA500;
+        }
+        .live-indicator {
+            position: relative;
+            padding-left: 15px;
+        }
+        .live-indicator::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 10px;
+            height: 10px;
+            background-color: #ff0000;
+            border-radius: 50%;
+            box-shadow: 0 0 10px #ff0000;
+            animation: pulse 1.5s infinite;
+        }
+        .podium {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 200px;
+        }
+        .trophy-icon::after {
+            content: "🏆";
+            font-size: 1.2em;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.4; }
+            100% { opacity: 1; }
+        }
+        .slide {
+            min-width: 280px;
+            transition: all 0.3s ease;
+            opacity: 0.8;
+        }
+        .slide.active {
+            opacity: 1;
+            transform: scale(1.05);
+        }
+        .chips {
+            position: relative;
+        }
+        .chips::before {
+            content: "��";
+            position: absolute;
+            left: -15px;
+            top: -10px;
+            transform: rotate(-30deg) scale(1.2);
+            opacity: 0.7;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+        }
+        progress {
+            width: 100%;
+            height: 8px;
+            accent-color: #FFA500;
+            border-radius: 4px;
+        }
+        progress::-webkit-progress-bar {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+        }
+        progress::-webkit-progress-value {
+            background: linear-gradient(90deg, #ff8c00, #ffa500);
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Main Container -->
+    <div class="min-h-screen max-w-7xl mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex justify-between items-center py-4 mb-6">
+            <h1 class="text-3xl font-bold gradient-text flex items-center">
+                <i class="fas fa-dice mr-3"></i>Neon<span class="text-yellow-300">Spin</span>
+            </h1>
+            <div class="flex space-x-4">
+                <button class="glass-card px-5 py-2 text-primary rounded-full hover:text-yellow-300 transition">
+                    Sign In
+                </button>
+                <button class="glass-card px-5 py-2 bg-primary bg-opacity-20 text-primary rounded-full hover:bg-opacity-40 transition border border-primary border-opacity-30">
+                    Create Account
+                </button>
+            </div>
+        </header>
+        <!-- Main Content Layout -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Left Column (Tournaments) -->
+            <div class="col-span-1 lg:col-span-2 space-y-6">
+                <!-- Current Tournament Banner -->
+                <div class="glass-card p-6 relative overflow-hidden">
+                    <div class="absolute top-0 right-0 py-1 px-4 bg-primary rounded-bl-lg text-sm font-bold">
+                        <span class="live-indicator">LIVE NOW</span>
+                    </div>
+                    <div class="flex flex-col md:flex-row md:items-center gap-6">
+                        <div class="flex-shrink-0">
+                            <div class="w-32 h-32 rounded-xl overflow-hidden flex items-center justify-center bg-gradient-to-br from-dark to-black border border-primary">
+                                <img src="https://images.unsplash.com/photo-1551040163-0190a90d6a3b?auto=format&fit=crop&w=300" class="object-cover w-full h-full" alt="Diamond Cup">
+                            </div>
+                        </div>
+                        <div class="flex-1">
+                            <h2 class="text-2xl font-bold mb-3 neon-text">DIAMOND Jackpot Championship</h2>
+                            <div class="flex items-center mb-3 text-xs">
+                                <span class="px-3 py-1 bg-primary bg-opacity-10 border border-primary border-opacity-40 rounded-full">200 Players</span>
+                                <span class="mx-3 w-1 h-1 bg-white rounded-full"></span>
+                                <span>Tournament #DSC092</span>
+                            </div>
+                            <div class="mb-5">
+                                <div class="flex justify-between text-sm mb-1">
+                                    <span>$25,000 Prize Pool</span>
+                                    <span>$5,640 Collected</span>
+                                </div>
+                                <progress id="tournament-progress" value="25" max="100"></progress>
+                            </div>
+                            <div class="flex flex-wrap gap-2 mt-4">
+                                <button class="glass-card px-6 py-2 bg-primary text-gray-900 font-bold rounded-lg text-sm hover:bg-yellow-300 transition">
+                                    Join Now
+                                </button>
+                                <button class="glass-card px-6 py-2 text-primary rounded-lg hover:bg-primary hover:bg-opacity-10 transition border border-primary border-opacity-40" onclick="openModal()">
+                                    Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Tournaments Carousel -->
+                <div class="glass-card p-6">
+                    <h2 class="text-xl font-bold mb-5 neon-text">Featured Tournaments</h2>
+                    <!-- Tabs -->
+                    <div class="tabs flex space-x-6 mb-6 text-sm overflow-x-auto pb-2">
+                        <button class="tab active transition py-1 whitespace-nowrap">All</button>
+                        <button class="tab transition py-1 whitespace-nowrap hover:text-primary">Past</button>
+                        <button class="tab transition py-1 whitespace-nowrap hover:text-primary">Ongoing</button>
+                        <button class="tab transition py-1 whitespace-nowrap">
+                            <span class="live-indicator">Live</span>
+                        </button>
+                        <button class="tab transition py-1 whitespace-nowrap hover:text-primary">Upcoming</button>
+                        <button class="tab transition py-1 whitespace-nowrap hover:text-primary">Exclusive</button>
+                    </div>
+                    <!-- Carousel Content -->
+                    <div class="relative">
+                        <div class="carousel-container flex gap-4 pb-4 overflow-x-auto scrollbar-hide">
+                            <div class="slide active glass-card flex-shrink-0 p-5 w-64">
+                                <div class="flex items-center mb-3">
+                                    <span class="px-2 py-1 bg-primary bg-opacity-10 border border-primary border-opacity-30 rounded text-xs mr-3">High Roller</span>
+                                    <i class="fas fa-crown text-yellow-300"></i>
+                                </div>
+                                <h3 class="font-bold mb-1 chips">Golden Spin Challenge</h3>
+                                <div class="text-xs text-gray-400 mb-3">Starts in 2d 5h</div>
+                                <div class="bg-dark p-3 rounded-lg mb-3">
+                                    <div class="flex justify-between text-xs mb-1">
+                                        <span>Prize Pool:</span>
+                                        <span class="font-bold text-primary">$45,000</span>
+                                    </div>
+                                    <div class="flex justify-between text-xs">
+                                        <span>Entry Fee:</span>
+                                        <span class="font-bold text-secondary">$250</span>
+                                    </div>
+                                </div>
+                                <button class="w-full py-2 text-center bg-primary bg-opacity-10 border border-primary border-opacity-30 hover:bg-opacity-20 rounded-lg transition">
+                                    Join Soon
+                                </button>
+                            </div>
+                            <div class="slide glass-card flex-shrink-0 p-5 w-64">
+                                <div class="flex items-center mb-3">
+                                    <span class="px-2 py-1 bg-red-600 bg-opacity-10 border border-red-600 border-opacity-30 rounded text-xs mr-3">
+                                        <span class="live-indicator">Live</span>
+                                    </span>
+                                </div>
+                                <h3 class="font-bold mb-1">Neon Nights Royale</h3>
+                                <div class="text-xs text-gray-400 mb-3">Ending in 4h 27m</div>
+                                <div class="bg-dark p-3 rounded-lg mb-3">
+                                    <div class="flex justify-between text-xs mb-1">
+                                        <span>Prize Pool:</span>
+                                        <span class="font-bold text-primary">$18,250</span>
+                                    </div>
+                                    <div class="flex justify-between text-xs">
+                                        <span>Players:</span>
+                                        <span class="font-bold text-secondary">134/200</span>
+                                    </div>
+                                </div>
+                                <button class="w-full py-2 text-center bg-red-600 bg-opacity-20 border border-red-600 border-opacity-40 text-white hover:bg-opacity-40 rounded-lg transition">
+                                    Join Live
+                                </button>
+                            </div>
+                            <div class="slide glass-card flex-shrink-0 p-5 w-64">
+                                <div class="flex items-center mb-3">
+                                    <span class="px-2 py-1 bg-green-500 bg-opacity-10 border border-green-500 border-opacity-30 rounded text-xs mr-3">Completed</span>
+                                </div>
+                                <h3 class="font-bold mb-1">Summer Slot Series</h3>
+                                <div class="text-xs text-gray-400 mb-3">June 25 - July 2, 2023</div>
+                                <div class="bg-dark p-3 rounded-lg mb-3 flex flex-col gap-1">
+                                    <div class="flex justify-between text-xs">
+                                        <span>Prize Pool:</span>
+                                        <span class="font-bold text-primary">$60,000</span>
+                                    </div>
+                                    <div class="flex justify-between text-xs">
+                                        <span>Winner:</span>
+                                        <span class="font-bold text-secondary">@HighRoller93</span>
+                                    </div>
+                                </div>
+                                <button class="w-full py-2 text-center bg-green-500 bg-opacity-10 border border-green-500 border-opacity-30 hover:bg-opacity-20 rounded-lg transition">
+                                    View Results
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Navigation Arrows -->
+                        <button class="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-4 bg-glass p-2 rounded-full backdrop-blur-md">
+                            <i class="fas fa-chevron-left text-yellow-300"></i>
+                        </button>
+                        <button class="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-4 bg-glass p-2 rounded-full backdrop-blur-md">
+                            <i class="fas fa-chevron-right text-yellow-300"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Hall of Fame Section -->
+                <div class="glass-card p-6">
+                    <div class="flex justify-between items-center mb-5">
+                        <h2 class="text-xl font-bold neon-text">Hall of Fame</h2>
+                        <button class="text-primary text-sm flex items-center">
+                            View All
+                            <i class="fas fa-chevron-right ml-1"></i>
+                        </button>
+                    </div>
+                    <div class="podium flex justify-center gap-4 mb-8">
+                        <div class="glass-card rounded-lg py-4 text-center w-1/4 self-start">
+                            <div class="w-10 h-10 mx-auto mb-3 grid place-content-center rounded-full bg-yellow-900 text-primary text-xl">2</div>
+                            <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-16 h-16 mx-auto rounded-full border-2 border-yellow-600 mb-2" alt="Player">
+                            <h4 class="font-bold mb-0.5">@LuckySpin</h4>
+                            <p class="text-xs text-primary font-bold">$27,428</p>
+                        </div>
+                        <div class="glass-card rounded-lg py-6 text-center w-1/3">
+                            <div class="w-12 h-12 mx-auto mb-5 grid place-content-center rounded-full bg-yellow-800 text-primary text-2xl trophy-icon">1</div>
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-20 h-20 mx-auto rounded-full border-4 border-primary mb-2" alt="Player">
+                            <h4 class="font-bold text-lg mb-1">@GoldenQueen</h4>
+                            <p class="text-primary font-bold">$68,520</p>
+                        </div>
+                        <div class="glass-card rounded-lg py-4 text-center w-1/4 self-start">
+                            <div class="w-10 h-10 mx-auto mb-3 grid place-content-center rounded-full bg-yellow-900 text-primary">3</div>
+                            <img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-16 h-16 mx-auto rounded-full border-2 border-orange-600 mb-2" alt="Player">
+                            <h4 class="font-bold mb-0.5">@MidasHands</h4>
+                            <p class="text-xs text-primary font-bold">$19,376</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-center">
+                        <button class="glass-card px-5 py-2 text-sm border border-primary border-opacity-30 rounded-full hover:bg-primary hover:bg-opacity-10 transition flex items-center">
+                            <i class="fas fa-shield-alt text-primary mr-2"></i>
+                            All-Time Winners Gallery
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column (Stats & Social) -->
+            <div class="col-span-1 space-y-6">
+                <!-- User Stats Panel -->
+                <div class="glass-card p-6">
+                    <div class="flex justify-between items-center mb-5">
+                        <h2 class="text-xl font-bold neon-text">My Tournament Stats</h2>
+                        <div class="avatar relative">
+                            <img src="https://randomuser.me/api/portraits/men/99.jpg" class="w-10 h-10 rounded-full border border-primary" alt="User">
+                            <div class="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-primary text-dark text-xs font-bold grid place-items-center">
+                                5
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3 mb-4">
+                        <div class="glass-card bg-opacity-10 p-3 rounded-xl">
+                            <div class="text-gray-400 text-xs mb-1">Current Rank</div>
+                            <div class="text-xl font-bold gradient-text flex items-center">
+                                87<span class="text-base ml-1">th</span>
+                            </div>
+                        </div>
+                        <div class="glass-card bg-opacity-10 p-3 rounded-xl">
+                            <div class="text-gray-400 text-xs mb-1">Achievements</div>
+                            <div class="text-xl font-bold gradient-text flex items-center">
+                                12
+                                <i class="fas fa-trophy ml-2 text-yellow-300"></i>
+                            </div>
+                        </div>
+                        <div class="glass-card bg-opacity-10 p-3 rounded-xl">
+                            <div class="text-gray-400 text-xs mb-1">Tournaments</div>
+                            <div class="text-xl font-bold text-primary">34</div>
+                        </div>
+                        <div class="glass-card bg-opacity-10 p-3 rounded-xl">
+                            <div class="text-gray-400 text-xs mb-1">Win Rate</div>
+                            <div class="text-xl font-bold text-primary">28%</div>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <h3 class="font-medium mb-3">Recent Winnings</h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between text-sm items-center">
+                                <div class="flex items-center">
+                                    <div class="mr-3">
+                                        <i class="fas fa-coins text-yellow-300"></i>
+                                    </div>
+                                    <div>
+                                        <div>Slot O'Clock</div>
+                                        <div class="text-xs text-gray-400">Yesterday</div>
+                                    </div>
+                                </div>
+                                <div class="font-bold text-secondary">$420</div>
+                            </div>
+                            <div class="flex justify-between text-sm items-center">
+                                <div class="flex items-center">
+                                    <div class="mr-3">
+                                        <i class="fas fa-diamond text-teal-300"></i>
+                                    </div>
+                                    <div>
+                                        <div>Diamond Jackpot</div>
+                                        <div class="text-xs text-gray-400">Jun 15</div>
+                                    </div>
+                                </div>
+                                <div class="font-bold text-secondary">$1,280</div>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="w-full mt-6 py-2 glass-card hover:bg-primary hover:bg-opacity-10 transition rounded-lg text-sm flex items-center justify-center">
+                        <i class="fas fa-history mr-2"></i>
+                        View Full Tournament History
+                    </button>
+                </div>
+                <!-- Leaderboard Panel -->
+                <div class="glass-card p-6">
+                    <div class="flex justify-between items-center mb-5">
+                        <h2 class="text-xl font-bold neon-text">Current Leaderboard</h2>
+                        <div class="relative">
+                            <button class="text-sm bg-glass py-1 px-3 rounded-full">
+                                Tournament #DSC092
+                            </button>
+                        </div>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="p-2 rounded-lg grid grid-cols-10 items-center bg-primary bg-opacity-5 border border-primary border-opacity-20">
+                            <div class="font-bold text-center">#</div>
+                            <div class="col-span-5 font-bold">Player</div>
+                            <div class="col-span-2 font-bold text-right">Winnings</div>
+                            <div class="col-span-2 font-bold text-right">Score</div>
+                        </div>
+                        <div class="p-2 rounded-xl grid grid-cols-10 items-center glass-card border-primary border-opacity-20">
+                            <div class="text-center">
+                                <i class="fas fa-crown text-yellow-300"></i>
+                            </div>
+                            <div class="col-span-5 flex items-center">
+                                <img src="https://randomuser.me/api/portraits/men/43.jpg" class="w-8 h-8 mr-2 rounded-full border border-primary">
+                                <div>@AceHighRoller</div>
+                            </div>
+                            <div class="col-span-2 text-right font-bold text-yellow-300">$6,240</div>
+                            <div class="col-span-2 text-right font-bold">572,045</div>
+                        </div>
+                        <div class="p-2 rounded-xl grid grid-cols-10 items-center glass-card border-primary border-opacity-20">
+                            <div class="text-center font-bold">2</div>
+                            <div class="col-span-5 flex items-center">
+                                <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-8 h-8 mr-2 rounded-full border border-primary">
+                                <div>@LuckySpinner</div>
+                            </div>
+                            <div class="col-span-2 text-right font-bold text-yellow-300">$4,810</div>
+                            <div class="col-span-2 text-right font-bold">501,632</div>
+                        </div>
+                        <div class="p-2 rounded-xl grid grid-cols-10 items-center glass-card border-primary border-opacity-20">
+                            <div class="text-center font-bold">3</div>
+                            <div class="col-span-5 flex items-center">
+                                <img src="https://randomuser.me/api/portraits/men/11.jpg" class="w-8 h-8 mr-2 rounded-full border border-primary">
+                                <div>@JackpotMaster</div>
+                            </div>
+                            <div class="col-span-2 text-right font-bold text-yellow-300">$4,125</div>
+                            <div class="col-span-2 text-right font-bold">486,932</div>
+                        </div>
+                        <!-- Add the next 7 players in a similar way -->
+                        <div class="text-center pt-3">
+                            <button class="glass-card hover:bg-primary hover:bg-opacity-10 transition px-4 py-1 rounded-full text-sm">
+                                Show More (7+)
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Share & Invite -->
+                <div class="glass-card p-6">
+                    <h2 class="text-xl font-bold neon-text mb-4">Invite Friends & Earn</h2>
+                    <div class="glass-card p-4 mb-5 bg-primary bg-opacity-5 rounded-lg border border-primary border-opacity-20">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <h3 class="font-bold text-secondary mb-1">Referal Rewards</h3>
+                                <p class="text-xs opacity-80">Get $50 for each friend who joins and plays $50+</p>
+                            </div>
+                            <div class="glass-card text-primary w-12 h-12 rounded-full grid place-items-center text-2xl">
+                                <i class="fas fa-gift"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="text-sm mb-1 block">Your Referral Link</label>
+                        <div class="glass-card rounded-lg flex">
+                            <input type="text" value="https://neonspin.com/refer?ref=USER1296"
+                                class="w-full bg-transparent p-3 text-sm focus:outline-none" readonly>
+                            <button class="p-3 group hover:text-primary transition">
+                                <i class="far fa-copy"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <h4 class="text-sm mb-2">Share via:</h4>
+                        <div class="flex space-x-4 justify-center">
+                            <button class="w-10 h-10 glass-card rounded-full flex items-center justify-center hover:text-yellow-300 hover:bg-glass">
+                                <i class="fab fa-facebook-f"></i>
+                            </button>
+                            <button class="w-10 h-10 glass-card rounded-full flex items-center justify-center hover:text-yellow-300 hover:bg-glass">
+                                <i class="fab fa-twitter"></i>
+                            </button>
+                            <button class="w-10 h-10 glass-card rounded-full flex items-center justify-center hover:text-yellow-300 hover:bg-glass">
+                                <i class="fab fa-whatsapp"></i>
+                            </button>
+                            <button class="w-10 h-10 glass-card rounded-full flex items-center justify-center hover:text-yellow-300 hover:bg-glass">
+                                <i class="fas fa-envelope"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Tournament Details Modal -->
+    <div id="tournament-modal" class="modal">
+        <div class="flex items-center justify-center min-h-screen px-4">
+            <div class="glass-card p-6 w-full max-w-xl mx-auto relative">
+                <button onclick="closeModal()" class="absolute top-5 right-5 w-8 h-8 flex items-center justify-center glass-card rounded-full hover:bg-primary hover:bg-opacity-10">
+                    <i class="fas fa-times"></i>
+                </button>
+                <h2 class="text-2xl font-bold neon-text mb-6">Diamond Jackpot Championship</h2>
+                <div class="grid grid-cols-2 gap-4 mb-6">
+                    <div class="glass-card bg-opacity-10 p-4 rounded-xl">
+                        <div class="text-sm mb-1">Type</div>
+                        <div class="text-primary font-bold">Slots Tournament</div>
+                    </div>
+                    <div class="glass-card bg-opacity-10 p-4 rounded-xl">
+                        <div class="text-sm mb-1">Entry Fee</div>
+                        <div class="text-primary font-bold">$50 - $250</div>
+                    </div>
+                    <div class="glass-card bg-opacity-10 p-4 rounded-xl">
+                        <div class="text-sm mb-1">Prize Pool</div>
+                        <div class="text-yellow-300 font-bold">$25,000</div>
+                    </div>
+                    <div class="glass-card bg-opacity-10 p-4 rounded-xl">
+                        <div class="text-sm mb-1">Time Left</div>
+                        <div class="font-bold">2d 15h:42m:18s</div>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h3 class="text-lg font-bold mb-3">Payout Structure</h3>
+                    <div class="glass-card p-4 rounded-xl mb-3">
+                        <div class="flex justify-between">
+                            <div>Rank 1</div>
+                            <div class="text-primary font-bold">$10,000</div>
+                        </div>
+                    </div>
+                    <div class="glass-card p-4 rounded-xl mb-3">
+                        <div class="flex justify-between">
+                            <div>Rank 2</div>
+                            <div class="text-primary font-bold">$5,000</div>
+                        </div>
+                    </div>
+                    <div class="glass-card p-4 rounded-xl mb-3">
+                        <div class="flex justify-between">
+                            <div>Rank 3</div>
+                            <div class="text-primary font-bold">$3,500</div>
+                        </div>
+                    </div>
+                    <div class="glass-card p-4 rounded-xl">
+                        <div class="flex justify-between">
+                            <div>Rank 4-10</div>
+                            <div class="text-primary font-bold">$1,000 - $650 each</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h3 class="text-lg font-bold mb-3">About This Tournament</h3>
+                    <p class="text-sm opacity-90">
+                        Experience the thrill of the Diamond Jackpot Championship! Compete for a share of $25,000 in prizes in this high-stakes slots tournament. Play your favorite Diamond Slots games to earn points and climb the leaderboard. The higher you finish, the more you win!
+                    </p>
+                    <ul class="mt-3 text-sm opacity-90 space-y-1">
+                        <li><i class="fas fa-circle text-primary mx-1 text-xs"></i> Open to all slot game players</li>
+                        <li><i class="fas fa-circle text-primary mx-1 text-xs"></i> Qualifier rounds: June 5-10</li>
+                        <li><i class="fas fa-circle text-primary mx-1 text-xs"></i> Leaderboard resets weekly</li>
+                    </ul>
+                </div>
+                <div class="mt-6 flex justify-center gap-3">
+                    <button class="glass-card px-6 py-3 text-primary rounded-full text-sm border border-primary border-opacity-30 hover:bg-primary hover:bg-opacity-10 transition">
+                        Tournament Rules
+                    </button>
+                    <button class="glass-card px-6 py-3 bg-primary text-black font-bold rounded-full hover:bg-yellow-300 transition">
+                        Join Tournament
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="mt-16 pt-8 pb-10 border-t border-gray-800 text-center">
+        <div class="flex flex-wrap justify-center gap-6 mb-6">
+            <a href="#" class="text-sm hover:text-primary transition">Tournaments</a>
+            <a href="#" class="text-sm hover:text-primary transition">Promotions</a>
+            <a href="#" class="text-sm hover:text-primary transition">Leaderboards</a>
+            <a href="#" class="text-sm hover:text-primary transition">About Us</a>
+            <a href="#" class="text-sm hover:text-primary transition">Support</a>
+            <a href="#" class="text-sm hover:text-primary transition">Responsible Gaming</a>
+        </div>
+        <p class="text-xs opacity-50">© 2023 NeonSpin. All Rights Reserved. This is a fictional website for demonstration purposes only. Gambling can be addictive, please play responsibly.</p>
+    </footer>
+    <script>
+        // Modal toggle functions
+        function openModal() {
+            document.getElementById('tournament-modal').style.display = 'block';
+        }
+        function closeModal() {
+            document.getElementById('tournament-modal').style.display = 'none';
+        }
+        // Tab navigation
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', function() {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                this.classList.add('active');
+            });
+        });
+        // Carousel navigation
+        const slides = document.querySelectorAll('.slide');
+        let currentSlide = 0;
+        function goToSlide(n) {
+            slides.forEach(s => s.classList.remove('active'));
+            slides[n].classList.add('active');
+        }
+        // Update time every second (for demo purposes)
+        function updateTournamentTime() {
+            const timeSpans = document.querySelectorAll('.live-indicator + .text-xs');
+            timeSpans.forEach(span => {
+                if(span.textContent.includes('Time Left') || span.textContent.includes('Ending') || span.textContent.includes('Starts')) {
+                    console.log('Updating time...');
+                }
+            });
+        }
+        // Set interval to update clock (for demo, just a placeholder)
+        setInterval(updateTournamentTime, 1000);
+    </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/tournament-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>