Generate a mobile-first online casino Tournament Page UI using a modern, dark-themed neon yellow/orange and black color palette, with a glassmorphism design system. Use glowing highlights, translucent cards, rounded components, and bold clean typography throughout. 🔲 Page Layout Structure (Top to Bottom): 1. 🔥 Current Tournament Banner Full-width glass panel at the top Includes tournament title, prize pool (e.g. “$5,000”), countdown timer, and a primary CTA button: "Join Tournament" or "Continue Playing" depending on user status Display tournament type (e.g. Free / 100 Coins / Invite Only) 2. 📊 User Stats Panel Show the user’s current tournament progress: Rank, points earned, games played, estimated prize Optional tracker showing progress toward next reward tier Layout as 3 or 4 horizontally stacked info cards with glowing icons 3. 🏅 Leaderboard Module List of top 10 players in the current tournament Columns: Rank | Username | Score | Prize Top 3 rows: gold/silver/bronze styling Current user’s rank always displayed (even if not in top 10), with a highlight or border 4. 🎮 Tournament Carousel Section Horizontal scrollable section of active and upcoming tournaments Tabs or filters: Live, Upcoming, Completed Each card shows: Tournament name Prize pool Entry fee (Free / Coins) Timer or “LIVE” badge Join or Watch button 5. 📄 Tournament Details Modal (on click) Triggered by clicking a tournament card Show detailed info: Description, start/end time, payout structure, eligible games Scoring rules (e.g. “1 point = $1 wagered”), entry fee “Join Tournament” CTA and Terms link 6. 🏆 Hall of Fame Section Showcase of past winners from completed tournaments Winner’s avatar, username, prize won, date Add trophy icons or VIP badges to top winners 7. 🤝 Invite Friends & Earn Rewards Section Card block or sticky button labeled: "🎁 Invite Friends – Earn 100 Coins Each" Opens a modal with: Referral link copy button Share options: WhatsApp, Facebook, Email Tracker: “You’ve invited 3 / 5 friends” 🧬 Design System Requirements: Color Theme: Background: Black or dark charcoal (#0C0C0C) Accent glow: Neon Yellow/Gold (#FFD700), Orange (#FFA500) Glassmorphism Components: Blurred backgrounds, semi-transparent dark panels, glowing borders Typography: Rounded bold sans-serif (e.g., Poppins) Font color: white or gold with high contrast Buttons: Rounded-pill shape Gradient fill (yellow/orange or purple/pink), glowing hover animation Card Spacing: Consistent vertical spacing, padding between sections Rounded corners on all cards (20px+) Do not generate unrelated UI sections (e.g. login, game thumbnails, or unrelated banners). Maintain this structure as a consistent, scrollable, vertical layout. - Follow Up Deployment
bd0e5b8
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Casino - Tournament Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <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: '#0C0C0C', | |
| neon: '#FFD700', | |
| orange: '#FFA500', | |
| glass: 'rgba(20, 20, 20, 0.6)', | |
| 'glow-yellow': 'rgba(255, 215, 0, 0.3)', | |
| 'glow-orange': 'rgba(255, 165, 0, 0.3)' | |
| }, | |
| boxShadow: { | |
| 'glow': '0 0 15px rgba(255, 215, 0, 0.7)', | |
| 'glow-hover': '0 0 25px rgba(255, 215, 0, 0.9)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0C0C0C; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .glass-card { | |
| background: rgba(20, 20, 20, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 24px; | |
| border: 1px solid rgba(255, 215, 0, 0.2); | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); | |
| } | |
| .glow-border { | |
| border: 1px solid transparent; | |
| background: | |
| linear-gradient(#0C0C0C, #0C0C0C) padding-box, | |
| linear-gradient(45deg, #FFD700, #FFA500) border-box; | |
| border-radius: 24px; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #FFD700, #FFA500); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #FFD700, #FFA500); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .countdown-digit { | |
| background: rgba(0, 0, 0, 0.5); | |
| border-radius: 12px; | |
| padding: 8px 12px; | |
| min-width: 60px; | |
| } | |
| .tab-active { | |
| background: rgba(255, 215, 0, 0.2); | |
| border-bottom: 3px solid #FFD700; | |
| } | |
| .leaderboard-rank-1 { | |
| background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)); | |
| } | |
| .leaderboard-rank-2 { | |
| background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.2)); | |
| } | |
| .leaderboard-rank-3 { | |
| background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(160, 82, 45, 0.2)); | |
| } | |
| .carousel-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(255, 165, 0, 0.4); | |
| } | |
| .modal-overlay { | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(5px); | |
| -webkit-backdrop-filter: blur(5px); | |
| } | |
| .modal-content { | |
| animation: modal-appear 0.3s ease-out forwards; | |
| } | |
| @keyframes modal-appear { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); | |
| } | |
| } | |
| .progress-bar { | |
| height: 10px; | |
| border-radius: 5px; | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 5px; | |
| background: linear-gradient(90deg, #FFD700, #FFA500); | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .scroll-container::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| } | |
| .scroll-container::-webkit-scrollbar-thumb { | |
| background: linear-gradient(90deg, #FFD700, #FFA500); | |
| border-radius: 10px; | |
| } | |
| .avatar-frame { | |
| border: 2px solid transparent; | |
| background: | |
| linear-gradient(#0C0C0C, #0C0C0C) padding-box, | |
| linear-gradient(45deg, #FFD700, #FFA500) border-box; | |
| } | |
| .highlight-user { | |
| position: relative; | |
| border: 2px solid #FFD700; | |
| } | |
| .highlight-user::after { | |
| content: ""; | |
| position: absolute; | |
| top: -5px; | |
| left: -5px; | |
| right: -5px; | |
| bottom: -5px; | |
| border-radius: 18px; | |
| background: linear-gradient(45deg, #FFD700, #FFA500); | |
| z-index: -1; | |
| filter: blur(10px); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-dark text-white"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-dark/80 backdrop-blur-md border-b border-neon/20"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center"> | |
| <i class="fas fa-crown text-dark text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold">Neon<span class="gradient-text">Casino</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="w-10 h-10 glass-card rounded-full flex items-center justify-center"> | |
| <i class="fas fa-bell text-neon"></i> | |
| </button> | |
| <div class="w-10 h-10 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Current Tournament Banner --> | |
| <section class="glass-card neon-glow mb-8 relative overflow-hidden"> | |
| <div class="absolute -top-20 -right-20 w-40 h-40 bg-neon rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-orange rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="p-6 relative z-10"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <span class="px-3 py-1 bg-neon/10 rounded-full text-neon text-sm font-medium">Free Entry</span> | |
| <h2 class="text-2xl font-bold mt-2">Grand Fortune Frenzy</h2> | |
| <p class="text-gray-300 mt-1">Spin to win big prizes!</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-xs text-gray-400">Prize Pool</span> | |
| <p class="text-3xl font-bold gradient-text">$5,000</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-gray-400 text-sm mb-2">Tournament ends in:</p> | |
| <div class="flex space-x-2"> | |
| <div class="countdown-digit flex flex-col items-center"> | |
| <span class="text-2xl font-bold">12</span> | |
| <span class="text-xs text-gray-400">HOURS</span> | |
| </div> | |
| <div class="countdown-digit flex flex-col items-center"> | |
| <span class="text-2xl font-bold">45</span> | |
| <span class="text-xs text-gray-400">MIN</span> | |
| </div> | |
| <div class="countdown-digit flex flex-col items-center"> | |
| <span class="text-2xl font-bold">28</span> | |
| <span class="text-xs text-gray-400">SEC</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 gradient-bg rounded-xl font-bold text-dark text-lg hover:shadow-glow-hover transition-all"> | |
| Join Tournament | |
| </button> | |
| </div> | |
| </section> | |
| <!-- User Stats Panel --> | |
| <section class="mb-8"> | |
| <h3 class="text-lg font-bold mb-4 flex items-center"> | |
| <i class="fas fa-chart-line text-neon mr-2"></i> Your Tournament Stats | |
| </h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="glass-card p-4 rounded-2xl"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-trophy text-neon"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Current Rank</p> | |
| <p class="text-xl font-bold">#24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 rounded-2xl"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-coins text-neon"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Points</p> | |
| <p class="text-xl font-bold">4,820</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 rounded-2xl"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-dice text-neon"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Games Played</p> | |
| <p class="text-xl font-bold">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 rounded-2xl"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-gift text-neon"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Estimated Prize</p> | |
| <p class="text-xl font-bold">$120</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 rounded-2xl mt-4"> | |
| <div class="flex justify-between mb-2"> | |
| <p class="text-gray-400 text-sm">Progress to next tier</p> | |
| <p class="text-neon text-sm font-medium">Tier 3 - $200</p> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leaderboard Module --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold flex items-center"> | |
| <i class="fas fa-medal text-neon mr-2"></i> Top Players | |
| </h3> | |
| <button class="text-neon text-sm flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="glass-card rounded-2xl overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="bg-black/30 text-gray-400 text-left"> | |
| <th class="py-3 px-4">Rank</th> | |
| <th class="py-3 px-4">Player</th> | |
| <th class="py-3 px-4">Score</th> | |
| <th class="py-3 px-4">Prize</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="leaderboard-rank-1 border-b border-gray-800/50"> | |
| <td class="py-3 px-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-300 to-amber-500 flex items-center justify-center"> | |
| <i class="fas fa-crown text-dark text-sm"></i> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 font-medium">LuckyStar77</td> | |
| <td class="py-3 px-4 font-bold text-amber-300">32,450</td> | |
| <td class="py-3 px-4 font-bold">$1,200</td> | |
| </tr> | |
| <tr class="leaderboard-rank-2 border-b border-gray-800/50"> | |
| <td class="py-3 px-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-gray-300 to-gray-400 flex items-center justify-center"> | |
| <span class="text-dark font-bold">2</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 font-medium">JackpotHunter</td> | |
| <td class="py-3 px-4 font-bold text-gray-300">28,910</td> | |
| <td class="py-3 px-4 font-bold">$800</td> | |
| </tr> | |
| <tr class="leaderboard-rank-3 border-b border-gray-800/50"> | |
| <td class="py-3 px-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-700 to-amber-900 flex items-center justify-center"> | |
| <span class="text-amber-300 font-bold">3</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 font-medium">GoldenSpinner</td> | |
| <td class="py-3 px-4 font-bold text-amber-500">25,670</td> | |
| <td class="py-3 px-4 font-bold">$500</td> | |
| </tr> | |
| <!-- Additional rows --> | |
| <tr class="border-b border-gray-800/50"> | |
| <td class="py-3 px-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <span class="font-bold">4</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">DiamondDice</td> | |
| <td class="py-3 px-4">22,350</td> | |
| <td class="py-3 px-4">$350</td> | |
| </tr> | |
| <tr class="border-b border-gray-800/50"> | |
| <td class="py-3 px-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <span class="font-bold">5</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">NeonNinja</td> | |
| <td class="py-3 px-4">19,820</td> | |
| <td class="py-3 px-4">$250</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Current User Row --> | |
| <div class="highlight-user p-4 bg-gray-900/50 m-4 rounded-xl"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-neon flex items-center justify-center mr-3"> | |
| <span class="font-bold text-dark">24</span> | |
| </div> | |
| <div> | |
| <p class="font-bold">You</p> | |
| <p class="text-gray-400 text-sm">JohnDoe123</p> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-bold text-neon">4,820</p> | |
| <p class="text-right text-sm text-gray-400">$120</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tournament Carousel --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold flex items-center"> | |
| <i class="fas fa-fire text-neon mr-2"></i> Active Tournaments | |
| </h3> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 rounded-lg text-sm font-medium tab-active">Live</button> | |
| <button class="px-3 py-1 rounded-lg text-sm font-medium bg-gray-800">Upcoming</button> | |
| <button class="px-3 py-1 rounded-lg text-sm font-medium bg-gray-800">Completed</button> | |
| </div> | |
| </div> | |
| <div class="scroll-container overflow-x-auto pb-4"> | |
| <div class="flex space-x-4" style="min-width: 900px;"> | |
| <!-- Tournament Card 1 --> | |
| <div class="carousel-card glass-card w-64 flex-shrink-0 rounded-2xl overflow-hidden transition-all duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs">LIVE</span> | |
| <span class="px-2 py-1 bg-neon/10 text-neon rounded text-xs">Free</span> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Mega Slots Showdown</h4> | |
| <p class="text-gray-400 text-sm mb-4">Spin your way to victory</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-xs text-gray-400">Prize Pool</p> | |
| <p class="font-bold text-neon">$2,500</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-400">Players</p> | |
| <p class="font-bold">1,240</p> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-neon/10 text-neon rounded-lg font-medium hover:bg-neon/20 transition"> | |
| Join Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 2 --> | |
| <div class="carousel-card glass-card w-64 flex-shrink-0 rounded-2xl overflow-hidden transition-all duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs">LIVE</span> | |
| <span class="px-2 py-1 bg-purple-500/20 text-purple-400 rounded text-xs">100 Coins</span> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Blackjack Blitz</h4> | |
| <p class="text-gray-400 text-sm mb-4">21 or bust challenge</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-xs text-gray-400">Prize Pool</p> | |
| <p class="font-bold text-neon">$3,200</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-400">Players</p> | |
| <p class="font-bold">890</p> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-neon/10 text-neon rounded-lg font-medium hover:bg-neon/20 transition"> | |
| Join Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 3 --> | |
| <div class="carousel-card glass-card w-64 flex-shrink-0 rounded-2xl overflow-hidden transition-all duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <span class="px-2 py-1 bg-amber-500/20 text-amber-400 rounded text-xs">Starts in 2h</span> | |
| <span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-xs">Invite Only</span> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">VIP Roulette Royale</h4> | |
| <p class="text-gray-400 text-sm mb-4">Exclusive high roller event</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-xs text-gray-400">Prize Pool</p> | |
| <p class="font-bold text-neon">$10,000</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-400">Players</p> | |
| <p class="font-bold">24/50</p> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-gray-700 rounded-lg font-medium"> | |
| Request Invite | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hall of Fame --> | |
| <section class="mb-8"> | |
| <h3 class="text-lg font-bold mb-4 flex items-center"> | |
| <i class="fas fa-trophy text-neon mr-2"></i> Hall of Fame | |
| </h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Winner 1 --> | |
| <div class="glass-card p-4 rounded-2xl"> | |
| <div class="flex items-center mb-3"> | |
| <div class="avatar-frame w-14 h-14 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Winner" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-bold">RubyRacer</p> | |
| <p class="text-xs text-gray-400">Last Week</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <i class="fas fa-crown text-amber-300 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-400">Tournament</p> | |
| <p class="text-sm font-medium">Slots Championship</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs text-gray-400">Won</p> | |
| <p class="text-neon font-bold">$2,800</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Winner 2 --> | |
| <div class="glass-card p-4 rounded-2xl"> | |
| <div class="flex items-center mb-3"> | |
| <div class="avatar-frame w-14 h-14 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Winner" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-bold">DiceMaster</p> | |
| <p class="text-xs text-gray-400">2 Days Ago</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <i class="fas fa-medal text-gray-300 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-400">Tournament</p> | |
| <p class="text-sm font-medium">Crazy Dice</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs text-gray-400">Won</p> | |
| <p class="text-neon font-bold">$1,500</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Invite Friends --> | |
| <section class="glass-card neon-glow p-6 rounded-2xl relative overflow-hidden"> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 bg-neon rounded-full filter blur-3xl opacity-10"></div> | |
| <div class="relative z-10 text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-gift text-2xl text-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Invite Friends & Earn Rewards</h3> | |
| <p class="text-gray-300 mb-4">Invite friends and get 100 coins for each friend who joins</p> | |
| <div class="bg-black/30 rounded-xl p-4 mb-4"> | |
| <p class="text-sm text-gray-400 mb-1">Your referral progress</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-left"> | |
| <p class="text-2xl font-bold gradient-text">3<span class="text-gray-400 text-base">/5</span></p> | |
| <p class="text-xs text-gray-400">Friends invited</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xl font-bold text-neon">300</p> | |
| <p class="text-xs text-gray-400">Coins earned</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="inviteBtn" class="w-full py-3 gradient-bg rounded-xl font-bold text-dark text-lg hover:shadow-glow-hover transition-all"> | |
| Invite Friends Now | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer Navigation --> | |
| <footer class="fixed bottom-0 left-0 right-0 bg-dark/80 backdrop-blur-lg border-t border-neon/10"> | |
| <div class="container mx-auto"> | |
| <div class="flex justify-around py-3"> | |
| <button class="flex flex-col items-center text-neon"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button class="flex flex-col items-center"> | |
| <i class="fas fa-trophy text-lg"></i> | |
| <span class="text-xs mt-1">Tournaments</span> | |
| </button> | |
| <button class="flex flex-col items-center"> | |
| <i class="fas fa-wallet text-lg"></i> | |
| <span class="text-xs mt-1">Wallet</span> | |
| </button> | |
| <button class="flex flex-col items-center"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </button> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Invite Friends Modal --> | |
| <div id="inviteModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="modal-overlay absolute inset-0"></div> | |
| <div class="flex items-center justify-center min-h-screen p-4"> | |
| <div class="modal-content glass-card w-full max-w-md rounded-2xl overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Invite Friends</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-300 mb-6">Share your referral link and earn 100 coins for each friend who signs up and deposits.</p> | |
| <div class="mb-6"> | |
| <p class="text-sm text-gray-400 mb-2">Your unique referral link:</p> | |
| <div class="flex"> | |
| <input type="text" value="https://neon.casino/ref/johndoe123" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg py-3 px-4 text-sm" readonly> | |
| <button class="bg-neon text-dark font-bold py-3 px-4 rounded-r-lg"> | |
| Copy | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">Share via:</p> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 py-3 bg-blue-600 rounded-lg"> | |
| <i class="fab fa-facebook-f"></i> | |
| </button> | |
| <button class="flex-1 py-3 bg-green-500 rounded-lg"> | |
| <i class="fab fa-whatsapp"></i> | |
| </button> | |
| <button class="flex-1 py-3 bg-red-500 rounded-lg"> | |
| <i class="fab fa-google"></i> | |
| </button> | |
| <button class="flex-1 py-3 bg-gray-700 rounded-lg"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-800"> | |
| <p class="text-center text-sm text-gray-400"> | |
| <i class="fas fa-shield-alt mr-1"></i> All transactions are secure and encrypted | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal functionality | |
| const inviteBtn = document.getElementById('inviteBtn'); | |
| const inviteModal = document.getElementById('inviteModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| inviteBtn.addEventListener('click', () => { | |
| inviteModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| inviteModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| inviteModal.addEventListener('click', (e) => { | |
| if (e.target === inviteModal) { | |
| inviteModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Simulate countdown timer | |
| function updateCountdown() { | |
| // This would be replaced with real countdown logic | |
| console.log('Countdown updated'); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Start countdown timer | |
| setInterval(updateCountdown, 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-ui-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |