-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathheader.html
More file actions
115 lines (105 loc) · 10.1 KB
/
Copy pathheader.html
File metadata and controls
115 lines (105 loc) · 10.1 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
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
<header class="fixed top-0 left-0 right-0 max-w-md mx-auto h-16 bg-white/90 dark:bg-brand-dark/90 backdrop-blur-md z-40 flex items-center justify-between px-4 border-b border-gray-100 dark:border-gray-800 shadow-sm">
<div class="flex items-center gap-3">
<!-- Icon Gear Admin (Hidden default) -->
<a href="/admin.html" id="admin-gear" class="hidden text-gray-500 hover:text-brand-red dark:text-gray-400 dark:hover:text-brand-red transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</a>
<h1 class="text-sm font-bold text-brand-red uppercase tracking-widest">Swim Tracker</h1>
</div>
<div class="flex items-center gap-2">
<!-- Fullscreen Toggle -->
<button id="fullscreen-toggle" class="text-gray-500 hover:text-brand-red dark:text-gray-400 dark:hover:text-brand-red transition-colors p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-brand-red">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>
</button>
<!-- Theme Toggle -->
<button id="theme-toggle" class="text-gray-500 hover:text-brand-red dark:text-gray-400 dark:hover:text-brand-red transition-colors p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-brand-red">
<svg class="w-5 h-5 dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
<svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
</button>
<!-- Logout -->
<button id="btn-logout" class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500 transition-colors p-2 rounded-full">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
</button>
</div>
</header>
<div class="h-16 w-full"></div> <!-- Spacer for fixed header -->
<div id="modal-input" class="hidden fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm overflow-y-auto">
<div class="min-h-screen flex items-end sm:items-center justify-center p-0 sm:p-4">
<div id="modal-inner" class="w-full max-w-md bg-white dark:bg-brand-dark border dark:border-gray-700 shadow-xl rounded-t-2xl sm:rounded-2xl transform transition-all opacity-0 translate-y-10">
<div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
<h3 id="modal-title" class="font-bold text-gray-800 dark:text-white">INPUT DATA KEJUARAAN</h3>
<button type="button" id="btn-close-modal" class="text-gray-400 hover:text-gray-500">✕</button>
</div>
<input type="hidden" id="modal-input-mode" value="">
<div class="p-4 max-h-[75vh] overflow-y-auto space-y-5 pb-6">
<div class="bg-white dark:bg-brand-card p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<h4 class="text-sm font-bold text-gray-800 dark:text-white mb-4 uppercase tracking-wider">Informasi Umum</h4>
<div class="space-y-4">
<div>
<label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Nama Event</label>
<input type="text" id="input-event-name" class="w-full px-3 py-2 bg-gray-50 dark:bg-brand-dark border border-gray-200 dark:border-gray-600 rounded-lg focus:border-brand-red outline-none text-sm transition-all" placeholder="Contoh: KRAPSI 2026">
</div>
<div>
<label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Tingkat Kejuaraan</label>
<select id="input-event-level" class="w-full px-3 py-2 bg-gray-50 dark:bg-brand-dark border border-gray-200 dark:border-gray-600 rounded-lg focus:border-brand-red outline-none text-sm appearance-none">
<option selected disabled>Pilih Tingkat</option><option>Nasional</option><option>Provinsi</option><option>Kota/Kabupaten</option><option>Antar Perkumpulan</option>
</select>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="col-span-1">
<label class="block text-[10px] sm:text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Tgl Event</label>
<input type="date" id="input-tanggal-event" class="w-full px-2 py-2 bg-gray-50 dark:bg-brand-dark border border-gray-200 dark:border-gray-600 rounded-lg focus:border-brand-red outline-none text-xs">
</div>
<div class="col-span-1">
<label class="block text-[10px] sm:text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Tahun Lahir</label>
<input type="number" id="input-tahun-lahir" readonly class="w-full px-2 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg text-xs text-center cursor-not-allowed">
</div>
<div class="col-span-1">
<label class="block text-[10px] sm:text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Kategori KU</label>
<input type="text" id="display-ku" readonly placeholder="Otomatis" class="w-full px-2 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg text-[10px] font-bold text-brand-red cursor-not-allowed text-center">
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-brand-card p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<div class="flex justify-between items-start mb-4">
<div>
<h4 class="text-sm font-bold text-gray-800 dark:text-white uppercase tracking-wider">Tabel Nomor Kejuaraan</h4>
<p class="text-[10px] text-gray-400 mt-0.5">Entry manual format 00:00:00:00</p>
</div>
<button type="button" id="btn-add-nomor" class="bg-brand-red hover:bg-red-600 text-white text-[10px] font-bold py-1.5 px-3 rounded-md transition-colors whitespace-nowrap">+ Tambah Nomor</button>
</div>
<div class="grid grid-cols-12 gap-1 pb-2 mb-2 border-b border-gray-100 dark:border-gray-700 text-[9px] font-bold text-gray-400 uppercase">
<div class="col-span-5">Nomor Lomba</div><div class="col-span-4 text-center">Waktu</div><div class="col-span-2 text-center">Rank</div><div class="col-span-1 text-center">Aksi</div>
</div>
<div id="container-nomor-lomba" class="space-y-3">
</div>
</div>
</div>
<div class="p-4 border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-brand-card rounded-b-2xl">
<button id="btn-save-event" class="w-full bg-brand-red hover:bg-red-600 text-white font-bold py-3 px-4 rounded-xl transition-colors shadow-lg shadow-brand-red/30">💾 Simpan Semua Data</button>
</div>
</div>
</div>
</div>
<div id="modal-stopwatch" class="hidden fixed inset-0 z-[70] bg-black/90 backdrop-blur-md flex items-center justify-center transition-opacity duration-300 opacity-0">
<div class="w-full max-w-sm p-8 flex flex-col items-center">
<button type="button" onclick="closeStopwatch()" class="absolute top-6 right-6 text-gray-400 hover:text-white">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<h3 class="text-brand-red text-sm font-bold tracking-[0.3em] mb-4 uppercase">Live Timer</h3>
<div id="sw-display" class="text-5xl sm:text-6xl font-mono font-bold text-white mb-10 tracking-wider tabular-nums">00:00:00:00</div>
<div class="flex items-center justify-center gap-6 w-full">
<button id="sw-btn-reset" onclick="resetStopwatch()" class="w-16 h-16 rounded-full border-2 border-gray-600 text-gray-300 font-bold hover:bg-gray-800 transition-colors flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
</button>
<button id="sw-btn-start" onclick="toggleStopwatch()" class="w-24 h-24 rounded-full bg-brand-red text-white font-bold text-xl shadow-[0_0_30px_rgba(255,77,77,0.5)] hover:scale-105 transition-transform flex items-center justify-center">START</button>
<button id="sw-btn-save" onclick="saveStopwatch()" class="w-16 h-16 rounded-full border-2 border-green-500 text-green-500 font-bold hover:bg-green-900 transition-colors flex items-center justify-center opacity-50 cursor-not-allowed pointer-events-none">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</button>
</div>
</div>
</div>