Hugging Face's logo

Spaces:
vikarshana
/
DashX
Sleeping

App Files Community
HerzaJ commited on
Commit
3bd897d
·
verified ·
1 Parent(s): 1bd8df7

Update public/dashboard.html

Browse files
Files changed (1) hide show
  1. public/dashboard.html +1242 -625
public/dashboard.html CHANGED
@@ -3,788 +3,1405 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>DashX - API Dashboard</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <link rel="stylesheet" href="styles.css">
9
- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  </head>
12
  <body>
13
- <nav class="navbar">
14
- <div class="navbar-brand">
15
- <i class="fas fa-chart-line"></i>
16
- <span>DashX API</span>
17
- </div>
18
- <div class="navbar-menu">
19
- <a href="#" class="nav-item active" onclick="showSection('overview')">
20
- <i class="fas fa-home"></i>
21
- <span>Overview</span>
22
  </a>
23
- <a href="#" class="nav-item" onclick="showSection('plugins')">
24
- <i class="fas fa-plug"></i>
25
- <span>Plugins</span>
26
- </a>
27
- <a href="#" class="nav-item" onclick="showSection('api-stats')">
28
- <i class="fas fa-chart-bar"></i>
29
- <span>API Stats</span>
30
- </a>
31
- <a href="#" class="nav-item" onclick="showSection('server-stats')">
32
- <i class="fas fa-server"></i>
33
- <span>Server</span>
34
- </a>
35
- <a href="#" class="nav-item" id="adminMenu" style="display: none;" onclick="showSection('management')">
36
- <i class="fas fa-users-cog"></i>
37
- <span>Admin</span>
38
- </a>
39
- </div>
40
- <div class="navbar-user">
41
- <div class="user-avatar" onclick="showSection('profile')">
42
- <i class="fas fa-user"></i>
43
- </div>
44
- <button class="btn-logout" onclick="logout()">
45
- <i class="fas fa-sign-out-alt"></i>
46
  </button>
47
- </div>
48
- </nav>
49
-
50
- <div class="mobile-header">
51
- <div class="mobile-header-content">
52
- <div class="mobile-header-left">
53
- <button class="hamburger-btn" onclick="toggleDrawer()">
54
- <i class="fas fa-bars"></i>
55
- </button>
56
- <div class="mobile-logo">
57
- <i class="fas fa-chart-line"></i>
58
- <span>DashX</span>
59
- </div>
60
- </div>
61
- <div class="mobile-avatar" onclick="showSection('profile')">
62
- <i class="fas fa-user"></i>
63
  </div>
64
  </div>
65
- </div>
66
-
67
- <div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
68
 
69
- <aside class="sidebar">
70
- <div class="sidebar-header">
71
- <div class="sidebar-logo">
72
- <i class="fas fa-chart-line"></i>
73
- <span>DashX API</span>
74
- </div>
75
- </div>
76
- <nav class="sidebar-nav">
77
- <div class="nav-section">
78
- <div class="nav-section-title">Dashboard</div>
79
- <a href="#" class="menu-item active" onclick="showSection('overview')">
80
- <i class="fas fa-tachometer-alt"></i>
81
- <span>Overview</span>
82
- </a>
83
- <a href="#" class="menu-item" onclick="showSection('api-stats')">
84
- <i class="fas fa-chart-bar"></i>
85
- <span>API Stats</span>
86
- </a>
87
- <a href="#" class="menu-item" onclick="showSection('server-stats')">
88
- <i class="fas fa-server"></i>
89
- <span>Server Stats</span>
90
- </a>
91
- </div>
92
- <div class="nav-section">
93
- <div class="nav-section-title">API Features</div>
94
- <a href="#" class="menu-item" onclick="showSection('plugins')">
95
- <i class="fas fa-plug"></i>
96
- <span>API Plugins</span>
97
- </a>
98
- </div>
99
- <div class="nav-section">
100
- <div class="nav-section-title">Account</div>
101
- <a href="#" class="menu-item" onclick="showSection('events')">
102
- <i class="fas fa-calendar"></i>
103
- <span>Events</span>
104
- </a>
105
- <a href="#" class="menu-item" onclick="showSection('settings')">
106
- <i class="fas fa-cog"></i>
107
- <span>Settings</span>
108
- </a>
109
- </div>
110
- <div class="nav-section" id="adminSection" style="display: none;">
111
- <div class="nav-section-title">Administration</div>
112
- <a href="#" class="menu-item" onclick="showSection('management')">
113
- <i class="fas fa-users-cog"></i>
114
- <span>User Management</span>
115
- </a>
116
- <a href="#" class="menu-item" onclick="showSection('redeem-create')">
117
- <i class="fas fa-gift"></i>
118
- <span>Create Redeem</span>
119
- </a>
120
- <a href="#" class="menu-item" onclick="showSection('role-assign')">
121
- <i class="fas fa-user-tag"></i>
122
- <span>Assign Role</span>
123
  </a>
124
- </div>
125
- </nav>
126
- <div class="sidebar-footer">
127
- <a href="#" class="menu-item" onclick="showSection('profile')">
128
- <i class="fas fa-user-circle"></i>
129
- <span>Profile</span>
130
- </a>
131
- <a href="#" class="menu-item logout-item" onclick="logout()">
132
- <i class="fas fa-sign-out-alt"></i>
133
- <span>Logout</span>
134
- </a>
135
- </div>
136
- </aside>
137
-
138
- <div class="sidebar-drawer" id="sidebarDrawer">
139
- <div class="drawer-header">
140
- <h3>Menu</h3>
141
- <button class="drawer-close" onclick="closeDrawer()">
142
- <i class="fas fa-times"></i>
143
- </button>
144
- </div>
145
- <div class="drawer-menu">
146
- <div class="drawer-section-title">Dashboard</div>
147
- <a href="#" class="drawer-menu-item active" onclick="showSection('overview')">
148
- <i class="fas fa-tachometer-alt"></i>
149
- <span>Overview</span>
150
- </a>
151
- <a href="#" class="drawer-menu-item" onclick="showSection('api-stats')">
152
- <i class="fas fa-chart-bar"></i>
153
- <span>API Stats</span>
154
- </a>
155
- <a href="#" class="drawer-menu-item" onclick="showSection('server-stats')">
156
- <i class="fas fa-server"></i>
157
- <span>Server Stats</span>
158
- </a>
159
-
160
- <div class="drawer-section-title">API Features</div>
161
- <a href="#" class="drawer-menu-item" onclick="showSection('plugins')">
162
- <i class="fas fa-plug"></i>
163
- <span>API Plugins</span>
164
- </a>
165
-
166
- <div class="drawer-section-title">Account</div>
167
- <a href="#" class="drawer-menu-item" onclick="showSection('events')">
168
- <i class="fas fa-calendar"></i>
169
- <span>Events</span>
170
- </a>
171
- <a href="#" class="drawer-menu-item" onclick="showSection('settings')">
172
- <i class="fas fa-cog"></i>
173
- <span>Settings</span>
174
- </a>
175
-
176
- <div class="drawer-section-title" id="drawerAdminTitle" style="display: none;">Administration</div>
177
- <div id="drawerAdminLinks" style="display: none;">
178
- <a href="#" class="drawer-menu-item" onclick="showSection('management')">
179
- <i class="fas fa-users-cog"></i>
180
- <span>User Management</span>
181
  </a>
182
- <a href="#" class="drawer-menu-item" onclick="showSection('redeem-create')">
183
- <i class="fas fa-gift"></i>
184
- <span>Create Redeem</span>
185
  </a>
186
- <a href="#" class="drawer-menu-item" onclick="showSection('role-assign')">
187
- <i class="fas fa-user-tag"></i>
188
- <span>Assign Role</span>
189
  </a>
190
- </div>
191
-
192
- <div class="drawer-footer">
193
- <a href="#" class="drawer-menu-item" onclick="showSection('profile')">
194
- <i class="fas fa-user-circle"></i>
195
- <span>Profile</span>
196
  </a>
197
- <a href="#" class="drawer-menu-item" onclick="logout()" style="color: #ff6b6b;">
198
- <i class="fas fa-sign-out-alt"></i>
199
- <span>Logout</span>
200
  </a>
 
 
 
 
 
201
  </div>
202
  </div>
203
- </div>
204
 
205
- <div class="dashboard-container">
206
- <main class="main-content">
207
- <section id="overview" class="section active">
208
  <h2><i class="fas fa-tachometer-alt"></i> Dashboard Overview</h2>
209
-
210
- <div class="stats-grid">
211
- <div class="stat-card gradient-purple">
212
  <div class="stat-icon">
213
- <i class="fas fa-key"></i>
214
  </div>
215
  <div class="stat-info">
 
216
  <div class="stat-label">API Key</div>
217
- <div class="stat-value" id="userApiKey">Loading...</div>
218
  </div>
219
  </div>
220
-
221
- <div class="stat-card gradient-blue">
222
  <div class="stat-icon">
223
- <i class="fas fa-exchange-alt"></i>
224
  </div>
225
  <div class="stat-info">
 
226
  <div class="stat-label">Total Requests</div>
227
- <div class="stat-value" id="userRequests">0</div>
228
  </div>
229
  </div>
230
-
231
- <div class="stat-card gradient-green">
232
  <div class="stat-icon">
233
- <i class="fas fa-calendar-day"></i>
234
  </div>
235
  <div class="stat-info">
 
236
  <div class="stat-label">Today's Requests</div>
237
- <div class="stat-value" id="userRequestsToday">0</div>
238
  </div>
239
  </div>
240
-
241
- <div class="stat-card gradient-orange">
242
  <div class="stat-icon">
243
- <i class="fas fa-chart-pie"></i>
244
  </div>
245
  <div class="stat-info">
 
246
  <div class="stat-label">Daily Limit</div>
247
- <div class="stat-value" id="userLimit">30</div>
248
  </div>
249
  </div>
250
-
251
- <div class="stat-card gradient-red">
252
  <div class="stat-icon">
253
- <i class="fas fa-hourglass-half"></i>
254
  </div>
255
  <div class="stat-info">
256
- <div class="stat-label">Remaining Today</div>
257
- <div class="stat-value" id="userLimitToday">30</div>
258
  </div>
259
  </div>
260
-
261
- <div class="stat-card gradient-teal">
262
- <div class="stat-icon">
263
- <i class="fas fa-clock"></i>
264
- </div>
265
- <div class="stat-info">
266
- <div class="stat-label">Reset In</div>
267
- <div class="stat-value reset-countdown">--:--:--</div>
268
- <div class="reset-progress-bar">
269
- <div class="reset-progress"></div>
270
- </div>
271
  </div>
272
  </div>
273
- </div>
274
 
275
- <div class="usage-overview glassmorphism">
276
- <h3><i class="fas fa-chart-area"></i> API Usage Analytics</h3>
277
- <div class="loading">
278
- <i class="fas fa-spinner fa-spin"></i> Loading usage statistics...
 
 
 
279
  </div>
280
- </div>
281
 
282
- <div class="quick-actions glassmorphism">
283
- <h3><i class="fas fa-bolt"></i> Quick Actions</h3>
284
- <div class="action-buttons">
285
- <button class="action-btn" onclick="showSection('plugins')">
286
- <i class="fas fa-plug"></i>
287
- <span>Browse Plugins</span>
288
- </button>
289
- <button class="action-btn" onclick="showSection('api-stats')">
290
- <i class="fas fa-chart-line"></i>
291
- <span>View Stats</span>
292
- </button>
293
- <button class="action-btn" onclick="showSection('settings')">
294
- <i class="fas fa-cog"></i>
295
- <span>Settings</span>
296
- </button>
297
- <button class="action-btn" onclick="regenerateApiKey()">
298
- <i class="fas fa-sync"></i>
299
- <span>Regenerate Key</span>
300
- </button>
301
  </div>
302
- </div>
303
- </section>
304
 
305
- <section id="api-stats" class="section">
306
- <h2><i class="fas fa-chart-bar"></i> Global API Statistics</h2>
307
-
308
- <div class="stats-grid">
309
- <div class="stat-card gradient-purple">
310
- <div class="stat-icon">
311
- <i class="fas fa-globe"></i>
312
  </div>
313
- <div class="stat-info">
314
- <div class="stat-label">Total API Requests</div>
315
- <div class="stat-value" id="globalTotalRequests">0</div>
316
  </div>
317
  </div>
318
-
319
- <div class="stat-card gradient-green">
320
- <div class="stat-icon">
321
- <i class="fas fa-calendar-check"></i>
322
- </div>
323
- <div class="stat-info">
324
- <div class="stat-label">Today's Requests</div>
325
- <div class="stat-value" id="globalTodayRequests">0</div>
 
 
326
  </div>
327
  </div>
 
328
 
329
- <div class="stat-card gradient-blue">
330
- <div class="stat-icon">
331
- <i class="fas fa-check-circle"></i>
332
- </div>
333
- <div class="stat-info">
334
- <div class="stat-label">Success Rate</div>
335
- <div class="stat-value" id="successRate">0%</div>
 
 
 
 
336
  </div>
337
  </div>
338
-
339
- <div class="stat-card gradient-red">
340
- <div class="stat-icon">
341
- <i class="fas fa-times-circle"></i>
342
- </div>
343
- <div class="stat-info">
344
- <div class="stat-label">Fail Rate</div>
345
- <div class="stat-value" id="failRate">0%</div>
 
 
 
346
  </div>
347
  </div>
348
  </div>
 
349
 
350
- <div class="charts-container">
351
- <div class="chart-card glassmorphism">
352
- <h3><i class="fas fa-trophy"></i> Top API Endpoints</h3>
353
- <div id="topEndpointsList" class="endpoints-list"></div>
354
- <canvas id="topEndpointsChart"></canvas>
355
- </div>
356
-
357
- <div class="chart-card glassmorphism">
358
- <h3><i class="fas fa-chart-pie"></i> Success vs Failed</h3>
359
- <canvas id="successFailChart"></canvas>
360
- </div>
361
 
362
- <div class="chart-card glassmorphism full-width">
363
- <h3><i class="fas fa-calendar-alt"></i> Daily Request Trends</h3>
364
- <canvas id="dailyRequestsChart"></canvas>
365
- </div>
 
 
 
 
366
 
367
- <div class="chart-card glassmorphism full-width">
368
- <h3><i class="fas fa-clock"></i> Hourly Activity</h3>
369
- <canvas id="hourlyTrendsChart"></canvas>
 
370
  </div>
371
  </div>
372
- </section>
373
 
374
- <section id="server-stats" class="section">
 
 
375
  <h2><i class="fas fa-server"></i> Server Statistics</h2>
376
-
377
- <div class="stats-grid">
378
- <div class="stat-card gradient-purple">
 
 
379
  <div class="stat-icon">
380
- <i class="fas fa-users"></i>
381
  </div>
382
  <div class="stat-info">
 
383
  <div class="stat-label">Total Users</div>
384
- <div class="stat-value" id="totalUsersCount">0</div>
385
  </div>
386
  </div>
387
-
388
- <div class="stat-card gradient-blue">
389
  <div class="stat-icon">
390
- <i class="fas fa-user"></i>
391
  </div>
392
  <div class="stat-info">
 
393
  <div class="stat-label">Regular Users</div>
394
- <div class="stat-value" id="regularUsersCount">0</div>
395
  </div>
396
  </div>
397
-
398
- <div class="stat-card gradient-gold">
399
  <div class="stat-icon">
400
- <i class="fas fa-crown"></i>
401
  </div>
402
  <div class="stat-info">
 
403
  <div class="stat-label">Premium Users</div>
404
- <div class="stat-value" id="premiumUsersCount">0</div>
405
  </div>
406
  </div>
407
-
408
- <div class="stat-card gradient-green">
409
- <div class="stat-icon">
410
- <i class="fas fa-database"></i>
411
- </div>
412
- <div class="stat-info">
413
- <div class="stat-label">Database Size</div>
414
- <div class="stat-value" id="dbSize">0 MB</div>
415
- </div>
416
- </div>
417
-
418
- <div class="stat-card gradient-orange">
419
- <div class="stat-icon">
420
- <i class="fas fa-memory"></i>
421
  </div>
422
- <div class="stat-info">
423
- <div class="stat-label">RAM Usage</div>
424
- <div class="stat-value" id="ramUsage">0 MB</div>
 
425
  </div>
426
- </div>
427
-
428
- <div class="stat-card gradient-red">
429
- <div class="stat-icon">
430
- <i class="fas fa-microchip"></i>
431
  </div>
432
- <div class="stat-info">
433
- <div class="stat-label">CPU Usage</div>
434
- <div class="stat-value" id="cpuUsage">0%</div>
 
435
  </div>
436
  </div>
437
  </div>
438
 
439
- <div class="role-distribution glassmorphism">
440
- <h3><i class="fas fa-users-cog"></i> User Role Distribution</h3>
441
- <div class="role-stats">
442
- <div class="role-stat">
443
- <div class="role-info">
444
- <span class="role-name">Cheap</span>
445
- <span class="role-count" id="cheapCount">0</span>
446
- </div>
447
- <div class="role-bar" style="--progress: 0%; --color: #ffa500;"></div>
448
  </div>
449
- <div class="role-stat">
450
- <div class="role-info">
451
- <span class="role-name">Premium</span>
452
- <span class="role-count" id="premiumCount">0</span>
453
- </div>
454
- <div class="role-bar" style="--progress: 0%; --color: #853030;"></div>
455
  </div>
456
- <div class="role-stat">
457
- <div class="role-info">
458
- <span class="role-name">VIP</span>
459
- <span class="role-count" id="vipCount">0</span>
460
- </div>
461
- <div class="role-bar" style="--progress: 0%; --color: #ffd700;"></div>
462
  </div>
463
- <div class="role-stat">
464
- <div class="role-info">
465
- <span class="role-name">Supreme</span>
466
- <span class="role-count" id="supremeCount">0</span>
467
- </div>
468
- <div class="role-bar" style="--progress: 0%; --color: #8a2be2;"></div>
469
  </div>
470
  </div>
471
- <div class="chart-container">
472
- <canvas id="roleChart"></canvas>
473
- </div>
474
  </div>
475
- </section>
476
 
477
- <section id="plugins" class="section">
478
- <h2><i class="fas fa-plug"></i> API Plugins Directory</h2>
479
-
480
- <div class="search-container">
481
- <i class="fas fa-search search-icon"></i>
482
- <input type="text" class="search-input" placeholder="Search plugins by name, description, or tags..." oninput="searchPlugins(this.value)">
483
- </div>
484
 
485
- <div class="plugins-grid" id="pluginsGrid">
486
- <div class="loading">
487
- <i class="fas fa-spinner fa-spin"></i> Loading API plugins...
488
- </div>
489
- </div>
490
- </section>
491
-
492
- <section id="management" class="section">
493
- <h2><i class="fas fa-users-cog"></i> User Management</h2>
494
-
495
- <div class="admin-stats-grid">
496
- <div class="stat-card gradient-purple">
497
  <div class="stat-icon">
498
- <i class="fas fa-users"></i>
499
  </div>
500
  <div class="stat-info">
501
- <div class="stat-label">Total Users</div>
502
- <div class="stat-value" id="adminTotalUsers">0</div>
503
  </div>
504
  </div>
505
-
506
- <div class="stat-card gradient-blue">
507
  <div class="stat-icon">
508
- <i class="fas fa-exchange-alt"></i>
509
  </div>
510
  <div class="stat-info">
511
- <div class="stat-label">Total Requests</div>
512
- <div class="stat-value" id="adminTotalRequests">0</div>
513
  </div>
514
  </div>
515
-
516
- <div class="stat-card gradient-green">
517
  <div class="stat-icon">
518
- <i class="fas fa-calendar-day"></i>
519
  </div>
520
  <div class="stat-info">
521
- <div class="stat-label">Today's Requests</div>
522
- <div class="stat-value" id="adminTodayRequests">0</div>
523
- </div>
524
- </div>
525
- </div>
526
-
527
- <div class="admin-card glassmorphism">
528
- <h3><i class="fas fa-users"></i> User List</h3>
529
- <div id="adminUsersList">
530
- <div class="loading">
531
- <i class="fas fa-spinner fa-spin"></i> Loading users...
532
  </div>
533
  </div>
