Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeTyper Racer - Leaderboard</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <header class="bg-gray-800 py-4 shadow-lg"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold">CodeTyper Racer 🏆</h1> | |
| <a href="index.html" class="flex items-center space-x-1 bg-gray-700 px-3 py-2 rounded-lg hover:bg-gray-600 transition"> | |
| <i data-feather="home"></i> | |
| <span>Home</span> | |
| </a> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-gray-800 rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Top Coders</h2> | |
| <div class="flex space-x-2"> | |
| <button id="refreshBtn" class="bg-blue-600 px-3 py-1 rounded-lg hover:bg-blue-700 transition flex items-center"> | |
| <i data-feather="refresh-cw" class="mr-1"></i> | |
| Refresh | |
| </button> | |
| <a href="typing-test.html" class="bg-green-600 px-3 py-1 rounded-lg hover:bg-green-700 transition flex items-center"> | |
| <i data-feather="play" class="mr-1"></i> | |
| New Test | |
| </a> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="text-left py-3 px-4">Rank</th> | |
| <th class="text-left py-3 px-4">Name</th> | |
| <th class="text-left py-3 px-4">Grade</th> | |
| <th class="text-left py-3 px-4">Section</th> | |
| <th class="text-right py-3 px-4">WPM</th> | |
| <th class="text-right py-3 px-4">Accuracy</th> | |
| <th class="text-right py-3 px-4">Date</th> | |
| </tr> | |
| </thead> | |
| <tbody id="leaderboardTable"> | |
| <!-- Leaderboard data will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| const leaderboardTable = document.getElementById('leaderboardTable'); | |
| const refreshBtn = document.getElementById('refreshBtn'); | |
| function loadLeaderboard() { | |
| leaderboardTable.innerHTML = ''; | |
| // Get leaderboard from local storage | |
| let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || []; | |
| // Sort by WPM descending | |
| leaderboard.sort((a, b) => b.wpm - a.wpm); | |
| // Display all entries with rank colors | |
| leaderboard.forEach((entry, index) => { | |
| let rankClass = ''; | |
| if (index === 0) rankClass = 'text-yellow-400 font-bold'; | |
| else if (index === 1) rankClass = 'text-gray-300 font-bold'; | |
| else if (index === 2) rankClass = 'text-amber-600 font-bold'; | |
| const row = document.createElement('tr'); | |
| row.className = 'border-b border-gray-700 hover:bg-gray-700'; | |
| const date = new Date(entry.timestamp); | |
| const formattedDate = date.toLocaleDateString(); | |
| row.innerHTML = ` | |
| <td class="py-3 px-4 ${rankClass}">${index + 1}</td> | |
| <td class="py-3 px-4">${entry.name}</td> | |
| <td class="py-3 px-4">${entry.gradeLevel}</td> | |
| <td class="py-3 px-4">${entry.section}</td> | |
| <td class="py-3 px-4 text-right font-mono">${entry.wpm}</td> | |
| <td class="py-3 px-4 text-right">${entry.accuracy}%</td> | |
| <td class="py-3 px-4 text-right">${formattedDate}</td> | |
| `; | |
| leaderboardTable.appendChild(row); | |
| }); | |
| } | |
| refreshBtn.addEventListener('click', loadLeaderboard); | |
| // Load initial data | |
| loadLeaderboard(); | |
| </script> | |
| </body> | |
| </html> |