Spaces:
Running
Running
| ```html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Compare Results | GraphicsLab</title> | |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/4"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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 src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="mb-10"> | |
| <h1 class="text-4xl font-bold mb-4">Compare Performance</h1> | |
| <p class="text-gray-600">Analyze your benchmark results against global averages and hardware categories.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <div class="card"> | |
| <h2 class="text-2xl font-bold mb-4">Your Recent Scores</h2> | |
| <div class="h-80"> | |
| <canvas id="userChart"></canvas> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <button class="btn-outline mr-2" onclick="addRandomResult()"> | |
| <i class="fas fa-plus mr-2"></i> Add Random Test | |
| </button> | |
| <button class="btn-outline" onclick="clearResults()"> | |
| <i class="fas fa-trash mr-2"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2 class="text-2xl font-bold mb-4">Global Comparison</h2> | |
| <div class="h-80"> | |
| <canvas id="globalChart"></canvas> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <button class="btn-primary" onclick="fetchGlobalData()"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card mb-8"> | |
| <h2 class="text-2xl font-bold mb-6">Leaderboard</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead class="bg-gray-800 text-white"> | |
| <tr> | |
| <th class="p-4 text-left">Rank</th> | |
| <th class="p-4 text-left">User</th> | |
| <th class="p-4 text-left">Device</th> | |
| <th class="p-4 text-left">GPU</th> | |
| <th class="p-4 text-left">T‑Rex Score</th> | |
| <th class="p-4 text-left">Fluid Score</th> | |
| <th class="p-4 text-left">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="p-4"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 text-white flex items-center justify-center font-bold">1</div> | |
| </td> | |
| <td class="p-4 font-semibold">pro_gamer_42</td> | |
| <td class="p-4">Desktop</td> | |
| <td class="p-4">RTX 4090</td> | |
| <td class="p-4 font-bold text-green-600">5,420</td> | |
| <td class="p-4 font-bold text-green-600">7,120</td> | |
| <td class="p-4 font-bold text-purple-600">12,540</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="p-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-400 text-white flex items-center justify-center font-bold">2</div> | |
| </td> | |
| <td class="p-4 font-semibold">graphics_wizard</td> | |
| <td class="p-4">Desktop</td> | |
| <td class="p-4">RX 7900 XTX</td> | |
| <td class="p-4 font-bold text-green-600">5,100</td> | |
| <td class="p-4 font-bold text-green-600">6,800</td> | |
| <td class="p-4 font-bold text-blue-600">11,900</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="p-4"> | |
| <div class="w-8 h-8 rounded-full bg-orange-600 text-white flex items-center justify-center font-bold">3</div> | |
| </td> | |
| <td class="p-4 font-semibold">laptop_master</td> | |
| <td class="p-4">Laptop</td> | |
| <td class="p-4">RTX 4080 Mobile</td> | |
| <td class="p-4 font-bold text-blue-600">4,850</td> | |
| <td class="p-4 font-bold text-blue-600">5,970</td> | |
| <td class="p-4 font-bold text-blue-600">10,820</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="p-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-800 flex items-center justify-center font-bold">4</div> | |
| </td> | |
| <td class="p-4 font-semibold">integrated_hero</td> | |
| <td class="p-4">Ultrabook</td> | |
| <td class="p-4">Intel Iris Xe</td> | |
| <td class="p-4 font-bold text-yellow-600">2,310</td> | |
| <td class="p-4 font-bold text-yellow-600">2,000</td> | |
| <td class="p-4 font-bold text-yellow-600">4,310</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="p-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-800 flex items-center justify-center font-bold">5</div> | |
| </td> | |
| <td class="p-4 font-semibold">mobile_user</td> | |
| <td class="p-4">Smartphone</td> | |
| <td class="p-4">Adreno 740</td> | |
| <td class="p-4 font-bold text-red-600">1,800</td> | |
| <td class="p-4 font-bold text-red-600">1,500</td> | |
| <td class="p-4 font-bold text-red-600">3,300</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-gray-600 mb-4">Where do you stand? Run benchmarks to join the leaderboard.</p> | |
| <a href="benchmarks.html" class="btn-primary"> | |
| <i class="fas fa-rocket mr-2"></i> Run Benchmarks Now | |
| </a> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card"> | |
| <h3 class=" | |
| ___METADATA_START___ | |
| {"repoId":"mb672038/python-mastery-academy","isNew":false,"userName":"mb672038"} | |
| ___METADATA_END___ |