@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,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,113 @@
|
|
|
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
|
-
<div class="
|
|
476
|
-
<
|
|
477
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
478
|
-
</svg>
|
|
354
|
+
<aside class="aside-nav" aria-label="Sidebar navigation">
|
|
355
|
+
<label for="sidebar-toggle" class="aside-nav-header" style="cursor: pointer;">
|
|
356
|
+
<div class="aside-nav-icon">
|
|
357
|
+
<i class="q-icon-starlight text-white"></i>
|
|
479
358
|
</div>
|
|
480
|
-
<
|
|
481
|
-
|
|
359
|
+
<div class="aside-nav-brand">
|
|
360
|
+
<strong class="text-gradient">Starlight</strong>
|
|
361
|
+
<span>Analytics</span>
|
|
362
|
+
</div>
|
|
363
|
+
</label>
|
|
482
364
|
|
|
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>
|
|
365
|
+
<nav class="aside-nav-inner">
|
|
366
|
+
<div class="aside-nav-section">
|
|
367
|
+
<span class="aside-nav-label">Main</span>
|
|
368
|
+
<a href="#" class="aside-nav-item active">
|
|
369
|
+
<i class="q-icon-grid aside-nav-item-icon"></i>
|
|
490
370
|
<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>
|
|
371
|
+
</a>
|
|
372
|
+
<a href="#" class="aside-nav-item">
|
|
373
|
+
<i class="q-icon-chart-bar aside-nav-item-icon"></i>
|
|
496
374
|
<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>
|
|
375
|
+
</a>
|
|
376
|
+
<a href="#" class="aside-nav-item">
|
|
377
|
+
<i class="q-icon-bar-chart-alt aside-nav-item-icon"></i>
|
|
502
378
|
<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>
|
|
379
|
+
</a>
|
|
380
|
+
<a href="#" class="aside-nav-item">
|
|
381
|
+
<i class="q-icon-segments aside-nav-item-icon"></i>
|
|
509
382
|
<span>Segments</span>
|
|
510
|
-
</
|
|
511
|
-
</
|
|
512
|
-
</div>
|
|
383
|
+
</a>
|
|
384
|
+
</div>
|
|
513
385
|
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
<nav>
|
|
517
|
-
<
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
</svg>
|
|
386
|
+
<div class="aside-nav-divider"></div>
|
|
387
|
+
|
|
388
|
+
<div class="aside-nav-section">
|
|
389
|
+
<span class="aside-nav-label">Management</span>
|
|
390
|
+
<a href="#" class="aside-nav-item">
|
|
391
|
+
<i class="q-icon-users aside-nav-item-icon"></i>
|
|
521
392
|
<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>
|
|
393
|
+
</a>
|
|
394
|
+
<a href="#" class="aside-nav-item">
|
|
395
|
+
<i class="q-icon-products aside-nav-item-icon"></i>
|
|
527
396
|
<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>
|
|
397
|
+
</a>
|
|
398
|
+
<a href="#" class="aside-nav-item">
|
|
399
|
+
<i class="q-icon-settings aside-nav-item-icon"></i>
|
|
534
400
|
<span>Settings</span>
|
|
535
|
-
</
|
|
536
|
-
</
|
|
537
|
-
</
|
|
538
|
-
|
|
539
|
-
<div class="
|
|
540
|
-
<
|
|
541
|
-
<
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
401
|
+
</a>
|
|
402
|
+
</div>
|
|
403
|
+
</nav>
|
|
404
|
+
|
|
405
|
+
<div class="aside-nav-footer">
|
|
406
|
+
<div class="aside-nav-user" onclick="toggleTheme()" style="cursor: pointer;" title="Click to Toggle Theme">
|
|
407
|
+
<div class="aside-nav-user-avatar">JD</div>
|
|
408
|
+
<div class="aside-nav-user-info">
|
|
409
|
+
<strong>John Doe</strong>
|
|
410
|
+
<span>Admin Profile</span>
|
|
411
|
+
</div>
|
|
412
|
+
<div class="ml-auto aside-nav-user-action">
|
|
413
|
+
<i class="q-icon-display opacity-50"></i>
|
|
414
|
+
<i class="q-icon-sun sun-icon hidden opacity-50"></i>
|
|
415
|
+
<i class="q-icon-moon moon-icon hidden opacity-50"></i>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
549
418
|
</div>
|
|
550
419
|
</aside>
|
|
551
420
|
|
|
552
421
|
<!-- Main Content -->
|
|
553
422
|
<main class="main-content">
|
|
554
|
-
<!-- Header -->
|
|
555
|
-
<
|
|
556
|
-
<div class="
|
|
557
|
-
<
|
|
558
|
-
|
|
423
|
+
<!-- Page Header -->
|
|
424
|
+
<div class="page-header" style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem;">
|
|
425
|
+
<div class="flex items-center gap-4">
|
|
426
|
+
<label for="sidebar-toggle" class="menu-btn" aria-label="Toggle sidebar">
|
|
427
|
+
<span></span><span></span><span></span>
|
|
428
|
+
</label>
|
|
429
|
+
<div>
|
|
430
|
+
<h1 class="page-title">Dashboard Overview</h1>
|
|
431
|
+
<p class="page-subtitle">Welcome back! Here's what's happening with your business.</p>
|
|
432
|
+
</div>
|
|
559
433
|
</div>
|
|
560
|
-
<div class="
|
|
434
|
+
<div class="page-actions">
|
|
561
435
|
<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>
|
|
436
|
+
<i class="q-icon-calendar"></i>
|
|
565
437
|
<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>
|
|
438
|
+
<i class="q-icon-chevron-down"></i>
|
|
569
439
|
</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>
|
|
440
|
+
<button class="icon-btn">
|
|
441
|
+
<i class="q-icon-notification"></i>
|
|
574
442
|
<span class="notification-dot"></span>
|
|
575
443
|
</button>
|
|
576
|
-
<div class="
|
|
444
|
+
<div class="avatar avatar-md">JD</div>
|
|
577
445
|
</div>
|
|
578
|
-
</
|
|
446
|
+
</div>
|
|
579
447
|
|
|
580
448
|
<!-- Stats Grid -->
|
|
581
449
|
<div class="stats-grid">
|
|
582
450
|
<div class="stat-card">
|
|
583
451
|
<div class="stat-header">
|
|
584
452
|
<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>
|
|
453
|
+
<i class="q-icon-dollar"></i>
|
|
588
454
|
</div>
|
|
589
455
|
<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>
|
|
456
|
+
<i class="q-icon-trend-up"></i>
|
|
593
457
|
+12.5%
|
|
594
458
|
</div>
|
|
595
459
|
</div>
|
|
@@ -600,14 +464,10 @@
|
|
|
600
464
|
<div class="stat-card">
|
|
601
465
|
<div class="stat-header">
|
|
602
466
|
<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>
|
|
467
|
+
<i class="q-icon-users-group"></i>
|
|
606
468
|
</div>
|
|
607
469
|
<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>
|
|
470
|
+
<i class="q-icon-trend-up"></i>
|
|
611
471
|
+8.2%
|
|
612
472
|
</div>
|
|
613
473
|
</div>
|
|
@@ -618,14 +478,10 @@
|
|
|
618
478
|
<div class="stat-card">
|
|
619
479
|
<div class="stat-header">
|
|
620
480
|
<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>
|
|
481
|
+
<i class="q-icon-shopping-bag"></i>
|
|
624
482
|
</div>
|
|
625
483
|
<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>
|
|
484
|
+
<i class="q-icon-trend-up"></i>
|
|
629
485
|
+23.1%
|
|
630
486
|
</div>
|
|
631
487
|
</div>
|
|
@@ -636,14 +492,10 @@
|
|
|
636
492
|
<div class="stat-card">
|
|
637
493
|
<div class="stat-header">
|
|
638
494
|
<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>
|
|
495
|
+
<i class="q-icon-activity"></i>
|
|
642
496
|
</div>
|
|
643
497
|
<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>
|
|
498
|
+
<i class="q-icon-trend-down"></i>
|
|
647
499
|
-2.4%
|
|
648
500
|
</div>
|
|
649
501
|
</div>
|
|
@@ -717,9 +569,7 @@
|
|
|
717
569
|
<div class="activity-list">
|
|
718
570
|
<div class="activity-item">
|
|
719
571
|
<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>
|
|
572
|
+
<i class="q-icon-shopping-bag"></i>
|
|
723
573
|
</div>
|
|
724
574
|
<div class="activity-content">
|
|
725
575
|
<div class="activity-text">New order <span>#ORD-7523</span> from Sarah Chen</div>
|
|
@@ -728,9 +578,7 @@
|
|
|
728
578
|
</div>
|
|
729
579
|
<div class="activity-item">
|
|
730
580
|
<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>
|
|
581
|
+
<i class="q-icon-user-circle"></i>
|
|
734
582
|
</div>
|
|
735
583
|
<div class="activity-content">
|
|
736
584
|
<div class="activity-text">New user <span>alex.rivera</span> registered</div>
|
|
@@ -739,9 +587,7 @@
|
|
|
739
587
|
</div>
|
|
740
588
|
<div class="activity-item">
|
|
741
589
|
<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>
|
|
590
|
+
<i class="q-icon-star"></i>
|
|
745
591
|
</div>
|
|
746
592
|
<div class="activity-content">
|
|
747
593
|
<div class="activity-text">Product <span>Starlight Pro</span> received 5-star review</div>
|
|
@@ -750,9 +596,7 @@
|
|
|
750
596
|
</div>
|
|
751
597
|
<div class="activity-item">
|
|
752
598
|
<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>
|
|
599
|
+
<i class="q-icon-export"></i>
|
|
756
600
|
</div>
|
|
757
601
|
<div class="activity-content">
|
|
758
602
|
<div class="activity-text">Inventory updated for <span>Wireless Headphones</span></div>
|
|
@@ -761,9 +605,7 @@
|
|
|
761
605
|
</div>
|
|
762
606
|
<div class="activity-item">
|
|
763
607
|
<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>
|
|
608
|
+
<i class="q-icon-activity"></i>
|
|
767
609
|
</div>
|
|
768
610
|
<div class="activity-content">
|
|
769
611
|
<div class="activity-text">Low stock alert: <span>USB-C Cables</span> (5 remaining)</div>
|