-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprogress.html
More file actions
66 lines (59 loc) · 4.69 KB
/
Copy pathprogress.html
File metadata and controls
66 lines (59 loc) · 4.69 KB
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
<div id="tab-grafik" class="hidden w-full pb-24">
<div class="flex overflow-x-auto gap-3 pb-2 mb-4 hide-scrollbar">
<button class="pill-gaya px-5 py-2.5 rounded-full bg-brand-red text-white text-xs font-bold whitespace-nowrap shadow-md shadow-brand-red/40 transition-all" data-style="Bebas">Gaya Bebas</button>
<button class="pill-gaya px-5 py-2.5 rounded-full bg-gray-100 dark:bg-[#1f1a24] text-gray-500 dark:text-gray-400 text-xs font-bold whitespace-nowrap border border-gray-200 dark:border-gray-700 hover:text-brand-red transition-all" data-style="Kupu">Gaya Kupu</button>
<button class="pill-gaya px-5 py-2.5 rounded-full bg-gray-100 dark:bg-[#1f1a24] text-gray-500 dark:text-gray-400 text-xs font-bold whitespace-nowrap border border-gray-200 dark:border-gray-700 hover:text-brand-red transition-all" data-style="Punggung">Gaya Punggung</button>
<button class="pill-gaya px-5 py-2.5 rounded-full bg-gray-100 dark:bg-[#1f1a24] text-gray-500 dark:text-gray-400 text-xs font-bold whitespace-nowrap border border-gray-200 dark:border-gray-700 hover:text-brand-red transition-all" data-style="Dada">Gaya Dada</button>
<button class="pill-gaya px-5 py-2.5 rounded-full bg-gray-100 dark:bg-[#1f1a24] text-gray-500 dark:text-gray-400 text-xs font-bold whitespace-nowrap border border-gray-200 dark:border-gray-700 hover:text-brand-red transition-all" data-style="Ganti">Gaya Ganti</button>
</div>
<div class="bg-white dark:bg-[#1f1a24] p-4 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm mb-6">
<div class="flex justify-between items-center mb-6">
<h3 class="font-bold text-xs tracking-widest text-gray-800 dark:text-white uppercase">Tren Waktu (Detik)</h3>
<!-- DROPDOWN TAHUN VS TAHUN -->
<div class="flex items-center gap-1.5">
<select id="grafik-year-filter" class="appearance-none bg-gray-100 dark:bg-[#2b2532] border border-gray-200 dark:border-gray-700 text-brand-red text-[10px] font-bold rounded-md px-2 py-1 focus:outline-none cursor-pointer">
<option value="2026">2026</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
</select>
<span class="text-[9px] font-bold text-gray-400">VS</span>
<select id="grafik-compare-filter" class="appearance-none bg-gray-100 dark:bg-[#2b2532] border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-[10px] font-bold rounded-md px-2 py-1 focus:outline-none cursor-pointer">
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="none">-- Off --</option>
</select>
</div>
</div>
<div class="relative h-56 w-full">
<canvas id="prestasiChart"></canvas>
</div>
<div class="flex items-center gap-1.5 w-full justify-center mt-2 text-[9px]"><span class="w-4 h-0 border-t-2 border-dashed border-gray-400 opacity-50"></span> Garis putus-putus = Tahun Pembanding</div>
<div class="flex flex-wrap justify-center gap-3 mt-4 text-[10px] font-bold text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#d946ef]"></span> 25 M</div>
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#22c55e]"></span> 50 M</div>
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#eab308]"></span> 100 M</div>
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span> 200 M</div>
<div class="flex items-center gap-1.5"><span class="w-4 h-0 border-t-2 border-dashed border-gray-400"></span> Target</div>
</div>
</div>
<div class="bg-white dark:bg-[#1a1620] rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden mb-6">
<div class="p-4 border-b border-gray-100 dark:border-gray-800">
<h3 class="font-bold text-xs tracking-widest text-gray-800 dark:text-white uppercase">Hasil Perlombaan</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm whitespace-nowrap">
<thead class="bg-gray-50 dark:bg-[#221c29] text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 text-[10px] uppercase">
<tr>
<th class="px-4 py-3 font-bold">Jarak</th>
<th class="px-4 py-3 font-bold text-center">Rekor Waktu</th>
<th class="px-4 py-3 font-bold text-center">Target Coach</th>
<th class="px-4 py-3 font-bold">Event</th>
</tr>
</thead>
<tbody id="table-grafik-body" class="divide-y divide-gray-100 dark:divide-gray-800">
</tbody>
</table>
</div>
</div>
</div>