@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,106 +5,17 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Starlight Analytics - Dashboard</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
10
|
/* Dashboard Layout overrides */
|
|
12
|
-
.
|
|
13
|
-
display:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.logo-icon {
|
|
20
|
-
width: 40px;
|
|
21
|
-
height: 40px;
|
|
22
|
-
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
23
|
-
border-radius: 10px;
|
|
24
|
-
display: flex;
|
|
25
|
-
align-items: center;
|
|
26
|
-
justify-content: center;
|
|
11
|
+
.app-layout {
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-columns: auto 1fr;
|
|
14
|
+
height: 100vh;
|
|
15
|
+
overflow: hidden;
|
|
27
16
|
}
|
|
28
17
|
|
|
29
18
|
/* Header */
|
|
30
|
-
.header {
|
|
31
|
-
display: flex;
|
|
32
|
-
justify-content: space-between;
|
|
33
|
-
align-items: center;
|
|
34
|
-
margin-bottom: 2rem;
|
|
35
|
-
padding-bottom: 1rem;
|
|
36
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.header-title h1 {
|
|
40
|
-
font-size: 1.75rem;
|
|
41
|
-
font-weight: 700;
|
|
42
|
-
color: var(--text-primary, #f1f5f9);
|
|
43
|
-
margin-bottom: 0.25rem;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.header-title p {
|
|
47
|
-
font-size: 0.875rem;
|
|
48
|
-
color: var(--text-muted, #64748b);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.header-actions {
|
|
52
|
-
display: flex;
|
|
53
|
-
align-items: center;
|
|
54
|
-
gap: 1rem;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.notification-btn {
|
|
58
|
-
position: relative;
|
|
59
|
-
width: 40px;
|
|
60
|
-
height: 40px;
|
|
61
|
-
display: flex;
|
|
62
|
-
align-items: center;
|
|
63
|
-
justify-content: center;
|
|
64
|
-
background: rgba(255, 255, 255, 0.05);
|
|
65
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
66
|
-
border-radius: 0.75rem;
|
|
67
|
-
color: var(--text-secondary, #94a3b8);
|
|
68
|
-
cursor: pointer;
|
|
69
|
-
transition: all 0.2s ease;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.notification-btn:hover {
|
|
73
|
-
background: rgba(255, 255, 255, 0.08);
|
|
74
|
-
border-color: rgba(255, 255, 255, 0.15);
|
|
75
|
-
color: var(--text-primary, #f1f5f9);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
html[data-theme="light"] .notification-btn {
|
|
79
|
-
background: #ffffff;
|
|
80
|
-
border-color: #e2e8f0;
|
|
81
|
-
color: #64748b;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
html[data-theme="light"] .notification-badge {
|
|
85
|
-
border-color: #ffffff;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.user-avatar {
|
|
89
|
-
width: 40px;
|
|
90
|
-
height: 40px;
|
|
91
|
-
border-radius: 50%;
|
|
92
|
-
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
93
|
-
color: white;
|
|
94
|
-
display: flex;
|
|
95
|
-
align-items: center;
|
|
96
|
-
justify-content: center;
|
|
97
|
-
font-size: 0.875rem;
|
|
98
|
-
font-weight: 700;
|
|
99
|
-
cursor: pointer;
|
|
100
|
-
transition: all 0.2s ease;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.user-avatar:hover {
|
|
104
|
-
transform: scale(1.05);
|
|
105
|
-
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
19
|
.date-selector {
|
|
109
20
|
display: flex;
|
|
110
21
|
align-items: center;
|
|
@@ -145,15 +56,18 @@
|
|
|
145
56
|
|
|
146
57
|
/* Prevent body overflow */
|
|
147
58
|
html, body {
|
|
148
|
-
overflow
|
|
149
|
-
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
height: 100%;
|
|
61
|
+
margin: 0;
|
|
150
62
|
}
|
|
151
63
|
|
|
152
64
|
/* Ensure main content doesn't overflow */
|
|
153
65
|
.main-content {
|
|
66
|
+
overflow-y: auto;
|
|
154
67
|
max-width: 100%;
|
|
155
68
|
box-sizing: border-box;
|
|
156
69
|
padding: 2rem;
|
|
70
|
+
background: var(--q-bg-primary);
|
|
157
71
|
}
|
|
158
72
|
|
|
159
73
|
.chart-card {
|
|
@@ -265,37 +179,6 @@
|
|
|
265
179
|
}
|
|
266
180
|
|
|
267
181
|
/* Activity Feed */
|
|
268
|
-
.activity-item {
|
|
269
|
-
display: flex;
|
|
270
|
-
align-items: flex-start;
|
|
271
|
-
gap: 1rem;
|
|
272
|
-
padding: 1rem 0;
|
|
273
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.activity-item:last-child {
|
|
277
|
-
border-bottom: none;
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
.activity-icon {
|
|
281
|
-
width: 36px;
|
|
282
|
-
height: 36px;
|
|
283
|
-
border-radius: 50%;
|
|
284
|
-
display: flex;
|
|
285
|
-
align-items: center;
|
|
286
|
-
justify-content: center;
|
|
287
|
-
flex-shrink: 0;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
.activity-content {
|
|
291
|
-
flex: 1;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
.activity-text {
|
|
295
|
-
font-size: 0.875rem;
|
|
296
|
-
color: var(--text-primary, #f1f5f9);
|
|
297
|
-
margin-bottom: 0.25rem;
|
|
298
|
-
}
|
|
299
182
|
|
|
300
183
|
.activity-text span {
|
|
301
184
|
color: var(--color-starlight, #00d4ff);
|
|
@@ -360,11 +243,6 @@
|
|
|
360
243
|
color: var(--text-primary, #f1f5f9);
|
|
361
244
|
}
|
|
362
245
|
|
|
363
|
-
/* Sun/Moon icons */
|
|
364
|
-
.sun-icon { display: none; }
|
|
365
|
-
html[data-theme="light"] .sun-icon { display: inline; }
|
|
366
|
-
html[data-theme="light"] .moon-icon { display: none; }
|
|
367
|
-
|
|
368
246
|
/* Light Mode Overrides */
|
|
369
247
|
html[data-theme="light"] {
|
|
370
248
|
--bg-primary: #f8fafc;
|
|
@@ -388,17 +266,37 @@
|
|
|
388
266
|
}
|
|
389
267
|
|
|
390
268
|
html[data-theme="light"] .legend-item,
|
|
391
|
-
html[data-theme="light"] .activity-item,
|
|
392
269
|
html[data-theme="light"] .product-row {
|
|
393
270
|
border-bottom-color: #f1f5f9;
|
|
394
271
|
}
|
|
395
272
|
|
|
273
|
+
/* Mobile Menu Toggle button */
|
|
274
|
+
.menu-btn {
|
|
275
|
+
width: 40px;
|
|
276
|
+
height: 40px;
|
|
277
|
+
flex-direction: column;
|
|
278
|
+
justify-content: center;
|
|
279
|
+
align-items: center;
|
|
280
|
+
gap: 5px;
|
|
281
|
+
border-radius: 10px;
|
|
282
|
+
background: rgba(255, 255, 255, 0.05);
|
|
283
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
284
|
+
cursor: pointer;
|
|
285
|
+
flex-shrink: 0;
|
|
286
|
+
display: none;
|
|
287
|
+
z-index: 300;
|
|
288
|
+
}
|
|
289
|
+
.menu-btn span {
|
|
290
|
+
display: block;
|
|
291
|
+
width: 18px;
|
|
292
|
+
height: 2px;
|
|
293
|
+
background: var(--text-secondary, #94a3b8);
|
|
294
|
+
border-radius: 2px;
|
|
295
|
+
transition: all 0.2s ease;
|
|
296
|
+
}
|
|
297
|
+
|
|
396
298
|
/* Responsive */
|
|
397
299
|
@media (max-width: 1280px) {
|
|
398
|
-
.stats-grid {
|
|
399
|
-
grid-template-columns: repeat(2, 1fr);
|
|
400
|
-
}
|
|
401
|
-
|
|
402
300
|
.charts-section {
|
|
403
301
|
grid-template-columns: 1fr;
|
|
404
302
|
}
|
|
@@ -408,46 +306,27 @@
|
|
|
408
306
|
}
|
|
409
307
|
}
|
|
410
308
|
|
|
411
|
-
@media (max-width:
|
|
412
|
-
.
|
|
413
|
-
|
|
309
|
+
@media (max-width: 768px) {
|
|
310
|
+
.menu-btn {
|
|
311
|
+
display: flex;
|
|
414
312
|
}
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
.sidebar .nav-item span,
|
|
418
|
-
.sidebar .theme-label {
|
|
313
|
+
|
|
314
|
+
#sidebar-toggle:checked ~ .app-layout .menu-btn {
|
|
419
315
|
display: none;
|
|
420
316
|
}
|
|
421
|
-
.sidebar .nav-item {
|
|
422
|
-
justify-content: center;
|
|
423
|
-
padding: 0.75rem;
|
|
424
|
-
}
|
|
425
|
-
.sidebar .logo {
|
|
426
|
-
justify-content: center;
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
317
|
|
|
430
|
-
@media (max-width: 768px) {
|
|
431
318
|
.app-layout {
|
|
432
319
|
grid-template-columns: 1fr;
|
|
433
320
|
}
|
|
434
321
|
|
|
435
|
-
.sidebar {
|
|
436
|
-
display: none;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
322
|
.main-content {
|
|
440
323
|
padding: 1rem;
|
|
441
324
|
}
|
|
442
325
|
|
|
443
|
-
.
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
.header {
|
|
448
|
-
flex-direction: column;
|
|
449
|
-
align-items: flex-start;
|
|
450
|
-
gap: 1rem;
|
|
326
|
+
.page-header {
|
|
327
|
+
flex-direction: row;
|
|
328
|
+
align-items: center;
|
|
329
|
+
gap: 1.5rem;
|
|
451
330
|
}
|
|
452
331
|
}
|
|
453
332
|
|
|
@@ -468,128 +347,111 @@
|
|
|
468
347
|
</style>
|
|
469
348
|
</head>
|
|
470
349
|
<body>
|
|
350
|
+
<input type="checkbox" id="sidebar-toggle" />
|
|
471
351
|
<div class="app-layout">
|
|
352
|
+
<label for="sidebar-toggle" class="aside-overlay" aria-hidden="true"></label>
|
|
472
353
|
<!-- Sidebar -->
|
|
473
|
-
<aside class="
|
|
474
|
-
<
|
|
475
|
-
<
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
</
|
|
354
|
+
<aside class="aside-nav" aria-label="Sidebar navigation">
|
|
355
|
+
<label for="sidebar-toggle" class="aside-nav-header nav-logo" style="cursor: pointer;">
|
|
356
|
+
<i class="q-icon-starlight"></i>
|
|
357
|
+
<div class="aside-nav-brand">
|
|
358
|
+
<strong class="text-gradient">Starlight</strong>
|
|
359
|
+
<span>Analytics</span>
|
|
479
360
|
</div>
|
|
480
|
-
|
|
481
|
-
</div>
|
|
361
|
+
</label>
|
|
482
362
|
|
|
483
|
-
<
|
|
484
|
-
<div class="nav-section
|
|
485
|
-
|
|
486
|
-
<
|
|
487
|
-
<
|
|
488
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
|
|
489
|
-
</svg>
|
|
363
|
+
<nav class="aside-nav-inner">
|
|
364
|
+
<div class="aside-nav-section">
|
|
365
|
+
<span class="aside-nav-label">Main</span>
|
|
366
|
+
<a href="#" class="aside-nav-item active">
|
|
367
|
+
<i class="q-icon-grid aside-nav-item-icon"></i>
|
|
490
368
|
<span>Dashboard</span>
|
|
491
|
-
</
|
|
492
|
-
<
|
|
493
|
-
<
|
|
494
|
-
<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>
|
|
495
|
-
</svg>
|
|
369
|
+
</a>
|
|
370
|
+
<a href="#" class="aside-nav-item">
|
|
371
|
+
<i class="q-icon-chart-bar aside-nav-item-icon"></i>
|
|
496
372
|
<span>Reports</span>
|
|
497
|
-
</
|
|
498
|
-
<
|
|
499
|
-
<
|
|
500
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
501
|
-
</svg>
|
|
373
|
+
</a>
|
|
374
|
+
<a href="#" class="aside-nav-item">
|
|
375
|
+
<i class="q-icon-bar-chart-alt aside-nav-item-icon"></i>
|
|
502
376
|
<span>Real-time</span>
|
|
503
|
-
</
|
|
504
|
-
<
|
|
505
|
-
<
|
|
506
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
|
|
507
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
|
|
508
|
-
</svg>
|
|
377
|
+
</a>
|
|
378
|
+
<a href="#" class="aside-nav-item">
|
|
379
|
+
<i class="q-icon-segments aside-nav-item-icon"></i>
|
|
509
380
|
<span>Segments</span>
|
|
510
|
-
</
|
|
511
|
-
</
|
|
512
|
-
</div>
|
|
381
|
+
</a>
|
|
382
|
+
</div>
|
|
513
383
|
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
<nav>
|
|
517
|
-
<
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
</svg>
|
|
384
|
+
<div class="aside-nav-divider"></div>
|
|
385
|
+
|
|
386
|
+
<div class="aside-nav-section">
|
|
387
|
+
<span class="aside-nav-label">Management</span>
|
|
388
|
+
<a href="#" class="aside-nav-item">
|
|
389
|
+
<i class="q-icon-users aside-nav-item-icon"></i>
|
|
521
390
|
<span>Users</span>
|
|
522
|
-
</
|
|
523
|
-
<
|
|
524
|
-
<
|
|
525
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
|
|
526
|
-
</svg>
|
|
391
|
+
</a>
|
|
392
|
+
<a href="#" class="aside-nav-item">
|
|
393
|
+
<i class="q-icon-products aside-nav-item-icon"></i>
|
|
527
394
|
<span>Products</span>
|
|
528
|
-
</
|
|
529
|
-
<
|
|
530
|
-
<
|
|
531
|
-
<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>
|
|
532
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
533
|
-
</svg>
|
|
395
|
+
</a>
|
|
396
|
+
<a href="#" class="aside-nav-item">
|
|
397
|
+
<i class="q-icon-settings aside-nav-item-icon"></i>
|
|
534
398
|
<span>Settings</span>
|
|
535
|
-
</
|
|
536
|
-
</
|
|
537
|
-
</
|
|
538
|
-
|
|
539
|
-
<div class="
|
|
540
|
-
<
|
|
541
|
-
<
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
399
|
+
</a>
|
|
400
|
+
</div>
|
|
401
|
+
</nav>
|
|
402
|
+
|
|
403
|
+
<div class="aside-nav-footer">
|
|
404
|
+
<div class="aside-nav-user" onclick="toggleTheme()" style="cursor: pointer;" title="Click to Toggle Theme">
|
|
405
|
+
<div class="aside-nav-user-avatar">JD</div>
|
|
406
|
+
<div class="aside-nav-user-info">
|
|
407
|
+
<strong>John Doe</strong>
|
|
408
|
+
<span>Admin Profile</span>
|
|
409
|
+
</div>
|
|
410
|
+
<div class="ml-auto aside-nav-user-action">
|
|
411
|
+
<i class="q-icon-display opacity-50"></i>
|
|
412
|
+
<i class="q-icon-sun sun-icon hidden opacity-50"></i>
|
|
413
|
+
<i class="q-icon-moon moon-icon hidden opacity-50"></i>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
549
416
|
</div>
|
|
550
417
|
</aside>
|
|
551
418
|
|
|
552
419
|
<!-- Main Content -->
|
|
553
420
|
<main class="main-content">
|
|
554
|
-
<!-- Header -->
|
|
555
|
-
<
|
|
556
|
-
<div class="
|
|
557
|
-
<
|
|
558
|
-
|
|
421
|
+
<!-- Page Header -->
|
|
422
|
+
<div class="page-header" style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem;">
|
|
423
|
+
<div class="flex items-center gap-4">
|
|
424
|
+
<label for="sidebar-toggle" class="menu-btn" aria-label="Toggle sidebar">
|
|
425
|
+
<span></span><span></span><span></span>
|
|
426
|
+
</label>
|
|
427
|
+
<div>
|
|
428
|
+
<h1 class="page-title">Dashboard Overview</h1>
|
|
429
|
+
<p class="page-subtitle">Welcome back! Here's what's happening with your business.</p>
|
|
430
|
+
</div>
|
|
559
431
|
</div>
|
|
560
|
-
<div class="
|
|
432
|
+
<div class="page-actions">
|
|
561
433
|
<div class="date-selector">
|
|
562
|
-
<
|
|
563
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
564
|
-
</svg>
|
|
434
|
+
<i class="q-icon-calendar"></i>
|
|
565
435
|
<span>Last 30 days</span>
|
|
566
|
-
<
|
|
567
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
568
|
-
</svg>
|
|
436
|
+
<i class="q-icon-chevron-down"></i>
|
|
569
437
|
</div>
|
|
570
|
-
<button class="
|
|
571
|
-
<
|
|
572
|
-
<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>
|
|
573
|
-
</svg>
|
|
438
|
+
<button class="icon-btn">
|
|
439
|
+
<i class="q-icon-notification"></i>
|
|
574
440
|
<span class="notification-dot"></span>
|
|
575
441
|
</button>
|
|
576
|
-
<div class="
|
|
442
|
+
<div class="avatar avatar-md">JD</div>
|
|
577
443
|
</div>
|
|
578
|
-
</
|
|
444
|
+
</div>
|
|
579
445
|
|
|
580
446
|
<!-- Stats Grid -->
|
|
581
447
|
<div class="stats-grid">
|
|
582
448
|
<div class="stat-card">
|
|
583
449
|
<div class="stat-header">
|
|
584
450
|
<div class="stat-icon stat-icon-blue">
|
|
585
|
-
<
|
|
586
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
587
|
-
</svg>
|
|
451
|
+
<i class="q-icon-dollar"></i>
|
|
588
452
|
</div>
|
|
589
453
|
<div class="stat-trend stat-trend-up">
|
|
590
|
-
<
|
|
591
|
-
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
|
592
|
-
</svg>
|
|
454
|
+
<i class="q-icon-trend-up"></i>
|
|
593
455
|
+12.5%
|
|
594
456
|
</div>
|
|
595
457
|
</div>
|
|
@@ -600,14 +462,10 @@
|
|
|
600
462
|
<div class="stat-card">
|
|
601
463
|
<div class="stat-header">
|
|
602
464
|
<div class="stat-icon stat-icon-green">
|
|
603
|
-
<
|
|
604
|
-
<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>
|
|
605
|
-
</svg>
|
|
465
|
+
<i class="q-icon-users-group"></i>
|
|
606
466
|
</div>
|
|
607
467
|
<div class="stat-trend stat-trend-up">
|
|
608
|
-
<
|
|
609
|
-
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
|
610
|
-
</svg>
|
|
468
|
+
<i class="q-icon-trend-up"></i>
|
|
611
469
|
+8.2%
|
|
612
470
|
</div>
|
|
613
471
|
</div>
|
|
@@ -618,14 +476,10 @@
|
|
|
618
476
|
<div class="stat-card">
|
|
619
477
|
<div class="stat-header">
|
|
620
478
|
<div class="stat-icon stat-icon-orange">
|
|
621
|
-
<
|
|
622
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
623
|
-
</svg>
|
|
479
|
+
<i class="q-icon-shopping-bag"></i>
|
|
624
480
|
</div>
|
|
625
481
|
<div class="stat-trend stat-trend-up">
|
|
626
|
-
<
|
|
627
|
-
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
|
628
|
-
</svg>
|
|
482
|
+
<i class="q-icon-trend-up"></i>
|
|
629
483
|
+23.1%
|
|
630
484
|
</div>
|
|
631
485
|
</div>
|
|
@@ -636,14 +490,10 @@
|
|
|
636
490
|
<div class="stat-card">
|
|
637
491
|
<div class="stat-header">
|
|
638
492
|
<div class="stat-icon stat-icon-purple">
|
|
639
|
-
<
|
|
640
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
|
641
|
-
</svg>
|
|
493
|
+
<i class="q-icon-activity"></i>
|
|
642
494
|
</div>
|
|
643
495
|
<div class="stat-trend stat-trend-down">
|
|
644
|
-
<
|
|
645
|
-
<path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
646
|
-
</svg>
|
|
496
|
+
<i class="q-icon-trend-down"></i>
|
|
647
497
|
-2.4%
|
|
648
498
|
</div>
|
|
649
499
|
</div>
|
|
@@ -717,9 +567,7 @@
|
|
|
717
567
|
<div class="activity-list">
|
|
718
568
|
<div class="activity-item">
|
|
719
569
|
<div class="activity-icon" style="background: rgba(59, 130, 246, 0.15); color: #60a5fa;">
|
|
720
|
-
<
|
|
721
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
722
|
-
</svg>
|
|
570
|
+
<i class="q-icon-shopping-bag"></i>
|
|
723
571
|
</div>
|
|
724
572
|
<div class="activity-content">
|
|
725
573
|
<div class="activity-text">New order <span>#ORD-7523</span> from Sarah Chen</div>
|
|
@@ -728,9 +576,7 @@
|
|
|
728
576
|
</div>
|
|
729
577
|
<div class="activity-item">
|
|
730
578
|
<div class="activity-icon" style="background: rgba(16, 185, 129, 0.15); color: #34d399;">
|
|
731
|
-
<
|
|
732
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
|
733
|
-
</svg>
|
|
579
|
+
<i class="q-icon-user-circle"></i>
|
|
734
580
|
</div>
|
|
735
581
|
<div class="activity-content">
|
|
736
582
|
<div class="activity-text">New user <span>alex.rivera</span> registered</div>
|
|
@@ -739,9 +585,7 @@
|
|
|
739
585
|
</div>
|
|
740
586
|
<div class="activity-item">
|
|
741
587
|
<div class="activity-icon" style="background: rgba(245, 158, 11, 0.15); color: #fbbf24;">
|
|
742
|
-
<
|
|
743
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
|
|
744
|
-
</svg>
|
|
588
|
+
<i class="q-icon-star"></i>
|
|
745
589
|
</div>
|
|
746
590
|
<div class="activity-content">
|
|
747
591
|
<div class="activity-text">Product <span>Starlight Pro</span> received 5-star review</div>
|
|
@@ -750,9 +594,7 @@
|
|
|
750
594
|
</div>
|
|
751
595
|
<div class="activity-item">
|
|
752
596
|
<div class="activity-icon" style="background: rgba(139, 92, 246, 0.15); color: #a78bfa;">
|
|
753
|
-
<
|
|
754
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
|
755
|
-
</svg>
|
|
597
|
+
<i class="q-icon-export"></i>
|
|
756
598
|
</div>
|
|
757
599
|
<div class="activity-content">
|
|
758
600
|
<div class="activity-text">Inventory updated for <span>Wireless Headphones</span></div>
|
|
@@ -761,9 +603,7 @@
|
|
|
761
603
|
</div>
|
|
762
604
|
<div class="activity-item">
|
|
763
605
|
<div class="activity-icon" style="background: rgba(239, 68, 68, 0.15); color: #f87171;">
|
|
764
|
-
<
|
|
765
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
|
766
|
-
</svg>
|
|
606
|
+
<i class="q-icon-activity"></i>
|
|
767
607
|
</div>
|
|
768
608
|
<div class="activity-content">
|
|
769
609
|
<div class="activity-text">Low stock alert: <span>USB-C Cables</span> (5 remaining)</div>
|