Hugging Face's logo

Spaces:
vikarshana
/
DashX
Sleeping

App Files Community
HerzaJ commited on
Commit
92c362c
·
verified ·
1 Parent(s): eb0bf67

Update public/dashboard.html

Browse files
Files changed (1) hide show
  1. public/dashboard.html +665 -218
public/dashboard.html CHANGED
@@ -3,19 +3,50 @@
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.">
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
- <link href="mobile-styles.css" rel="stylesheet">
16
- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
17
  </head>
18
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  <div class="mobile-header">
20
  <div class="mobile-header-content">
21
  <div class="mobile-header-left">
@@ -23,69 +54,147 @@
23
  <i class="fas fa-bars"></i>
24
  </button>
25
  <div class="mobile-logo">
26
- <i class="fas fa-bolt"></i> DashX
 
27
  </div>
28
  </div>
29
- <div class="mobile-avatar">
30
  <i class="fas fa-user"></i>
31
  </div>
32
  </div>
33
  </div>
34
-
35
- <div class="drawer-overlay" onclick="toggleDrawer()"></div>
36
-
37
- <div class="sidebar-drawer">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  <div class="drawer-header">
39
  <h3>Menu</h3>
40
- <button class="drawer-close" onclick="toggleDrawer()">
41
  <i class="fas fa-times"></i>
42
  </button>
43
  </div>
44
  <div class="drawer-menu">
45
  <div class="drawer-section-title">Dashboard</div>
46
- <a href="#overview" class="drawer-menu-item active" onclick="navigateTo('overview')">
47
- <i class="fas fa-chart-line"></i>
48
  <span>Overview</span>
49
  </a>
50
- <a href="#api-stats" class="drawer-menu-item" onclick="navigateTo('api-stats')">
51
- <i class="fas fa-chart-area"></i>
52
  <span>API Stats</span>
53
  </a>
54
- <a href="#server-stats" class="drawer-menu-item" onclick="navigateTo('server-stats')">
55
  <i class="fas fa-server"></i>
56
  <span>Server Stats</span>
57
  </a>
58
 
59
  <div class="drawer-section-title">API Features</div>
60
- <a href="#plugins" class="drawer-menu-item" onclick="navigateTo('plugins')">
61
  <i class="fas fa-plug"></i>
62
  <span>API Plugins</span>
63
  </a>
64
 
65
  <div class="drawer-section-title">Account</div>
66
- <a href="#events" class="drawer-menu-item" onclick="navigateTo('events')">
67
  <i class="fas fa-calendar"></i>
68
  <span>Events</span>
69
  </a>
70
- <a href="#settings" class="drawer-menu-item" onclick="navigateTo('settings')">
71
  <i class="fas fa-cog"></i>
72
  <span>Settings</span>
73
  </a>
74
 
75
- <div id="adminDrawerMenu" style="display: none;">
76
- <div class="drawer-section-title">Admin</div>
77
- <a href="#management" class="drawer-menu-item" onclick="navigateTo('management')">
78
  <i class="fas fa-users-cog"></i>
79
- <span>Management</span>
 
 
 
 
 
 
 
 
80
  </a>
81
  </div>
82
 
83
  <div class="drawer-footer">
84
- <a href="/profile" class="drawer-menu-item">
85
- <i class="fas fa-user"></i>
86
  <span>Profile</span>
87
  </a>
88
- <a href="#" class="drawer-menu-item" onclick="logout()" style="color: #e74c3c;">
89
  <i class="fas fa-sign-out-alt"></i>
90
  <span>Logout</span>
91
  </a>
@@ -93,251 +202,589 @@
93
  </div>
94
  </div>
95
 
96
- <nav class="navbar navbar-expand-lg navbar-dark">
97
- <div class="container">
98
- <a class="navbar-brand" href="/">
99
- <i class="fas fa-bolt"></i> DashX
100
- </a>
101
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
102
- <span class="navbar-toggler-icon"></span>
103
- </button>
104
- <div class="collapse navbar-collapse" id="navbarNav">
105
- <ul class="navbar-nav ms-auto">
106
- <li class="nav-item">
107
- <a class="nav-link" href="/profile">
108
- <i class="fas fa-user"></i> Profile
109
- </a>
110
- </li>
111
- <li class="nav-item">
112
- <a class="nav-link text-danger" href="#" onclick="logout()">
113
- <i class="fas fa-sign-out-alt"></i> Logout
114
- </a>
115
- </li>
116
- </ul>
117
- </div>
118
- </div>
119
- </nav>
120
-
121
  <div class="dashboard-container">