534
- </div>
535
- </section>
536
-
537
- <section id="redeem-create" class="section">
538
- <h2><i class="fas fa-gift"></i> Create Redeem Code</h2>
539
-
540
- <div class="admin-card glassmorphism">
541
- <h3><i class="fas fa-plus-circle"></i> Generate New Code</h3>
542
- <div class="form-grid">
543
- <div class="form-group">
544
- <label>Code Type <span class="required">*</span></label>
545
- <select id="redeemType" class="form-control">
546
- <option value="">Select Type</option>
547
- <option value="premium">Premium Only</option>
548
- <option value="limit">Limit Only</option>
549
- <option value="both">Premium + Limit</option>
550
- </select>
551
- </div>
552
-
553
- <div class="form-group" id="limitContainer" style="display: none;">
554
- <label>Limit Value</label>
555
- <input type="number" id="limitValue" class="form-control" placeholder="Enter limit value" min="0">
556
- </div>
557
-
558
- <div class="form-group" id="codeExpiredContainer" style="display: none;">
559
- <label>Code Expires At <span class="required">*</span></label>
560
- <input type="datetime-local" id="codeExpired" class="form-control">
561
  </div>
562
-
563
- <div class="form-group" id="premiumExpiredContainer" style="display: none;">
564
- <label>Premium Expires At <span class="required">*</span></label>
565
- <input type="datetime-local" id="premiumExpired" class="form-control">
566
  </div>
567
  </div>
568
- <button class="btn btn-primary" onclick="createRedeemCode()">
569
- <i class="fas fa-magic"></i> Generate Code
570
- </button>
571
  </div>
572
- </section>
573
 
574
- <section id="role-assign" class="section">
575
- <h2><i class="fas fa-user-tag"></i> Assign User Role</h2>
576
-
577
- <div class="admin-card glassmorphism">
578
- <h3><i class="fas fa-search"></i> Search User</h3>
579
- <div class="form-group">
580
- <label>Search by Username or Email</label>
581
- <input type="text" id="searchUserInput" class="form-control" placeholder="Type to search..." oninput="searchUsersForRole(this.value)">
582
- <div id="userSearchResults" class="search-results"></div>
583
  </div>
584
 
585
- <div class="form-group">
586
- <label>Selected User</label>
587
- <input type="text" id="selectedUserDisplay" class="form-control" placeholder="No user selected" readonly>
588
- <input type="hidden" id="selectedUserId">
589
- </div>
590
-
591
- <div class="form-group">
592
- <label>Role Type <span class="required">*</span></label>
593
- <select id="assignRoleType" class="form-control">
594
- <option value="">Select Role</option>
595
- <option value="cheap">Cheap</option>
596
- <option value="premium">Premium</option>
597
- <option value="vip">VIP</option>
598
- <option value="supreme">Supreme</option>
599
- </select>
600
  </div>
 
601
 
602
- <div class="form-group">
603
- <label>Custom API Key (Optional)</label>
604
- <input type="text" id="customApiKey" class="form-control" placeholder="Leave empty for auto-generate">
605
- </div>
606
 
607
- <button class="btn btn-primary" onclick="assignUserRole()">
608
- <i class="fas fa-user-check"></i> Assign Role
609
- </button>
610
  </div>
611
- </section>
612
 
613
- <section id="events" class="section">
614
- <h2><i class="fas fa-calendar"></i> Events & Activity</h2>
615
- <div class="admin-card glassmorphism">
616
- <div class="empty-state">
617
- <i class="fas fa-calendar-times"></i>
618
- <h3>No Events</h3>
619
- <p>Event management features coming soon</p>
620
  </div>
621
  </div>
622
- </section>
623
-
624
- <section id="settings" class="section">
625
- <h2><i class="fas fa-cog"></i> Account Settings</h2>
626
-
627
- <div class="setting-card glassmorphism">
628
- <h3><i class="fas fa-ticket-alt"></i> Redeem Code</h3>
629
- <p class="setting-description">Enter a redeem code to unlock premium features or increase your API limit</p>
630
- <div class="form-group">
631
- <label>Redeem Code</label>
632
- <input type="text" id="redeemCode" class="form-control" placeholder="Enter code (e.g., DHX-XXXXX)">
633
- </div>
634
- <button class="btn btn-primary" onclick="redeemCode()">
635
- <i class="fas fa-gift"></i> Redeem Code
636
- </button>
637
- </div>
638
 
639
- <div class="setting-card glassmorphism">
640
- <h3><i class="fas fa-user-edit"></i> Update Profile</h3>
641
- <p class="setting-description">Change your account username</p>
642
- <div class="form-group">
643
- <label>New Username</label>
644
- <input type="text" id="usernameInput" class="form-control" placeholder="Enter new username">
 
 
 
 
 
 
645
  </div>
646
- <button class="btn btn-primary" onclick="updateProfile()">
647
- <i class="fas fa-save"></i> Update Username
648
- </button>
649
  </div>
 
650
 
651
- <div class="setting-card glassmorphism" id="premiumSettings" style="display: none;">
652
- <h3><i class="fas fa-crown"></i> Premium Settings</h3>
653
- <p class="setting-description">Additional settings for premium users</p>
654
- <div class="premium-badge-large">
655
- <i class="fas fa-gem"></i>
656
- <span>Premium Member</span>
 
 
 
 
 
 
657
  </div>
658
- </div>
659
 
660
- <div class="setting-card glassmorphism">
661
- <h3><i class="fas fa-key"></i> API Key Management</h3>
662
- <p class="setting-description">Manage your API authentication key</p>
663
- <div class="api-key-display">
664
- <span class="key-label">Current API Key:</span>
665
- <code id="settingsApiKey">Loading...</code>
666
- <button class="btn-copy" onclick="copyToClipboard(document.getElementById('settingsApiKey').textContent)">
667
- <i class="fas fa-copy"></i>
668
  </button>
 
669
  </div>
670
- <button class="btn btn-secondary" onclick="regenerateApiKey()">
671
- <i class="fas fa-sync-alt"></i> Regenerate API Key
672
- </button>
673
- </div>
674
 
675
- <div class="setting-card glassmorphism danger-zone">
676
- <h3><i class="fas fa-exclamation-triangle"></i> Danger Zone</h3>
677
- <p class="setting-description">Irreversible actions - proceed with caution</p>
678
- <button class="btn btn-danger" onclick="deleteAccount()">
679
- <i class="fas fa-trash-alt"></i> Delete Account Permanently
680
- </button>
 
681
  </div>
682
- </section>
683
-
684
- <section id="profile" class="section">
685
- <h2><i class="fas fa-user-circle"></i> My Profile</h2>
686
-
687
- <div class="profile-container">
688
- <div class="profile-card glassmorphism">
689
- <div class="profile-header">
690
- <div class="profile-avatar-large">
691
- <i class="fas fa-user"></i>
692
- </div>
693
- <div class="profile-info">
694
- <h3 id="profileUsername">Loading...</h3>
695
- <p id="profileEmail">Loading...</p>
696
- <span class="profile-role" id="profileRoleBadge">User</span>
697
  </div>
698
  </div>
699
-
700
- <div class="profile-details">
701
- <div class="detail-item">
702
- <div class="detail-label">
703
- <i class="fas fa-key"></i>
704
- <span>API Key</span>
705
- </div>
706
- <div class="detail-value">
707
- <code id="profileApiKey">Loading...</code>
708
- <button class="btn-copy-small" onclick="copyToClipboard(document.getElementById('profileApiKey').textContent)">
709
- <i class="fas fa-copy"></i>
710
- </button>
711
- </div>
712
  </div>
713
-
714
- <div class="detail-item">
715
- <div class="detail-label">
716
- <i class="fas fa-chart-line"></i>
717
- <span>Total Requests</span>
718
- </div>
719
- <div class="detail-value" id="profileTotalRequests">0</div>
720
  </div>
721
-
722
- <div class="detail-item">
723
- <div class="detail-label">
724
- <i class="fas fa-calendar-day"></i>
725
- <span>Today's Usage</span>
726
- </div>
727
- <div class="detail-value" id="profileTodayRequests">0 / 30</div>
 
728
  </div>
729
-
730
- <div class="detail-item">
731
- <div class="detail-label">
732
- <i class="fas fa-crown"></i>
733
- <span>Account Type</span>
734
- </div>
735
- <div class="detail-value" id="profileAccountType">Free</div>
736
  </div>
737
-
738
- <div class="detail-item">
739
- <div class="detail-label">
740
- <i class="fas fa-calendar-check"></i>
741
- <span>Member Since</span>
742
- </div>
743
- <div class="detail-value" id="profileCreatedAt">Loading...</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
744
  </div>
745
  </div>
 
 
 
746
  </div>
747
-
748
- <div class="profile-actions glassmorphism">
749
- <h3><i class="fas fa-bolt"></i> Quick Actions</h3>
750
- <div class="action-list">
751
- <button class="action-item" onclick="showSection('settings')">
752
- <i class="fas fa-cog"></i>
753
- <div>
754
- <strong>Account Settings</strong>
755
- <small>Update profile and preferences</small>
756
- </div>
757
- </button>
758
- <button class="action-item" onclick="showSection('plugins')">
759
- <i class="fas fa-plug"></i>
760
- <div>
761
- <strong>Browse Plugins</strong>
762
- <small>Explore available API endpoints</small>
763
- </div>
764
- </button>
765
- <button class="action-item" onclick="regenerateApiKey()">
766
- <i class="fas fa-sync-alt"></i>
767
- <div>
768
- <strong>Regenerate API Key</strong>
769
- <small>Get a new authentication key</small>
770
- </div>
771
- </button>
772
- <button class="action-item danger" onclick="logout()">
773
- <i class="fas fa-sign-out-alt"></i>
774
- <div>
775
- <strong>Logout</strong>
776
- <small>Sign out of your account</small>
777
- </div>
778
- </button>
779
  </div>
780
  </div>
781
  </div>
782
- </section>
783
- </main>
784
  </div>
785
 
786
- <div class="toast-container" id="toastContainer"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
787
 
788
- <script src="script.js"></script>
 
 
789
  </body>
