Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LeoBen Bet | Next-Gen Fantasy Sports</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/web3@1.8.0/dist/web3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); | |
| color: #e2e8f0; | |
| min-height: 100vh; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); | |
| } | |
| .glow-effect:hover { | |
| box-shadow: 0 0 25px rgba(0, 255, 255, 0.9); | |
| } | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); } | |
| } | |
| .booster-card { | |
| background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%); | |
| border: 1px solid #00ffff; | |
| } | |
| .booster-card:hover { | |
| background: linear-gradient(145deg, #16213e 0%, #0f3460 100%); | |
| } | |
| .connect-btn { | |
| background: linear-gradient(90deg, #7b2cbf 0%, #3a0ca3 100%); | |
| } | |
| .connect-btn:hover { | |
| background: linear-gradient(90deg, #9d4edd 0%, #4a00e0 100%); | |
| } | |
| .league-tab { | |
| border-bottom: 3px solid transparent; | |
| } | |
| .league-tab.active { | |
| border-bottom: 3px solid #00ffff; | |
| } | |
| .stats-bar { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| } | |
| .avatar-circle { | |
| border: 2px solid #00ffff; | |
| } | |
| .progress-ring { | |
| stroke: #00ffff; | |
| } | |
| .progress-bg { | |
| stroke: rgba(255, 255, 255, 0.1); | |
| } | |
| .league-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .active-filter { | |
| background-color: #0891b2 ; | |
| color: white; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="relative overflow-x-hidden"> | |
| <!-- Wallet Connect Modal --> | |
| <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-gradient-to-br from-gray-900 to-gray-800 p-8 rounded-xl max-w-md w-full mx-4 border border-cyan-400 glow-effect"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-cyan-400 neon-text">Connect Wallet</h3> | |
| <button id="closeWalletModal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <button class="connect-btn w-full py-3 px-4 rounded-lg text-white font-medium flex items-center justify-between"> | |
| <span>MetaMask</span> | |
| <i class="fab fa-ethereum"></i> | |
| </button> | |
| <button class="connect-btn w-full py-3 px-4 rounded-lg text-white font-medium flex items-center justify-between"> | |
| <span>Phantom</span> | |
| <i class="fas fa-wallet"></i> | |
| </button> | |
| <button class="connect-btn w-full py-3 px-4 rounded-lg text-white font-medium flex items-center justify-between"> | |
| <span>WalletConnect</span> | |
| <i class="fas fa-link"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-400 text-sm mt-6 text-center">By connecting, you agree to our Terms of Service</p> | |
| </div> | |
| </div> | |
| <!-- Main App Container --> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8 space-y-4 md:space-y-0"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 md:w-12 md:h-12 bg-cyan-500 rounded-full flex items-center justify-center mr-2 md:mr-3 glow-effect"> | |
| <i class="fas fa-bolt text-white text-lg md:text-xl"></i> | |
| </div> | |
| <h1 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">LEOBEN BET</h1> | |
| </div> | |
| <div class="flex items-center space-x-2 md:space-x-4 w-full md:w-auto justify-between"> | |
| <div class="relative w-64 hidden md:block"> | |
| <input type="text" placeholder="Search leagues..." | |
| class="search-input w-full px-4 py-2 rounded-full bg-gray-700 text-white focus:ring-2 focus:ring-cyan-400"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button id="walletBtn" class="connect-btn py-2 px-6 rounded-full flex items-center"> | |
| <i class="fas fa-wallet mr-2"></i> | |
| <span>Connect Wallet</span> | |
| </button> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer avatar-circle"> | |
| <i class="fas fa-user text-gray-300"></i> | |
| </div> | |
| <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-900"></div> | |
| </div> | |
| <!-- Social Layer - Hidden on mobile --> | |
| <div class="hidden md:block bg-gray-800 bg-opacity-60 rounded-xl p-5 border border-gray-700"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-comments text-purple-400 mr-2"></i> | |
| League Chat | |
| </h3> | |
| <div class="bg-gray-700 bg-opacity-50 rounded-lg p-3 h-40 overflow-y-auto mb-3" id="chatMessages"> | |
| <div class="text-xs text-gray-400 text-center">Loading messages...</div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" placeholder="Type message..." class="flex-1 bg-gray-700 rounded-l-lg px-3 py-2 text-sm focus:outline-none"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-3 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- User Profile Card --> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-5 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="relative mr-3"> | |
| <svg class="w-16 h-16"> | |
| <circle cx="32" cy="32" r="30" fill="none" stroke-width="4" class="progress-bg"></circle> | |
| <circle cx="32" cy="32" r="30" fill="none" stroke-width="4" stroke-dasharray="188.4" stroke-dashoffset="56.52" class="progress-ring"></circle> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user-astronaut text-cyan-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Guest Player</h3> | |
| <p class="text-gray-400 text-sm">Level 3 Manager</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-center"> | |
| <div> | |
| <p class="text-cyan-400 font-bold">0</p> | |
| <p class="text-xs text-gray-400">LBB Tokens</p> | |
| </div> | |
| <div> | |
| <p class="text-purple-400 font-bold">0</p> | |
| <p class="text-xs text-gray-400">Boosters</p> | |
| </div> | |
| <div> | |
| <p class="text-green-400 font-bold">0</p> | |
| <p class="text-xs text-gray-400">Wins</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Leagues --> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-5 border border-gray-700"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-bolt text-cyan-400 mr-2"></i> | |
| Quick Leagues | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg border-l-4 border-cyan-400 cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">Daily Crypto Cup</p> | |
| <p class="text-xs text-gray-400">10,000 LBB Prize Pool</p> | |
| </div> | |
| <span class="text-xs bg-cyan-900 text-cyan-400 px-2 py-1 rounded">1h left</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg border-l-4 border-purple-400 cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">Weekly Champions</p> | |
| <p class="text-xs text-gray-400">50,000 LBB Prize Pool</p> | |
| </div> | |
| <span class="text-xs bg-purple-900 text-purple-400 px-2 py-1 rounded">2d left</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg border-l-4 border-green-400 cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">Seasonal Legends</p> | |
| <p class="text-xs text-gray-400">250,000 LBB Prize Pool</p> | |
| </div> | |
| <span class="text-xs bg-green-900 text-green-400 px-2 py-1 rounded">30d left</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm font-medium transition"> | |
| View All Leagues | |
| </button> | |
| </div> | |
| <!-- Live Matches --> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-5 border border-gray-700"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-tv text-red-400 mr-2"></i> | |
| Live Matches | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-xs bg-red-900 text-red-400 px-2 py-1 rounded">LIVE</span> | |
| <span class="text-xs text-gray-400">65'</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-center"> | |
| <div class="w-8 h-8 bg-gray-600 rounded-full mx-auto mb-1"></div> | |
| <p class="text-sm">MCI</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-xl font-bold">2 - 1</p> | |
| <p class="text-xs text-gray-400">Premier League</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-8 h-8 bg-gray-600 rounded-full mx-auto mb-1"></div> | |
| <p class="text-sm">ARS</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-xs bg-red-900 text-red-400 px-2 py-1 rounded">LIVE</span> | |
| <span class="text-xs text-gray-400">42'</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-center"> | |
| <div class="w-8 h-8 bg-gray-600 rounded-full mx-auto mb-1"></div> | |
| <p class="text-sm">PSG</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-xl font-bold">1 - 0</p> | |
| <p class="text-xs text-gray-400">Ligue 1</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-8 h-8 bg-gray-600 rounded-full mx-auto mb-1"></div> | |
| <p class="text-sm">OL</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- League Tabs --> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-1 border border-gray-700"> | |
| <div class="flex overflow-x-auto"> | |
| <button class="league-tab active px-6 py-3 font-medium whitespace-nowrap">Daily Leagues</button> | |
| <button class="league-tab px-6 py-3 font-medium whitespace-nowrap">Weekly</button> | |
| <button class="league-tab px-6 py-3 font-medium whitespace-nowrap">Seasonal</button> | |
| <button class="league-tab px-6 py-3 font-medium whitespace-nowrap">Private</button> | |
| <button class="league-tab px-6 py-3 font-medium whitespace-nowrap"> | |
| <i class="fas fa-vote-yea mr-2"></i>DAO Governance | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Region Filters --> | |
| <div class="flex flex-wrap gap-2 mb-6"> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-700 hover:bg-cyan-600 text-white transition-all active-filter" data-filter="all">All</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-700 hover:bg-cyan-600 text-white transition-all" data-filter="europe">Europe</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-700 hover:bg-cyan-600 text-white transition-all" data-filter="south-america">South America</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-700 hover:bg-cyan-600 text-white transition-all" data-filter="north-america">North America</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-700 hover:bg-cyan-600 text-white transition-all" data-filter="asia">Asia</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-700 hover:bg-cyan-600 text-white transition-all" data-filter="africa">Africa</button> | |
| </div> | |
| <!-- Featured League --> | |
| <div id="home-section"> | |
| <div class="bg-gradient-to-r from-purple-900 to-blue-900 rounded-xl p-6 border border-cyan-400 glow-effect"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-1">Daily Crypto Cup</h2> | |
| <p class="text-cyan-300">Next match starts in: <span class="font-mono">02:14:56</span></p> | |
| </div> | |
| <div class="mt-4 md:mt-0 bg-black bg-opacity-40 px-4 py-2 rounded-lg border border-cyan-400"> | |
| <p class="text-sm text-gray-300">Prize Pool</p> | |
| <p class="text-xl font-bold text-cyan-400">10,000 LBB</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg border border-gray-700"> | |
| <p class="text-sm text-gray-400">Entry Fee</p> | |
| <p class="text-lg font-bold">50 LBB</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg border border-gray-700"> | |
| <p class="text-sm text-gray-400">Players</p> | |
| <p class="text-lg font-bold">1,243</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg border border-gray-700"> | |
| <p class="text-sm text-gray-400">Max Boosters</p> | |
| <p class="text-lg font-bold">3</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 rounded-lg font-bold text-white transition"> | |
| Join League | |
| </button> | |
| </div> | |
| <!-- Player Selection --> | |
| <div id="draft-section"> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-5 border border-gray-700"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Build Your Squad</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm bg-gray-700 px-3 py-1 rounded-full">Budget: 100M</span> | |
| <span class="text-sm bg-gray-700 px-3 py-1 rounded-full">Players: 0/11</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-6"> | |
| <!-- Position Filters --> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-red-400 mr-2"></i> | |
| Forwards | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-blue-400 mr-2"></i> | |
| Midfielders | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-green-400 mr-2"></i> | |
| Defenders | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-yellow-400 mr-2"></i> | |
| Goalkeepers | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-filter mr-2"></i> | |
| Filters | |
| </button> | |
| </div> | |
| <!-- Player Cards --> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4"> | |
| <!-- Player Card 1 --> | |
| <div class="player-card bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="h-32 bg-gradient-to-r from-blue-900 to-blue-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-5xl text-blue-300 opacity-30"></i> | |
| </div> | |
| <div class="absolute top-2 right-2 w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center border border-blue-400"> | |
| <span class="text-xs font-bold text-blue-400">9.5</span> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-gray-900 rounded-full w-8 h-8 flex items-center justify-center border border-blue-400"> | |
| <span class="text-xs font-bold text-white">£12M</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-bold">Erling Haaland</h4> | |
| <p class="text-sm text-gray-400">MCI • FWD</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="text-xs bg-blue-900 text-blue-400 px-2 py-1 rounded">xG: 0.98</div> | |
| <button class="text-xs bg-cyan-900 text-cyan-400 px-2 py-1 rounded hover:bg-cyan-800"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Card 2 --> | |
| <div class="player-card bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="h-32 bg-gradient-to-r from-red-900 to-red-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-5xl text-red-300 opacity-30"></i> | |
| </div> | |
| <div class="absolute top-2 right-2 w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center border border-red-400"> | |
| <span class="text-xs font-bold text-red-400">8.7</span> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-gray-900 rounded-full w-8 h-8 flex items-center justify-center border border-red-400"> | |
| <span class="text-xs font-bold text-white">£11M</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-bold">Kylian Mbappé</h4> | |
| <p class="text-sm text-gray-400">PSG • FWD</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="text-xs bg-red-900 text-red-400 px-2 py-1 rounded">xG: 0.85</div> | |
| <button class="text-xs bg-cyan-900 text-cyan-400 px-2 py-1 rounded hover:bg-cyan-800"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Card 3 --> | |
| <div class="player-card bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="h-32 bg-gradient-to-r from-green-900 to-green-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-5xl text-green-300 opacity-30"></i> | |
| </div> | |
| <div class="absolute top-2 right-2 w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center border border-green-400"> | |
| <span class="text-xs font-bold text-green-400">7.2</span> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-gray-900 rounded-full w-8 h-8 flex items-center justify-center border border-green-400"> | |
| <span class="text-xs font-bold text-white">£8M</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-bold">Virgil van Dijk</h4> | |
| <p class="text-sm text-gray-400">LIV • DEF</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="text-xs bg-green-900 text-green-400 px-2 py-1 rounded">CS: 45%</div> | |
| <button class="text-xs bg-cyan-900 text-cyan-400 px-2 py-1 rounded hover:bg-cyan-800"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Card 4 --> | |
| <div class="player-card bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="h-32 bg-gradient-to-r from-blue-900 to-blue-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-5xl text-blue-300 opacity-30"></i> | |
| </div> | |
| <div class="absolute top-2 right-2 w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center border border-blue-400"> | |
| <span class="text-xs font-bold text-blue-400">8.1</span> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-gray-900 rounded-full w-8 h-8 flex items-center justify-center border border-blue-400"> | |
| <span class="text-xs font-bold text-white">£9.5M</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-bold">Kevin De Bruyne</h4> | |
| <p class="text-sm text-gray-400">MCI • MID</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="text-xs bg-blue-900 text-blue-400 px-2 py-1 rounded">xA: 0.65</div> | |
| <button class="text-xs bg-cyan-900 text-cyan-400 px-2 py-1 rounded hover:bg-cyan-800"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Card 5 --> | |
| <div class="player-card bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="h-32 bg-gradient-to-r from-yellow-900 to-yellow-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-5xl text-yellow-300 opacity-30"></i> | |
| </div> | |
| <div class="absolute top-2 right-2 w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center border border-yellow-400"> | |
| <span class="text-xs font-bold text-yellow-400">6.8</span> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-gray-900 rounded-full w-8 h-8 flex items-center justify-center border border-yellow-400"> | |
| <span class="text-xs font-bold text-white">£7M</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-bold">Alisson Becker</h4> | |
| <p class="text-sm text-gray-400">LIV • GK</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="text-xs bg-yellow-900 text-yellow-400 px-2 py-1 rounded">SV%: 78%</div> | |
| <button class="text-xs bg-cyan-900 text-cyan-400 px-2 py-1 rounded hover:bg-cyan-800"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Booster Section --> | |
| <div id="boosters-section"> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-5 border border-gray-700"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">NFT Boosters</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm bg-gray-700 px-3 py-1 rounded-full">Selected: 0/3</span> | |
| <button class="text-sm bg-purple-900 text-purple-400 px-3 py-1 rounded-full hover:bg-purple-800"> | |
| <i class="fas fa-shopping-cart mr-1"></i> Marketplace | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| <!-- Booster Card 1 --> | |
| <div class="booster-card rounded-lg p-4 cursor-pointer transition"> | |
| <div class="w-full h-24 bg-gradient-to-br from-purple-900 to-blue-900 rounded-lg mb-3 flex items-center justify-center"> | |
| <i class="fas fa-crown text-3xl text-yellow-400"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">Double Captain</h4> | |
| <p class="text-xs text-gray-400 mb-2">Captain points count double</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-gray-700 text-cyan-400 px-2 py-1 rounded">Rare</span> | |
| <button class="text-xs bg-purple-900 text-purple-400 px-2 py-1 rounded hover:bg-purple-800"> | |
| <i class="fas fa-plus"></i> Equip | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Booster Card 2 --> | |
| <div class="booster-card rounded-lg p-4 cursor-pointer transition"> | |
| <div class="w-full h-24 bg-gradient-to-br from-red-900 to-orange-900 rounded-lg mb-3 flex items-center justify-center"> | |
| <i class="fas fa-fire text-3xl text-orange-400"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">Hot Streak</h4> | |
| <p class="text-xs text-gray-400 mb-2">+20% points for in-form players</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-gray-700 text-orange-400 px-2 py-1 rounded">Epic</span> | |
| <button class="text-xs bg-purple-900 text-purple-400 px-2 py-1 rounded hover:bg-purple-800"> | |
| <i class="fas fa-plus"></i> Equip | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Booster Card 3 --> | |
| <div class="booster-card rounded-lg p-4 cursor-pointer transition"> | |
| <div class="w-full h-24 bg-gradient-to-br from-green-900 to-teal-900 rounded-lg mb-3 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-3xl text-green-400"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">Injury Shield</h4> | |
| <p class="text-xs text-gray-400 mb-2">Auto-sub for injured players</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-gray-700 text-green-400 px-2 py-1 rounded">Common</span> | |
| <button class="text-xs bg-purple-900 text-purple-400 px-2 py-1 rounded hover:bg-purple-800"> | |
| <i class="fas fa-plus"></i> Equip | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Booster Card 4 --> | |
| <div class="booster-card rounded-lg p-4 cursor-pointer transition"> | |
| <div class="w-full h-24 bg-gradient-to-br from-blue-900 to-cyan-900 rounded-lg mb-3 flex items-center justify-center"> | |
| <i class="fas fa-dice text-3xl text-blue-400"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">Wildcard</h4> | |
| <p class="text-xs text-gray-400 mb-2">Random +10 to -10 points</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-gray-700 text-blue-400 px-2 py-1 rounded">Legendary</span> | |
| <button class="text-xs bg-purple-900 text-purple-400 px-2 py-1 rounded hover:bg-purple-800"> | |
| <i class="fas fa-plus"></i> Equip | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Bottom Nav --> | |
| <div class="lg:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 flex justify-around py-2 z-50"> | |
| <a href="#home-section" class="flex flex-col items-center text-cyan-400 px-2 py-1"> | |
| <i class="fas fa-home text-base"></i> | |
| <span class="text-2xs mt-1">Home</span> | |
| </a> | |
| <a href="#home-section" class="flex flex-col items-center text-gray-400 px-2 py-1"> | |
| <i class="fas fa-trophy text-base"></i> | |
| <span class="text-2xs mt-1">Leagues</span> | |
| </a> | |
| <a href="#draft-section" class="flex flex-col items-center text-gray-400 px-2 py-1"> | |
| <i class="fas fa-users text-base"></i> | |
| <span class="text-2xs mt-1">Draft</span> | |
| </a> | |
| <a href="#boosters-section" class="flex flex-col items-center text-gray-400 px-2 py-1"> | |
| <i class="fas fa-bolt text-base"></i> | |
| <span class="text-2xs mt-1">Boost</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-400 px-2 py-1"> | |
| <i class="fas fa-user text-base"></i> | |
| <span class="text-2xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| <!-- Add padding to main container to account for bottom nav --> | |
| <style> | |
| @media (max-width: 1023px) { | |
| .container { | |
| padding-bottom: 4rem; | |
| } | |
| } | |
| </style> | |
| </div> | |
| <script> | |
| // Initialize Web3 and Socket.io | |
| let web3; | |
| let socket; | |
| async function initWeb3() { | |
| if (window.ethereum) { | |
| web3 = new Web3(window.ethereum); | |
| try { | |
| const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); | |
| if (accounts.length > 0) { | |
| console.log('Connected account:', accounts[0]); | |
| return true; | |
| } | |
| return false; | |
| } catch (error) { | |
| console.error("Error connecting wallet:", error); | |
| return false; | |
| } | |
| } else if (window.web3) { | |
| web3 = new Web3(window.web3.currentProvider); | |
| return true; | |
| } else { | |
| console.log('No Ethereum provider detected'); | |
| return false; | |
| } | |
| } | |
| function initSocket() { | |
| socket = io('https://api.leobenbet.com/socket', { | |
| transports: ['websocket'], | |
| upgrade: false | |
| }); | |
| socket.on('leaderboardUpdate', (data) => { | |
| console.log('Leaderboard updated:', data); | |
| // Update UI here | |
| }); | |
| socket.on('chatMessage', (msg) => { | |
| try { | |
| const chat = document.getElementById('chatMessages'); | |
| if (chat) { | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = 'mb-1'; | |
| messageElement.innerHTML = `<span class="text-cyan-400">${msg.user}:</span> ${msg.text}`; | |
| chat.appendChild(messageElement); | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| } catch (error) { | |
| console.error('Error handling chat message:', error); | |
| } | |
| }); | |
| socket.on('connect_error', (error) => { | |
| console.error('Socket connection error:', error); | |
| }); | |
| } | |
| // Initialize on load | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| try { | |
| initSocket(); | |
| await initWeb3(); | |
| const leagues = await fetchLeagues(); | |
| console.log('Loaded leagues:', leagues); | |
| // Update UI with leagues data | |
| // You would implement this based on your UI needs | |
| } catch (error) { | |
| console.error('Initialization error:', error); | |
| } | |
| }); | |
| // Wallet Modal Toggle | |
| const walletBtn = document.getElementById('walletBtn'); | |
| const walletModal = document.getElementById('walletModal'); | |
| const closeWalletModal = document.getElementById('closeWalletModal'); | |
| walletBtn.addEventListener('click', () => { | |
| walletModal.classList.remove('hidden'); | |
| }); | |
| closeWalletModal.addEventListener('click', () => { | |
| walletModal.classList.add('hidden'); | |
| }); | |
| // League Tab Switching | |
| const leagueTabs = document.querySelectorAll('.league-tab'); | |
| leagueTabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| leagueTabs.forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| }); | |
| }); | |
| // Simulate countdown timer | |
| function updateCountdown() { | |
| const elements = document.querySelectorAll('.font-mono'); | |
| if (elements.length > 0) { | |
| // This is a simplified countdown - in a real app you'd calculate actual time remaining | |
| let time = elements[0].textContent; | |
| let parts = time.split(':'); | |
| let hours = parseInt(parts[0]); | |
| let minutes = parseInt(parts[1]); | |
| let seconds = parseInt(parts[2]); | |
| seconds--; | |
| if (seconds < 0) { | |
| seconds = 59; | |
| minutes--; | |
| if (minutes < 0) { | |
| minutes = 59; | |
| hours--; | |
| if (hours < 0) { | |
| hours = 23; | |
| } | |
| } | |
| } | |
| elements[0].textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| } | |
| } | |
| setInterval(updateCountdown, 1000); | |
| // League data and filtering | |
| async function fetchLeagues() { | |
| try { | |
| const response = await fetch('https://api.leobenbet.com/leagues'); | |
| if (!response.ok) throw new Error('Network response was not ok'); | |
| return await response.json(); | |
| } catch (error) { | |
| console.error('Error fetching leagues:', error); | |
| return []; | |
| } | |
| } | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const searchInput = document.querySelector('.search-input'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| filterButtons.forEach(btn => btn.classList.remove('active-filter')); | |
| button.classList.add('active-filter'); | |
| // Filter logic here | |
| }); | |
| }); | |
| searchInput.addEventListener('input', (e) => { | |
| // Search logic here | |
| }); | |
| async function fetchPlayers() { | |
| try { | |
| const response = await fetch('https://api.leobenbet.com/players'); | |
| if (!response.ok) throw new Error('Network response was not ok'); | |
| return await response.json(); | |
| } catch (error) { | |
| console.error('Error fetching players:', error); | |
| return []; | |
| } | |
| } | |
| // Player card hover effects | |
| const playerCards = document.querySelectorAll('.player-card'); | |
| playerCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.classList.add('transform', 'transition', 'duration-300'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.classList.remove('transform', 'transition', 'duration-300'); | |
| }); | |
| }); | |
| </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=flen-crypto/leobet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |