DavidRyder commited on
Commit
d80d0fa
·
verified ·
1 Parent(s): b06afb7

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +671 -19
index.html CHANGED
@@ -1,19 +1,671 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>360 Degrees VR Games Center - POS Management System</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Chart.js -->
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
+
14
+ <!-- jsPDF -->
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
16
+
17
+ <!-- html2canvas -->
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
19
+
20
+ <!-- Font Awesome -->
21
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
22
+
23
+ <!-- Google Fonts -->
24
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
25
+
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ 'orbitron': ['Orbitron', 'sans-serif'],
32
+ 'rajdhani': ['Rajdhani', 'sans-serif'],
33
+ 'inter': ['Inter', 'sans-serif'],
34
+ },
35
+ colors: {
36
+ 'vr-dark': '#0a0a0f',
37
+ 'vr-darker': '#050508',
38
+ 'vr-panel': '#12121a',
39
+ 'vr-card': '#1a1a24',
40
+ 'vr-border': '#2a2a3a',
41
+ 'vr-accent': '#00d4ff',
42
+ 'vr-accent-dim': 'rgba(0, 212, 255, 0.1)',
43
+ 'vr-purple': '#8b5cf6',
44
+ 'vr-green': '#22c55e',
45
+ 'vr-orange': '#f97316',
46
+ 'vr-red': '#ef4444',
47
+ 'vr-yellow': '#eab308',
48
+ 'vr-pink': '#ec4899',
49
+ },
50
+ animation: {
51
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
52
+ 'float': 'float 3s ease-in-out infinite',
53
+ 'glow': 'glow 2s ease-in-out infinite alternate',
54
+ 'slide-up': 'slideUp 0.4s ease-out',
55
+ 'fade-in': 'fadeIn 0.3s ease-out',
56
+ 'scale-in': 'scaleIn 0.3s ease-out',
57
+ 'scan': 'scan 2s linear infinite',
58
+ },
59
+ keyframes: {
60
+ float: {
61
+ '0%, 100%': { transform: 'translateY(0px)' },
62
+ '50%': { transform: 'translateY(-8px)' },
63
+ },
64
+ glow: {
65
+ '0%': { boxShadow: '0 0 5px rgba(0, 212, 255, 0.3)' },
66
+ '100%': { boxShadow: '0 0 20px rgba(0, 212, 255, 0.6), 0 0 40px rgba(0, 212, 255, 0.2)' },
67
+ },
68
+ slideUp: {
69
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
70
+ '100%': { opacity: '1', transform: 'translateY(0)' },
71
+ },
72
+ fadeIn: {
73
+ '0%': { opacity: '0' },
74
+ '100%': { opacity: '1' },
75
+ },
76
+ scaleIn: {
77
+ '0%': { opacity: '0', transform: 'scale(0.9)' },
78
+ '100%': { opacity: '1', transform: 'scale(1)' },
79
+ },
80
+ scan: {
81
+ '0%': { transform: 'translateY(-100%)' },
82
+ '100%': { transform: 'translateY(100%)' },
83
+ }
84
+ }
85
+ }
86
+ }
87
+ }
88
+ </script>
89
+
90
+ <style>
91
+ /* Custom Scrollbar */
92
+ ::-webkit-scrollbar {
93
+ width: 6px;
94
+ height: 6px;
95
+ }
96
+ ::-webkit-scrollbar-track {
97
+ background: #0a0a0f;
98
+ }
99
+ ::-webkit-scrollbar-thumb {
100
+ background: #2a2a3a;
101
+ border-radius: 3px;
102
+ }
103
+ ::-webkit-scrollbar-thumb:hover {
104
+ background: #3a3a4a;
105
+ }
106
+
107
+ /* Glassmorphism */
108
+ .glass {
109
+ background: rgba(18, 18, 26, 0.85);
110
+ backdrop-filter: blur(20px);
111
+ -webkit-backdrop-filter: blur(20px);
112
+ border: 1px solid rgba(255, 255, 255, 0.05);
113
+ }
114
+
115
+ .glass-light {
116
+ background: rgba(26, 26, 36, 0.7);
117
+ backdrop-filter: blur(12px);
118
+ -webkit-backdrop-filter: blur(12px);
119
+ border: 1px solid rgba(255, 255, 255, 0.04);
120
+ }
121
+
122
+ /* Neon Glow Effects */
123
+ .neon-text {
124
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
125
+ }
126
+ .neon-border {
127
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.2), inset 0 0 10px rgba(0, 212, 255, 0.05);
128
+ }
129
+ .neon-purple {
130
+ box-shadow: 0 0 10px rgba(139, 92, 246, 0.2), inset 0 0 10px rgba(139, 92, 246, 0.05);
131
+ }
132
+
133
+ /* Grid Background */
134
+ .grid-bg {
135
+ background-image:
136
+ linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
137
+ linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
138
+ background-size: 40px 40px;
139
+ }
140
+
141
+ /* Holographic Card Effect */
142
+ .holo-card {
143
+ position: relative;
144
+ overflow: hidden;
145
+ }
146
+ .holo-card::before {
147
+ content: '';
148
+ position: absolute;
149
+ top: 0;
150
+ left: -100%;
151
+ width: 100%;
152
+ height: 100%;
153
+ background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.08), transparent);
154
+ transition: left 0.6s ease;
155
+ }
156
+ .holo-card:hover::before {
157
+ left: 100%;
158
+ }
159
+
160
+ /* Receipt Paper Effect */
161
+ .receipt-paper {
162
+ background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
163
+ position: relative;
164
+ }
165
+ .receipt-paper::before {
166
+ content: '';
167
+ position: absolute;
168
+ top: 0;
169
+ left: 0;
170
+ right: 0;
171
+ height: 4px;
172
+ background: repeating-linear-gradient(
173
+ 45deg,
174
+ #ddd,
175
+ #ddd 2px,
176
+ transparent 2px,
177
+ transparent 4px
178
+ );
179
+ }
180
+ .receipt-paper::after {
181
+ content: '';
182
+ position: absolute;
183
+ bottom: 0;
184
+ left: 0;
185
+ right: 0;
186
+ height: 4px;
187
+ background: repeating-linear-gradient(
188
+ 45deg,
189
+ #ddd,
190
+ #ddd 2px,
191
+ transparent 2px,
192
+ transparent 4px
193
+ );
194
+ }
195
+
196
+ /* Button Press Effect */
197
+ .btn-press:active {
198
+ transform: scale(0.96);
199
+ }
200
+
201
+ /* Loading Spinner */
202
+ .spinner {
203
+ border: 2px solid rgba(0, 212, 255, 0.1);
204
+ border-top: 2px solid #00d4ff;
205
+ border-radius: 50%;
206
+ width: 20px;
207
+ height: 20px;
208
+ animation: spin 1s linear infinite;
209
+ }
210
+ @keyframes spin {
211
+ 0% { transform: rotate(0deg); }
212
+ 100% { transform: rotate(360deg); }
213
+ }
214
+
215
+ /* Scan Line Effect */
216
+ .scan-line {
217
+ position: absolute;
218
+ top: 0;
219
+ left: 0;
220
+ right: 0;
221
+ height: 2px;
222
+ background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
223
+ animation: scan 3s linear infinite;
224
+ pointer-events: none;
225
+ }
226
+
227
+ /* Modal Backdrop */
228
+ .modal-backdrop {
229
+ background: rgba(0, 0, 0, 0.7);
230
+ backdrop-filter: blur(8px);
231
+ }
232
+
233
+ /* Input Focus Glow */
234
+ input:focus, select:focus, textarea:focus {
235
+ outline: none;
236
+ box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.3);
237
+ }
238
+
239
+ /* Tooltip */
240
+ [data-tooltip]:hover::after {
241
+ content: attr(data-tooltip);
242
+ position: absolute;
243
+ bottom: 100%;
244
+ left: 50%;
245
+ transform: translateX(-50%);
246
+ background: #1a1a24;
247
+ color: #00d4ff;
248
+ padding: 4px 10px;
249
+ border-radius: 6px;
250
+ font-size: 11px;
251
+ white-space: nowrap;
252
+ border: 1px solid rgba(0, 212, 255, 0.2);
253
+ z-index: 100;
254
+ }
255
+
256
+ /* Category Badge Colors */
257
+ .cat-vr { background: linear-gradient(135deg, #00d4ff, #0099cc); }
258
+ .cat-sim { background: linear-gradient(135deg, #22c55e, #16a34a); }
259
+ .cat-arc { background: linear-gradient(135deg, #f97316, #ea580c); }
260
+ .cat-rac { background: linear-gradient(135deg, #ec4899, #db2777); }
261
+ .cat-spt { background: linear-gradient(135deg, #eab308, #ca8a04); }
262
+ .cat-adv { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
263
+
264
+ /* Print Styles */
265
+ @media print {
266
+ body * { visibility: hidden; }
267
+ #printArea, #printArea * { visibility: visible; }
268
+ #printArea { position: absolute; left: 0; top: 0; width: 100%; }
269
+ .no-print { display: none !important; }
270
+ }
271
+
272
+ /* Status Indicator */
273
+ .status-dot {
274
+ width: 8px;
275
+ height: 8px;
276
+ border-radius: 50%;
277
+ display: inline-block;
278
+ }
279
+ .status-online { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
280
+ .status-busy { background: #f97316; box-shadow: 0 0 6px #f97316; }
281
+ .status-offline { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
282
+
283
+ /* Number Counter Animation */
284
+ .counter {
285
+ font-variant-numeric: tabular-nums;
286
+ }
287
+ </style>
288
+ </head>
289
+ <body class="bg-vr-dark text-gray-200 font-inter min-h-screen grid-bg overflow-x-hidden">
290
+
291
+ <!-- ==================== LOGIN SCREEN ==================== -->
292
+ <div id="loginScreen" class="fixed inset-0 z-50 flex items-center justify-center bg-vr-dark">
293
+ <div class="absolute inset-0 overflow-hidden">
294
+ <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-vr-accent/5 rounded-full blur-3xl"></div>
295
+ <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-vr-purple/5 rounded-full blur-3xl"></div>
296
+ </div>
297
+ <div class="relative z-10 w-full max-w-md px-6">
298
+ <div class="text-center mb-10">
299
+ <div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-vr-accent/20 to-vr-purple/20 border border-vr-accent/20 mb-6 animate-float">
300
+ <i class="fa-solid fa-vr-cardboard text-3xl text-vr-accent"></i>
301
+ </div>
302
+ <h1 class="font-orbitron text-3xl font-bold text-white mb-2 tracking-wider neon-text">360 DEGREES</h1>
303
+ <p class="font-rajdhani text-lg text-vr-accent/70 tracking-widest uppercase">VR Games Center</p>
304
+ <div class="mt-3 flex items-center justify-center gap-2">
305
+ <span class="status-dot status-online"></span>
306
+ <span class="text-xs text-gray-500">System Online</span>
307
+ </div>
308
+ </div>
309
+ <div class="glass rounded-2xl p-8 space-y-5">
310
+ <div>
311
+ <label class="block text-xs text-gray-400 uppercase tracking-wider mb-2 font-rajdhani font-semibold">Username</label>
312
+ <input type="text" id="loginUsername" placeholder="Enter username" class="w-full bg-vr-darker border border-vr-border rounded-xl px-4 py-3 text-white placeholder-gray-600 transition-all focus:border-vr-accent" value="admin">
313
+ </div>
314
+ <div>
315
+ <label class="block text-xs text-gray-400 uppercase tracking-wider mb-2 font-rajdhani font-semibold">Password</label>
316
+ <input type="password" id="loginPassword" placeholder="Enter password" class="w-full bg-vr-darker border border-vr-border rounded-xl px-4 py-3 text-white placeholder-gray-600 transition-all focus:border-vr-accent" value="admin123">
317
+ </div>
318
+ <div>
319
+ <label class="block text-xs text-gray-400 uppercase tracking-wider mb-2 font-rajdhani font-semibold">Select Role</label>
320
+ <select id="loginRole" class="w-full bg-vr-darker border border-vr-border rounded-xl px-4 py-3 text-white transition-all focus:border-vr-accent cursor-pointer">
321
+ <option value="admin">Administrator</option>
322
+ <option value="cashier">Cashier</option>
323
+ <option value="manager">Manager</option>
324
+ </select>
325
+ </div>
326
+ <button onclick="handleLogin()" class="w-full bg-gradient-to-r from-vr-accent to-cyan-600 text-vr-dark font-bold py-3.5 rounded-xl hover:shadow-lg hover:shadow-vr-accent/20 transition-all btn-press font-orbitron tracking-wider">
327
+ <i class="fa-solid fa-right-to-bracket mr-2"></i>LOGIN
328
+ </button>
329
+ <p id="loginError" class="text-vr-red text-sm text-center hidden"><i class="fa-solid fa-circle-exclamation mr-1"></i>Invalid credentials</p>
330
+ </div>
331
+ <p class="text-center text-xs text-gray-600 mt-6">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-vr-accent hover:underline">anycoder</a></p>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- ==================== MAIN APP ==================== -->
336
+ <div id="mainApp" class="hidden min-h-screen flex flex-col">
337
+
338
+ <!-- Top Navigation Bar -->
339
+ <nav class="glass sticky top-0 z-40 border-b border-vr-border/50">
340
+ <div class="max-w-[1600px] mx-auto px-4 sm:px-6">
341
+ <div class="flex items-center justify-between h-16">
342
+ <!-- Logo -->
343
+ <div class="flex items-center gap-3">
344
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-vr-accent/20 to-vr-purple/20 border border-vr-accent/20 flex items-center justify-center">
345
+ <i class="fa-solid fa-vr-cardboard text-vr-accent text-lg"></i>
346
+ </div>
347
+ <div>
348
+ <h1 class="font-orbitron text-sm font-bold text-white tracking-wider">360 DEGREES</h1>
349
+ <p class="text-[10px] text-vr-accent/60 font-rajdhani tracking-widest uppercase">VR Games Center</p>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Center Nav Links -->
354
+ <div class="hidden md:flex items-center gap-1">
355
+ <button onclick="navigateTo('dashboard')" id="nav-dashboard" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-vr-accent bg-vr-accent/10">
356
+ <i class="fa-solid fa-chart-pie"></i> Dashboard
357
+ </button>
358
+ <button onclick="navigateTo('pos')" id="nav-pos" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
359
+ <i class="fa-solid fa-cash-register"></i> POS
360
+ </button>
361
+ <button onclick="navigateTo('games')" id="nav-games" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
362
+ <i class="fa-solid fa-gamepad"></i> Games
363
+ </button>
364
+ <button onclick="navigateTo('reports')" id="nav-reports" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
365
+ <i class="fa-solid fa-file-lines"></i> Reports
366
+ </button>
367
+ <button onclick="navigateTo('users')" id="nav-users" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
368
+ <i class="fa-solid fa-users-gear"></i> Users
369
+ </button>
370
+ </div>
371
+
372
+ <!-- Right Side -->
373
+ <div class="flex items-center gap-3">
374
+ <!-- Mobile Menu Toggle -->
375
+ <button onclick="toggleMobileMenu()" class="md:hidden w-9 h-9 rounded-lg bg-vr-card border border-vr-border flex items-center justify-center text-gray-400 hover:text-white">
376
+ <i class="fa-solid fa-bars"></i>
377
+ </button>
378
+
379
+ <!-- Date/Time -->
380
+ <div class="hidden lg:flex flex-col items-end mr-2">
381
+ <span id="headerTime" class="text-sm font-orbitron text-vr-accent font-bold">00:00:00</span>
382
+ <span id="headerDate" class="text-[10px] text-gray-500 font-rajdhani">---</span>
383
+ </div>
384
+
385
+ <!-- User -->
386
+ <div class="flex items-center gap-3 pl-3 border-l border-vr-border/50">
387
+ <div class="text-right hidden sm:block">
388
+ <p id="userNameDisplay" class="text-sm font-semibold text-white">Admin</p>
389
+ <p id="userRoleDisplay" class="text-[10px] text-vr-accent font-rajdhani uppercase tracking-wider">Administrator</p>
390
+ </div>
391
+ <div class="w-9 h-9 rounded-full bg-gradient-to-br from-vr-accent to-vr-purple flex items-center justify-center text-vr-dark font-bold text-sm">
392
+ <i class="fa-solid fa-user"></i>
393
+ </div>
394
+ <button onclick="logout()" class="w-9 h-9 rounded-lg bg-vr-card border border-vr-border flex items-center justify-center text-gray-400 hover:text-vr-red hover:border-vr-red/30 transition-all" title="Logout">
395
+ <i class="fa-solid fa-power-off text-sm"></i>
396
+ </button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Mobile Menu -->
403
+ <div id="mobileMenu" class="hidden md:hidden border-t border-vr-border/50 bg-vr-panel">
404
+ <div class="px-4 py-3 space-y-1">
405
+ <button onclick="navigateTo('dashboard'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-vr-accent bg-vr-accent/10 flex items-center gap-3">
406
+ <i class="fa-solid fa-chart-pie w-5"></i> Dashboard
407
+ </button>
408
+ <button onclick="navigateTo('pos'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
409
+ <i class="fa-solid fa-cash-register w-5"></i> POS
410
+ </button>
411
+ <button onclick="navigateTo('games'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
412
+ <i class="fa-solid fa-gamepad w-5"></i> Games
413
+ </button>
414
+ <button onclick="navigateTo('reports'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
415
+ <i class="fa-solid fa-file-lines w-5"></i> Reports
416
+ </button>
417
+ <button onclick="navigateTo('users'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
418
+ <i class="fa-solid fa-users-gear w-5"></i> Users
419
+ </button>
420
+ </div>
421
+ </div>
422
+ </nav>
423
+
424
+ <!-- Main Content Area -->
425
+ <main class="flex-1 max-w-[1600px] w-full mx-auto px-4 sm:px-6 py-6">
426
+
427
+ <!-- ==================== DASHBOARD VIEW ==================== -->
428
+ <div id="view-dashboard" class="view-section space-y-6 animate-fade-in">
429
+ <!-- Stats Row -->
430
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
431
+ <div class="glass-light rounded-2xl p-5 holo-card group">
432
+ <div class="flex items-center justify-between mb-3">
433
+ <div class="w-10 h-10 rounded-xl bg-vr-accent/10 flex items-center justify-center group-hover:bg-vr-accent/20 transition-colors">
434
+ <i class="fa-solid fa-wallet text-vr-accent"></i>
435
+ </div>
436
+ <span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Today</span>
437
+ </div>
438
+ <p class="text-2xl font-orbitron font-bold text-white counter" id="dashRevenue">$0.00</p>
439
+ <p class="text-xs text-gray-500 mt-1">Total Revenue</p>
440
+ <div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
441
+ <div class="h-full bg-vr-accent rounded-full" style="width: 78%"></div>
442
+ </div>
443
+ </div>
444
+ <div class="glass-light rounded-2xl p-5 holo-card group">
445
+ <div class="flex items-center justify-between mb-3">
446
+ <div class="w-10 h-10 rounded-xl bg-vr-purple/10 flex items-center justify-center group-hover:bg-vr-purple/20 transition-colors">
447
+ <i class="fa-solid fa-ticket text-vr-purple"></i>
448
+ </div>
449
+ <span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Today</span>
450
+ </div>
451
+ <p class="text-2xl font-orbitron font-bold text-white counter" id="dashTransactions">0</p>
452
+ <p class="text-xs text-gray-500 mt-1">Transactions</p>
453
+ <div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
454
+ <div class="h-full bg-vr-purple rounded-full" style="width: 65%"></div>
455
+ </div>
456
+ </div>
457
+ <div class="glass-light rounded-2xl p-5 holo-card group">
458
+ <div class="flex items-center justify-between mb-3">
459
+ <div class="w-10 h-10 rounded-xl bg-vr-green/10 flex items-center justify-center group-hover:bg-vr-green/20 transition-colors">
460
+ <i class="fa-solid fa-gamepad text-vr-green"></i>
461
+ </div>
462
+ <span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Active</span>
463
+ </div>
464
+ <p class="text-2xl font-orbitron font-bold text-white" id="dashActiveGames">0</p>
465
+ <p class="text-xs text-gray-500 mt-1">Games Available</p>
466
+ <div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
467
+ <div class="h-full bg-vr-green rounded-full" style="width: 92%"></div>
468
+ </div>
469
+ </div>
470
+ <div class="glass-light rounded-2xl p-5 holo-card group">
471
+ <div class="flex items-center justify-between mb-3">
472
+ <div class="w-10 h-10 rounded-xl bg-vr-orange/10 flex items-center justify-center group-hover:bg-vr-orange/20 transition-colors">
473
+ <i class="fa-solid fa-users text-vr-orange"></i>
474
+ </div>
475
+ <span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Today</span>
476
+ </div>
477
+ <p class="text-2xl font-orbitron font-bold text-white counter" id="dashCustomers">0</p>
478
+ <p class="text-xs text-gray-500 mt-1">Customers</p>
479
+ <div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
480
+ <div class="h-full bg-vr-orange rounded-full" style="width: 54%"></div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Charts Row -->
486
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
487
+ <div class="lg:col-span-2 glass-light rounded-2xl p-5">
488
+ <div class="flex items-center justify-between mb-4">
489
+ <h3 class="font-orbitron text-sm font-bold text-white tracking-wider"><i class="fa-solid fa-chart-line text-vr-accent mr-2"></i>Revenue Trend</h3>
490
+ <div class="flex gap-2">
491
+ <button onclick="updateChartPeriod('daily')" class="period-btn px-3 py-1 rounded-lg text-[10px] font-rajdhani font-bold uppercase tracking-wider bg-vr-accent text-vr-dark">Daily</button>
492
+ <button onclick="updateChartPeriod('weekly')" class="period-btn px-3 py-1 rounded-lg text-[10px] font-rajdhani font-bold uppercase tracking-wider text-gray-400 hover:text-white hover:bg-white/5">Weekly</button>
493
+ <button onclick="updateChartPeriod('monthly')" class="period-btn px-3 py-1 rounded-lg text-[10px] font-rajdhani font-bold uppercase tracking-wider text-gray-400 hover:text-white hover:bg-white/5">Monthly</button>
494
+ </div>
495
+ </div>
496
+ <div class="relative h-64">
497
+ <canvas id="revenueChart"></canvas>
498
+ </div>
499
+ </div>
500
+ <div class="glass-light rounded-2xl p-5">
501
+ <h3 class="font-orbitron text-sm font-bold text-white tracking-wider mb-4"><i class="fa-solid fa-trophy text-vr-yellow mr-2"></i>Top Games</h3>
502
+ <div class="relative h-64">
503
+ <canvas id="topGamesChart"></canvas>
504
+ </div>
505
+ </div>
506
+ </div>
507
+
508
+ <!-- Recent Activity -->
509
+ <div class="glass-light rounded-2xl p-5">
510
+ <div class="flex items-center justify-between mb-4">
511
+ <h3 class="font-orbitron text-sm font-bold text-white tracking-wider"><i class="fa-solid fa-clock-rotate-left text-vr-purple mr-2"></i>Recent Transactions</h3>
512
+ <button onclick="navigateTo('reports')" class="text-xs text-vr-accent hover:underline font-rajdhani">View All</button>
513
+ </div>
514
+ <div class="overflow-x-auto">
515
+ <table class="w-full">
516
+ <thead>
517
+ <tr class="border-b border-vr-border/50">
518
+ <th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">ID</th>
519
+ <th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Customer</th>
520
+ <th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Game</th>
521
+ <th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Time</th>
522
+ <th class="text-right text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Amount</th>
523
+ <th class="text-center text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Status</th>
524
+ </tr>
525
+ </thead>
526
+ <tbody id="recentTransactionsBody" class="text-sm"></tbody>
527
+ </table>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <!-- ==================== POS VIEW ==================== -->
533
+ <div id="view-pos" class="view-section hidden h-[calc(100vh-120px)]">
534
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 h-full">
535
+ <!-- Games Grid -->
536
+ <div class="lg:col-span-8 flex flex-col h-full">
537
+ <div class="glass-light rounded-2xl p-4 mb-4 flex items-center gap-3 flex-wrap">
538
+ <div class="relative flex-1 min-w-[200px]">
539
+ <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
540
+ <input type="text" id="posSearch" placeholder="Search games..." oninput="filterPosGames()" class="w-full bg-vr-darker border border-vr-border rounded-xl pl-10 pr-4 py-2.5 text-sm text-white placeholder-gray-600 focus:border-vr-accent transition-all">
541
+ </div>
542
+ <select id="posCategoryFilter" onchange="filterPosGames()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all cursor-pointer">
543
+ <option value="all">All Categories</option>
544
+ <option value="VR">VR Experience</option>
545
+ <option value="Simulator">Simulator</option>
546
+ <option value="Arcade">Arcade</option>
547
+ <option value="Racing">Racing</option>
548
+ <option value="Sports">Sports</option>
549
+ <option value="Adventure">Adventure</option>
550
+ </select>
551
+ </div>
552
+ <div class="flex-1 overflow-y-auto pr-1">
553
+ <div id="posGamesGrid" class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-3"></div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Cart Panel -->
558
+ <div class="lg:col-span-4 flex flex-col h-full">
559
+ <div class="glass-light rounded-2xl flex flex-col h-full overflow-hidden">
560
+ <div class="p-4 border-b border-vr-border/50">
561
+ <h3 class="font-orbitron text-sm font-bold text-white tracking-wider flex items-center gap-2">
562
+ <i class="fa-solid fa-cart-shopping text-vr-accent"></i> Current Order
563
+ </h3>
564
+ </div>
565
+ <div id="cartItems" class="flex-1 overflow-y-auto p-4 space-y-2"></div>
566
+ <div class="p-4 border-t border-vr-border/50 space-y-3">
567
+ <div class="flex justify-between text-sm">
568
+ <span class="text-gray-400">Subtotal</span>
569
+ <span class="font-orbitron text-white" id="cartSubtotal">$0.00</span>
570
+ </div>
571
+ <div class="flex justify-between text-sm">
572
+ <span class="text-gray-400">Tax (8%)</span>
573
+ <span class="font-orbitron text-white" id="cartTax">$0.00</span>
574
+ </div>
575
+ <div class="flex justify-between text-lg font-bold border-t border-vr-border/50 pt-3">
576
+ <span class="text-white">Total</span>
577
+ <span class="font-orbitron text-vr-accent" id="cartTotal">$0.00</span>
578
+ </div>
579
+ <div class="grid grid-cols-2 gap-2">
580
+ <button onclick="clearCart()" class="px-4 py-3 rounded-xl border border-vr-border text-gray-400 hover:text-white hover:border-vr-red/50 hover:bg-vr-red/10 transition-all text-sm font-medium btn-press">
581
+ <i class="fa-solid fa-trash-can mr-1"></i> Clear
582
+ </button>
583
+ <button onclick="openCheckout()" id="checkoutBtn" class="px-4 py-3 rounded-xl bg-gradient-to-r from-vr-accent to-cyan-600 text-vr-dark font-bold hover:shadow-lg hover:shadow-vr-accent/20 transition-all text-sm btn-press font-orbitron tracking-wider disabled:opacity-50 disabled:cursor-not-allowed">
584
+ <i class="fa-solid fa-credit-card mr-1"></i> Checkout
585
+ </button>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- ==================== GAMES VIEW ==================== -->
594
+ <div id="view-games" class="view-section hidden space-y-6 animate-fade-in">
595
+ <div class="flex items-center justify-between flex-wrap gap-4">
596
+ <div>
597
+ <h2 class="font-orbitron text-xl font-bold text-white tracking-wider">Game Management</h2>
598
+ <p class="text-sm text-gray-500 font-rajdhani">Manage your arcade games and pricing</p>
599
+ </div>
600
+ <button onclick="openGameModal()" class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-vr-accent to-cyan-600 text-vr-dark font-bold text-sm hover:shadow-lg hover:shadow-vr-accent/20 transition-all btn-press font-orbitron tracking-wider">
601
+ <i class="fa-solid fa-plus mr-2"></i>Add Game
602
+ </button>
603
+ </div>
604
+
605
+ <div class="glass-light rounded-2xl p-4 flex items-center gap-3 flex-wrap">
606
+ <div class="relative flex-1 min-w-[250px]">
607
+ <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
608
+ <input type="text" id="gamesSearch" placeholder="Search games..." oninput="renderGames()" class="w-full bg-vr-darker border border-vr-border rounded-xl pl-10 pr-4 py-2.5 text-sm text-white placeholder-gray-600 focus:border-vr-accent transition-all">
609
+ </div>
610
+ <select id="gamesCategoryFilter" onchange="renderGames()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all cursor-pointer">
611
+ <option value="all">All Categories</option>
612
+ <option value="VR">VR Experience</option>
613
+ <option value="Simulator">Simulator</option>
614
+ <option value="Arcade">Arcade</option>
615
+ <option value="Racing">Racing</option>
616
+ <option value="Sports">Sports</option>
617
+ <option value="Adventure">Adventure</option>
618
+ </select>
619
+ </div>
620
+
621
+ <div id="gamesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"></div>
622
+ </div>
623
+
624
+ <!-- ==================== REPORTS VIEW ==================== -->
625
+ <div id="view-reports" class="view-section hidden space-y-6 animate-fade-in">
626
+ <div class="flex items-center justify-between flex-wrap gap-4">
627
+ <div>
628
+ <h2 class="font-orbitron text-xl font-bold text-white tracking-wider">Reports & Analytics</h2>
629
+ <p class="text-sm text-gray-500 font-rajdhani">Generate and export business reports</p>
630
+ </div>
631
+ <div class="flex gap-2">
632
+ <button onclick="exportReport('pdf')" class="px-4 py-2.5 rounded-xl border border-vr-red/30 text-vr-red hover:bg-vr-red/10 transition-all text-sm font-medium btn-press">
633
+ <i class="fa-solid fa-file-pdf mr-2"></i>Export PDF
634
+ </button>
635
+ <button onclick="exportReport('csv')" class="px-4 py-2.5 rounded-xl border border-vr-green/30 text-vr-green hover:bg-vr-green/10 transition-all text-sm font-medium btn-press">
636
+ <i class="fa-solid fa-file-csv mr-2"></i>Export CSV
637
+ </button>
638
+ </div>
639
+ </div>
640
+
641
+ <div class="glass-light rounded-2xl p-4 flex items-center gap-3 flex-wrap">
642
+ <select id="reportType" onchange="generateReport()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all cursor-pointer">
643
+ <option value="daily">Daily Report</option>
644
+ <option value="weekly">Weekly Report</option>
645
+ <option value="monthly">Monthly Report</option>
646
+ <option value="custom">Custom Range</option>
647
+ </select>
648
+ <input type="date" id="reportDateFrom" onchange="generateReport()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all">
649
+ <input type="date" id="reportDateTo" onchange="generateReport()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all">
650
+ <button onclick="generateReport()" class="px-4 py-2.5 rounded-xl bg-vr-accent/10 text-vr-accent border border-vr-accent/20 hover:bg-vr-accent/20 transition-all text-sm font-medium btn-press">
651
+ <i class="fa-solid fa-rotate mr-1"></i> Refresh
652
+ </button>
653
+ </div>
654
+
655
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
656
+ <div class="glass-light rounded-2xl p-5">
657
+ <div class="flex items-center justify-between mb-3">
658
+ <div class="w-10 h-10 rounded-xl bg-vr-accent/10 flex items-center justify-center">
659
+ <i class="fa-solid fa-sack-dollar text-vr-accent"></i>
660
+ </div>
661
+ </div>
662
+ <p class="text-2xl font-orbitron font-bold text-white" id="reportRevenue">$0.00</p>
663
+ <p class="text-xs text-gray-500 mt-1">Total Revenue</p>
664
+ </div>
665
+ <div class="glass-light rounded-2xl p-5">
666
+ <div class="flex items-center justify-between mb-3">
667
+ <div class="w-10 h-10 rounded-xl bg-vr-orange/10 flex items-center justify-center">
668
+ <i class="fa-solid fa-money-bill-transfer text-vr-orange"></i>
669
+ </div>
670
+ </div>
671
+ <p class="text-2xl font-orbitron