@howssatoshi/quantumcss 1.5.2 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/quantum.min.css +1 -4885
- package/examples/admin-panel.html +834 -0
- package/examples/analytics-dashboard.html +949 -0
- package/examples/chat-messaging.html +264 -0
- package/examples/email-template.html +697 -0
- package/examples/index.html +128 -0
- package/examples/music-streaming.html +1239 -0
- package/examples/portfolio-resume.html +653 -0
- package/examples/video-streaming.html +564 -0
- package/package.json +1 -1
- package/src/styles/quantum-components.css +961 -0
|
@@ -0,0 +1,834 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Starlight Admin - Management Panel</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
|
+
<script src="../src/starlight.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
/* Admin Layout overrides */
|
|
12
|
+
.admin-logo {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: 0.75rem;
|
|
16
|
+
margin-bottom: 2rem;
|
|
17
|
+
padding-bottom: 1.5rem;
|
|
18
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.admin-logo-icon {
|
|
22
|
+
width: 42px;
|
|
23
|
+
height: 42px;
|
|
24
|
+
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
25
|
+
border-radius: 12px;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Custom nav indicator */
|
|
33
|
+
.nav-item-custom {
|
|
34
|
+
position: relative;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.nav-item-custom.active::before {
|
|
38
|
+
content: '';
|
|
39
|
+
position: absolute;
|
|
40
|
+
left: 0;
|
|
41
|
+
top: 50%;
|
|
42
|
+
transform: translateY(-50%);
|
|
43
|
+
width: 3px;
|
|
44
|
+
height: 20px;
|
|
45
|
+
background: var(--color-starlight, #00d4ff);
|
|
46
|
+
border-radius: 0 2px 2px 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Breadcrumb styling */
|
|
50
|
+
.breadcrumb {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 0.5rem;
|
|
54
|
+
font-size: 0.875rem;
|
|
55
|
+
color: var(--text-muted, #64748b);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.breadcrumb a {
|
|
59
|
+
color: var(--text-secondary, #94a3b8);
|
|
60
|
+
text-decoration: none;
|
|
61
|
+
transition: color 0.2s;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.breadcrumb a:hover {
|
|
65
|
+
color: var(--color-starlight, #00d4ff);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.breadcrumb-separator {
|
|
69
|
+
color: var(--text-muted, #64748b);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Page title styling */
|
|
73
|
+
.page-title {
|
|
74
|
+
font-size: 1.875rem;
|
|
75
|
+
font-weight: 700;
|
|
76
|
+
color: var(--text-primary, #f1f5f9);
|
|
77
|
+
margin-bottom: 0.25rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.page-subtitle {
|
|
81
|
+
font-size: 0.875rem;
|
|
82
|
+
color: var(--text-muted, #64748b);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Data Table custom styling */
|
|
86
|
+
.table-container {
|
|
87
|
+
background: rgba(255, 255, 255, 0.03);
|
|
88
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
89
|
+
border-radius: 1rem;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.table-header {
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: space-between;
|
|
96
|
+
align-items: center;
|
|
97
|
+
padding: 1.25rem 1.5rem;
|
|
98
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.table-title {
|
|
102
|
+
font-size: 1.125rem;
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
color: var(--text-primary, #f1f5f9);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.table-filters {
|
|
108
|
+
display: flex;
|
|
109
|
+
gap: 0.75rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Table overrides */
|
|
113
|
+
table {
|
|
114
|
+
width: 100%;
|
|
115
|
+
border-collapse: collapse;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
th {
|
|
119
|
+
text-align: left;
|
|
120
|
+
padding: 1rem 1.5rem;
|
|
121
|
+
font-size: 0.75rem;
|
|
122
|
+
font-weight: 600;
|
|
123
|
+
text-transform: uppercase;
|
|
124
|
+
letter-spacing: 0.05em;
|
|
125
|
+
color: var(--text-muted, #64748b);
|
|
126
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
127
|
+
background: rgba(255, 255, 255, 0.02);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
td {
|
|
131
|
+
padding: 1rem 1.5rem;
|
|
132
|
+
font-size: 0.875rem;
|
|
133
|
+
color: var(--text-secondary, #94a3b8);
|
|
134
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
tr:hover td {
|
|
138
|
+
background: rgba(255, 255, 255, 0.02);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
tr:last-child td {
|
|
142
|
+
border-bottom: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Table Footer */
|
|
146
|
+
.table-footer {
|
|
147
|
+
display: flex;
|
|
148
|
+
justify-content: space-between;
|
|
149
|
+
align-items: center;
|
|
150
|
+
padding: 1rem 1.5rem;
|
|
151
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
152
|
+
background: rgba(255, 255, 255, 0.02);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.table-info {
|
|
156
|
+
font-size: 0.875rem;
|
|
157
|
+
color: var(--text-muted, #64748b);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Quick Actions Panel */
|
|
161
|
+
.quick-actions {
|
|
162
|
+
display: grid;
|
|
163
|
+
grid-template-columns: repeat(3, 1fr);
|
|
164
|
+
gap: 1rem;
|
|
165
|
+
margin-top: 2rem;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.quick-action-card {
|
|
169
|
+
background: rgba(255, 255, 255, 0.03);
|
|
170
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
171
|
+
border-radius: 1rem;
|
|
172
|
+
padding: 1.5rem;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
transition: all 0.3s ease;
|
|
175
|
+
text-align: center;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.quick-action-card:hover {
|
|
179
|
+
background: rgba(255, 255, 255, 0.05);
|
|
180
|
+
transform: translateY(-2px);
|
|
181
|
+
border-color: rgba(0, 212, 255, 0.2);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.quick-action-icon {
|
|
185
|
+
width: 56px;
|
|
186
|
+
height: 56px;
|
|
187
|
+
border-radius: 16px;
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
justify-content: center;
|
|
191
|
+
margin: 0 auto 1rem;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.quick-action-title {
|
|
195
|
+
font-size: 1rem;
|
|
196
|
+
font-weight: 600;
|
|
197
|
+
color: var(--text-primary, #f1f5f9);
|
|
198
|
+
margin-bottom: 0.25rem;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.quick-action-desc {
|
|
202
|
+
font-size: 0.875rem;
|
|
203
|
+
color: var(--text-muted, #64748b);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Light Mode Overrides */
|
|
207
|
+
body.light-mode {
|
|
208
|
+
--bg-primary: #f8fafc;
|
|
209
|
+
--text-primary: #0f172a;
|
|
210
|
+
--text-secondary: #475569;
|
|
211
|
+
--text-muted: #64748b;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
body.light-mode .admin-logo {
|
|
215
|
+
border-bottom-color: #e2e8f0;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
body.light-mode .table-container,
|
|
219
|
+
body.light-mode .quick-action-card {
|
|
220
|
+
background: #ffffff;
|
|
221
|
+
border-color: #e2e8f0;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
body.light-mode .quick-action-card:hover {
|
|
225
|
+
background: #f8fafc;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
body.light-mode th {
|
|
229
|
+
background: #f8fafc;
|
|
230
|
+
border-bottom-color: #e2e8f0;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
body.light-mode td {
|
|
234
|
+
border-bottom-color: #f1f5f9;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
body.light-mode tr:hover td {
|
|
238
|
+
background: #f8fafc;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
body.light-mode .table-footer {
|
|
242
|
+
background: #f8fafc;
|
|
243
|
+
border-top-color: #e2e8f0;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Responsive */
|
|
247
|
+
@media (max-width: 1280px) {
|
|
248
|
+
.stats-grid {
|
|
249
|
+
grid-template-columns: repeat(2, 1fr);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.quick-actions {
|
|
253
|
+
grid-template-columns: 1fr;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@media (max-width: 1024px) {
|
|
258
|
+
.app-layout {
|
|
259
|
+
grid-template-columns: 80px 1fr;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.sidebar {
|
|
263
|
+
padding: 1rem;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.admin-logo span,
|
|
267
|
+
.nav-section-title,
|
|
268
|
+
.nav-item span,
|
|
269
|
+
.theme-label {
|
|
270
|
+
display: none;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.nav-item {
|
|
274
|
+
justify-content: center;
|
|
275
|
+
padding: 0.75rem;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.search-input {
|
|
279
|
+
width: 200px;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
@media (max-width: 768px) {
|
|
284
|
+
.app-layout {
|
|
285
|
+
grid-template-columns: 1fr;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.sidebar {
|
|
289
|
+
display: none;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
@media (max-width: 768px) {
|
|
294
|
+
.stats-grid {
|
|
295
|
+
grid-template-columns: 1fr;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.table-container {
|
|
299
|
+
overflow-x: auto;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
table {
|
|
303
|
+
min-width: 800px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.page-header {
|
|
307
|
+
flex-direction: column;
|
|
308
|
+
align-items: flex-start;
|
|
309
|
+
gap: 1rem;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/* Animations */
|
|
314
|
+
@keyframes fadeIn {
|
|
315
|
+
from { opacity: 0; transform: translateY(10px); }
|
|
316
|
+
to { opacity: 1; transform: translateY(0); }
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.stat-card, .table-container, .quick-action-card {
|
|
320
|
+
animation: fadeIn 0.5s ease-out forwards;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.stat-card:nth-child(1) { animation-delay: 0.1s; }
|
|
324
|
+
.stat-card:nth-child(2) { animation-delay: 0.2s; }
|
|
325
|
+
.stat-card:nth-child(3) { animation-delay: 0.3s; }
|
|
326
|
+
.stat-card:nth-child(4) { animation-delay: 0.4s; }
|
|
327
|
+
</style>
|
|
328
|
+
</head>
|
|
329
|
+
<body>
|
|
330
|
+
<div class="app-layout">
|
|
331
|
+
<!-- Sidebar -->
|
|
332
|
+
<aside class="sidebar">
|
|
333
|
+
<div class="admin-logo">
|
|
334
|
+
<div class="admin-logo-icon">
|
|
335
|
+
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
336
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
337
|
+
</svg>
|
|
338
|
+
</div>
|
|
339
|
+
<div>
|
|
340
|
+
<div class="text-xl font-bold text-gradient-starlight">Starlight</div>
|
|
341
|
+
<div class="text-xs text-slate-500">Admin Panel</div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<div class="nav-section">
|
|
346
|
+
<div class="nav-section-title">Main</div>
|
|
347
|
+
<nav>
|
|
348
|
+
<button class="nav-item nav-item-custom active">
|
|
349
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
350
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
351
|
+
</svg>
|
|
352
|
+
<span>Users</span>
|
|
353
|
+
<span class="nav-badge">3</span>
|
|
354
|
+
</button>
|
|
355
|
+
<button class="nav-item nav-item-custom">
|
|
356
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
357
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
358
|
+
</svg>
|
|
359
|
+
<span>Content</span>
|
|
360
|
+
</button>
|
|
361
|
+
<button class="nav-item nav-item-custom">
|
|
362
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
363
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
|
364
|
+
</svg>
|
|
365
|
+
<span>Categories</span>
|
|
366
|
+
</button>
|
|
367
|
+
<button class="nav-item nav-item-custom">
|
|
368
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
369
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
|
|
370
|
+
</svg>
|
|
371
|
+
<span>Comments</span>
|
|
372
|
+
</button>
|
|
373
|
+
</nav>
|
|
374
|
+
</div>
|
|
375
|
+
|
|
376
|
+
<div class="nav-section">
|
|
377
|
+
<div class="nav-section-title">System</div>
|
|
378
|
+
<nav>
|
|
379
|
+
<button class="nav-item nav-item-custom">
|
|
380
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
381
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
382
|
+
</svg>
|
|
383
|
+
<span>Analytics</span>
|
|
384
|
+
</button>
|
|
385
|
+
<button class="nav-item nav-item-custom">
|
|
386
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
387
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
|
388
|
+
</svg>
|
|
389
|
+
<span>Security</span>
|
|
390
|
+
</button>
|
|
391
|
+
<button class="nav-item nav-item-custom">
|
|
392
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
393
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
394
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
395
|
+
</svg>
|
|
396
|
+
<span>Settings</span>
|
|
397
|
+
</button>
|
|
398
|
+
</nav>
|
|
399
|
+
</div>
|
|
400
|
+
|
|
401
|
+
<div class="theme-toggle-wrapper">
|
|
402
|
+
<button class="theme-btn" onclick="toggleTheme()">
|
|
403
|
+
<svg class="w-4 h-4 sun-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
404
|
+
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
|
|
405
|
+
</svg>
|
|
406
|
+
<svg class="w-4 h-4 moon-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
407
|
+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
408
|
+
</svg>
|
|
409
|
+
<span class="theme-label">Toggle Theme</span>
|
|
410
|
+
</button>
|
|
411
|
+
</div>
|
|
412
|
+
</aside>
|
|
413
|
+
|
|
414
|
+
<!-- Main Content -->
|
|
415
|
+
<main class="main-content" style="padding: 2rem;">
|
|
416
|
+
<!-- Top Navigation -->
|
|
417
|
+
<div class="top-nav">
|
|
418
|
+
<nav class="breadcrumb">
|
|
419
|
+
<a href="#">Dashboard</a>
|
|
420
|
+
<span class="breadcrumb-separator">/</span>
|
|
421
|
+
<a href="#">Users</a>
|
|
422
|
+
<span class="breadcrumb-separator">/</span>
|
|
423
|
+
<span>All Users</span>
|
|
424
|
+
</nav>
|
|
425
|
+
<div class="top-nav-actions">
|
|
426
|
+
<div class="search-box">
|
|
427
|
+
<svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
428
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
429
|
+
</svg>
|
|
430
|
+
<input type="text" class="search-input" placeholder="Search users...">
|
|
431
|
+
</div>
|
|
432
|
+
<button class="icon-btn">
|
|
433
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
434
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
|
435
|
+
</svg>
|
|
436
|
+
<span class="notification-dot"></span>
|
|
437
|
+
</button>
|
|
438
|
+
<button class="icon-btn" onclick="toggleTheme()">
|
|
439
|
+
<svg class="sun-icon w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20">
|
|
440
|
+
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
|
|
441
|
+
</svg>
|
|
442
|
+
<svg class="moon-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
443
|
+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
444
|
+
</svg>
|
|
445
|
+
</button>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
|
|
449
|
+
<!-- Page Header -->
|
|
450
|
+
<div class="page-header">
|
|
451
|
+
<div>
|
|
452
|
+
<h1 class="page-title">User Management</h1>
|
|
453
|
+
<p class="page-subtitle">Manage your team members and their account permissions</p>
|
|
454
|
+
</div>
|
|
455
|
+
<div class="page-actions">
|
|
456
|
+
<button class="btn btn-secondary">
|
|
457
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
458
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
|
459
|
+
</svg>
|
|
460
|
+
Export
|
|
461
|
+
</button>
|
|
462
|
+
<button class="btn btn-primary">
|
|
463
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
464
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
465
|
+
</svg>
|
|
466
|
+
Add User
|
|
467
|
+
</button>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
|
|
471
|
+
<!-- Stats -->
|
|
472
|
+
<div class="stats-grid">
|
|
473
|
+
<div class="stat-card">
|
|
474
|
+
<div class="stat-header">
|
|
475
|
+
<div class="stat-icon stat-icon-blue">
|
|
476
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
477
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
478
|
+
</svg>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="stat-value">2,847</div>
|
|
482
|
+
<div class="stat-label">Total Users</div>
|
|
483
|
+
</div>
|
|
484
|
+
|
|
485
|
+
<div class="stat-card">
|
|
486
|
+
<div class="stat-header">
|
|
487
|
+
<div class="stat-icon stat-icon-green">
|
|
488
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
489
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
490
|
+
</svg>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="stat-value">2,543</div>
|
|
494
|
+
<div class="stat-label">Active Users</div>
|
|
495
|
+
</div>
|
|
496
|
+
|
|
497
|
+
<div class="stat-card">
|
|
498
|
+
<div class="stat-header">
|
|
499
|
+
<div class="stat-icon stat-icon-orange">
|
|
500
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
501
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
502
|
+
</svg>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="stat-value">156</div>
|
|
506
|
+
<div class="stat-label">Pending Approval</div>
|
|
507
|
+
</div>
|
|
508
|
+
|
|
509
|
+
<div class="stat-card">
|
|
510
|
+
<div class="stat-header">
|
|
511
|
+
<div class="stat-icon stat-icon-purple">
|
|
512
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
513
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
|
|
514
|
+
</svg>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
<div class="stat-value">148</div>
|
|
518
|
+
<div class="stat-label">Inactive</div>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
|
|
522
|
+
<!-- Data Table -->
|
|
523
|
+
<div class="table-container">
|
|
524
|
+
<div class="table-header">
|
|
525
|
+
<h2 class="table-title">All Users</h2>
|
|
526
|
+
<div class="table-filters">
|
|
527
|
+
<select class="filter-select">
|
|
528
|
+
<option>All Roles</option>
|
|
529
|
+
<option>Admin</option>
|
|
530
|
+
<option>Moderator</option>
|
|
531
|
+
<option>User</option>
|
|
532
|
+
</select>
|
|
533
|
+
<select class="filter-select">
|
|
534
|
+
<option>All Status</option>
|
|
535
|
+
<option>Active</option>
|
|
536
|
+
<option>Pending</option>
|
|
537
|
+
<option>Inactive</option>
|
|
538
|
+
</select>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<table>
|
|
543
|
+
<thead>
|
|
544
|
+
<tr>
|
|
545
|
+
<th>User</th>
|
|
546
|
+
<th>Role</th>
|
|
547
|
+
<th>Status</th>
|
|
548
|
+
<th>Last Active</th>
|
|
549
|
+
<th>Joined</th>
|
|
550
|
+
<th>Actions</th>
|
|
551
|
+
</tr>
|
|
552
|
+
</thead>
|
|
553
|
+
<tbody>
|
|
554
|
+
<tr>
|
|
555
|
+
<td>
|
|
556
|
+
<div class="user-cell">
|
|
557
|
+
<div class="avatar">SC</div>
|
|
558
|
+
<div class="user-info">
|
|
559
|
+
<div class="user-name">Sarah Chen</div>
|
|
560
|
+
<div class="user-email">sarah.chen@example.com</div>
|
|
561
|
+
</div>
|
|
562
|
+
</div>
|
|
563
|
+
</td>
|
|
564
|
+
<td><span class="role-badge role-admin">Admin</span></td>
|
|
565
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
566
|
+
<td>2 minutes ago</td>
|
|
567
|
+
<td>Jan 15, 2024</td>
|
|
568
|
+
<td>
|
|
569
|
+
<div class="action-buttons">
|
|
570
|
+
<button class="action-btn">
|
|
571
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
572
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
573
|
+
</svg>
|
|
574
|
+
</button>
|
|
575
|
+
<button class="action-btn">
|
|
576
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
577
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
578
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
579
|
+
</svg>
|
|
580
|
+
</button>
|
|
581
|
+
<button class="action-btn action-btn-delete">
|
|
582
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
583
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
584
|
+
</svg>
|
|
585
|
+
</button>
|
|
586
|
+
</div>
|
|
587
|
+
</td>
|
|
588
|
+
</tr>
|
|
589
|
+
<tr>
|
|
590
|
+
<td>
|
|
591
|
+
<div class="user-cell">
|
|
592
|
+
<div class="avatar" style="background: linear-gradient(135deg, #10b981, #34d399);">MR</div>
|
|
593
|
+
<div class="user-info">
|
|
594
|
+
<div class="user-name">Michael Rodriguez</div>
|
|
595
|
+
<div class="user-email">m.rodriguez@example.com</div>
|
|
596
|
+
</div>
|
|
597
|
+
</div>
|
|
598
|
+
</td>
|
|
599
|
+
<td><span class="role-badge role-moderator">Moderator</span></td>
|
|
600
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
601
|
+
<td>15 minutes ago</td>
|
|
602
|
+
<td>Dec 3, 2023</td>
|
|
603
|
+
<td>
|
|
604
|
+
<div class="action-buttons">
|
|
605
|
+
<button class="action-btn">
|
|
606
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
607
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
608
|
+
</svg>
|
|
609
|
+
</button>
|
|
610
|
+
<button class="action-btn">
|
|
611
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
612
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
613
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
614
|
+
</svg>
|
|
615
|
+
</button>
|
|
616
|
+
<button class="action-btn action-btn-delete">
|
|
617
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
618
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
619
|
+
</svg>
|
|
620
|
+
</button>
|
|
621
|
+
</div>
|
|
622
|
+
</td>
|
|
623
|
+
</tr>
|
|
624
|
+
<tr>
|
|
625
|
+
<td>
|
|
626
|
+
<div class="user-cell">
|
|
627
|
+
<div class="avatar" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">EJ</div>
|
|
628
|
+
<div class="user-info">
|
|
629
|
+
<div class="user-name">Emily Johnson</div>
|
|
630
|
+
<div class="user-email">emily.j@example.com</div>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
</td>
|
|
634
|
+
<td><span class="role-badge">User</span></td>
|
|
635
|
+
<td><span class="status-badge status-pending">Pending</span></td>
|
|
636
|
+
<td>Never</td>
|
|
637
|
+
<td>Feb 6, 2024</td>
|
|
638
|
+
<td>
|
|
639
|
+
<div class="action-buttons">
|
|
640
|
+
<button class="action-btn">
|
|
641
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
642
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
643
|
+
</svg>
|
|
644
|
+
</button>
|
|
645
|
+
<button class="action-btn">
|
|
646
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
647
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
648
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
649
|
+
</svg>
|
|
650
|
+
</button>
|
|
651
|
+
<button class="action-btn action-btn-delete">
|
|
652
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
653
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
654
|
+
</svg>
|
|
655
|
+
</button>
|
|
656
|
+
</div>
|
|
657
|
+
</td>
|
|
658
|
+
</tr>
|
|
659
|
+
<tr>
|
|
660
|
+
<td>
|
|
661
|
+
<div class="user-cell">
|
|
662
|
+
<div class="avatar" style="background: linear-gradient(135deg, #8b5cf6, #a78bfa);">DW</div>
|
|
663
|
+
<div class="user-info">
|
|
664
|
+
<div class="user-name">David Williams</div>
|
|
665
|
+
<div class="user-email">david.w@example.com</div>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
</td>
|
|
669
|
+
<td><span class="role-badge">User</span></td>
|
|
670
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
671
|
+
<td>1 hour ago</td>
|
|
672
|
+
<td>Nov 20, 2023</td>
|
|
673
|
+
<td>
|
|
674
|
+
<div class="action-buttons">
|
|
675
|
+
<button class="action-btn">
|
|
676
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
677
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
678
|
+
</svg>
|
|
679
|
+
</button>
|
|
680
|
+
<button class="action-btn">
|
|
681
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
682
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
683
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
684
|
+
</svg>
|
|
685
|
+
</button>
|
|
686
|
+
<button class="action-btn action-btn-delete">
|
|
687
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
688
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
689
|
+
</svg>
|
|
690
|
+
</button>
|
|
691
|
+
</div>
|
|
692
|
+
</td>
|
|
693
|
+
</tr>
|
|
694
|
+
<tr>
|
|
695
|
+
<td>
|
|
696
|
+
<div class="user-cell">
|
|
697
|
+
<div class="avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">LB</div>
|
|
698
|
+
<div class="user-info">
|
|
699
|
+
<div class="user-name">Lisa Brown</div>
|
|
700
|
+
<div class="user-email">lisa.brown@example.com</div>
|
|
701
|
+
</div>
|
|
702
|
+
</div>
|
|
703
|
+
</td>
|
|
704
|
+
<td><span class="role-badge role-admin">Admin</span></td>
|
|
705
|
+
<td><span class="status-badge status-inactive">Inactive</span></td>
|
|
706
|
+
<td>3 days ago</td>
|
|
707
|
+
<td>Oct 8, 2023</td>
|
|
708
|
+
<td>
|
|
709
|
+
<div class="action-buttons">
|
|
710
|
+
<button class="action-btn">
|
|
711
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
712
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
713
|
+
</svg>
|
|
714
|
+
</button>
|
|
715
|
+
<button class="action-btn">
|
|
716
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
717
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
718
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
719
|
+
</svg>
|
|
720
|
+
</button>
|
|
721
|
+
<button class="action-btn action-btn-delete">
|
|
722
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
723
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
724
|
+
</svg>
|
|
725
|
+
</button>
|
|
726
|
+
</div>
|
|
727
|
+
</td>
|
|
728
|
+
</tr>
|
|
729
|
+
<tr>
|
|
730
|
+
<td>
|
|
731
|
+
<div class="user-cell">
|
|
732
|
+
<div class="avatar" style="background: linear-gradient(135deg, #06b6d4, #22d3ee);">JT</div>
|
|
733
|
+
<div class="user-info">
|
|
734
|
+
<div class="user-name">James Taylor</div>
|
|
735
|
+
<div class="user-email">james.t@example.com</div>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
</td>
|
|
739
|
+
<td><span class="role-badge">User</span></td>
|
|
740
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
741
|
+
<td>5 hours ago</td>
|
|
742
|
+
<td>Jan 28, 2024</td>
|
|
743
|
+
<td>
|
|
744
|
+
<div class="action-buttons">
|
|
745
|
+
<button class="action-btn">
|
|
746
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
747
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
748
|
+
</svg>
|
|
749
|
+
</button>
|
|
750
|
+
<button class="action-btn">
|
|
751
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
752
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
753
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
754
|
+
</svg>
|
|
755
|
+
</button>
|
|
756
|
+
<button class="action-btn action-btn-delete">
|
|
757
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
758
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
759
|
+
</svg>
|
|
760
|
+
</button>
|
|
761
|
+
</div>
|
|
762
|
+
</td>
|
|
763
|
+
</tr>
|
|
764
|
+
</tbody>
|
|
765
|
+
</table>
|
|
766
|
+
|
|
767
|
+
<div class="table-footer">
|
|
768
|
+
<div class="table-info">Showing 1-6 of 2,847 users</div>
|
|
769
|
+
<div class="pagination">
|
|
770
|
+
<button class="page-btn" disabled>
|
|
771
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
772
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
773
|
+
</svg>
|
|
774
|
+
</button>
|
|
775
|
+
<button class="page-btn active">1</button>
|
|
776
|
+
<button class="page-btn">2</button>
|
|
777
|
+
<button class="page-btn">3</button>
|
|
778
|
+
<span style="color: var(--text-muted, #64748b); padding: 0.5rem;">...</span>
|
|
779
|
+
<button class="page-btn">475</button>
|
|
780
|
+
<button class="page-btn">
|
|
781
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
782
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
783
|
+
</svg>
|
|
784
|
+
</button>
|
|
785
|
+
</div>
|
|
786
|
+
</div>
|
|
787
|
+
</div>
|
|
788
|
+
|
|
789
|
+
<!-- Quick Actions -->
|
|
790
|
+
<div class="quick-actions">
|
|
791
|
+
<div class="quick-action-card">
|
|
792
|
+
<div class="quick-action-icon" style="background: rgba(59, 130, 246, 0.15); color: #60a5fa;">
|
|
793
|
+
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
794
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
795
|
+
</svg>
|
|
796
|
+
</div>
|
|
797
|
+
<div class="quick-action-title">Bulk Import</div>
|
|
798
|
+
<div class="quick-action-desc">Import users from CSV file</div>
|
|
799
|
+
</div>
|
|
800
|
+
<div class="quick-action-card">
|
|
801
|
+
<div class="quick-action-icon" style="background: rgba(16, 185, 129, 0.15); color: #34d399;">
|
|
802
|
+
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
803
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
804
|
+
</svg>
|
|
805
|
+
</div>
|
|
806
|
+
<div class="quick-action-title">Approve All</div>
|
|
807
|
+
<div class="quick-action-desc">Approve pending users</div>
|
|
808
|
+
</div>
|
|
809
|
+
<div class="quick-action-card">
|
|
810
|
+
<div class="quick-action-icon" style="background: rgba(245, 158, 11, 0.15); color: #fbbf24;">
|
|
811
|
+
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
812
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
|
813
|
+
</svg>
|
|
814
|
+
</div>
|
|
815
|
+
<div class="quick-action-title">Export Data</div>
|
|
816
|
+
<div class="quick-action-desc">Download user reports</div>
|
|
817
|
+
</div>
|
|
818
|
+
</div>
|
|
819
|
+
</main>
|
|
820
|
+
</div>
|
|
821
|
+
|
|
822
|
+
<script>
|
|
823
|
+
function toggleTheme() {
|
|
824
|
+
document.body.classList.toggle('light-mode');
|
|
825
|
+
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
const savedTheme = localStorage.getItem('theme');
|
|
829
|
+
if (savedTheme === 'light') {
|
|
830
|
+
document.body.classList.add('light-mode');
|
|
831
|
+
}
|
|
832
|
+
</script>
|
|
833
|
+
</body>
|
|
834
|
+
</html>
|