@howssatoshi/quantumcss 1.10.1 → 1.11.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/README.md +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +303 -608
- package/examples/analytics-dashboard.html +128 -288
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +11 -27
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/index.html +342 -232
- package/examples/kitchen-sink.html +284 -94
- package/examples/music-streaming.html +32 -91
- package/examples/{news-template.html → news.html} +35 -11
- package/examples/{portfolio-resume.html → portfolio.html} +72 -26
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +7 -6
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +1025 -546
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +18 -16
- package/src/starlight.js +20 -15
- package/src/styles/quantum-base.css +4 -0
- package/src/styles/quantum-components.css +1882 -136
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2606 -1186
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -288
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -471
- package/examples/gradient-test.html +0 -129
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -525
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -432
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
- /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
|
@@ -5,217 +5,39 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Starlight Admin - Management Panel</title>
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
-
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
8
|
<script src="../src/starlight.js"></script>
|
|
10
9
|
<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
10
|
/* Quick Actions Panel */
|
|
161
11
|
.quick-actions {
|
|
162
|
-
display: grid;
|
|
163
|
-
grid-template-columns: repeat(3, 1fr);
|
|
164
|
-
gap: 1rem;
|
|
165
12
|
margin-top: 2rem;
|
|
166
13
|
}
|
|
167
14
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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.6);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.quick-action-icon {
|
|
185
|
-
width: 56px;
|
|
186
|
-
height: 56px;
|
|
187
|
-
border-radius: 16px;
|
|
188
|
-
display: flex;
|
|
189
|
-
align-items: center;
|
|
15
|
+
/* Mobile Menu Toggle button */
|
|
16
|
+
.menu-btn {
|
|
17
|
+
width: 40px;
|
|
18
|
+
height: 40px;
|
|
19
|
+
flex-direction: column;
|
|
190
20
|
justify-content: center;
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: 5px;
|
|
23
|
+
border-radius: 10px;
|
|
24
|
+
background: rgba(255, 255, 255, 0.05);
|
|
25
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
display: none;
|
|
29
|
+
z-index: 300;
|
|
199
30
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
31
|
+
.menu-btn span {
|
|
32
|
+
display: block;
|
|
33
|
+
width: 18px;
|
|
34
|
+
height: 2px;
|
|
35
|
+
background: var(--text-secondary, #94a3b8);
|
|
36
|
+
border-radius: 2px;
|
|
37
|
+
transition: all 0.2s ease;
|
|
204
38
|
}
|
|
205
39
|
|
|
206
40
|
/* Light Mode Overrides */
|
|
207
|
-
html[data-theme="light"] {
|
|
208
|
-
--bg-primary: #f8fafc;
|
|
209
|
-
--text-primary: #0f172a;
|
|
210
|
-
--text-secondary: #475569;
|
|
211
|
-
--text-muted: #64748b;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
html[data-theme="light"] .admin-logo {
|
|
215
|
-
border-bottom-color: #e2e8f0;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
html[data-theme="light"] .table-container,
|
|
219
41
|
html[data-theme="light"] .quick-action-card {
|
|
220
42
|
background: #ffffff;
|
|
221
43
|
border-color: #e2e8f0;
|
|
@@ -225,76 +47,31 @@
|
|
|
225
47
|
background: #f8fafc;
|
|
226
48
|
}
|
|
227
49
|
|
|
228
|
-
html[data-theme="light"] th {
|
|
229
|
-
background: #f8fafc;
|
|
230
|
-
border-bottom-color: #e2e8f0;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
html[data-theme="light"] td {
|
|
234
|
-
border-bottom-color: #f1f5f9;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
html[data-theme="light"] tr:hover td {
|
|
238
|
-
background: #f8fafc;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
html[data-theme="light"] .table-footer {
|
|
242
|
-
background: #f8fafc;
|
|
243
|
-
border-top-color: #e2e8f0;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
50
|
/* Responsive */
|
|
247
51
|
@media (max-width: 1280px) {
|
|
248
|
-
.
|
|
249
|
-
grid-template-columns:
|
|
52
|
+
.app-layout {
|
|
53
|
+
grid-template-columns: 64px 1fr;
|
|
250
54
|
}
|
|
251
55
|
|
|
252
|
-
.quick-
|
|
56
|
+
.quick-action-grid {
|
|
253
57
|
grid-template-columns: 1fr;
|
|
254
58
|
}
|
|
255
59
|
}
|
|
256
60
|
|
|
257
|
-
@media (max-width:
|
|
258
|
-
.
|
|
259
|
-
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.sidebar {
|
|
263
|
-
padding: 1rem;
|
|
61
|
+
@media (max-width: 768px) {
|
|
62
|
+
.menu-btn {
|
|
63
|
+
display: flex;
|
|
264
64
|
}
|
|
265
|
-
|
|
266
|
-
.
|
|
267
|
-
.nav-section-title,
|
|
268
|
-
.nav-item span,
|
|
269
|
-
.nav-badge,
|
|
270
|
-
.theme-label {
|
|
65
|
+
|
|
66
|
+
#sidebar-toggle:checked ~ .app-layout .menu-btn {
|
|
271
67
|
display: none;
|
|
272
68
|
}
|
|
273
|
-
|
|
274
|
-
.nav-item {
|
|
275
|
-
justify-content: center;
|
|
276
|
-
padding: 0.75rem;
|
|
277
|
-
}
|
|
278
|
-
}
|
|
279
69
|
|
|
280
|
-
|
|
281
|
-
.top-nav-actions .starlight-search {
|
|
70
|
+
.top-nav-actions .search {
|
|
282
71
|
display: none;
|
|
283
72
|
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
@media (max-width: 768px) {
|
|
287
|
-
.app-layout {
|
|
288
|
-
grid-template-columns: 1fr;
|
|
289
|
-
}
|
|
290
73
|
|
|
291
|
-
.
|
|
292
|
-
display: none;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
@media (max-width: 768px) {
|
|
297
|
-
.stats-grid {
|
|
74
|
+
.app-layout {
|
|
298
75
|
grid-template-columns: 1fr;
|
|
299
76
|
}
|
|
300
77
|
|
|
@@ -330,87 +107,65 @@
|
|
|
330
107
|
</style>
|
|
331
108
|
</head>
|
|
332
109
|
<body>
|
|
110
|
+
<input type="checkbox" id="sidebar-toggle" />
|
|
333
111
|
<div class="app-layout">
|
|
112
|
+
<label for="sidebar-toggle" class="aside-overlay" aria-hidden="true"></label>
|
|
334
113
|
<!-- Sidebar -->
|
|
335
|
-
<aside class="
|
|
336
|
-
<
|
|
337
|
-
<
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
</
|
|
341
|
-
</div>
|
|
342
|
-
<div>
|
|
343
|
-
<div class="text-xl font-bold text-gradient-starlight">Starlight</div>
|
|
344
|
-
<div class="text-xs text-slate-500">Admin Panel</div>
|
|
114
|
+
<aside class="aside-nav" aria-label="Sidebar navigation">
|
|
115
|
+
<label for="sidebar-toggle" class="aside-nav-header nav-logo" style="cursor: pointer;">
|
|
116
|
+
<i class="q-icon-starlight"></i>
|
|
117
|
+
<div class="aside-nav-brand">
|
|
118
|
+
<span><strong class="text-gradient">Starlight</strong>
|
|
119
|
+
Admin Panel</span>
|
|
345
120
|
</div>
|
|
346
|
-
</
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
353
|
-
<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>
|
|
354
|
-
</svg>
|
|
121
|
+
</label>
|
|
122
|
+
<nav class="aside-nav-inner">
|
|
123
|
+
<div class="aside-nav-section">
|
|
124
|
+
<span class="aside-nav-label">Main</span>
|
|
125
|
+
<a href="#" class="aside-nav-item active">
|
|
126
|
+
<i class="q-icon-clock-fill aside-nav-item-icon"></i>
|
|
355
127
|
<span>Users</span>
|
|
356
|
-
<span class="nav-badge">3</span>
|
|
357
|
-
</
|
|
358
|
-
<
|
|
359
|
-
<
|
|
360
|
-
<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>
|
|
361
|
-
</svg>
|
|
128
|
+
<span class="aside-nav-badge">3</span>
|
|
129
|
+
</a>
|
|
130
|
+
<a href="#" class="aside-nav-item">
|
|
131
|
+
<i class="q-icon-content aside-nav-item-icon"></i>
|
|
362
132
|
<span>Content</span>
|
|
363
|
-
</
|
|
364
|
-
<
|
|
365
|
-
<
|
|
366
|
-
<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>
|
|
367
|
-
</svg>
|
|
133
|
+
</a>
|
|
134
|
+
<a href="#" class="aside-nav-item">
|
|
135
|
+
<i class="q-icon-categories aside-nav-item-icon"></i>
|
|
368
136
|
<span>Categories</span>
|
|
369
|
-
</
|
|
370
|
-
<
|
|
371
|
-
<
|
|
372
|
-
<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>
|
|
373
|
-
</svg>
|
|
137
|
+
</a>
|
|
138
|
+
<a href="#" class="aside-nav-item">
|
|
139
|
+
<i class="q-icon-message-circle aside-nav-item-icon"></i>
|
|
374
140
|
<span>Comments</span>
|
|
375
|
-
</
|
|
376
|
-
</
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
<button class="nav-item nav-item-custom">
|
|
383
|
-
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
384
|
-
<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>
|
|
385
|
-
</svg>
|
|
141
|
+
</a>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="aside-nav-divider"></div>
|
|
144
|
+
<div class="aside-nav-section">
|
|
145
|
+
<span class="aside-nav-label">System</span>
|
|
146
|
+
<a href="#" class="aside-nav-item">
|
|
147
|
+
<i class="q-icon-activity aside-nav-item-icon"></i>
|
|
386
148
|
<span>Analytics</span>
|
|
387
|
-
</
|
|
388
|
-
<
|
|
389
|
-
<
|
|
390
|
-
<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>
|
|
391
|
-
</svg>
|
|
149
|
+
</a>
|
|
150
|
+
<a href="#" class="aside-nav-item">
|
|
151
|
+
<i class="q-icon-security aside-nav-item-icon"></i>
|
|
392
152
|
<span>Security</span>
|
|
393
|
-
</
|
|
394
|
-
<
|
|
395
|
-
<
|
|
396
|
-
<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>
|
|
397
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
398
|
-
</svg>
|
|
153
|
+
</a>
|
|
154
|
+
<a href="#" class="aside-nav-item">
|
|
155
|
+
<i class="q-icon-settings aside-nav-item-icon"></i>
|
|
399
156
|
<span>Settings</span>
|
|
400
|
-
</
|
|
401
|
-
</
|
|
402
|
-
</div>
|
|
157
|
+
</a>
|
|
158
|
+
</div>
|
|
403
159
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
<
|
|
411
|
-
</
|
|
412
|
-
|
|
413
|
-
</button>
|
|
160
|
+
</nav>
|
|
161
|
+
<div class="aside-nav-footer">
|
|
162
|
+
<a href="#" class="aside-nav-user">
|
|
163
|
+
<div class="aside-nav-user-avatar">SC</div>
|
|
164
|
+
<div class="aside-nav-user-info">
|
|
165
|
+
<strong>Sarah Chen</strong>
|
|
166
|
+
<span>Admin</span>
|
|
167
|
+
</div>
|
|
168
|
+
</a>
|
|
414
169
|
</div>
|
|
415
170
|
</aside>
|
|
416
171
|
|
|
@@ -418,33 +173,31 @@
|
|
|
418
173
|
<main class="main-content" style="padding: 2rem;">
|
|
419
174
|
<!-- Top Navigation -->
|
|
420
175
|
<div class="top-nav">
|
|
421
|
-
<
|
|
422
|
-
<
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
<
|
|
426
|
-
|
|
427
|
-
|
|
176
|
+
<div class="flex items-center gap-4">
|
|
177
|
+
<label for="sidebar-toggle" class="menu-btn" aria-label="Toggle sidebar">
|
|
178
|
+
<span></span><span></span><span></span>
|
|
179
|
+
</label>
|
|
180
|
+
<nav class="breadcrumb">
|
|
181
|
+
<div class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></div>
|
|
182
|
+
<div class="breadcrumb-separator">/</div>
|
|
183
|
+
<div class="breadcrumb-item"><a href="#" class="breadcrumb-link">Users</a></div>
|
|
184
|
+
<div class="breadcrumb-separator">/</div>
|
|
185
|
+
<div class="breadcrumb-item breadcrumb-current">All Users</div>
|
|
186
|
+
</nav>
|
|
187
|
+
</div>
|
|
428
188
|
<div class="top-nav-actions">
|
|
429
|
-
<div class="
|
|
430
|
-
<
|
|
431
|
-
|
|
432
|
-
</svg>
|
|
433
|
-
<input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search users...">
|
|
189
|
+
<div class="search has-icon max-w-xs">
|
|
190
|
+
<i class="q-icon-search"></i>
|
|
191
|
+
<input type="text" class="input-starlight search-input" placeholder="Search users...">
|
|
434
192
|
</div>
|
|
435
193
|
<button class="icon-btn">
|
|
436
|
-
<
|
|
437
|
-
<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>
|
|
438
|
-
</svg>
|
|
194
|
+
<i class="q-icon-notification"></i>
|
|
439
195
|
<span class="notification-dot"></span>
|
|
440
196
|
</button>
|
|
441
197
|
<button class="icon-btn" onclick="toggleTheme()">
|
|
442
|
-
<
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
<svg class="moon-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
446
|
-
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
447
|
-
</svg>
|
|
198
|
+
<i class="q-icon-display"></i>
|
|
199
|
+
<i class="q-icon-sun hidden sun-icon"></i>
|
|
200
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
448
201
|
</button>
|
|
449
202
|
</div>
|
|
450
203
|
</div>
|
|
@@ -457,15 +210,11 @@
|
|
|
457
210
|
</div>
|
|
458
211
|
<div class="page-actions">
|
|
459
212
|
<button class="btn btn-secondary h-12">
|
|
460
|
-
<
|
|
461
|
-
<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>
|
|
462
|
-
</svg>
|
|
213
|
+
<i class="q-icon-export"></i>
|
|
463
214
|
Export
|
|
464
215
|
</button>
|
|
465
216
|
<button class="btn btn-primary h-12">
|
|
466
|
-
<
|
|
467
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
468
|
-
</svg>
|
|
217
|
+
<i class="q-icon-plus"></i>
|
|
469
218
|
Add User
|
|
470
219
|
</button>
|
|
471
220
|
</div>
|
|
@@ -476,9 +225,7 @@
|
|
|
476
225
|
<div class="stat-card">
|
|
477
226
|
<div class="stat-header">
|
|
478
227
|
<div class="stat-icon stat-icon-blue">
|
|
479
|
-
<
|
|
480
|
-
<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>
|
|
481
|
-
</svg>
|
|
228
|
+
<i class="q-icon-users-group"></i>
|
|
482
229
|
</div>
|
|
483
230
|
</div>
|
|
484
231
|
<div class="stat-value">2,847</div>
|
|
@@ -488,9 +235,7 @@
|
|
|
488
235
|
<div class="stat-card">
|
|
489
236
|
<div class="stat-header">
|
|
490
237
|
<div class="stat-icon stat-icon-green">
|
|
491
|
-
<
|
|
492
|
-
<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>
|
|
493
|
-
</svg>
|
|
238
|
+
<i class="q-icon-check-circle-fill"></i>
|
|
494
239
|
</div>
|
|
495
240
|
</div>
|
|
496
241
|
<div class="stat-value">2,543</div>
|
|
@@ -500,9 +245,7 @@
|
|
|
500
245
|
<div class="stat-card">
|
|
501
246
|
<div class="stat-header">
|
|
502
247
|
<div class="stat-icon stat-icon-orange">
|
|
503
|
-
<
|
|
504
|
-
<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>
|
|
505
|
-
</svg>
|
|
248
|
+
<i class="q-icon-clock-fill"></i>
|
|
506
249
|
</div>
|
|
507
250
|
</div>
|
|
508
251
|
<div class="stat-value">156</div>
|
|
@@ -512,9 +255,7 @@
|
|
|
512
255
|
<div class="stat-card">
|
|
513
256
|
<div class="stat-header">
|
|
514
257
|
<div class="stat-icon stat-icon-purple">
|
|
515
|
-
<
|
|
516
|
-
<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>
|
|
517
|
-
</svg>
|
|
258
|
+
<i class="q-icon-user-x-fill"></i>
|
|
518
259
|
</div>
|
|
519
260
|
</div>
|
|
520
261
|
<div class="stat-value">148</div>
|
|
@@ -523,17 +264,21 @@
|
|
|
523
264
|
</div>
|
|
524
265
|
|
|
525
266
|
<!-- Data Table -->
|
|
526
|
-
<div class="table-container">
|
|
527
|
-
<div class="table-header">
|
|
528
|
-
<
|
|
529
|
-
<div class="table-filters">
|
|
530
|
-
<
|
|
267
|
+
<div class="table-premium-container">
|
|
268
|
+
<div class="table-premium-header">
|
|
269
|
+
<div class="table-premium-title">All Users</div>
|
|
270
|
+
<div class="table-premium-filters">
|
|
271
|
+
<div class="search has-icon" style="width: 240px;">
|
|
272
|
+
<i class="q-icon-search"></i>
|
|
273
|
+
<input type="text" class="search-input" placeholder="Search users...">
|
|
274
|
+
</div>
|
|
275
|
+
<select class="btn btn-secondary btn-sm" style="appearance: auto;">
|
|
531
276
|
<option>All Roles</option>
|
|
532
277
|
<option>Admin</option>
|
|
533
278
|
<option>Moderator</option>
|
|
534
279
|
<option>User</option>
|
|
535
280
|
</select>
|
|
536
|
-
<select class="
|
|
281
|
+
<select class="btn btn-secondary btn-sm" style="appearance: auto;">
|
|
537
282
|
<option>All Status</option>
|
|
538
283
|
<option>Active</option>
|
|
539
284
|
<option>Pending</option>
|
|
@@ -542,238 +287,196 @@
|
|
|
542
287
|
</div>
|
|
543
288
|
</div>
|
|
544
289
|
|
|
545
|
-
<
|
|
546
|
-
<
|
|
547
|
-
<
|
|
548
|
-
<
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
<
|
|
558
|
-
<
|
|
559
|
-
<
|
|
560
|
-
<div class="
|
|
561
|
-
|
|
562
|
-
<div class="user-
|
|
563
|
-
|
|
290
|
+
<div class="overflow-x-auto">
|
|
291
|
+
<table class="table-premium">
|
|
292
|
+
<thead>
|
|
293
|
+
<tr>
|
|
294
|
+
<th>User</th>
|
|
295
|
+
<th>Role</th>
|
|
296
|
+
<th>Status</th>
|
|
297
|
+
<th>Last Active</th>
|
|
298
|
+
<th>Joined</th>
|
|
299
|
+
<th>Actions</th>
|
|
300
|
+
</tr>
|
|
301
|
+
</thead>
|
|
302
|
+
<tbody>
|
|
303
|
+
<tr>
|
|
304
|
+
<td>
|
|
305
|
+
<div class="user-cell">
|
|
306
|
+
<div class="avatar">SC</div>
|
|
307
|
+
<div class="user-info">
|
|
308
|
+
<div class="user-name">Sarah Chen</div>
|
|
309
|
+
<div class="user-email">sarah.chen@example.com</div>
|
|
310
|
+
</div>
|
|
564
311
|
</div>
|
|
565
|
-
</
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
<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>
|
|
582
|
-
</svg>
|
|
583
|
-
</button>
|
|
584
|
-
<button class="action-btn action-btn-delete">
|
|
585
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
586
|
-
<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>
|
|
587
|
-
</svg>
|
|
588
|
-
</button>
|
|
589
|
-
</div>
|
|
590
|
-
</td>
|
|
591
|
-
</tr>
|
|
592
|
-
<tr>
|
|
593
|
-
<td>
|
|
594
|
-
<div class="user-cell">
|
|
595
|
-
<div class="avatar" style="background: linear-gradient(135deg, #10b981, #34d399);">MR</div>
|
|
596
|
-
<div class="user-info">
|
|
597
|
-
<div class="user-name">Michael Rodriguez</div>
|
|
598
|
-
<div class="user-email">m.rodriguez@example.com</div>
|
|
312
|
+
</td>
|
|
313
|
+
<td><span class="role-badge role-admin">Admin</span></td>
|
|
314
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
315
|
+
<td>2 minutes ago</td>
|
|
316
|
+
<td>Jan 15, 2024</td>
|
|
317
|
+
<td>
|
|
318
|
+
<div class="action-buttons">
|
|
319
|
+
<button class="action-btn">
|
|
320
|
+
<i class="q-icon-edit"></i>
|
|
321
|
+
</button>
|
|
322
|
+
<button class="action-btn">
|
|
323
|
+
<i class="q-icon-eye-fill"></i>
|
|
324
|
+
</button>
|
|
325
|
+
<button class="action-btn action-btn-delete">
|
|
326
|
+
<i class="q-icon-trash"></i>
|
|
327
|
+
</button>
|
|
599
328
|
</div>
|
|
600
|
-
</
|
|
601
|
-
</
|
|
602
|
-
<
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
<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>
|
|
611
|
-
</svg>
|
|
612
|
-
</button>
|
|
613
|
-
<button class="action-btn">
|
|
614
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
615
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
616
|
-
<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>
|
|
617
|
-
</svg>
|
|
618
|
-
</button>
|
|
619
|
-
<button class="action-btn action-btn-delete">
|
|
620
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
621
|
-
<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>
|
|
622
|
-
</svg>
|
|
623
|
-
</button>
|
|
624
|
-
</div>
|
|
625
|
-
</td>
|
|
626
|
-
</tr>
|
|
627
|
-
<tr>
|
|
628
|
-
<td>
|
|
629
|
-
<div class="user-cell">
|
|
630
|
-
<div class="avatar" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">EJ</div>
|
|
631
|
-
<div class="user-info">
|
|
632
|
-
<div class="user-name">Emily Johnson</div>
|
|
633
|
-
<div class="user-email">emily.j@example.com</div>
|
|
329
|
+
</td>
|
|
330
|
+
</tr>
|
|
331
|
+
<tr>
|
|
332
|
+
<td>
|
|
333
|
+
<div class="user-cell">
|
|
334
|
+
<div class="avatar" style="background: linear-gradient(135deg, #10b981, #34d399);">MR</div>
|
|
335
|
+
<div class="user-info">
|
|
336
|
+
<div class="user-name">Michael Rodriguez</div>
|
|
337
|
+
<div class="user-email">m.rodriguez@example.com</div>
|
|
338
|
+
</div>
|
|
634
339
|
</div>
|
|
635
|
-
</
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
<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>
|
|
652
|
-
</svg>
|
|
653
|
-
</button>
|
|
654
|
-
<button class="action-btn action-btn-delete">
|
|
655
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
656
|
-
<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>
|
|
657
|
-
</svg>
|
|
658
|
-
</button>
|
|
659
|
-
</div>
|
|
660
|
-
</td>
|
|
661
|
-
</tr>
|
|
662
|
-
<tr>
|
|
663
|
-
<td>
|
|
664
|
-
<div class="user-cell">
|
|
665
|
-
<div class="avatar" style="background: linear-gradient(135deg, #8b5cf6, #a78bfa);">DW</div>
|
|
666
|
-
<div class="user-info">
|
|
667
|
-
<div class="user-name">David Williams</div>
|
|
668
|
-
<div class="user-email">david.w@example.com</div>
|
|
340
|
+
</td>
|
|
341
|
+
<td><span class="role-badge role-moderator">Moderator</span></td>
|
|
342
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
343
|
+
<td>15 minutes ago</td>
|
|
344
|
+
<td>Dec 3, 2023</td>
|
|
345
|
+
<td>
|
|
346
|
+
<div class="action-buttons">
|
|
347
|
+
<button class="action-btn">
|
|
348
|
+
<i class="q-icon-edit"></i>
|
|
349
|
+
</button>
|
|
350
|
+
<button class="action-btn">
|
|
351
|
+
<i class="q-icon-eye-fill"></i>
|
|
352
|
+
</button>
|
|
353
|
+
<button class="action-btn action-btn-delete">
|
|
354
|
+
<i class="q-icon-trash"></i>
|
|
355
|
+
</button>
|
|
669
356
|
</div>
|
|
670
|
-
</
|
|
671
|
-
</
|
|
672
|
-
<
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
<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>
|
|
681
|
-
</svg>
|
|
682
|
-
</button>
|
|
683
|
-
<button class="action-btn">
|
|
684
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
685
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
686
|
-
<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>
|
|
687
|
-
</svg>
|
|
688
|
-
</button>
|
|
689
|
-
<button class="action-btn action-btn-delete">
|
|
690
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
691
|
-
<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>
|
|
692
|
-
</svg>
|
|
693
|
-
</button>
|
|
694
|
-
</div>
|
|
695
|
-
</td>
|
|
696
|
-
</tr>
|
|
697
|
-
<tr>
|
|
698
|
-
<td>
|
|
699
|
-
<div class="user-cell">
|
|
700
|
-
<div class="avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">LB</div>
|
|
701
|
-
<div class="user-info">
|
|
702
|
-
<div class="user-name">Lisa Brown</div>
|
|
703
|
-
<div class="user-email">lisa.brown@example.com</div>
|
|
357
|
+
</td>
|
|
358
|
+
</tr>
|
|
359
|
+
<tr>
|
|
360
|
+
<td>
|
|
361
|
+
<div class="user-cell">
|
|
362
|
+
<div class="avatar" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">EJ</div>
|
|
363
|
+
<div class="user-info">
|
|
364
|
+
<div class="user-name">Emily Johnson</div>
|
|
365
|
+
<div class="user-email">emily.j@example.com</div>
|
|
366
|
+
</div>
|
|
704
367
|
</div>
|
|
705
|
-
</
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
<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>
|
|
722
|
-
</svg>
|
|
723
|
-
</button>
|
|
724
|
-
<button class="action-btn action-btn-delete">
|
|
725
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
726
|
-
<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>
|
|
727
|
-
</svg>
|
|
728
|
-
</button>
|
|
729
|
-
</div>
|
|
730
|
-
</td>
|
|
731
|
-
</tr>
|
|
732
|
-
<tr>
|
|
733
|
-
<td>
|
|
734
|
-
<div class="user-cell">
|
|
735
|
-
<div class="avatar" style="background: linear-gradient(135deg, #06b6d4, #22d3ee);">JT</div>
|
|
736
|
-
<div class="user-info">
|
|
737
|
-
<div class="user-name">James Taylor</div>
|
|
738
|
-
<div class="user-email">james.t@example.com</div>
|
|
368
|
+
</td>
|
|
369
|
+
<td><span class="role-badge">User</span></td>
|
|
370
|
+
<td><span class="status-badge status-pending">Pending</span></td>
|
|
371
|
+
<td>Never</td>
|
|
372
|
+
<td>Feb 6, 2024</td>
|
|
373
|
+
<td>
|
|
374
|
+
<div class="action-buttons">
|
|
375
|
+
<button class="action-btn">
|
|
376
|
+
<i class="q-icon-edit"></i>
|
|
377
|
+
</button>
|
|
378
|
+
<button class="action-btn">
|
|
379
|
+
<i class="q-icon-eye-fill"></i>
|
|
380
|
+
</button>
|
|
381
|
+
<button class="action-btn action-btn-delete">
|
|
382
|
+
<i class="q-icon-trash"></i>
|
|
383
|
+
</button>
|
|
739
384
|
</div>
|
|
740
|
-
</
|
|
741
|
-
</
|
|
742
|
-
<
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
385
|
+
</td>
|
|
386
|
+
</tr>
|
|
387
|
+
<tr>
|
|
388
|
+
<td>
|
|
389
|
+
<div class="user-cell">
|
|
390
|
+
<div class="avatar" style="background: linear-gradient(135deg, #8b5cf6, #a78bfa);">DW</div>
|
|
391
|
+
<div class="user-info">
|
|
392
|
+
<div class="user-name">David Williams</div>
|
|
393
|
+
<div class="user-email">david.w@example.com</div>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
</td>
|
|
397
|
+
<td><span class="role-badge">User</span></td>
|
|
398
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
399
|
+
<td>1 hour ago</td>
|
|
400
|
+
<td>Nov 20, 2023</td>
|
|
401
|
+
<td>
|
|
402
|
+
<div class="action-buttons">
|
|
403
|
+
<button class="action-btn">
|
|
404
|
+
<i class="q-icon-edit"></i>
|
|
405
|
+
</button>
|
|
406
|
+
<button class="action-btn">
|
|
407
|
+
<i class="q-icon-eye-fill"></i>
|
|
408
|
+
</button>
|
|
409
|
+
<button class="action-btn action-btn-delete">
|
|
410
|
+
<i class="q-icon-trash"></i>
|
|
411
|
+
</button>
|
|
412
|
+
</div>
|
|
413
|
+
</td>
|
|
414
|
+
</tr>
|
|
415
|
+
<tr>
|
|
416
|
+
<td>
|
|
417
|
+
<div class="user-cell">
|
|
418
|
+
<div class="avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">LB</div>
|
|
419
|
+
<div class="user-info">
|
|
420
|
+
<div class="user-name">Lisa Brown</div>
|
|
421
|
+
<div class="user-email">lisa.brown@example.com</div>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
</td>
|
|
425
|
+
<td><span class="role-badge role-admin">Admin</span></td>
|
|
426
|
+
<td><span class="status-badge status-inactive">Inactive</span></td>
|
|
427
|
+
<td>3 days ago</td>
|
|
428
|
+
<td>Oct 8, 2023</td>
|
|
429
|
+
<td>
|
|
430
|
+
<div class="action-buttons">
|
|
431
|
+
<button class="action-btn">
|
|
432
|
+
<i class="q-icon-edit"></i>
|
|
433
|
+
</button>
|
|
434
|
+
<button class="action-btn">
|
|
435
|
+
<i class="q-icon-eye-fill"></i>
|
|
436
|
+
</button>
|
|
437
|
+
<button class="action-btn action-btn-delete">
|
|
438
|
+
<i class="q-icon-trash"></i>
|
|
439
|
+
</button>
|
|
440
|
+
</div>
|
|
441
|
+
</td>
|
|
442
|
+
</tr>
|
|
443
|
+
<tr>
|
|
444
|
+
<td>
|
|
445
|
+
<div class="user-cell">
|
|
446
|
+
<div class="avatar" style="background: linear-gradient(135deg, #06b6d4, #22d3ee);">JT</div>
|
|
447
|
+
<div class="user-info">
|
|
448
|
+
<div class="user-name">James Taylor</div>
|
|
449
|
+
<div class="user-email">james.t@example.com</div>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</td>
|
|
453
|
+
<td><span class="role-badge">User</span></td>
|
|
454
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
455
|
+
<td>5 hours ago</td>
|
|
456
|
+
<td>Jan 28, 2024</td>
|
|
457
|
+
<td>
|
|
458
|
+
<div class="action-buttons">
|
|
459
|
+
<button class="action-btn">
|
|
460
|
+
<i class="q-icon-edit"></i>
|
|
461
|
+
</button>
|
|
462
|
+
<button class="action-btn">
|
|
463
|
+
<i class="q-icon-eye-fill"></i>
|
|
464
|
+
</button>
|
|
465
|
+
<button class="action-btn action-btn-delete">
|
|
466
|
+
<i class="q-icon-trash"></i>
|
|
467
|
+
</button>
|
|
468
|
+
</div>
|
|
469
|
+
</td>
|
|
470
|
+
</tr>
|
|
471
|
+
</tbody>
|
|
472
|
+
</table>
|
|
473
|
+
</div>
|
|
769
474
|
|
|
770
|
-
<div class="table-footer">
|
|
771
|
-
<div class="table-info">Showing 1-6 of 2,847 users</div>
|
|
475
|
+
<div class="table-premium-footer">
|
|
476
|
+
<div class="table-premium-info">Showing 1-6 of 2,847 users</div>
|
|
772
477
|
<div class="pagination">
|
|
773
478
|
<button class="page-btn" disabled>
|
|
774
|
-
<
|
|
775
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
776
|
-
</svg>
|
|
479
|
+
<i class="q-icon-chevron-left"></i>
|
|
777
480
|
</button>
|
|
778
481
|
<button class="page-btn active">1</button>
|
|
779
482
|
<button class="page-btn">2</button>
|
|
@@ -781,39 +484,31 @@
|
|
|
781
484
|
<span style="color: var(--text-muted, #64748b); padding: 0.5rem;">...</span>
|
|
782
485
|
<button class="page-btn">475</button>
|
|
783
486
|
<button class="page-btn">
|
|
784
|
-
<
|
|
785
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
786
|
-
</svg>
|
|
487
|
+
<i class="q-icon-chevron-right"></i>
|
|
787
488
|
</button>
|
|
788
489
|
</div>
|
|
789
490
|
</div>
|
|
790
491
|
</div>
|
|
791
492
|
|
|
792
493
|
<!-- Quick Actions -->
|
|
793
|
-
<div class="quick-
|
|
494
|
+
<div class="quick-action-grid" style="margin-top: 2rem;">
|
|
794
495
|
<div class="quick-action-card">
|
|
795
|
-
<div class="quick-action-icon"
|
|
796
|
-
<
|
|
797
|
-
<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>
|
|
798
|
-
</svg>
|
|
496
|
+
<div class="quick-action-icon">
|
|
497
|
+
<i class="q-icon-users"></i>
|
|
799
498
|
</div>
|
|
800
499
|
<div class="quick-action-title">Bulk Import</div>
|
|
801
500
|
<div class="quick-action-desc">Import users from CSV file</div>
|
|
802
501
|
</div>
|
|
803
502
|
<div class="quick-action-card">
|
|
804
|
-
<div class="quick-action-icon" style="
|
|
805
|
-
<
|
|
806
|
-
<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>
|
|
807
|
-
</svg>
|
|
503
|
+
<div class="quick-action-icon" style="color: #34d399;">
|
|
504
|
+
<i class="q-icon-check-circle-fill"></i>
|
|
808
505
|
</div>
|
|
809
506
|
<div class="quick-action-title">Approve All</div>
|
|
810
507
|
<div class="quick-action-desc">Approve pending users</div>
|
|
811
508
|
</div>
|
|
812
509
|
<div class="quick-action-card">
|
|
813
|
-
<div class="quick-action-icon" style="
|
|
814
|
-
<
|
|
815
|
-
<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>
|
|
816
|
-
</svg>
|
|
510
|
+
<div class="quick-action-icon" style="color: #fbbf24;">
|
|
511
|
+
<i class="q-icon-export"></i>
|
|
817
512
|
</div>
|
|
818
513
|
<div class="quick-action-title">Export Data</div>
|
|
819
514
|
<div class="quick-action-desc">Download user reports</div>
|