122
- <div class="sidebar">
123
- <div class="sidebar-menu">
124
- <a href="#overview" class="menu-item active" onclick="showSection('overview')">
125
- <i class="fas fa-chart-line"></i> Overview
126
- </a>
127
- <a href="#api-stats" class="menu-item" onclick="showSection('api-stats')">
128
- <i class="fas fa-chart-area"></i> API Stats
129
- </a>
130
- <a href="#plugins" class="menu-item" onclick="showSection('plugins')">
131
- <i class="fas fa-plug"></i> API Plugins
132
- </a>
133
- <a href="#server-stats" class="menu-item" onclick="showSection('server-stats')">
134
- <i class="fas fa-server"></i> Server Stats
135
- </a>
136
- <a href="#events" class="menu-item" onclick="showSection('events')">
137
- <i class="fas fa-calendar"></i> Events
138
- </a>
139
- <a href="#settings" class="menu-item" onclick="showSection('settings')">
140
- <i class="fas fa-cog"></i> Settings
141
- </a>
142
- <div id="adminMenu" style="display: none;">
143
- <a href="#management" class="menu-item" onclick="showSection('management')">
144
- <i class="fas fa-users-cog"></i> Management
145
- </a>
146
- </div>
147
- </div>
148
- </div>
149
-
150
- <div class="main-content">
151
- <div id="overview" class="section active">
152
  <h2><i class="fas fa-tachometer-alt"></i> Dashboard Overview</h2>
153
- <div class="stats-cards">
154
- <div class="stat-card">
 
155
  <div class="stat-icon">
156
  <i class="fas fa-key"></i>
157
  </div>
158
- <div class="stat-number" id="userApiKey">Loading...</div>
159
- <div class="stat-label">API Key</div>
 
 
160
  </div>
161
- <div class="stat-card">
 
162
  <div class="stat-icon">
163
- <i class="fas fa-chart-pie"></i>
 
 
 
 
164
  </div>
165
- <div class="stat-number" id="userRequests">0</div>
166
- <div class="stat-label">Total Requests</div>
167
  </div>
168
- <div class="stat-card">
 
169
  <div class="stat-icon">
170
- <i class="fas fa-cloud"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
171
  </div>
172
- <div class="stat-number" id="userRequestsToday">0</div>
173
- <div class="stat-label">Today's Requests</div>
174
  </div>
175
- <div class="stat-card">
 
176
  <div class="stat-icon">
177
- <i class="fas fa-gauge-high"></i>
 
 
 
 
178
  </div>
179
- <div class="stat-number" id="userLimit">30</div>
180
- <div class="stat-label">Daily Limit</div>
181
  </div>
182
- <div class="stat-card">
 
183
  <div class="stat-icon">
184
- <i class="fas fa-battery-three-quarters"></i>
 
 
 
 
 
 
 
185
  </div>
186
- <div class="stat-number" id="userLimitToday">30</div>
187
- <div class="stat-label">Remaining Limit</div>
188
  </div>
189
  </div>
190
- </div>
191
 
192
- <div id="api-stats" class="section">
193
- <h2><i class="fas fa-chart-area"></i> API Statistics</h2>
194
- <p style="margin-bottom: 2rem; opacity: 0.8;">Global API usage statistics and analytics</p>
195
- <div class="stats-cards">
196
- <div class="stat-card">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
197
  <div class="stat-icon">
198
  <i class="fas fa-globe"></i>
199
  </div>
200
- <div class="stat-number" id="globalTotalRequests">0</div>
201
- <div class="stat-label">Total Requests</div>
 
 
202
  </div>
203
- <div class="stat-card">
 
204
  <div class="stat-icon">
205
- <i class="fas fa-calendar-day"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  </div>
207
- <div class="stat-number" id="globalTodayRequests">0</div>
208
- <div class="stat-label">Today's Requests</div>
209
  </div>
210
  </div>
211
- </div>
212
 
213
- <div id="plugins" class="section">
214
- <h2><i class="fas fa-plug"></i> Available API Plugins</h2>
215
- <p style="margin-bottom: 2rem; opacity: 0.8;">Discover and test our API endpoints</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
 
217
  <div class="search-container">
218
  <i class="fas fa-search search-icon"></i>
219
- <input type="text" class="search-input" placeholder="Search plugins..." id="pluginSearch">
220
  </div>
221
 
222
  <div class="plugins-grid" id="pluginsGrid">
223
  <div class="loading">