790
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DashX - Modern API Dashboard</title>
7
+ <meta name="description" content="DashX is a modern REST API dashboard platform that allows you to manage, monitor, and utilize various API tools with ease. Fully featured for developers with an intuitive interface and powerful analytics.">
8
+ <meta name="keywords" content="API Dashboard, REST API, DashX, API Management, Developer Tools, API Analytics">
9
+ <meta name="author" content="DashX Team">
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
11
+ <link rel="icon" type="image/webp" href="/icon.webp">
12
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.css" rel="stylesheet">
13
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
14
+ <link href="styles.css" rel="stylesheet">
15
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
16
+ <style>
17
+ i.fas, i.fa, i.far, i.fab, i.fal,
18
+ .fas, .fa, .far, .fab, .fal,
19
+ i[class*="fa-"] {
20
+ font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
21
+ font-weight: 900 !important;
22
+ font-style: normal !important;
23
+ font-variant: normal !important;
24
+ text-rendering: auto !important;
25
+ line-height: 1 !important;
26
+ -webkit-font-smoothing: antialiased !important;
27
+ -moz-osx-font-smoothing: grayscale !important;
28
+ display: inline-block !important;
29
+ }
30
+
31
+ .stat-item {
32
+ text-align: center;
33
+ padding: 1.5rem;
34
+ background: rgba(255, 255, 255, 0.05);
35
+ border-radius: 12px;
36
+ border: 1px solid rgba(255, 255, 255, 0.1);
37
+ }
38
+
39
+ .stat-item .stat-value {
40
+ display: block;
41
+ font-size: 1.8rem;
42
+ font-weight: 700;
43
+ color: rgba(133, 48, 48, 0.9);
44
+ margin-bottom: 0.5rem;
45
+ }
46
+
47
+ .stat-item .stat-label {
48
+ display: block;
49
+ font-size: 0.9rem;
50
+ color: rgba(255, 255, 255, 0.7);
51
+ }
52
+
53
+ .stat-icon {
54
+ font-size: 3rem !important;
55
+ color: rgba(255, 168, 168, 0.9) !important;
56
+ min-width: 80px !important;
57
+ text-align: center !important;
58
+ display: flex !important;
59
+ align-items: center !important;
60
+ justify-content: center !important;
61
+ }
62
+
63
+ .stat-icon i {
64
+ font-size: 3rem !important;
65
+ display: block !important;
66
+ }
67
+
68
+ .stat-info {
69
+ flex: 1;
70
+ }
71
+
72
+ .stat-number {
73
+ font-size: 2rem;
74
+ font-weight: 700;
75
+ color: rgba(255, 255, 255, 0.9);
76
+ margin-bottom: 0.25rem;
77
+ word-break: break-all;
78
+ }
79
+
80
+ .stat-label {
81
+ font-size: 0.9rem;
82
+ color: rgba(255, 255, 255, 0.7);
83
+ }
84
+
85
+ .section h2 i {
86
+ color: #e74c3c !important;
87
+ }
88
+
89
+ .navbar {
90
+ background: rgba(44, 62, 80, 0.95) !important;
91
+ backdrop-filter: blur(10px);
92
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
93
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
94
+ }
95
+
96
+ .navbar-brand {
97
+ font-size: 1.5rem;
98
+ font-weight: 700;
99
+ color: #fff !important;
100
+ }
101
+
102
+ .navbar-brand i {
103
+ color: #e74c3c;
104
+ font-size: 1.8rem;
105
+ margin-right: 0.5rem;
106
+ }
107
+
108
+ .nav-link {
109
+ color: #ecf0f1 !important;
110
+ font-weight: 500;
111
+ transition: all 0.3s ease;
112
+ padding: 0.5rem 1rem !important;
113
+ border-radius: 8px;
114
+ margin: 0 0.25rem;
115
+ }
116
+
117
+ .nav-link:hover {
118
+ background: rgba(255, 255, 255, 0.1);
119
+ transform: translateY(-1px);
120
+ }
121
+
122
+ .nav-link.text-danger {
123
+ color: #e74c3c !important;
124
+ }
125
+
126
+ .nav-link.text-danger:hover {
127
+ background: rgba(231, 76, 60, 0.1);
128
+ color: #ff6b6b !important;
129
+ }
130
+
131
+ .glassmorphism {
132
+ background: rgba(255, 255, 255, 0.1);
133
+ backdrop-filter: blur(10px);
134
+ -webkit-backdrop-filter: blur(10px);
135
+ border: 1px solid rgba(255, 255, 255, 0.2);
136
+ border-radius: 16px;
137
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
138
+ }
139
+
140
+ .reset-timer-card {
141
+ margin-top: 2rem;
142
+ padding: 1.5rem;
143
+ border-radius: 12px;
144
+ background: rgba(255, 255, 255, 0.05);
145
+ backdrop-filter: blur(10px);
146
+ border: 1px solid rgba(255, 255, 255, 0.1);
147
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
148
+ }
149
+
150
+ .timer-header {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 1rem;
154
+ margin-bottom: 1rem;
155
+ }
156
+
157
+ .timer-header i {
158
+ font-size: 1.5rem;
159
+ color: #853030;
160
+ }
161
+
162
+ .timer-header h3 {
163
+ margin: 0;
164
+ font-size: 1.2rem;
165
+ color: rgba(255, 255, 255, 0.9);
166
+ }
167
+
168
+ .timer-header p {
169
+ margin: 0;
170
+ opacity: 0.7;
171
+ font-size: 0.9rem;
172
+ }
173
+
174
+ .countdown-display {
175
+ text-align: center;
176
+ padding: 2rem 1rem;
177
+ }
178
+
179
+ .countdown-time {
180
+ font-size: 3rem;
181
+ font-weight: bold;
182
+ color: #853030;
183
+ font-family: 'Courier New', monospace;
184
+ letter-spacing: 0.1em;
185
+ text-shadow: 0 0 20px rgba(133, 48, 48, 0.3);
186
+ }
187
+
188
+ .countdown-label {
189
+ margin-top: 0.5rem;
190
+ opacity: 0.6;
191
+ font-size: 0.9rem;
192
+ color: rgba(255, 255, 255, 0.8);
193
+ }
194
+
195
+ .reset-progress-container {
196
+ width: 100%;
197
+ height: 8px;
198
+ background: rgba(255, 255, 255, 0.1);
199
+ border-radius: 4px;
200
+ overflow: hidden;
201
+ margin-top: 1rem;
202
+ }
203
+
204
+ .reset-progress {
205
+ height: 100%;
206
+ background: linear-gradient(90deg, #853030, #ff6b6b);
207
+ transition: width 1s linear;
208
+ width: 0%;
209
+ box-shadow: 0 0 10px rgba(133, 48, 48, 0.5);
210
+ }
211
+
212
+ .reset-info {
213
+ margin-top: 1rem;
214
+ padding: 1rem;
215
+ background: rgba(255, 255, 255, 0.05);
216
+ border-radius: 8px;
217
+ display: flex;
218
+ justify-content: space-between;
219
+ align-items: center;
220
+ }
221
+
222
+ .reset-info i {
223
+ color: #853030;
224
+ margin-right: 0.5rem;
225
+ }
226
+
227
+ .reset-info span {
228
+ font-size: 0.9rem;
229
+ color: rgba(255, 255, 255, 0.8);
230
+ }
231
+
232
+ .reset-info div:last-child {
233
+ font-weight: bold;
234
+ color: #853030;
235
+ }
236
+
237
+ @keyframes pulse {
238
+ 0%, 100% { opacity: 1; }
239
+ 50% { opacity: 0.7; }
240
+ }
241
+
242
+ .reset-countdown {
243
+ animation: pulse 2s ease-in-out infinite;
244
+ }
245
+
246
+ .usage-overview {
247
+ display: grid;
248
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
249
+ gap: 1.5rem;
250
+ margin-top: 1rem;
251
+ }
252
+
253
+ .usage-section {
254
+ background: rgba(255, 255, 255, 0.05);
255
+ backdrop-filter: blur(10px);
256
+ -webkit-backdrop-filter: blur(10px);
257
+ border: 1px solid rgba(255, 255, 255, 0.1);
258
+ padding: 1.5rem;
259
+ border-radius: 16px;
260
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
261
+ transition: all 0.3s ease;
262
+ }
263
+
264
+ .usage-section:hover {
265
+ background: rgba(255, 255, 255, 0.08);
266
+ transform: translateY(-2px);
267
+ box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
268
+ }
269
+
270
+ .usage-section h4 {
271
+ margin-bottom: 1rem;
272
+ color: rgba(255, 255, 255, 0.9);
273
+ font-size: 1.1rem;
274
+ font-weight: 600;
275
+ display: flex;
276
+ align-items: center;
277
+ gap: 0.5rem;
278
+ }
279
+
280
+ .usage-section h4 i {
281
+ color: rgba(133, 48, 48, 0.8);
282
+ }
283
+
284
+ .endpoint-list, .ip-list {
285
+ display: flex;
286
+ flex-direction: column;
287
+ gap: 0.5rem;
288
+ }
289
+
290
+ .endpoint-item, .ip-item {
291
+ display: flex;
292
+ justify-content: space-between;
293
+ align-items: center;
294
+ padding: 0.75rem;
295
+ background: rgba(255, 255, 255, 0.08);
296
+ backdrop-filter: blur(5px);
297
+ border-radius: 8px;
298
+ border: 1px solid rgba(255, 255, 255, 0.1);
299
+ transition: all 0.3s ease;
300
+ }
301
+
302
+ .endpoint-item:hover, .ip-item:hover {
303
+ background: rgba(255, 255, 255, 0.12);
304
+ transform: translateX(4px);
305
+ }
306
+
307
+ .endpoint-name, .ip-address {
308
+ font-family: 'Courier New', monospace;
309
+ font-weight: 500;
310
+ color: rgba(255, 255, 255, 0.8);
311
+ font-size: 0.9rem;
312
+ }
313
+
314
+ .endpoint-count, .ip-count {
315
+ color: rgba(133, 48, 48, 0.9);
316
+ font-weight: 600;
317
+ background: rgba(133, 48, 48, 0.1);
318
+ padding: 0.25rem 0.5rem;
319
+ border-radius: 12px;
320
+ font-size: 0.8rem;
321
+ }
322
+
323
+ .ip-time {
324
+ font-size: 0.75rem;
325
+ color: rgba(255, 255, 255, 0.6);
326
+ font-style: italic;
327
+ }
328
+
329
+ .daily-usage {
330
+ display: flex;
331
+ flex-direction: column;
332
+ gap: 0.75rem;
333
+ }
334
+
335
+ .usage-day {
336
+ display: grid;
337
+ grid-template-columns: 70px 1fr 50px;
338
+ align-items: center;
339
+ gap: 1rem;
340
+ padding: 0.5rem;
341
+ border-radius: 8px;
342
+ transition: all 0.3s ease;
343
+ }
344
+
345
+ .usage-day:hover {
346
+ background: rgba(255, 255, 255, 0.05);
347
+ }
348
+
349
+ .usage-date {
350
+ font-size: 0.85rem;
351
+ font-weight: 500;
352
+ color: rgba(255, 255, 255, 0.8);
353
+ }
354
+
355
+ .usage-bar-container {
356
+ background: rgba(255, 255, 255, 0.1);
357
+ border-radius: 10px;
358
+ height: 8px;
359
+ overflow: hidden;
360
+ position: relative;
361
+ }
362
+
363
+ .usage-bar {
364
+ height: 100%;
365
+ background: linear-gradient(90deg, rgba(133, 48, 48, 0.8), rgba(166, 69, 69, 0.9));
366
+ border-radius: 10px;
367
+ transition: width 0.6s ease;
368
+ position: relative;
369
+ }
370
+
371
+ .usage-bar::after {
372
+ content: '';
373
+ position: absolute;
374
+ top: 0;
375
+ left: 0;
376
+ right: 0;
377
+ bottom: 0;
378
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
379
+ animation: shimmer 2s infinite;
380
+ }
381
+
382
+ @keyframes shimmer {
383
+ 0% { transform: translateX(-100%); }
384
+ 100% { transform: translateX(100%); }
385
+ }
386
+
387
+ .usage-count {
388
+ font-size: 0.85rem;
389
+ font-weight: 600;
390
+ color: rgba(133, 48, 48, 0.9);
391
+ text-align: center;
392
+ }
393
+
394
+ .no-data {
395
+ text-align: center;
396
+ padding: 2rem;
397
+ color: rgba(255, 255, 255, 0.5);
398
+ font-style: italic;
399
+ }
400
+
401
+ .no-data-state, .error-state {
402
+ text-align: center;
403
+ padding: 3rem 2rem;
404
+ color: rgba(255, 255, 255, 0.6);
405
+ }
406
+
407
+ .error-state i {
408
+ color: #ff6b6b;
409
+ font-size: 2.5rem;
410
+ margin-bottom: 1rem;
411
+ }
412
+
413
+ .search-container {
414
+ margin-bottom: 2rem;
415
+ position: relative;
416
+ }
417
+
418
+ .search-input {
419
+ width: 100%;
420
+ padding: 1rem 1rem 1rem 3rem;
421
+ border: 1px solid rgba(255, 255, 255, 0.2);
422
+ border-radius: 16px;
423
+ background: rgba(255, 255, 255, 0.05);
424
+ backdrop-filter: blur(10px);
425
+ font-size: 1rem;
426
+ transition: all 0.3s ease;
427
+ color: rgba(255, 255, 255, 0.9);
428
+ }
429
+
430
+ .search-input::placeholder {
431
+ color: rgba(255, 255, 255, 0.5);
432
+ }
433
+
434
+ .search-input:focus {
435
+ outline: none;
436
+ border-color: rgba(133, 48, 48, 0.8);
437
+ background: rgba(255, 255, 255, 0.08);
438
+ box-shadow: 0 0 0 3px rgba(133, 48, 48, 0.1);
439
+ }
440
+
441
+ .search-icon {
442
+ position: absolute;
443
+ left: 1rem;
444
+ top: 50%;
445
+ transform: translateY(-50%);
446
+ color: rgba(133, 48, 48, 0.8);
447
+ font-size: 1.2rem;
448
+ }
449
+
450
+ .plugin-card {
451
+ background: rgba(255, 255, 255, 0.05);
452
+ backdrop-filter: blur(10px);
453
+ -webkit-backdrop-filter: blur(10px);
454
+ border: 1px solid rgba(255, 255, 255, 0.1);
455
+ border-radius: 16px;
456
+ overflow: hidden;
457
+ transition: all 0.3s ease;
458
+ margin-bottom: 1rem;
459
+ }
460
+
461
+ .plugin-card:hover {
462
+ background: rgba(255, 255, 255, 0.08);
463
+ transform: translateY(-2px);
464
+ box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
465
+ }
466
+
467
+ .plugin-info {
468
+ margin-top: 0.5rem;
469
+ font-size: 0.85rem;
470
+ }
471
+
472
+ .limit-info {
473
+ background: rgba(133, 48, 48, 0.1);
474
+ color: #853030;
475
+ padding: 0.25rem 0.5rem;
476
+ border-radius: 4px;
477
+ font-weight: 500;
478
+ }
479
+
480
+ .user-item {
481
+ background: rgba(255, 255, 255, 0.05);
482
+ backdrop-filter: blur(10px);
483
+ -webkit-backdrop-filter: blur(10px);
484
+ border: 1px solid rgba(255, 255, 255, 0.1);
485
+ padding: 1.5rem;
486
+ border-radius: 16px;
487
+ margin-bottom: 1rem;
488
+ display: flex;
489
+ justify-content: space-between;
490
+ align-items: flex-start;
491
+ transition: all 0.3s ease;
492
+ }
493
+
494
+ .user-item:hover {
495
+ background: rgba(255, 255, 255, 0.08);
496
+ transform: translateY(-2px);
497
+ box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
498
+ }
499
+
500
+ .user-item.temp-banned {
501
+ border-left: 4px solid rgba(255, 193, 7, 0.8);
502
+ background: rgba(255, 193, 7, 0.05);
503
+ }
504
+
505
+ .user-item.banned {
506
+ border-left: 4px solid rgba(220, 53, 69, 0.8);
507
+ background: rgba(220, 53, 69, 0.05);
508
+ }
509
+
510
+ .user-info {
511
+ flex: 1;
512
+ }
513
+
514
+ .user-name {
515
+ font-size: 1.2rem;
516
+ font-weight: 600;
517
+ color: rgba(255, 255, 255, 0.9);
518
+ margin-bottom: 0.5rem;
519
+ }
520
+
521
+ .user-details {
522
+ display: flex;
523
+ flex-wrap: wrap;
524
+ gap: 0.75rem;
525
+ margin-bottom: 0.75rem;
526
+ }
527
+
528
+ .user-email {
529
+ color: rgba(255, 255, 255, 0.7);
530
+ font-size: 0.9rem;
531
+ }
532
+
533
+ .user-role {
534
+ background: rgba(255, 255, 255, 0.1);
535
+ backdrop-filter: blur(5px);
536
+ color: rgba(255, 255, 255, 0.8);
537
+ padding: 0.25rem 0.75rem;
538
+ border-radius: 12px;
539
+ font-size: 0.8rem;
540
+ font-weight: 500;
541
+ border: 1px solid rgba(255, 255, 255, 0.1);
542
+ }
543
+
544
+ .premium-badge {
545
+ background: linear-gradient(45deg, rgba(255, 215, 0, 0.3), rgba(255, 237, 78, 0.3));
546
+ backdrop-filter: blur(5px);
547
+ color: rgba(255, 215, 0, 1);
548
+ padding: 0.25rem 0.75rem;
549
+ border-radius: 12px;
550
+ font-size: 0.8rem;
551
+ font-weight: 600;
552
+ border: 1px solid rgba(255, 215, 0, 0.3);
553
+ box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
554
+ }
555
+
556
+ .user-stats {
557
+ display: flex;
558
+ flex-wrap: wrap;
559
+ gap: 1rem;
560
+ font-size: 0.85rem;
561
+ color: rgba(255, 255, 255, 0.7);
562
+ margin-bottom: 0.75rem;
563
+ }
564
+
565
+ .ban-info {
566
+ background: rgba(255, 193, 7, 0.1);
567
+ backdrop-filter: blur(5px);
568
+ border: 1px solid rgba(255, 193, 7, 0.3);
569
+ padding: 0.75rem;
570
+ border-radius: 8px;
571
+ font-size: 0.85rem;
572
+ color: rgba(255, 193, 7, 0.9);
573
+ margin-top: 0.5rem;
574
+ }
575
+
576
+ .user-actions {
577
+ display: flex;
578
+ gap: 0.5rem;
579
+ flex-wrap: wrap;
580
+ }
581
+
582
+ .pagination-controls {
583
+ display: flex;
584
+ justify-content: space-between;
585
+ align-items: center;
586
+ padding: 1rem;
587
+ margin-top: 1rem;
588
+ background: rgba(255, 255, 255, 0.05);
589
+ backdrop-filter: blur(10px);
590
+ border-radius: 12px;
591
+ border: 1px solid rgba(255, 255, 255, 0.1);
592
+ }
593
+
594
+ .page-info {
595
+ color: rgba(255, 255, 255, 0.8);
596
+ font-weight: 500;
597
+ }
598
+
599
+ .users-pagination-info {
600
+ color: rgba(255, 255, 255, 0.6);
601
+ font-size: 0.9rem;
602
+ margin-bottom: 1rem;
603
+ text-align: center;
604
+ padding: 0.5rem;
605
+ background: rgba(255, 255, 255, 0.05);
606
+ border-radius: 8px;
607
+ backdrop-filter: blur(5px);
608
+ }
609
+
610
+ .btn {
611
+ padding: 0.5rem 1rem;
612
+ border: none;
613
+ border-radius: 8px;
614
+ font-weight: 500;
615
+ cursor: pointer;
616
+ transition: all 0.3s ease;
617
+ text-decoration: none;
618
+ display: inline-flex;
619
+ align-items: center;
620
+ gap: 0.5rem;
621
+ font-size: 0.9rem;
622
+ backdrop-filter: blur(10px);
623
+ border: 1px solid rgba(255, 255, 255, 0.1);
624
+ }
625
+
626
+ .btn:disabled {
627
+ opacity: 0.5;
628
+ cursor: not-allowed;
629
+ transform: none !important;
630
+ }
631
+
632
+ .btn-primary {
633
+ background: rgba(133, 48, 48, 0.8);
634
+ color: white;
635
+ border: 1px solid rgba(133, 48, 48, 0.3);
636
+ }
637
+
638
+ .btn-primary:hover:not(:disabled) {
639
+ background: rgba(133, 48, 48, 1);
640
+ transform: translateY(-1px);
641
+ box-shadow: 0 4px 12px rgba(133, 48, 48, 0.3);
642
+ }
643
+
644
+ .btn-secondary {
645
+ background: rgba(108, 117, 125, 0.8);
646
+ color: white;
647
+ border: 1px solid rgba(108, 117, 125, 0.3);
648
+ }
649
+
650
+ .btn-secondary:hover:not(:disabled) {
651
+ background: rgba(108, 117, 125, 1);
652
+ transform: translateY(-1px);
653
+ }
654
+
655
+ .btn-warning {
656
+ background: rgba(255, 193, 7, 0.8);
657
+ color: rgba(133, 100, 4, 1);
658
+ border: 1px solid rgba(255, 193, 7, 0.3);
659
+ }
660
+
661
+ .btn-warning:hover:not(:disabled) {
662
+ background: rgba(255, 193, 7, 1);
663
+ transform: translateY(-1px);
664
+ box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
665
+ }
666
+
667
+ .btn-success {
668
+ background: rgba(40, 167, 69, 0.8);
669
+ color: white;
670
+ border: 1px solid rgba(40, 167, 69, 0.3);
671
+ }
672
+
673
+ .btn-success:hover:not(:disabled) {
674
+ background: rgba(40, 167, 69, 1);
675
+ transform: translateY(-1px);
676
+ box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
677
+ }
678
+
679
+ .btn-danger {
680
+ background: rgba(220, 53, 69, 0.8);
681
+ color: white;
682
+ border: 1px solid rgba(220, 53, 69, 0.3);
683
+ }
684
+
685
+ .btn-danger:hover:not(:disabled) {
686
+ background: rgba(220, 53, 69, 1);
687
+ transform: translateY(-1px);
688
+ box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
689
+ }
690
+
691
+ .no-users-state {
692
+ text-align: center;
693
+ padding: 3rem;
694
+ color: rgba(255, 255, 255, 0.6);
695
+ }
696
+
697
+ .admin-card {
698
+ background: rgba(255, 255, 255, 0.05);
699
+ backdrop-filter: blur(10px);
700
+ -webkit-backdrop-filter: blur(10px);
701
+ border: 1px solid rgba(255, 255, 255, 0.1);
702
+ border-radius: 16px;
703
+ padding: 2rem;
704
+ margin-bottom: 2rem;
705
+ transition: all 0.3s ease;
706
+ }
707
+
708
+ .admin-card:hover {
709
+ background: rgba(255, 255, 255, 0.08);
710
+ transform: translateY(-2px);
711
+ box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
712
+ }
713
+
714
+ .admin-card h3 {
715
+ color: rgba(255, 255, 255, 0.9);
716
+ margin-bottom: 1.5rem;
717
+ display: flex;
718
+ align-items: center;
719
+ gap: 0.5rem;
720
+ }
721
+
722
+ .admin-card h3 i {
723
+ color: rgba(133, 48, 48, 0.8);
724
+ }
725
+
726
+ .stats-cards {
727
+ display: grid;
728
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
729
+ gap: 1.5rem;
730
+ margin-bottom: 2rem;
731
+ }
732
+
733
+ .stat-card {
734
+ background: rgba(255, 255, 255, 0.05);
735
+ backdrop-filter: blur(10px);
736
+ -webkit-backdrop-filter: blur(10px);
737
+ border: 1px solid rgba(255, 255, 255, 0.1);
738
+ padding: 2rem;
739
+ border-radius: 16px;
740
+ display: flex;
741
+ align-items: center;
742
+ gap: 1rem;
743
+ transition: all 0.3s ease;
744
+ }
745
+
746
+ .stat-card:hover {
747
+ background: rgba(255, 255, 255, 0.08);
748
+ transform: translateY(-3px);
749
+ box-shadow: 0 15px 50px 0 rgba(31, 38, 135, 0.4);
750
+ }
751
+
752
+ .form-row {
753
+ display: grid;
754
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
755
+ gap: 1rem;
756
+ margin-bottom: 1.5rem;
757
+ }
758
+
759
+ .form-group {
760
+ display: flex;
761
+ flex-direction: column;
762
+ }
763
+
764
+ .form-group label {
765
+ color: rgba(255, 255, 255, 0.9);
766
+ margin-bottom: 0.5rem;
767
+ font-weight: 500;
768
+ font-size: 0.9rem;
769
+ }
770
+
771
+ .form-group .required {
772
+ color: #ff6b6b;
773
+ margin-left: 0.25rem;
774
+ }
775
+
776
+ .form-group input,
777
+ .form-group select {
778
+ padding: 0.75rem;
779
+ border: 1px solid rgba(255, 255, 255, 0.2);
780
+ border-radius: 8px;
781
+ background: rgba(255, 255, 255, 0.05);
782
+ color: rgba(255, 255, 255, 0.9);
783
+ font-size: 0.95rem;
784
+ transition: all 0.3s ease;
785
+ }
786
+
787
+ .form-group input:focus,
788
+ .form-group select:focus {
789
+ outline: none;
790
+ border-color: rgba(133, 48, 48, 0.8);
791
+ background: rgba(255, 255, 255, 0.08);
792
+ box-shadow: 0 0 0 3px rgba(133, 48, 48, 0.1);
793
+ }
794
+
795
+ .form-group input::placeholder {
796
+ color: rgba(255, 255, 255, 0.4);
797
+ }
798
+
799
+ .form-group small {
800
+ color: rgba(255, 255, 255, 0.5);
801
+ font-size: 0.8rem;
802
+ margin-top: 0.25rem;
803
+ }
804
+
805
+ @media (max-width: 768px) {
806
+ .countdown-time {
807
+ font-size: 2rem;
808
+ }
809
+
810
+ .reset-timer-card {
811
+ padding: 1rem;
812
+ }
813
+
814
+ .usage-overview {
815
+ grid-template-columns: 1fr;
816
+ }
817
+
818
+ .usage-day {
819
+ grid-template-columns: 60px 1fr 40px;
820
+ gap: 0.5rem;
821
+ }
822
+
823
+ .user-item {
824
+ flex-direction: column;
825
+ gap: 1rem;
826
+ }
827
+
828
+ .user-actions {
829
+ width: 100%;
830
+ justify-content: flex-end;
831
+ }
832
+
833
+ .pagination-controls {
834
+ flex-direction: column;
835
+ gap: 1rem;
836
+ }
837
+
838
+ .dashboard-container {
839
+ flex-direction: column;
840
+ }
841
+
842
+ .sidebar {
843
+ width: 100%;
844
+ position: static;
845
+ height: auto;
846
+ }
847
+
848
+ .form-row {
849
+ grid-template-columns: 1fr;
850
+ }
851
+
852
+ .stats-cards {
853
+ grid-template-columns: 1fr;
854
+ }
855
+ }
856
+ </style>
857
  </head>
858
  <body>
859
+ <nav class="navbar navbar-expand-lg navbar-dark">
860
+ <div class="container">
861
+ <a class="navbar-brand" href="/">
862
+ <i class="fas fa-bolt"></i> DashX
 
 
 
 
 
863
  </a>
864
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
865
+ <span class="navbar-toggler-icon"></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
866
  </button>
867
+ <div class="collapse navbar-collapse" id="navbarNav">
868
+ <ul class="navbar-nav ms-auto">
869
+ <li class="nav-item">
870
+ <a class="nav-link" href="/profile" onclick="goToProfile()">
871
+ <i class="fas fa-user"></i> Profile
872
+ </a>
873
+ </li>
874
+ <li class="nav-item">
875
+ <a class="nav-link text-danger" href="#" onclick="logout()">
876
+ <i class="fas fa-sign-out-alt"></i> Logout
877
+ </a>
878
+ </li>
879
+ </ul>
 
 
 
880
  </div>
881
  </div>
882
+ </nav>
 
 
883
 
884
+ <div class="dashboard-container">
885
+ <div class="sidebar">
886
+ <div class="sidebar-menu">
887
+ <a href="#overview" class="menu-item active" onclick="showSection('overview')">
888
+ <i class="fas fa-chart-line"></i> Overview
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
889
  </a>
890
+ <a href="#api-stats" class="menu-item" onclick="showSection('api-stats')">
891
+ <i class="fas fa-chart-area"></i> API Stats
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
892
  </a>
893
+ <a href="#plugins" class="menu-item" onclick="showSection('plugins')">
894
+ <i class="fas fa-plug"></i> API Plugins
 
895
  </a>
896
+ <a href="#server-stats" class="menu-item" onclick="showSection('server-stats')">
897
+ <i class="fas fa-server"></i> Server Stats
 
898
  </a>
899
+ <a href="#events" class="menu-item" onclick="showSection('events')">
900
+ <i class="fas fa-calendar"></i> Events
 
 
 
 
901
  </a>
902
+ <a href="#settings" class="menu-item" onclick="showSection('settings')">
903
+ <i class="fas fa-cog"></i> Settings
 
904
  </a>
905
+ <div id="adminMenu" style="display: none;">
906
+ <a href="#management" class="menu-item" onclick="showSection('management')">
907
+ <i class="fas fa-users-cog"></i> Management
908
+ </a>
909
+ </div>
910
  </div>
911
  </div>
 
912
 
913
+ <div class="main-content">
914
+ <div id="overview" class="section active">
 
915
  <h2><i class="fas fa-tachometer-alt"></i> Dashboard Overview</h2>
916
+ <div class="stats-cards">
917
+ <div class="stat-card">
 
918
  <div class="stat-icon">
919
+ <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/key.svg" alt="key" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
920
  </div>
921
  <div class="stat-info">
922
+ <div class="stat-number" id="userApiKey">Loading...</div>
923
  <div class="stat-label">API Key</div>
 
924
  </div>
925
  </div>
926
+ <div class="stat-card">
 
927
  <div class="stat-icon">
928
+ <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/chart-pie.svg" alt="chart" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
929
  </div>
930
  <div class="stat-info">
931
+ <div class="stat-number" id="userRequests">0</div>
932
  <div class="stat-label">Total Requests</div>
 
933
  </div>
934
  </div>
935
+ <div class="stat-card">
 
936
  <div class="stat-icon">
937
+ <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/cloud.svg" alt="cloud" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
938
  </div>
939
  <div class="stat-info">
940
+ <div class="stat-number" id="userRequestsToday">0</div>
941
  <div class="stat-label">Today's Requests</div>
 
942
  </div>
943
  </div>
944
+ <div class="stat-card">
 
945
  <div class="stat-icon">
946
+ <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/gauge-high.svg" alt="gauge" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
947
  </div>
948
  <div class="stat-info">
949
+ <div class="stat-number" id="userLimit">30</div>
950
  <div class="stat-label">Daily Limit</div>
 
951
  </div>
952
  </div>
953
+ <div class="stat-card">
 
954
  <div class="stat-icon">
955
+ <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/battery-three-quarters.svg" alt="battery" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
956
  </div>
957
  <div class="stat-info">
958
+ <div class="stat-number" id="userLimitToday">30</div>
959
+ <div class="stat-label">Remaining Limit (Personal)</div>
960
  </div>
961
  </div>
962
+ </div>
963
+
964
+ <div class="reset-timer-card glassmorphism">
965
+ <div class="timer-header">
966
+ <i class="fas fa-clock"></i>
967
+ <div>
968
+ <h3>Next Reset</h3>
969
+ <p>Daily limit resets at 00:00</p>
 
 
 
970
  </div>
971
  </div>
 
972
 
973
+ <div class="countdown-display">
974
+ <div class="countdown-time">
975
+ <span class="reset-countdown">00:00:00</span>
976
+ </div>
977
+ <div class="countdown-label">
978
+ Hours : Minutes : Seconds
979
+ </div>
980
  </div>
 
981
 
982
+ <div class="reset-progress-container">
983
+ <div class="reset-progress"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
984
  </div>
 
 
985
 
986
+ <div class="reset-info">
987
+ <div>
988
+ <i class="fas fa-info-circle"></i>
989
+ <span>Your limit will be restored to maximum</span>
 
 
 
990
  </div>
991
+ <div>
992
+ <i class="fas fa-sync-alt"></i>
 
993
  </div>
994
  </div>
995
+ </div>
996
+
997
+ <div class="usage-overview">
998
+ <div class="usage-section">
999
+ <h4><i class="fas fa-chart-bar"></i> API Usage Overview</h4>
1000
+ <div class="endpoint-list">
1001
+ <div class="endpoint-item">
1002
+ <span class="endpoint-name">Loading...</span>
1003
+ <span class="endpoint-count">0 requests</span>
1004
+ </div>
1005
  </div>
1006
  </div>
1007
+
1008
 
1009
+
1010
+ <div class="usage-section">
1011
+ <h4><i class="fas fa-calendar-alt"></i> Daily Usage (Last 7 Days)</h4>
1012
+ <div class="daily-usage">
1013
+ <div class="usage-day">
1014
+ <span class="usage-date">Loading...</span>
1015
+ <div class="usage-bar-container">
1016
+ <div class="usage-bar" style="width: 0%;"></div>
1017
+ </div>
1018
+ <span class="usage-count">0</span>
1019
+ </div>
1020
  </div>
1021
  </div>
1022
+
1023
+ <div class="usage-section">
1024
+ <h4><i class="fas fa-network-wired"></i> Recent IP Addresses</h4>
1025
+ <div class="ip-list">
1026
+ <div class="ip-item">
1027
+ <div>
1028
+ <span class="ip-address">Loading...</span>
1029
+ <div class="ip-time">Just now</div>
1030
+ </div>
1031
+ <span class="ip-count">0 requests</span>
1032
+ </div>
1033
  </div>
1034
  </div>
1035
  </div>
1036
+ </div>
1037
 
1038
+ <div id="plugins" class="section">
1039
+ <h2><i class="fas fa-plug"></i> Available API Plugins</h2>
1040
+ <p style="margin-bottom: 2rem; opacity: 0.8;">Discover and test our API endpoints with interactive documentation</p>
 
 
 
 
 
 
 
 
1041
 
1042
+ <div class="search-container">
1043
+ <i class="fas fa-search search-icon"></i>
1044
+ <input type="text"
1045
+ class="search-input"
1046
+ placeholder="Search plugins by name, description, or tags..."
1047
+ oninput="searchPlugins(this.value)"
1048
+ id="pluginSearch">
1049
+ </div>
1050
 
1051
+ <div class="plugins-grid" id="pluginsGrid">
1052
+ <div class="loading">
1053
+ <i class="fas fa-spinner fa-spin" style="margin-right: 0.5rem;"></i>
1054
+ Loading plugins...
1055
  </div>
1056
  </div>
1057
+ </div>
1058
 
1059
+ <!----- KENTOD --->
1060
+
1061
+ <div id="server-stats" class="section">
1062
  <h2><i class="fas fa-server"></i> Server Statistics</h2>
1063
+
1064
+ <!--- APA LIAT LIAT --->
1065
+
1066
+ <div class="stats-cards">
1067
+ <div class="stat-card">
1068
  <div class="stat-icon">
1069
+ <img src="https://api.iconify.design/mdi/account-group.svg?color=%23ba68c8&width=48&height=48" alt="users">
1070
  </div>
1071
  <div class="stat-info">
1072
+ <div class="stat-number" id="totalUsersCount">0</div>
1073
  <div class="stat-label">Total Users</div>
 
1074
  </div>
1075
  </div>
1076
+ <div class="stat-card">
 
1077
  <div class="stat-icon">
1078
+ <img src="https://api.iconify.design/mdi/account.svg?color=%23ce93d8&width=48&height=48" alt="user">
1079
  </div>
1080
  <div class="stat-info">
1081
+ <div class="stat-number" id="regularUsersCount">0</div>
1082
  <div class="stat-label">Regular Users</div>
 
1083
  </div>
1084
  </div>
1085
+ <div class="stat-card">
 
1086
  <div class="stat-icon">
1087
+ <img src="https://api.iconify.design/mdi/crown.svg?color=%23ba68c8&width=48&height=48" alt="crown">
1088
  </div>
1089
  <div class="stat-info">
1090
+ <div class="stat-number" id="premiumUsersCount">0</div>
1091
  <div class="stat-label">Premium Users</div>
 
1092
  </div>
1093
  </div>
1094
+ </div>
1095
+
1096
+ <div class="admin-card">
1097
+ <h3><i class="fas fa-chart-pie"></i> User Role Distribution</h3>
1098
+ <canvas id="roleChart" style="max-height: 300px;"></canvas>
1099
+ </div>
1100
+
1101
+ <div class="admin-card">
1102
+ <h3><i class="fas fa-database"></i> Database Statistics</h3>
1103
+ <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
1104
+ <div class="stat-item">
1105
+ <i class="fas fa-hdd" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
1106
+ <span class="stat-value" id="dbSize">0 MB</span>
1107
+ <span class="stat-label">Database Size</span>
1108
  </div>
1109
+ <div class="stat-item">
1110
+ <i class="fas fa-memory" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
1111
+ <span class="stat-value" id="ramUsage">0 MB</span>
1112
+ <span class="stat-label">RAM Usage</span>
1113
  </div>
1114
+ <div class="stat-item">
1115
+ <i class="fas fa-microchip" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
1116
+ <span class="stat-value" id="cpuUsage">0%</span>
1117
+ <span class="stat-label">CPU Usage</span>
 
1118
  </div>
1119
+ <div class="stat-item">
1120
+ <i class="fas fa-server" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
1121
+ <span class="stat-value" id="storageUsed">0 GB</span>
1122
+ <span class="stat-label">Storage Used</span>
1123
  </div>
1124
  </div>
1125
  </div>
1126
 
1127
+ <div class="admin-card">
1128
+ <h3><i class="fas fa-chart-bar"></i> Role Distribution Details</h3>
1129
+ <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
1130
+ <div class="stat-item">
1131
+ <span class="stat-value" id="cheapCount">0</span>
1132
+ <span class="stat-label">Cheap Role</span>
 
 
 
1133
  </div>
1134
+ <div class="stat-item">
1135
+ <span class="stat-value" id="premiumCount">0</span>
1136
+ <span class="stat-label">Premium Role</span>
 
 
 
1137
  </div>
1138
+ <div class="stat-item">
1139
+ <span class="stat-value" id="vipCount">0</span>
1140
+ <span class="stat-label">VIP Role</span>
 
 
 
1141
  </div>
1142
+ <div class="stat-item">
1143
+ <span class="stat-value" id="supremeCount">0</span>
1144
+ <span class="stat-label">Supreme Role</span>
 
 
 
1145
  </div>
1146
  </div>
 
 
 
1147
  </div>
1148
+ </div>
1149
 
1150
+ <div id="api-stats" class="section">
1151
+ <h2><i class="fas fa-chart-area"></i> API Statistics</h2>
1152
+ <p style="margin-bottom: 2rem; opacity: 0.8;">Global API usage statistics and analytics</p>
 
 
 
 
1153
 
1154
+ <div class="stats-cards">
1155
+ <div class="stat-card">
 
 
 
 
 
 
 
 
 
 
1156
  <div class="stat-icon">
1157
+ <i class="fas fa-globe"></i>
1158
  </div>
1159
  <div class="stat-info">
1160
+ <div class="stat-number" id="globalTotalRequests">0</div>
1161
+ <div class="stat-label">Total Requests (All Users)</div>
1162
  </div>
1163
  </div>
1164
+ <div class="stat-card">
 
1165
  <div class="stat-icon">
1166
+ <i class="fas fa-calendar-day"></i>
1167
  </div>
1168
  <div class="stat-info">
1169
+ <div class="stat-number" id="globalTodayRequests">0</div>
1170
+ <div class="stat-label">Today's Requests (All Users)</div>
1171
  </div>
1172
  </div>
1173
+ <div class="stat-card">
 
1174
  <div class="stat-icon">
1175
+ <i class="fas fa-check-circle"></i>
1176
  </div>
1177
  <div class="stat-info">
1178
+ <div class="stat-number" id="successRate">0%</div>
1179
+ <div class="stat-label">Success Rate</div>
 
 
 
 
 
 
 
 
 
1180
  </div>
1181
  </div>
1182
+ <div class="stat-card">
1183
+ <div class="stat-icon">
1184
+ <i class="fas fa-times-circle"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1185
  </div>
1186
+ <div class="stat-info">
1187
+ <div class="stat-number" id="failRate">0%</div>
1188
+ <div class="stat-label">Fail Rate</div>
 
1189
  </div>
1190
  </div>
 
 
 
1191
  </div>
 
1192
 
1193
+ <div class="charts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-top: 2rem;">
1194
+ <div class="admin-card">
1195
+ <h3><i class="fas fa-chart-pie"></i> Top Endpoints Distribution</h3>
1196
+ <canvas id="topEndpointsChart" style="max-height: 350px;"></canvas>
 
 
 
 
 
1197
  </div>
1198
 
1199
+ <div class="admin-card">
1200
+ <h3><i class="fas fa-percentage"></i> Success vs Fail Rate</h3>
1201
+ <canvas id="successFailChart" style="max-height: 350px;"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
1202
  </div>
1203
+ </div>
1204
 
1205
+ <div class="admin-card" style="margin-top: 2rem;">
1206
+ <h3><i class="fas fa-chart-bar"></i> Daily Request Statistics (Last 7 Days)</h3>
1207
+ <canvas id="dailyRequestsChart" style="max-height: 400px;"></canvas>
1208
+ </div>
1209
 
1210
+ <div class="admin-card" style="margin-top: 2rem;">
1211
+ <h3><i class="fas fa-chart-line"></i> Hourly Trends (Last 24 Hours)</h3>
1212
+ <canvas id="hourlyTrendsChart" style="max-height: 400px;"></canvas>
1213
  </div>
 
1214
 
1215
+ <div class="admin-card" style="margin-top: 2rem;">
1216
+ <h3><i class="fas fa-list-ol"></i> Top 10 Most Used Endpoints</h3>
1217
+ <div id="topEndpointsList">
1218
+ <div class="loading">
1219
+ <i class="fas fa-spinner fa-spin"></i> Loading...
1220
+ </div>
 
1221
  </div>
1222
  </div>
1223
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1224
 
1225
+ <div id="events" class="section">
1226
+ <h2><i class="fas fa-calendar"></i> Events & Rewards</h2>
1227
+ <div class="events-container">
1228
+ <div class="redeem-section">
1229
+ <h3><i class="fas fa-gift"></i> Redeem Code</h3>
1230
+ <p style="margin-bottom: 1.5rem; opacity: 0.8;">Enter a redeem code to unlock premium features or additional limits</p>
1231
+ <div class="form-group">
1232
+ <input type="text" id="redeemCode" placeholder="Enter your redeem code" style="text-transform: uppercase;">
1233
+ <button onclick="redeemCode()" class="btn btn-primary">
1234
+ <i class="fas fa-magic"></i> Redeem
1235
+ </button>
1236
+ </div>
1237
  </div>
 
 
 
1238
  </div>
1239
+ </div>
1240
 
1241
+ <div id="settings" class="section">
1242
+ <h2><i class="fas fa-cog"></i> Settings</h2>
1243
+ <div class="settings-container">
1244
+ <div class="setting-card">
1245
+ <h3><i class="fas fa-user-edit"></i> Profile Settings</h3>
1246
+ <div class="form-group">
1247
+ <label>Username</label>
1248
+ <input type="text" id="usernameInput" placeholder="Enter new username">
1249
+ </div>
1250
+ <button onclick="updateProfile()" class="btn btn-primary">
1251
+ <i class="fas fa-save"></i> Update Profile
1252
+ </button>
1253
  </div>
 
1254
 
1255
+ <div class="setting-card" id="premiumSettings" style="display: none;">
1256
+ <h3><i class="fas fa-crown"></i> Premium Features</h3>
1257
+ <button onclick="regenerateApiKey()" class="btn btn-warning">
1258
+ <i class="fas fa-sync"></i> Regenerate API Key
 
 
 
 
1259
  </button>
1260
+ <p class="text-muted">Generate a new API key (Premium only)</p>
1261
  </div>
 
 
 
 
1262
 
1263
+ <div class="setting-card danger-zone">
1264
+ <h3><i class="fas fa-exclamation-triangle"></i> Danger Zone</h3>
1265
+ <button onclick="deleteAccount()" class="btn btn-danger">
1266
+ <i class="fas fa-trash"></i> Delete Account
1267
+ </button>
1268
+ <p class="text-muted">This action cannot be undone</p>
1269
+ </div>
1270
  </div>
1271
+ </div>
1272
+
1273
+ <div id="management" class="section">
1274
+ <h2><i class="fas fa-users-cog"></i> Admin Management</h2>
1275
+ <div class="admin-container">
1276
+ <div class="admin-card">
1277
+ <h3><i class="fas fa-users"></i> User Management</h3>
1278
+ <div id="adminUsersList">
1279
+ <div class="loading">
1280
+ <i class="fas fa-spinner fa-spin"></i> Loading users...
 
 
 
 
 
1281
  </div>
1282
  </div>
1283
+ </div>
1284
+
1285
+ <div class="admin-card">
1286
+ <h3><i class="fas fa-user-tag"></i> Set User Role</h3>
1287
+ <div class="form-row">
1288
+ <div class="form-group" style="grid-column: 1 / -1;">
1289
+ <label>Search User <span class="required">*</span></label>
1290
+ <input type="text" id="searchUserInput" placeholder="Search by username or email" oninput="searchUsersForRole(this.value)">
1291
+ <div id="userSearchResults" style="display: none; margin-top: 0.5rem; background: rgba(255,255,255,0.05); border-radius: 8px; max-height: 200px; overflow-y: auto;"></div>
 
 
 
 
1292
  </div>
1293
+ <div class="form-group">
1294
+ <label>Selected User</label>
1295
+ <input type="text" id="selectedUserDisplay" placeholder="No user selected" readonly>
1296
+ <input type="hidden" id="selectedUserId">
 
 
 
1297
  </div>
1298
+ <div class="form-group">
1299
+ <label>Role <span class="required">*</span></label>
1300
+ <select id="assignRoleType">
1301
+ <option value="cheap">Cheap (Limit 500)</option>
1302
+ <option value="premium">Premium (Limit 1500)</option>
1303
+ <option value="vip">VIP (Limit 2500)</option>
1304
+ <option value="supreme">Supreme (Limit 3000)</option>
1305
+ </select>
1306
  </div>
1307
+ <div class="form-group">
1308
+ <label>Custom API Key <span style="color: #666; font-size: 0.85em;">(Optional)</span></label>
1309
+ <input type="text" id="customApiKey" placeholder="Leave empty for current key">
1310
+ <small>All roles support custom API keys</small>
 
 
 
1311
  </div>
1312
+ </div>
1313
+ <button onclick="assignUserRole()" class="btn btn-primary">
1314
+ <i class="fas fa-user-check"></i> Assign Role
1315
+ </button>
1316
+ </div>
1317
+
1318
+ <div class="admin-card">
1319
+ <h3><i class="fas fa-ticket-alt"></i> Create Redeem Code</h3>
1320
+ <div class="form-row">
1321
+ <div class="form-group">
1322
+ <label>Type <span class="required">*</span></label>
1323
+ <select id="redeemType">
1324
+ <option value="limit">Limit Only</option>
1325
+ <option value="premium">Premium Only</option>
1326
+ <option value="both">Both</option>
1327
+ </select>
1328
+ </div>
1329
+ <div class="form-group" id="limitContainer" style="display: none;">
1330
+ <label>Limit Value</label>
1331
+ <input type="number" id="limitValue" min="0" placeholder="Additional limit">
1332
+ <small>Optional for Premium Only</small>
1333
+ </div>
1334
+ <div class="form-group" id="codeExpiredContainer" style="display: none;">
1335
+ <label>Code Expired <span class="required">*</span></label>
1336
+ <input type="datetime-local" id="codeExpired" required>
1337
+ <small>When the code expires</small>
1338
+ </div>
1339
+ <div class="form-group" id="premiumExpiredContainer" style="display: none;">
1340
+ <label>Premium Expired <span class="required">*</span></label>
1341
+ <input type="datetime-local" id="premiumExpired">
1342
+ <small>When premium access expires</small>
1343
  </div>
1344
  </div>
1345
+ <button onclick="createRedeemCode()" class="btn btn-primary">
1346
+ <i class="fas fa-plus"></i> Create Code
1347
+ </button>
1348
  </div>
1349
+
1350
+ <div class="admin-card">
1351
+ <h3><i class="fas fa-chart-pie"></i> System Statistics</h3>
1352
+ <div class="stats-grid">
1353
+ <div class="stat-item">
1354
+ <span class="stat-value" id="adminTotalUsers">0</span>
1355
+ <span class="stat-label">Total Users</span>
1356
+ </div>
1357
+ <div class="stat-item">
1358
+ <span class="stat-value" id="adminTotalRequests">0</span>
1359
+ <span class="stat-label">Total Requests</span>
1360
+ </div>
1361
+ <div class="stat-item">
1362
+ <span class="stat-value" id="adminTodayRequests">0</span>
1363
+ <span class="stat-label">Today's Requests</span>
1364
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1365
  </div>
1366
  </div>
1367
  </div>
1368
+ </div>
1369
+ </div>
1370
  </div>
1371
 
1372
+ <script>
1373
+ (function(){
1374
+ function detectDevTools(){
1375
+ const threshold = 160;
1376
+ const widthThreshold = window.outerWidth - window.innerWidth > threshold;
1377
+ const heightThreshold = window.outerHeight - window.innerHeight > threshold;
1378
+ if(widthThreshold || heightThreshold) window.location.href = "/denied";
1379
+ }
1380
+
1381
+ document.addEventListener("contextmenu", e => e.preventDefault());
1382
+ document.onkeydown = function(e){
1383
+ if(e.keyCode === 123 || (e.ctrlKey && e.shiftKey && ['I','C','J'].includes(e.key?.toUpperCase())) || (e.ctrlKey && e.key?.toUpperCase() === 'U')){
1384
+ e.preventDefault();
1385
+ window.location.href = "/denied";
1386
+ }
1387
+ };
1388
+
1389
+ setInterval(() => {
1390
+ if(window.eruda) window.location.href = "/denied";
1391
+ detectDevTools();
1392
+ try{
1393
+ console.profile();
1394
+ console.profileEnd();
1395
+ }catch(e){}
1396
+ try{
1397
+ if(console.clear.toString().length > 100) window.location.href = "/denied";
1398
+ }catch(e){}
1399
+ }, 1000);
1400
+ })();
1401
+ </script>
1402
 
1403
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.js"></script>
1404
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
1405
+ <script src="dashboard.js"></script>
1406
  </body>
1407
  </html>