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
2cd04da
verified
| <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> |