@howssatoshi/quantumcss 1.10.1 → 1.11.0
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 +317 -600
- package/examples/analytics-dashboard.html +130 -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} +56 -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 +303 -92
- 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 +1879 -134
- 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,87 @@
|
|
|
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
|
-
<div class="
|
|
338
|
-
<
|
|
339
|
-
<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>
|
|
340
|
-
</svg>
|
|
114
|
+
<aside class="aside-nav" aria-label="Sidebar navigation">
|
|
115
|
+
<label for="sidebar-toggle" class="aside-nav-header" style="cursor: pointer;">
|
|
116
|
+
<div class="aside-nav-icon">
|
|
117
|
+
<i class="q-icon-starlight"></i>
|
|
341
118
|
</div>
|
|
342
|
-
<div>
|
|
343
|
-
<
|
|
344
|
-
|
|
119
|
+
<div class="aside-nav-brand">
|
|
120
|
+
<span><strong class="text-gradient">Starlight</strong>
|
|
121
|
+
Admin Panel</span>
|
|
345
122
|
</div>
|
|
346
|
-
</
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
<path
|
|
123
|
+
</label>
|
|
124
|
+
<nav class="aside-nav-inner">
|
|
125
|
+
<div class="aside-nav-section">
|
|
126
|
+
<span class="aside-nav-label">Main</span>
|
|
127
|
+
<a href="#" class="aside-nav-item active">
|
|
128
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
129
|
+
<path d="M3 9a6 6 0 1 1 12 0 6 6 0 0 1-12 0z"/>
|
|
130
|
+
<path d="M9 6v3l2 2"/>
|
|
354
131
|
</svg>
|
|
355
132
|
<span>Users</span>
|
|
356
|
-
<span class="nav-badge">3</span>
|
|
357
|
-
</
|
|
358
|
-
<
|
|
359
|
-
<svg fill="none" stroke="currentColor"
|
|
360
|
-
<
|
|
133
|
+
<span class="aside-nav-badge">3</span>
|
|
134
|
+
</a>
|
|
135
|
+
<a href="#" class="aside-nav-item">
|
|
136
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
137
|
+
<rect x="2" y="3" width="14" height="12" rx="2"/>
|
|
138
|
+
<path d="M2 7h14M6 11h6"/>
|
|
361
139
|
</svg>
|
|
362
140
|
<span>Content</span>
|
|
363
|
-
</
|
|
364
|
-
<
|
|
365
|
-
<svg fill="none" stroke="currentColor"
|
|
366
|
-
<path
|
|
141
|
+
</a>
|
|
142
|
+
<a href="#" class="aside-nav-item">
|
|
143
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
144
|
+
<path d="M3 5h12M3 9h8M3 13h10"/>
|
|
367
145
|
</svg>
|
|
368
146
|
<span>Categories</span>
|
|
369
|
-
</
|
|
370
|
-
<
|
|
371
|
-
<svg fill="none" stroke="currentColor"
|
|
372
|
-
<path
|
|
147
|
+
</a>
|
|
148
|
+
<a href="#" class="aside-nav-item">
|
|
149
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
150
|
+
<path d="M8 3v2M14 3v2M3 8h2M13 8h2M5 13v2M11 13v2"/>
|
|
151
|
+
<circle cx="9" cy="9" r="5"/>
|
|
373
152
|
</svg>
|
|
374
153
|
<span>Comments</span>
|
|
375
|
-
</
|
|
376
|
-
</
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
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>
|
|
154
|
+
</a>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="aside-nav-divider"></div>
|
|
157
|
+
<div class="aside-nav-section">
|
|
158
|
+
<span class="aside-nav-label">System</span>
|
|
159
|
+
<a href="#" class="aside-nav-item">
|
|
160
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
161
|
+
<path d="M3 3v6h6M15 15v-6h-6"/>
|
|
162
|
+
<path d="M3 9l3 3 3-3 3 3 3-3"/>
|
|
385
163
|
</svg>
|
|
386
164
|
<span>Analytics</span>
|
|
387
|
-
</
|
|
388
|
-
<
|
|
389
|
-
<svg fill="none" stroke="currentColor"
|
|
390
|
-
<path
|
|
165
|
+
</a>
|
|
166
|
+
<a href="#" class="aside-nav-item">
|
|
167
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
168
|
+
<path d="M9 3l7 12H2l7-12z"/>
|
|
169
|
+
<path d="M9 8v4M9 14v.01"/>
|
|
391
170
|
</svg>
|
|
392
171
|
<span>Security</span>
|
|
393
|
-
</
|
|
394
|
-
<
|
|
395
|
-
<svg fill="none" stroke="currentColor"
|
|
396
|
-
<
|
|
397
|
-
<path
|
|
172
|
+
</a>
|
|
173
|
+
<a href="#" class="aside-nav-item">
|
|
174
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
175
|
+
<circle cx="9" cy="9" r="2"/>
|
|
176
|
+
<path d="M9 2v2M9 14v2M2 9h2M14 9h2M4.22 4.22l1.42 1.42M12.36 12.36l1.42 1.42M4.22 13.78l1.42-1.42M12.36 5.64l1.42-1.42"/>
|
|
398
177
|
</svg>
|
|
399
178
|
<span>Settings</span>
|
|
400
|
-
</
|
|
401
|
-
</
|
|
402
|
-
</div>
|
|
179
|
+
</a>
|
|
180
|
+
</div>
|
|
403
181
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
<
|
|
411
|
-
</
|
|
412
|
-
|
|
413
|
-
</button>
|
|
182
|
+
</nav>
|
|
183
|
+
<div class="aside-nav-footer">
|
|
184
|
+
<a href="#" class="aside-nav-user">
|
|
185
|
+
<div class="aside-nav-user-avatar">SC</div>
|
|
186
|
+
<div class="aside-nav-user-info">
|
|
187
|
+
<strong>Sarah Chen</strong>
|
|
188
|
+
<span>Admin</span>
|
|
189
|
+
</div>
|
|
190
|
+
</a>
|
|
414
191
|
</div>
|
|
415
192
|
</aside>
|
|
416
193
|
|
|
@@ -418,33 +195,31 @@
|
|
|
418
195
|
<main class="main-content" style="padding: 2rem;">
|
|
419
196
|
<!-- Top Navigation -->
|
|
420
197
|
<div class="top-nav">
|
|
421
|
-
<
|
|
422
|
-
<
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
<
|
|
426
|
-
|
|
427
|
-
|
|
198
|
+
<div class="flex items-center gap-4">
|
|
199
|
+
<label for="sidebar-toggle" class="menu-btn" aria-label="Toggle sidebar">
|
|
200
|
+
<span></span><span></span><span></span>
|
|
201
|
+
</label>
|
|
202
|
+
<nav class="breadcrumb">
|
|
203
|
+
<div class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></div>
|
|
204
|
+
<div class="breadcrumb-separator">/</div>
|
|
205
|
+
<div class="breadcrumb-item"><a href="#" class="breadcrumb-link">Users</a></div>
|
|
206
|
+
<div class="breadcrumb-separator">/</div>
|
|
207
|
+
<div class="breadcrumb-item breadcrumb-current">All Users</div>
|
|
208
|
+
</nav>
|
|
209
|
+
</div>
|
|
428
210
|
<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...">
|
|
211
|
+
<div class="search has-icon max-w-xs">
|
|
212
|
+
<i class="q-icon-search"></i>
|
|
213
|
+
<input type="text" class="input-starlight search-input" placeholder="Search users...">
|
|
434
214
|
</div>
|
|
435
215
|
<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>
|
|
216
|
+
<i class="q-icon-notification"></i>
|
|
439
217
|
<span class="notification-dot"></span>
|
|
440
218
|
</button>
|
|
441
219
|
<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>
|
|
220
|
+
<i class="q-icon-display"></i>
|
|
221
|
+
<i class="q-icon-sun hidden sun-icon"></i>
|
|
222
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
448
223
|
</button>
|
|
449
224
|
</div>
|
|
450
225
|
</div>
|
|
@@ -457,15 +232,11 @@
|
|
|
457
232
|
</div>
|
|
458
233
|
<div class="page-actions">
|
|
459
234
|
<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>
|
|
235
|
+
<i class="q-icon-export"></i>
|
|
463
236
|
Export
|
|
464
237
|
</button>
|
|
465
238
|
<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>
|
|
239
|
+
<i class="q-icon-plus"></i>
|
|
469
240
|
Add User
|
|
470
241
|
</button>
|
|
471
242
|
</div>
|
|
@@ -476,9 +247,7 @@
|
|
|
476
247
|
<div class="stat-card">
|
|
477
248
|
<div class="stat-header">
|
|
478
249
|
<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>
|
|
250
|
+
<i class="q-icon-users-group"></i>
|
|
482
251
|
</div>
|
|
483
252
|
</div>
|
|
484
253
|
<div class="stat-value">2,847</div>
|
|
@@ -488,9 +257,7 @@
|
|
|
488
257
|
<div class="stat-card">
|
|
489
258
|
<div class="stat-header">
|
|
490
259
|
<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>
|
|
260
|
+
<i class="q-icon-check-circle-fill"></i>
|
|
494
261
|
</div>
|
|
495
262
|
</div>
|
|
496
263
|
<div class="stat-value">2,543</div>
|
|
@@ -500,9 +267,7 @@
|
|
|
500
267
|
<div class="stat-card">
|
|
501
268
|
<div class="stat-header">
|
|
502
269
|
<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>
|
|
270
|
+
<i class="q-icon-clock-fill"></i>
|
|
506
271
|
</div>
|
|
507
272
|
</div>
|
|
508
273
|
<div class="stat-value">156</div>
|
|
@@ -512,9 +277,7 @@
|
|
|
512
277
|
<div class="stat-card">
|
|
513
278
|
<div class="stat-header">
|
|
514
279
|
<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>
|
|
280
|
+
<i class="q-icon-user-x-fill"></i>
|
|
518
281
|
</div>
|
|
519
282
|
</div>
|
|
520
283
|
<div class="stat-value">148</div>
|
|
@@ -523,17 +286,21 @@
|
|
|
523
286
|
</div>
|
|
524
287
|
|
|
525
288
|
<!-- Data Table -->
|
|
526
|
-
<div class="table-container">
|
|
527
|
-
<div class="table-header">
|
|
528
|
-
<
|
|
529
|
-
<div class="table-filters">
|
|
530
|
-
<
|
|
289
|
+
<div class="table-premium-container">
|
|
290
|
+
<div class="table-premium-header">
|
|
291
|
+
<div class="table-premium-title">All Users</div>
|
|
292
|
+
<div class="table-premium-filters">
|
|
293
|
+
<div class="search has-icon" style="width: 240px;">
|
|
294
|
+
<i class="q-icon-search"></i>
|
|
295
|
+
<input type="text" class="search-input" placeholder="Search users...">
|
|
296
|
+
</div>
|
|
297
|
+
<select class="btn btn-secondary btn-sm" style="appearance: auto;">
|
|
531
298
|
<option>All Roles</option>
|
|
532
299
|
<option>Admin</option>
|
|
533
300
|
<option>Moderator</option>
|
|
534
301
|
<option>User</option>
|
|
535
302
|
</select>
|
|
536
|
-
<select class="
|
|
303
|
+
<select class="btn btn-secondary btn-sm" style="appearance: auto;">
|
|
537
304
|
<option>All Status</option>
|
|
538
305
|
<option>Active</option>
|
|
539
306
|
<option>Pending</option>
|
|
@@ -542,238 +309,196 @@
|
|
|
542
309
|
</div>
|
|
543
310
|
</div>
|
|
544
311
|
|
|
545
|
-
<
|
|
546
|
-
<
|
|
547
|
-
<
|
|
548
|
-
<
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
<
|
|
558
|
-
<
|
|
559
|
-
<
|
|
560
|
-
<div class="
|
|
561
|
-
|
|
562
|
-
<div class="user-
|
|
563
|
-
|
|
312
|
+
<div class="overflow-x-auto">
|
|
313
|
+
<table class="table-premium">
|
|
314
|
+
<thead>
|
|
315
|
+
<tr>
|
|
316
|
+
<th>User</th>
|
|
317
|
+
<th>Role</th>
|
|
318
|
+
<th>Status</th>
|
|
319
|
+
<th>Last Active</th>
|
|
320
|
+
<th>Joined</th>
|
|
321
|
+
<th>Actions</th>
|
|
322
|
+
</tr>
|
|
323
|
+
</thead>
|
|
324
|
+
<tbody>
|
|
325
|
+
<tr>
|
|
326
|
+
<td>
|
|
327
|
+
<div class="user-cell">
|
|
328
|
+
<div class="avatar">SC</div>
|
|
329
|
+
<div class="user-info">
|
|
330
|
+
<div class="user-name">Sarah Chen</div>
|
|
331
|
+
<div class="user-email">sarah.chen@example.com</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</td>
|
|
335
|
+
<td><span class="role-badge role-admin">Admin</span></td>
|
|
336
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
337
|
+
<td>2 minutes ago</td>
|
|
338
|
+
<td>Jan 15, 2024</td>
|
|
339
|
+
<td>
|
|
340
|
+
<div class="action-buttons">
|
|
341
|
+
<button class="action-btn">
|
|
342
|
+
<i class="q-icon-edit"></i>
|
|
343
|
+
</button>
|
|
344
|
+
<button class="action-btn">
|
|
345
|
+
<i class="q-icon-eye-fill"></i>
|
|
346
|
+
</button>
|
|
347
|
+
<button class="action-btn action-btn-delete">
|
|
348
|
+
<i class="q-icon-trash"></i>
|
|
349
|
+
</button>
|
|
350
|
+
</div>
|
|
351
|
+
</td>
|
|
352
|
+
</tr>
|
|
353
|
+
<tr>
|
|
354
|
+
<td>
|
|
355
|
+
<div class="user-cell">
|
|
356
|
+
<div class="avatar" style="background: linear-gradient(135deg, #10b981, #34d399);">MR</div>
|
|
357
|
+
<div class="user-info">
|
|
358
|
+
<div class="user-name">Michael Rodriguez</div>
|
|
359
|
+
<div class="user-email">m.rodriguez@example.com</div>
|
|
360
|
+
</div>
|
|
564
361
|
</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>
|
|
362
|
+
</td>
|
|
363
|
+
<td><span class="role-badge role-moderator">Moderator</span></td>
|
|
364
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
365
|
+
<td>15 minutes ago</td>
|
|
366
|
+
<td>Dec 3, 2023</td>
|
|
367
|
+
<td>
|
|
368
|
+
<div class="action-buttons">
|
|
369
|
+
<button class="action-btn">
|
|
370
|
+
<i class="q-icon-edit"></i>
|
|
371
|
+
</button>
|
|
372
|
+
<button class="action-btn">
|
|
373
|
+
<i class="q-icon-eye-fill"></i>
|
|
374
|
+
</button>
|
|
375
|
+
<button class="action-btn action-btn-delete">
|
|
376
|
+
<i class="q-icon-trash"></i>
|
|
377
|
+
</button>
|
|
599
378
|
</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>
|
|
379
|
+
</td>
|
|
380
|
+
</tr>
|
|
381
|
+
<tr>
|
|
382
|
+
<td>
|
|
383
|
+
<div class="user-cell">
|
|
384
|
+
<div class="avatar" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">EJ</div>
|
|
385
|
+
<div class="user-info">
|
|
386
|
+
<div class="user-name">Emily Johnson</div>
|
|
387
|
+
<div class="user-email">emily.j@example.com</div>
|
|
388
|
+
</div>
|
|
634
389
|
</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>
|
|
390
|
+
</td>
|
|
391
|
+
<td><span class="role-badge">User</span></td>
|
|
392
|
+
<td><span class="status-badge status-pending">Pending</span></td>
|
|
393
|
+
<td>Never</td>
|
|
394
|
+
<td>Feb 6, 2024</td>
|
|
395
|
+
<td>
|
|
396
|
+
<div class="action-buttons">
|
|
397
|
+
<button class="action-btn">
|
|
398
|
+
<i class="q-icon-edit"></i>
|
|
399
|
+
</button>
|
|
400
|
+
<button class="action-btn">
|
|
401
|
+
<i class="q-icon-eye-fill"></i>
|
|
402
|
+
</button>
|
|
403
|
+
<button class="action-btn action-btn-delete">
|
|
404
|
+
<i class="q-icon-trash"></i>
|
|
405
|
+
</button>
|
|
669
406
|
</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>
|
|
407
|
+
</td>
|
|
408
|
+
</tr>
|
|
409
|
+
<tr>
|
|
410
|
+
<td>
|
|
411
|
+
<div class="user-cell">
|
|
412
|
+
<div class="avatar" style="background: linear-gradient(135deg, #8b5cf6, #a78bfa);">DW</div>
|
|
413
|
+
<div class="user-info">
|
|
414
|
+
<div class="user-name">David Williams</div>
|
|
415
|
+
<div class="user-email">david.w@example.com</div>
|
|
416
|
+
</div>
|
|
704
417
|
</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>
|
|
418
|
+
</td>
|
|
419
|
+
<td><span class="role-badge">User</span></td>
|
|
420
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
421
|
+
<td>1 hour ago</td>
|
|
422
|
+
<td>Nov 20, 2023</td>
|
|
423
|
+
<td>
|
|
424
|
+
<div class="action-buttons">
|
|
425
|
+
<button class="action-btn">
|
|
426
|
+
<i class="q-icon-edit"></i>
|
|
427
|
+
</button>
|
|
428
|
+
<button class="action-btn">
|
|
429
|
+
<i class="q-icon-eye-fill"></i>
|
|
430
|
+
</button>
|
|
431
|
+
<button class="action-btn action-btn-delete">
|
|
432
|
+
<i class="q-icon-trash"></i>
|
|
433
|
+
</button>
|
|
739
434
|
</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
|
-
|
|
435
|
+
</td>
|
|
436
|
+
</tr>
|
|
437
|
+
<tr>
|
|
438
|
+
<td>
|
|
439
|
+
<div class="user-cell">
|
|
440
|
+
<div class="avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">LB</div>
|
|
441
|
+
<div class="user-info">
|
|
442
|
+
<div class="user-name">Lisa Brown</div>
|
|
443
|
+
<div class="user-email">lisa.brown@example.com</div>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</td>
|
|
447
|
+
<td><span class="role-badge role-admin">Admin</span></td>
|
|
448
|
+
<td><span class="status-badge status-inactive">Inactive</span></td>
|
|
449
|
+
<td>3 days ago</td>
|
|
450
|
+
<td>Oct 8, 2023</td>
|
|
451
|
+
<td>
|
|
452
|
+
<div class="action-buttons">
|
|
453
|
+
<button class="action-btn">
|
|
454
|
+
<i class="q-icon-edit"></i>
|
|
455
|
+
</button>
|
|
456
|
+
<button class="action-btn">
|
|
457
|
+
<i class="q-icon-eye-fill"></i>
|
|
458
|
+
</button>
|
|
459
|
+
<button class="action-btn action-btn-delete">
|
|
460
|
+
<i class="q-icon-trash"></i>
|
|
461
|
+
</button>
|
|
462
|
+
</div>
|
|
463
|
+
</td>
|
|
464
|
+
</tr>
|
|
465
|
+
<tr>
|
|
466
|
+
<td>
|
|
467
|
+
<div class="user-cell">
|
|
468
|
+
<div class="avatar" style="background: linear-gradient(135deg, #06b6d4, #22d3ee);">JT</div>
|
|
469
|
+
<div class="user-info">
|
|
470
|
+
<div class="user-name">James Taylor</div>
|
|
471
|
+
<div class="user-email">james.t@example.com</div>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
</td>
|
|
475
|
+
<td><span class="role-badge">User</span></td>
|
|
476
|
+
<td><span class="status-badge status-active">Active</span></td>
|
|
477
|
+
<td>5 hours ago</td>
|
|
478
|
+
<td>Jan 28, 2024</td>
|
|
479
|
+
<td>
|
|
480
|
+
<div class="action-buttons">
|
|
481
|
+
<button class="action-btn">
|
|
482
|
+
<i class="q-icon-edit"></i>
|
|
483
|
+
</button>
|
|
484
|
+
<button class="action-btn">
|
|
485
|
+
<i class="q-icon-eye-fill"></i>
|
|
486
|
+
</button>
|
|
487
|
+
<button class="action-btn action-btn-delete">
|
|
488
|
+
<i class="q-icon-trash"></i>
|
|
489
|
+
</button>
|
|
490
|
+
</div>
|
|
491
|
+
</td>
|
|
492
|
+
</tr>
|
|
493
|
+
</tbody>
|
|
494
|
+
</table>
|
|
495
|
+
</div>
|
|
769
496
|
|
|
770
|
-
<div class="table-footer">
|
|
771
|
-
<div class="table-info">Showing 1-6 of 2,847 users</div>
|
|
497
|
+
<div class="table-premium-footer">
|
|
498
|
+
<div class="table-premium-info">Showing 1-6 of 2,847 users</div>
|
|
772
499
|
<div class="pagination">
|
|
773
500
|
<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>
|
|
501
|
+
<i class="q-icon-chevron-left"></i>
|
|
777
502
|
</button>
|
|
778
503
|
<button class="page-btn active">1</button>
|
|
779
504
|
<button class="page-btn">2</button>
|
|
@@ -781,39 +506,31 @@
|
|
|
781
506
|
<span style="color: var(--text-muted, #64748b); padding: 0.5rem;">...</span>
|
|
782
507
|
<button class="page-btn">475</button>
|
|
783
508
|
<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>
|
|
509
|
+
<i class="q-icon-chevron-right"></i>
|
|
787
510
|
</button>
|
|
788
511
|
</div>
|
|
789
512
|
</div>
|
|
790
513
|
</div>
|
|
791
514
|
|
|
792
515
|
<!-- Quick Actions -->
|
|
793
|
-
<div class="quick-
|
|
516
|
+
<div class="quick-action-grid" style="margin-top: 2rem;">
|
|
794
517
|
<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>
|
|
518
|
+
<div class="quick-action-icon">
|
|
519
|
+
<i class="q-icon-users"></i>
|
|
799
520
|
</div>
|
|
800
521
|
<div class="quick-action-title">Bulk Import</div>
|
|
801
522
|
<div class="quick-action-desc">Import users from CSV file</div>
|
|
802
523
|
</div>
|
|
803
524
|
<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>
|
|
525
|
+
<div class="quick-action-icon" style="color: #34d399;">
|
|
526
|
+
<i class="q-icon-check-circle-fill"></i>
|
|
808
527
|
</div>
|
|
809
528
|
<div class="quick-action-title">Approve All</div>
|
|
810
529
|
<div class="quick-action-desc">Approve pending users</div>
|
|
811
530
|
</div>
|
|
812
531
|
<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>
|
|
532
|
+
<div class="quick-action-icon" style="color: #fbbf24;">
|
|
533
|
+
<i class="q-icon-export"></i>
|
|
817
534
|
</div>
|
|
818
535
|
<div class="quick-action-title">Export Data</div>
|
|
819
536
|
<div class="quick-action-desc">Download user reports</div>
|