Spaces:
Running
Running
File size: 7,387 Bytes
46428fd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | ```html
<!DOCTYPE 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___ |