224
- <i class="fas fa-spinner fa-spin"></i> Loading plugins...
225
  </div>
226
  </div>
227
- </div>
228
 
229
- <div id="server-stats" class="section">
230
- <h2><i class="fas fa-server"></i> Server Statistics</h2>
231
- <div class="stats-cards">
232
- <div class="stat-card">
 
233
  <div class="stat-icon">
234
  <i class="fas fa-users"></i>
235
  </div>
236
- <div class="stat-number" id="totalUsersCount">0</div>
237
- <div class="stat-label">Total Users</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
238
  </div>
239
  </div>
240
- </div>
241
 
242
- <div id="events" class="section">
243
- <h2><i class="fas fa-calendar"></i> Events & Rewards</h2>
244
- <div class="events-container">
245
- <div class="redeem-section">
246
- <h3><i class="fas fa-gift"></i> Redeem Code</h3>
247
- <p style="margin-bottom: 1.5rem; opacity: 0.8;">Enter a redeem code to unlock premium features</p>
248
- <div class="form-group">
249
- <input type="text" id="redeemCode" placeholder="Enter your redeem code">
250
- <button onclick="redeemCode()" class="btn btn-primary">
251
- <i class="fas fa-magic"></i> Redeem
252
- </button>
253
  </div>
254
  </div>
255
  </div>
256
- </div>
257
 
258
- <div id="settings" class="section">
259
- <h2><i class="fas fa-cog"></i> Settings</h2>
260
- <div class="settings-container">
261
- <div class="setting-card">
262
- <h3><i class="fas fa-user-edit"></i> Profile Settings</h3>
 
263
  <div class="form-group">
264
- <label>Username</label>
265
- <input type="text" id="usernameInput" placeholder="Enter new username">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
  </div>
267
- <button onclick="updateProfile()" class="btn btn-primary">
268
- <i class="fas fa-save"></i> Update Profile
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
269
  </button>
270
  </div>
 
 
 
271
  </div>
272
- </div>
273
 
274
- <div id="management" class="section">
275
- <h2><i class="fas fa-users-cog"></i> Admin Management</h2>
276
- <div class="admin-container">
277
- <div class="admin-card">
278
- <h3><i class="fas fa-users"></i> User Management</h3>
279
- <div id="adminUsersList">
280
- <div class="loading">
281
- <i class="fas fa-spinner fa-spin"></i> Loading users...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
  </div>
283
  </div>
284
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
285
  </div>
286
- </div>
287
- </div>
288
  </div>
289
 
290
- <script>
291
- function toggleDrawer() {
292
- const drawer = document.querySelector('.sidebar-drawer');
293
- const overlay = document.querySelector('.drawer-overlay');
294
- drawer.classList.toggle('active');
295
- overlay.classList.toggle('active');
296
- document.body.style.overflow = drawer.classList.contains('active') ? 'hidden' : '';
297
- }
298
-
299
- function navigateTo(sectionId) {
300
- showSection(sectionId);
301
- toggleDrawer();
302
- }
303
-
304
- function showSection(sectionId) {
305
- document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
306
- document.getElementById(sectionId).classList.add('active');
307
-
308
- document.querySelectorAll('.menu-item, .drawer-menu-item').forEach(item => {
309
- item.classList.remove('active');
310
- if(item.getAttribute('href') === '#' + sectionId) {
311
- item.classList.add('active');
312
- }
313
- });
314
- }
315
-
316
- (function(){
317
- function detectDevTools(){
318
- const threshold = 160;
319
- const widthThreshold = window.outerWidth - window.innerWidth > threshold;
320
- const heightThreshold = window.outerHeight - window.innerHeight > threshold;
321
- if(widthThreshold || heightThreshold) window.location.href = "/denied";
322
- }
323
-
324
- document.addEventListener("contextmenu", e => e.preventDefault());
325
- document.onkeydown = function(e){
326
- if(e.keyCode === 123 || (e.ctrlKey && e.shiftKey && ['I','C','J'].includes(e.key?.toUpperCase())) || (e.ctrlKey && e.key?.toUpperCase() === 'U')){
327
- e.preventDefault();
328
- window.location.href = "/denied";
329
- }
330
- };
331
-
332
- setInterval(() => {
333
- if(window.eruda) window.location.href = "/denied";
334
- detectDevTools();
335
- }, 1000);
336
- })();
337
- </script>
338
-
339
- <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.js"></script>
340
- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
341
- <script src="dashboard.js"></script>
342
  </body>
343
  </html>
 
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">
 
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>
 
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>