Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sportsclub Leaderboard</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"> | |
| <style> | |
| @keyframes slowPulse { | |
| 0%, 100% { box-shadow: 0 0 15px 5px rgba(245, 158, 11, 0.3); } | |
| 50% { box-shadow: 0 0 25px 10px rgba(245, 158, 11, 0.5); } | |
| } | |
| @keyframes fastFlash { | |
| 0% { box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0); } | |
| 50% { box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8); } | |
| 100% { box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0); } | |
| } | |
| @keyframes coinPulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| .glass-nav { | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .glass-sidebar { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .leaderboard-container { | |
| perspective: 1000px; | |
| transform-style: preserve-3d; | |
| } | |
| .leaderboard-3d { | |
| transform: translateZ(50px); | |
| animation: slowPulse 4s infinite; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .leaderboard-3d::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0) 70%); | |
| z-index: -1; | |
| } | |
| .player-card { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .player-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, #f59e0b, transparent); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.3s ease; | |
| } | |
| .player-card:hover::after { | |
| transform: scaleX(1); | |
| } | |
| .first-place { | |
| border-left: 4px solid #f59e0b; | |
| background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent); | |
| } | |
| .second-place { | |
| border-left: 4px solid #a0aec0; | |
| background: linear-gradient(90deg, rgba(160, 174, 192, 0.1), transparent); | |
| } | |
| .third-place { | |
| border-left: 4px solid #ed8936; | |
| background: linear-gradient(90deg, rgba(237, 137, 54, 0.1), transparent); | |
| } | |
| .rank-change-up { | |
| animation: fastFlash 0.5s; | |
| color: #10b981; | |
| } | |
| .rank-change-down { | |
| animation: fastFlash 0.5s; | |
| color: #ef4444; | |
| } | |
| .coin-change { | |
| animation: coinPulse 0.3s; | |
| } | |
| .sidebar-collapsed { | |
| width: 60px; | |
| overflow: hidden; | |
| } | |
| .sidebar-expanded { | |
| width: 250px; | |
| } | |
| .sidebar-item-text { | |
| opacity: 1; | |
| transition: opacity 0.3s ease; | |
| } | |
| .sidebar-collapsed .sidebar-item-text { | |
| opacity: 0; | |
| width: 0; | |
| } | |
| .risk-coin { | |
| color: #ef4444; | |
| } | |
| .safe-coin { | |
| color: #10b981; | |
| } | |
| .coin-icon { | |
| animation: coinPulse 2s infinite; | |
| } | |
| .avatar-glow { | |
| box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.5); | |
| } | |
| .current-user-card { | |
| position: sticky; | |
| top: 80px; | |
| z-index: 10; | |
| background: rgba(30, 41, 59, 0.9); | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); | |
| } | |
| .current-user-card::before { | |
| content: 'YOU'; | |
| position: absolute; | |
| top: -10px; | |
| right: 10px; | |
| background: #f59e0b; | |
| color: #1e293b; | |
| font-size: 10px; | |
| font-weight: bold; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- Glassmorphism Navbar --> | |
| <nav class="glass-nav fixed top-0 left-0 right-0 z-50 h-16 flex items-center px-6"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" class="mr-4 text-gray-300 hover:text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-2xl font-bold text-yellow-400 flex items-center"> | |
| <i class="fas fa-coins mr-2"></i> | |
| <span>Leaderboard</span> | |
| </h1> | |
| </div> | |
| <div class="ml-auto flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-gray-300 hover:text-yellow-400 cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| <span class="hidden md:inline">DragonSlayer</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Collapsible Sidebar --> | |
| <aside id="sidebar" class="glass-sidebar fixed top-16 left-0 bottom-0 z-40 sidebar-expanded transition-all duration-300 pt-4"> | |
| <div class="px-4 py-2"> | |
| <div class="sidebar-item flex items-center py-3 px-2 rounded-lg hover:bg-gray-800 cursor-pointer mb-2"> | |
| <i class="fas fa-home text-yellow-400 w-6 text-center"></i> | |
| <span class="sidebar-item-text ml-3">Dashboard</span> | |
| </div> | |
| <div class="sidebar-item flex items-center py-3 px-2 rounded-lg hover:bg-gray-800 cursor-pointer mb-2"> | |
| <i class="fas fa-trophy text-yellow-400 w-6 text-center"></i> | |
| <span class="sidebar-item-text ml-3">Leaderboard</span> | |
| </div> | |
| <div class="sidebar-item flex items-center py-3 px-2 rounded-lg hover:bg-gray-800 cursor-pointer mb-2"> | |
| <i class="fas fa-wallet text-yellow-400 w-6 text-center"></i> | |
| <span class="sidebar-item-text ml-3">Wallet</span> | |
| </div> | |
| <div class="sidebar-item flex items-center py-3 px-2 rounded-lg hover:bg-gray-800 cursor-pointer mb-2"> | |
| <i class="fas fa-exchange-alt text-yellow-400 w-6 text-center"></i> | |
| <span class="sidebar-item-text ml-3">Transactions</span> | |
| </div> | |
| <div class="sidebar-item flex items-center py-3 px-2 rounded-lg hover:bg-gray-800 cursor-pointer mb-2"> | |
| <i class="fas fa-cog text-yellow-400 w-6 text-center"></i> | |
| <span class="sidebar-item-text ml-3">Settings</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-10 pl-4 pr-4 transition-all duration-300 md:pl-64" id="main-content"> | |
| <div class="container mx-auto px-4"> | |
| <div class="leaderboard-container"> | |
| <div class="leaderboard-3d bg-gray-800 rounded-xl p-6 shadow-2xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-trophy text-yellow-400 text-2xl mr-2"></i> | |
| <h2 class="text-2xl font-bold">Leaderboard</h2> | |
| </div> | |
| <div class="text-gray-400"> | |
| <span id="update-time">Updated: Just now</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 gap-2 mb-4 font-semibold text-gray-400 text-sm"> | |
| <div class="col-span-1 text-center">Rank</div> | |
| <div class="col-span-3">Player</div> | |
| <div class="col-span-2 text-right">Safe Coins</div> | |
| <div class="col-span-2 text-right">At Risk</div> | |
| <div class="col-span-2 text-right">Total</div> | |
| <div class="col-span-2 text-right">Change</div> | |
| </div> | |
| <div id="current-user-sticky" class="mb-3"></div> | |
| <div id="leaderboard-list" class="space-y-3"> | |
| <!-- Player cards will be inserted here by JavaScript --> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-700 flex justify-between items-center"> | |
| <button id="refresh-btn" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-2 px-4 rounded-lg flex items-center transition-all hover:scale-105"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| <div class="text-gray-400 text-sm"> | |
| <span id="player-count">25</span> players displayed | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Sample player data with safe and at-risk coins | |
| let players = [ | |
| { id: 1, name: "DragonSlayer", safeCoins: 18500, riskCoins: 4000, avatar: "https://randomuser.me/api/portraits/men/32.jpg", prevRank: 1, change: 0 }, | |
| { id: 2, name: "CoinCollector", safeCoins: 17800, riskCoins: 4000, avatar: "https://randomuser.me/api/portraits/women/44.jpg", prevRank: 2, change: 0 }, | |
| { id: 3, name: "GoldenKnight", safeCoins: 17250, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/men/75.jpg", prevRank: 3, change: 0 }, | |
| { id: 4, name: "TreasureHunter", safeCoins: 16800, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/women/68.jpg", prevRank: 4, change: 0 }, | |
| { id: 5, name: "MidasTouch", safeCoins: 15750, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/men/81.jpg", prevRank: 5, change: 0 }, | |
| { id: 6, name: "FortuneSeeker", safeCoins: 14600, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/women/63.jpg", prevRank: 6, change: 0 }, | |
| { id: 7, name: "ShinyGoblin", safeCoins: 13900, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/men/90.jpg", prevRank: 7, change: 0 }, | |
| { id: 8, name: "GoldDigger", safeCoins: 13200, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/women/85.jpg", prevRank: 8, change: 0 }, | |
| { id: 9, name: "PirateKing", safeCoins: 12400, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/men/42.jpg", prevRank: 9, change: 0 }, | |
| { id: 10, name: "LuckyCharm", safeCoins: 11800, riskCoins: 3000, avatar: "https://randomuser.me/api/portraits/women/33.jpg", prevRank: 10, change: 0 }, | |
| { id: 11, name: "CoinMaster", safeCoins: 11200, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/22.jpg", prevRank: 11, change: 0 }, | |
| { id: 12, name: "BullionBaron", safeCoins: 10800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/55.jpg", prevRank: 12, change: 0 }, | |
| { id: 13, name: "SilverSurfer", safeCoins: 10250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/66.jpg", prevRank: 13, change: 0 }, | |
| { id: 14, name: "PlatinumPirate", safeCoins: 9800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/77.jpg", prevRank: 14, change: 0 }, | |
| { id: 15, name: "AureusAce", safeCoins: 9250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/88.jpg", prevRank: 15, change: 0 }, | |
| { id: 16, name: "DoubloonDuke", safeCoins: 8800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/99.jpg", prevRank: 16, change: 0 }, | |
| { id: 17, name: "IngotInquisitor", safeCoins: 8250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/11.jpg", prevRank: 17, change: 0 }, | |
| { id: 18, name: "NuggetNinja", safeCoins: 7800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/12.jpg", prevRank: 18, change: 0 }, | |
| { id: 19, name: "SpecimenSultan", safeCoins: 7250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/13.jpg", prevRank: 19, change: 0 }, | |
| { id: 20, name: "BullionBrawler", safeCoins: 6800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/14.jpg", prevRank: 20, change: 0 }, | |
| { id: 21, name: "KaratKing", safeCoins: 6250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/15.jpg", prevRank: 21, change: 0 }, | |
| { id: 22, name: "MintMarauder", safeCoins: 5800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/16.jpg", prevRank: 22, change: 0 }, | |
| { id: 23, name: "OunceOgre", safeCoins: 5250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/17.jpg", prevRank: 23, change: 0 }, | |
| { id: 24, name: "PoundPirate", safeCoins: 4800, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/18.jpg", prevRank: 24, change: 0 }, | |
| { id: 25, name: "TroyTitan", safeCoins: 4250, riskCoins: 2000, avatar: "https://randomuser.me/api/portraits/men/19.jpg", prevRank: 25, change: 0 } | |
| ]; | |
| // Current user (logged in) | |
| const currentUserId = 1; // DragonSlayer is the current user | |
| // Function to create a player card element | |
| function createPlayerCard(player, rank, isSticky = false) { | |
| const totalCoins = player.safeCoins + player.riskCoins; | |
| // Create player card | |
| const playerCard = document.createElement('div'); | |
| playerCard.className = `player-card rounded-lg p-3 grid grid-cols-12 gap-2 items-center ${rank === 1 ? 'first-place' : rank === 2 ? 'second-place' : rank === 3 ? 'third-place' : ''} ${isSticky ? 'current-user-card' : ''}`; | |
| // Rank | |
| const rankCell = document.createElement('div'); | |
| rankCell.className = 'col-span-1 text-center font-bold'; | |
| rankCell.textContent = rank; | |
| // Player info | |
| const playerInfo = document.createElement('div'); | |
| playerInfo.className = 'col-span-3 flex items-center'; | |
| const avatar = document.createElement('img'); | |
| avatar.className = 'avatar-glow w-10 h-10 rounded-full mr-3'; | |
| avatar.src = player.avatar; | |
| avatar.alt = player.name; | |
| const name = document.createElement('div'); | |
| name.className = 'font-semibold truncate'; | |
| name.textContent = player.name; | |
| playerInfo.appendChild(avatar); | |
| playerInfo.appendChild(name); | |
| // Safe coins | |
| const safeCoins = document.createElement('div'); | |
| safeCoins.className = 'col-span-2 text-right safe-coin'; | |
| safeCoins.innerHTML = `<i class="fas fa-lock mr-1"></i>${player.safeCoins.toLocaleString()}`; | |
| // Risk coins | |
| const riskCoins = document.createElement('div'); | |
| riskCoins.className = 'col-span-2 text-right risk-coin'; | |
| riskCoins.innerHTML = `<i class="fas fa-bolt mr-1"></i>${player.riskCoins.toLocaleString()}`; | |
| // Total coins | |
| const totalCoinsCell = document.createElement('div'); | |
| totalCoinsCell.className = 'col-span-2 text-right font-bold flex items-center justify-end'; | |
| const coinIcon = document.createElement('i'); | |
| coinIcon.className = 'fas fa-coins text-yellow-400 mr-1 coin-icon'; | |
| const totalCoinsText = document.createElement('span'); | |
| totalCoinsText.textContent = totalCoins.toLocaleString(); | |
| totalCoinsCell.appendChild(coinIcon); | |
| totalCoinsCell.appendChild(totalCoinsText); | |
| // Rank change | |
| const changeCell = document.createElement('div'); | |
| changeCell.className = 'col-span-2 text-right'; | |
| if (player.change > 0) { | |
| changeCell.classList.add('rank-change-up'); | |
| changeCell.innerHTML = `<i class="fas fa-caret-up mr-1"></i>${player.change}`; | |
| } else if (player.change < 0) { | |
| changeCell.classList.add('rank-change-down'); | |
| changeCell.innerHTML = `<i class="fas fa-caret-down mr-1"></i>${Math.abs(player.change)}`; | |
| } else { | |
| changeCell.innerHTML = '<span class="text-gray-400">-</span>'; | |
| } | |
| // Assemble the card | |
| playerCard.appendChild(rankCell); | |
| playerCard.appendChild(playerInfo); | |
| playerCard.appendChild(safeCoins); | |
| playerCard.appendChild(riskCoins); | |
| playerCard.appendChild(totalCoinsCell); | |
| playerCard.appendChild(changeCell); | |
| return playerCard; | |
| } | |
| // Function to update the leaderboard | |
| function updateLeaderboard() { | |
| const leaderboardList = document.getElementById('leaderboard-list'); | |
| const stickyContainer = document.getElementById('current-user-sticky'); | |
| leaderboardList.innerHTML = ''; | |
| stickyContainer.innerHTML = ''; | |
| // Sort players by total coins (descending) | |
| players.sort((a, b) => (b.safeCoins + b.riskCoins) - (a.safeCoins + a.riskCoins)); | |
| // Update each player's rank and change | |
| players.forEach((player, index) => { | |
| const rank = index + 1; | |
| player.change = player.prevRank - rank; | |
| player.prevRank = rank; | |
| }); | |
| // Find current user | |
| const currentUser = players.find(p => p.id === currentUserId); | |
| const currentUserRank = players.findIndex(p => p.id === currentUserId) + 1; | |
| // Create sticky card for current user if they're not in top 3 | |
| if (currentUserRank > 3) { | |
| const stickyCard = createPlayerCard(currentUser, currentUserRank, true); | |
| stickyContainer.appendChild(stickyCard); | |
| } | |
| // Create player cards | |
| players.forEach((player, index) => { | |
| const rank = index + 1; | |
| const playerCard = createPlayerCard(player, rank); | |
| leaderboardList.appendChild(playerCard); | |
| }); | |
| // Update timestamp | |
| const now = new Date(); | |
| document.getElementById('update-time').textContent = `Updated: ${now.toLocaleTimeString()}`; | |
| document.getElementById('player-count').textContent = players.length; | |
| } | |
| // Function to simulate real-time updates | |
| function simulateUpdates() { | |
| // Randomly update some players' coins | |
| players.forEach(player => { | |
| if (Math.random() > 0.6) { // 40% chance to update | |
| // Randomly move some coins between safe and risk | |
| const moveAmount = Math.floor(Math.random() * 500); | |
| if (Math.random() > 0.5 && player.riskCoins >= moveAmount) { | |
| player.riskCoins -= moveAmount; | |
| player.safeCoins += moveAmount; | |
| } else { | |
| player.safeCoins = Math.max(0, player.safeCoins - moveAmount); | |
| player.riskCoins += moveAmount; | |
| } | |
| // Random external change | |
| const externalChange = Math.floor(Math.random() * 800) - 400; | |
| if (externalChange > 0) { | |
| player.safeCoins += externalChange; | |
| } else { | |
| player.riskCoins = Math.max(0, player.riskCoins + externalChange); | |
| } | |
| } | |
| }); | |
| updateLeaderboard(); | |
| // Trigger fast flash animation on the leaderboard | |
| const leaderboard = document.querySelector('.leaderboard-3d'); | |
| leaderboard.style.animation = 'none'; | |
| setTimeout(() => { | |
| leaderboard.style.animation = 'fastFlash 0.5s, slowPulse 4s infinite'; | |
| }, 10); | |
| } | |
| // Initialize leaderboard | |
| updateLeaderboard(); | |
| // Set up refresh button | |
| document.getElementById('refresh-btn').addEventListener('click', () => { | |
| simulateUpdates(); | |
| }); | |
| // Set up sidebar toggle | |
| document.getElementById('sidebar-toggle').addEventListener('click', () => { | |
| const sidebar = document.getElementById('sidebar'); | |
| const mainContent = document.getElementById('main-content'); | |
| sidebar.classList.toggle('sidebar-collapsed'); | |
| sidebar.classList.toggle('sidebar-expanded'); | |
| if (sidebar.classList.contains('sidebar-collapsed')) { | |
| mainContent.classList.add('md:pl-20'); | |
| mainContent.classList.remove('md:pl-64'); | |
| } else { | |
| mainContent.classList.remove('md:pl-20'); | |
| mainContent.classList.add('md:pl-64'); | |
| } | |
| }); | |
| // Set up sidebar item clicks to collapse/expand | |
| document.querySelectorAll('.sidebar-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const sidebar = document.getElementById('sidebar'); | |
| if (window.innerWidth < 768) { // On mobile, clicking any item collapses sidebar | |
| sidebar.classList.add('sidebar-collapsed'); | |
| sidebar.classList.remove('sidebar-expanded'); | |
| document.getElementById('main-content').classList.add('md:pl-20'); | |
| document.getElementById('main-content').classList.remove('md:pl-64'); | |
| } | |
| }); | |
| }); | |
| // Simulate real-time updates every 5 seconds | |
| setInterval(simulateUpdates, 5000); | |
| </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=Areid987/leaderboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |