Hugging Face's logo

Spaces:
qimma
/
leaderboard
Running on CPU Upgrade

App Files Community
LeenAlQadi commited on
Commit
7f5130b
·
1 Parent(s): 949476f

dark mode fixes

Browse files
Files changed (1) hide show
  1. frontend/header.html +8 -4
frontend/header.html CHANGED
@@ -9,6 +9,10 @@
9
  <script>
10
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
11
  </script>
 
 
 
 
12
  </head>
13
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
14
  <div>
@@ -19,7 +23,7 @@
19
  <span class="block text-center">Leaderboard</span>
20
  </span>
21
  </h1>
22
- <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">A Quality-First Arabic LLM Leaderboard to evaluate and compare the performance of Arabic Large Language Models.</p>
23
  </div>
24
 
25
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
@@ -38,7 +42,7 @@
38
 
39
  <!-- Total Models -->
40
  <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
41
- style="background-color: #ffffff;">
42
  <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
43
  <i data-lucide="database" class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i>
44
  </div>
@@ -50,7 +54,7 @@
50
 
51
  <!-- Eval Status -->
52
  <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
53
- style="background-color: #ffffff;">
54
  <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl">
55
  <i data-lucide="activity" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
56
  </div>
@@ -85,7 +89,7 @@
85
 
86
  <!-- Benchmarks -->
87
  <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
88
- style="background-color: #ffffff;">
89
  <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl">
90
  <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
91
  </div>
 
9
  <script>
10
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
11
  </script>
12
+ <style>
13
+ :root { --card-bg: #ffffff; }
14
+ .dark { --card-bg: #1e293b; }
15
+ </style>
16
  </head>
17
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
18
  <div>
 
23
  <span class="block text-center">Leaderboard</span>
24
  </span>
25
  </h1>
26
+ <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">A quality-first Arabic LLM Leaderboard that evaluates and compares the performance of Arabic Large Language Models.</p>
27
  </div>
28
 
29
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
 
42
 
43
  <!-- Total Models -->
44
  <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
45
+ style="background-color: var(--card-bg);">
46
  <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
47
  <i data-lucide="database" class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i>
48
  </div>
 
54
 
55
  <!-- Eval Status -->
56
  <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
57
+ style="background-color: var(--card-bg);">
58
  <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl">
59
  <i data-lucide="activity" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
60
  </div>
 
89
 
90
  <!-- Benchmarks -->
91
  <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
92
+ style="background-color: var(--card-bg);">
93
  <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl">
94
  <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
95
  </div>