@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
|
@@ -29,9 +29,6 @@
|
|
|
29
29
|
.theme-toggle:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
|
|
30
30
|
html[data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
|
|
31
31
|
html[data-theme="light"] .theme-toggle:hover { background: #f8fafc; }
|
|
32
|
-
.sun-icon { display: none; }
|
|
33
|
-
html[data-theme="light"] .sun-icon { display: block; }
|
|
34
|
-
html[data-theme="light"] .moon-icon { display: none; }
|
|
35
32
|
|
|
36
33
|
/* Theme Designer Panel */
|
|
37
34
|
.designer-panel {
|
|
@@ -68,8 +65,9 @@
|
|
|
68
65
|
</head>
|
|
69
66
|
<body class="p-8">
|
|
70
67
|
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
71
|
-
<
|
|
72
|
-
<
|
|
68
|
+
<i class="q-icon-display"></i>
|
|
69
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
70
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
73
71
|
</button>
|
|
74
72
|
|
|
75
73
|
<div class="max-w-6xl mx-auto">
|
|
@@ -842,14 +840,73 @@
|
|
|
842
840
|
<div class="token-name">ani-orbit</div>
|
|
843
841
|
</div>
|
|
844
842
|
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4">
|
|
845
|
-
<
|
|
846
|
-
<circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="4" fill="none" class="ani-svg-draw" />
|
|
847
|
-
</svg>
|
|
843
|
+
<i class="q-icon-ani-svg-draw w-[60px] h-[60px] text-starlight"></i>
|
|
848
844
|
<div class="token-name">ani-svg-draw</div>
|
|
849
845
|
</div>
|
|
850
846
|
</div>
|
|
851
847
|
</section>
|
|
852
848
|
|
|
849
|
+
<!-- Icons Section -->
|
|
850
|
+
<section>
|
|
851
|
+
<h2>Quantum Icons</h2>
|
|
852
|
+
<div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 text-center">
|
|
853
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-activity"></i><span class="text-xs text-muted">activity</span></div>
|
|
854
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-calendar"></i><span class="text-xs text-muted">calendar</span></div>
|
|
855
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-cart"></i><span class="text-xs text-muted">cart</span></div>
|
|
856
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-categories"></i><span class="text-xs text-muted">categories</span></div>
|
|
857
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-chart-bar"></i><span class="text-xs text-muted">chart-bar</span></div>
|
|
858
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-check-circle-fill"></i><span class="text-xs text-muted">check-circle</span></div>
|
|
859
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-chevron-down"></i><span class="text-xs text-muted">chevron-down</span></div>
|
|
860
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-chevron-left"></i><span class="text-xs text-muted">chevron-left</span></div>
|
|
861
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-chevron-right"></i><span class="text-xs text-muted">chevron-right</span></div>
|
|
862
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-close"></i><span class="text-xs text-muted">close</span></div>
|
|
863
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-comments"></i><span class="text-xs text-muted">comments</span></div>
|
|
864
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-dollar"></i><span class="text-xs text-muted">dollar</span></div>
|
|
865
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-edit"></i><span class="text-xs text-muted">edit</span></div>
|
|
866
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-eye-fill"></i><span class="text-xs text-muted">eye</span></div>
|
|
867
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-file"></i><span class="text-xs text-muted">file</span></div>
|
|
868
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-github"></i><span class="text-xs text-muted">github</span></div>
|
|
869
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-globe"></i><span class="text-xs text-muted">globe</span></div>
|
|
870
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-grid"></i><span class="text-xs text-muted">grid</span></div>
|
|
871
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-heart"></i><span class="text-xs text-muted">heart</span></div>
|
|
872
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-heart-fill"></i><span class="text-xs text-muted">heart-fill</span></div>
|
|
873
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-home-fill"></i><span class="text-xs text-muted">home</span></div>
|
|
874
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-inbox"></i><span class="text-xs text-muted">inbox</span></div>
|
|
875
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-instagram"></i><span class="text-xs text-muted">instagram</span></div>
|
|
876
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-mail"></i><span class="text-xs text-muted">mail</span></div>
|
|
877
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-menu"></i><span class="text-xs text-muted">menu</span></div>
|
|
878
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-message-circle"></i><span class="text-xs text-muted">message</span></div>
|
|
879
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-moon"></i><span class="text-xs text-muted">moon</span></div>
|
|
880
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-more-horizontal"></i><span class="text-xs text-muted">more-horiz</span></div>
|
|
881
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-music"></i><span class="text-xs text-muted">music</span></div>
|
|
882
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-newspaper"></i><span class="text-xs text-muted">newspaper</span></div>
|
|
883
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-notification"></i><span class="text-xs text-muted">notification</span></div>
|
|
884
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-phone"></i><span class="text-xs text-muted">phone</span></div>
|
|
885
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-play"></i><span class="text-xs text-muted">play</span></div>
|
|
886
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-play-fill"></i><span class="text-xs text-muted">play-fill</span></div>
|
|
887
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-plus"></i><span class="text-xs text-muted">plus</span></div>
|
|
888
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-plus-fill"></i><span class="text-xs text-muted">plus-fill</span></div>
|
|
889
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-products"></i><span class="text-xs text-muted">products</span></div>
|
|
890
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-refresh"></i><span class="text-xs text-muted">refresh</span></div>
|
|
891
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-search"></i><span class="text-xs text-muted">search</span></div>
|
|
892
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-security"></i><span class="text-xs text-muted">security</span></div>
|
|
893
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-settings"></i><span class="text-xs text-muted">settings</span></div>
|
|
894
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-shopping-bag"></i><span class="text-xs text-muted">shopping-bag</span></div>
|
|
895
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-smile"></i><span class="text-xs text-muted">smile</span></div>
|
|
896
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-star"></i><span class="text-xs text-muted">star</span></div>
|
|
897
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-starlight"></i><span class="text-xs text-muted">starlight</span></div>
|
|
898
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-sun"></i><span class="text-xs text-muted">sun</span></div>
|
|
899
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-trash"></i><span class="text-xs text-muted">trash</span></div>
|
|
900
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-trend-down"></i><span class="text-xs text-muted">trend-down</span></div>
|
|
901
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-trend-up"></i><span class="text-xs text-muted">trend-up</span></div>
|
|
902
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-twitter"></i><span class="text-xs text-muted">twitter</span></div>
|
|
903
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-user"></i><span class="text-xs text-muted">user</span></div>
|
|
904
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-user-circle"></i><span class="text-xs text-muted">user-circle</span></div>
|
|
905
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-users"></i><span class="text-xs text-muted">users</span></div>
|
|
906
|
+
<div class="flex flex-col items-center gap-2 p-4 rounded-lg bg-white_5 hover:bg-white_10 transition-colors"><i class="q-icon-video"></i><span class="text-xs text-muted">video</span></div>
|
|
907
|
+
</div>
|
|
908
|
+
</section>
|
|
909
|
+
|
|
853
910
|
<!-- Badges Section -->
|
|
854
911
|
<section>
|
|
855
912
|
<h2>Badges</h2>
|
|
@@ -935,9 +992,9 @@
|
|
|
935
992
|
</div>
|
|
936
993
|
</div>
|
|
937
994
|
<div class="starlight-card p-6">
|
|
938
|
-
<div class="mb-4 token-name">text-gradient
|
|
995
|
+
<div class="mb-4 token-name">text-gradient</div>
|
|
939
996
|
<div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
|
|
940
|
-
<div class="text-gradient
|
|
997
|
+
<div class="text-gradient p-8 rounded-xl w-full text-center">Example Block</div>
|
|
941
998
|
</div>
|
|
942
999
|
</div>
|
|
943
1000
|
<div class="starlight-card p-6">
|
|
@@ -968,87 +1025,157 @@
|
|
|
968
1025
|
<div class="grid grid-cols-1 gap-12">
|
|
969
1026
|
<!-- Navigation -->
|
|
970
1027
|
<div class="starlight-card p-0 mb-12">
|
|
971
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.
|
|
1028
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.nav-header)</div>
|
|
972
1029
|
<div class="relative">
|
|
973
|
-
<
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
<
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
</div>
|
|
988
|
-
</div>
|
|
989
|
-
</li>
|
|
990
|
-
<li><a href="#" class="nav-link">Resources</a></li>
|
|
991
|
-
</ul>
|
|
1030
|
+
<input type="checkbox" id="nav-demo-toggle" class="nav-toggle" />
|
|
1031
|
+
<header class="nav-header">
|
|
1032
|
+
<a href="/" class="nav-logo" aria-label="Starlight OS">
|
|
1033
|
+
<i class="q-icon-starlight"></i>
|
|
1034
|
+
<span class="text-gradient font-bold">Starlight OS</span>
|
|
1035
|
+
</a>
|
|
1036
|
+
<nav class="nav-links" aria-label="Primary navigation">
|
|
1037
|
+
<a href="#">Fleet</a>
|
|
1038
|
+
<details class="nav-dropdown">
|
|
1039
|
+
<summary>Stations</summary>
|
|
1040
|
+
<div class="nav-dropdown-panel">
|
|
1041
|
+
<a href="#">Alpha Base</a>
|
|
1042
|
+
<a href="#">Delta Outpost</a>
|
|
1043
|
+
<a href="#">Omega Point</a>
|
|
992
1044
|
</div>
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
</div>
|
|
1010
|
-
</li>
|
|
1011
|
-
<li><a href="#" class="nav-link">Resources</a></li>
|
|
1012
|
-
</ul>
|
|
1045
|
+
</details>
|
|
1046
|
+
<a href="#">Resources</a>
|
|
1047
|
+
</nav>
|
|
1048
|
+
<a href="/profile" class="nav-profile" aria-label="Your profile">JD</a>
|
|
1049
|
+
<label for="nav-demo-toggle" class="nav-hamburger" aria-label="Toggle menu">
|
|
1050
|
+
<span class="nav-hamburger-icon"><span></span><span></span><span></span></span>
|
|
1051
|
+
</label>
|
|
1052
|
+
</header>
|
|
1053
|
+
<div class="nav-drawer">
|
|
1054
|
+
<div class="nav-drawer-inner">
|
|
1055
|
+
<a href="#">Fleet</a>
|
|
1056
|
+
<span class="nav-drawer-section-label">Stations</span>
|
|
1057
|
+
<a href="#" style="padding-left: 1.75rem; font-size: .85rem; font-weight: 500;">Alpha Base</a>
|
|
1058
|
+
<a href="#" style="padding-left: 1.75rem; font-size: .85rem; font-weight: 500;">Delta Outpost</a>
|
|
1059
|
+
<a href="#" style="padding-left: 1.75rem; font-size: .85rem; font-weight: 500;">Omega Point</a>
|
|
1060
|
+
<a href="#">Resources</a>
|
|
1013
1061
|
</div>
|
|
1014
|
-
</
|
|
1015
|
-
<div class="p-12 text-center opacity-50 italic text-sm border-t border-white_5
|
|
1062
|
+
</div>
|
|
1063
|
+
<div class="p-12 text-center opacity-50 italic text-sm border-t border-white_5">Horizontal layout with CSS-only dropdown (zero JS)</div>
|
|
1016
1064
|
</div>
|
|
1017
1065
|
</div>
|
|
1018
1066
|
|
|
1019
1067
|
<!-- Vertical Navigation -->
|
|
1020
1068
|
<div class="starlight-card p-0">
|
|
1021
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.
|
|
1069
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.aside-nav)</div>
|
|
1022
1070
|
<div class="flex h-[400px] overflow-hidden">
|
|
1023
|
-
<
|
|
1024
|
-
<div class="
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
<
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
<
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1071
|
+
<aside class="aside-nav" aria-label="Sidebar navigation">
|
|
1072
|
+
<div class="aside-nav-header">
|
|
1073
|
+
<a href="/" class="nav-logo" aria-label="Starlight OS">
|
|
1074
|
+
<i class="q-icon-starlight"></i>
|
|
1075
|
+
<div class="aside-nav-brand">
|
|
1076
|
+
<span>
|
|
1077
|
+
<strong class="text-gradient">Starlight OS</strong>
|
|
1078
|
+
<span>Workspace</span>
|
|
1079
|
+
</span>
|
|
1080
|
+
</div>
|
|
1081
|
+
</a>
|
|
1082
|
+
</div>
|
|
1083
|
+
<nav class="aside-nav-inner">
|
|
1084
|
+
<div class="aside-nav-section">
|
|
1085
|
+
<span class="aside-nav-label">Main</span>
|
|
1086
|
+
<a href="#" class="aside-nav-item active">
|
|
1087
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1088
|
+
<rect x="2" y="2" width="5.5" height="5.5" rx="1.5"/><rect x="10.5" y="2" width="5.5" height="5.5" rx="1.5"/>
|
|
1089
|
+
<rect x="2" y="10.5" width="5.5" height="5.5" rx="1.5"/><rect x="10.5" y="10.5" width="5.5" height="5.5" rx="1.5"/>
|
|
1090
|
+
</svg>
|
|
1091
|
+
<span>Overview</span>
|
|
1092
|
+
</a>
|
|
1093
|
+
<a href="#" class="aside-nav-item">
|
|
1094
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1095
|
+
<path d="M9 2v14M2 9h14"/>
|
|
1096
|
+
</svg>
|
|
1097
|
+
<span>New Entry</span>
|
|
1098
|
+
<span class="aside-nav-badge">3</span>
|
|
1099
|
+
</a>
|
|
1100
|
+
<a href="#" class="aside-nav-item">
|
|
1101
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1102
|
+
<circle cx="9" cy="9" r="7"/><path d="M9 5v4l2.5 2.5"/>
|
|
1103
|
+
</svg>
|
|
1104
|
+
<span>Recent</span>
|
|
1105
|
+
</a>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div class="aside-nav-divider"></div>
|
|
1108
|
+
<div class="aside-nav-section">
|
|
1109
|
+
<span class="aside-nav-label">Collections</span>
|
|
1110
|
+
<details class="aside-nav-group" open>
|
|
1111
|
+
<summary>
|
|
1112
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1113
|
+
<path d="M3 5h12M3 9h8M3 13h10"/>
|
|
1114
|
+
</svg>
|
|
1115
|
+
<span>Projects</span>
|
|
1116
|
+
<svg class="aside-nav-chevron" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
1117
|
+
<path d="M5 3l4 4-4 4"/>
|
|
1118
|
+
</svg>
|
|
1119
|
+
</summary>
|
|
1120
|
+
<div class="aside-nav-sub">
|
|
1121
|
+
<a href="#" class="aside-nav-item"><span>Brand Refresh</span></a>
|
|
1122
|
+
<a href="#" class="aside-nav-item"><span>Q2 Campaign</span></a>
|
|
1123
|
+
<a href="#" class="aside-nav-item"><span>Annual Report</span></a>
|
|
1124
|
+
</div>
|
|
1125
|
+
</details>
|
|
1126
|
+
<details class="aside-nav-group">
|
|
1127
|
+
<summary>
|
|
1128
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1129
|
+
<path d="M4 4h10v10H4z"/><path d="M4 8h10"/>
|
|
1130
|
+
</svg>
|
|
1131
|
+
<span>Archives</span>
|
|
1132
|
+
<svg class="aside-nav-chevron" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
1133
|
+
<path d="M5 3l4 4-4 4"/>
|
|
1134
|
+
</svg>
|
|
1135
|
+
</summary>
|
|
1136
|
+
<div class="aside-nav-sub">
|
|
1137
|
+
<a href="#" class="aside-nav-item"><span>2024</span></a>
|
|
1138
|
+
<a href="#" class="aside-nav-item"><span>2023</span></a>
|
|
1035
1139
|
</div>
|
|
1036
|
-
</
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1140
|
+
</details>
|
|
1141
|
+
</div>
|
|
1142
|
+
<div class="aside-nav-divider"></div>
|
|
1143
|
+
<div class="aside-nav-section">
|
|
1144
|
+
<span class="aside-nav-label">Tools</span>
|
|
1145
|
+
<a href="#" class="aside-nav-item">
|
|
1146
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1147
|
+
<circle cx="9" cy="9" r="3"/><path d="M9 2v2M9 14v2M2 9h2M14 9h2"/>
|
|
1148
|
+
</svg>
|
|
1149
|
+
<span>Settings</span>
|
|
1150
|
+
</a>
|
|
1151
|
+
<a href="#" class="aside-nav-item">
|
|
1152
|
+
<svg class="aside-nav-item-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
1153
|
+
<circle cx="9" cy="9" r="7"/><path d="M9 7v1.5L10.5 10"/>
|
|
1154
|
+
</svg>
|
|
1155
|
+
<span>Help</span>
|
|
1156
|
+
</a>
|
|
1157
|
+
</div>
|
|
1158
|
+
</nav>
|
|
1159
|
+
<div class="aside-nav-footer">
|
|
1160
|
+
<a href="#" class="aside-nav-user">
|
|
1161
|
+
<div class="aside-nav-user-avatar">JD</div>
|
|
1162
|
+
<div class="aside-nav-user-info">
|
|
1163
|
+
<strong>Jane Doe</strong>
|
|
1164
|
+
<span>jane@starlight.io</span>
|
|
1165
|
+
</div>
|
|
1166
|
+
</a>
|
|
1040
1167
|
</div>
|
|
1041
|
-
</
|
|
1168
|
+
</aside>
|
|
1042
1169
|
<div class="flex-1 p-8 opacity-50 italic text-sm overflow-y-auto light__bg-slate-300">Dashboard content area...</div>
|
|
1043
1170
|
</div>
|
|
1044
1171
|
</div>
|
|
1045
1172
|
|
|
1046
1173
|
<!-- Search -->
|
|
1047
1174
|
<div class="starlight-card p-0 overflow-hidden">
|
|
1048
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.
|
|
1175
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.search)</div>
|
|
1049
1176
|
<div class="p-12 flex flex-col items-center gap-6">
|
|
1050
|
-
<div class="
|
|
1051
|
-
<
|
|
1177
|
+
<div class="search has-icon">
|
|
1178
|
+
<i class="q-icon-search"></i>
|
|
1052
1179
|
<input type="text" class="input-starlight search-input" placeholder="Search the cosmos...">
|
|
1053
1180
|
</div>
|
|
1054
1181
|
<p class="text-sm text-muted">A glassmorphic search bar with integrated iconography.</p>
|
|
@@ -1057,14 +1184,14 @@
|
|
|
1057
1184
|
|
|
1058
1185
|
<!-- Dashboard -->
|
|
1059
1186
|
<div class="starlight-card p-0 overflow-hidden">
|
|
1060
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.
|
|
1187
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.dashboard)</div>
|
|
1061
1188
|
<div class="p-8">
|
|
1062
|
-
<div class="
|
|
1189
|
+
<div class="dashboard">
|
|
1063
1190
|
<div class="starlight-card stat-card light:shadow-lg">
|
|
1064
1191
|
<span class="stat-label">Core Stability</span>
|
|
1065
1192
|
<span class="stat-value">98.4%</span>
|
|
1066
1193
|
<div class="stat-trend up">
|
|
1067
|
-
<
|
|
1194
|
+
<i class="q-icon-trend-up"></i>
|
|
1068
1195
|
2.1%
|
|
1069
1196
|
</div>
|
|
1070
1197
|
</div>
|
|
@@ -1080,7 +1207,7 @@
|
|
|
1080
1207
|
<span class="stat-label">Latency</span>
|
|
1081
1208
|
<span class="stat-value">12ms</span>
|
|
1082
1209
|
<div class="stat-trend down">
|
|
1083
|
-
<
|
|
1210
|
+
<i class="q-icon-trend-down"></i>
|
|
1084
1211
|
0.4%
|
|
1085
1212
|
</div>
|
|
1086
1213
|
</div>
|
|
@@ -1090,9 +1217,9 @@
|
|
|
1090
1217
|
|
|
1091
1218
|
<!-- Gallery -->
|
|
1092
1219
|
<div class="starlight-card p-0 overflow-hidden">
|
|
1093
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.
|
|
1220
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.gallery)</div>
|
|
1094
1221
|
<div class="p-8">
|
|
1095
|
-
<div class="
|
|
1222
|
+
<div class="gallery">
|
|
1096
1223
|
<div class="gallery-item">
|
|
1097
1224
|
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80" alt="Nebula">
|
|
1098
1225
|
<div class="gallery-overlay"><span class="text-xs font-bold uppercase tracking-widest">Orion</span></div>
|
|
@@ -1113,11 +1240,73 @@
|
|
|
1113
1240
|
</div>
|
|
1114
1241
|
</div>
|
|
1115
1242
|
|
|
1243
|
+
<!-- Premium Table -->
|
|
1244
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
1245
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Premium Data Table (.table-premium)</div>
|
|
1246
|
+
<div class="p-8">
|
|
1247
|
+
<div class="table-premium-container">
|
|
1248
|
+
<div class="table-premium-header">
|
|
1249
|
+
<div class="table-premium-title">Mission Manifest</div>
|
|
1250
|
+
<div class="table-premium-filters">
|
|
1251
|
+
<div class="search has-icon" style="width: 200px;">
|
|
1252
|
+
<i class="q-icon-search"></i>
|
|
1253
|
+
<input type="text" class="search-input" placeholder="Filter logs...">
|
|
1254
|
+
</div>
|
|
1255
|
+
<button class="btn btn-secondary btn-sm">Export</button>
|
|
1256
|
+
</div>
|
|
1257
|
+
</div>
|
|
1258
|
+
<div class="overflow-x-auto">
|
|
1259
|
+
<table class="table-premium">
|
|
1260
|
+
<thead>
|
|
1261
|
+
<tr>
|
|
1262
|
+
<th>Designation</th>
|
|
1263
|
+
<th>Status</th>
|
|
1264
|
+
<th>Operator</th>
|
|
1265
|
+
<th>Date</th>
|
|
1266
|
+
<th>Action</th>
|
|
1267
|
+
</tr>
|
|
1268
|
+
</thead>
|
|
1269
|
+
<tbody>
|
|
1270
|
+
<tr>
|
|
1271
|
+
<td><div class="font-bold text-primary">PROJECT_XERO</div></td>
|
|
1272
|
+
<td><span class="badge badge-success">Active</span></td>
|
|
1273
|
+
<td>Commander Chen</td>
|
|
1274
|
+
<td class="opacity-60">Mar 20, 2026</td>
|
|
1275
|
+
<td><button class="btn btn-ghost btn-sm text-accent"><i class="q-icon-edit mr-2"></i>Edit</button></td>
|
|
1276
|
+
</tr>
|
|
1277
|
+
<tr>
|
|
1278
|
+
<td><div class="font-bold text-primary">NEURAL_SYNC_V4</div></td>
|
|
1279
|
+
<td><span class="badge badge-primary">Syncing</span></td>
|
|
1280
|
+
<td>Michael R.</td>
|
|
1281
|
+
<td class="opacity-60">Mar 18, 2026</td>
|
|
1282
|
+
<td><button class="btn btn-ghost btn-sm text-accent"><i class="q-icon-edit mr-2"></i>Edit</button></td>
|
|
1283
|
+
</tr>
|
|
1284
|
+
<tr>
|
|
1285
|
+
<td><div class="font-bold text-primary">VOID_PROBE_09</div></td>
|
|
1286
|
+
<td><span class="badge badge-error">Offline</span></td>
|
|
1287
|
+
<td>AI_OVERSEER</td>
|
|
1288
|
+
<td class="opacity-60">Mar 15, 2026</td>
|
|
1289
|
+
<td><button class="btn btn-ghost btn-sm text-accent"><i class="q-icon-edit mr-2"></i>Edit</button></td>
|
|
1290
|
+
</tr>
|
|
1291
|
+
</tbody>
|
|
1292
|
+
</table>
|
|
1293
|
+
</div>
|
|
1294
|
+
<div class="table-premium-footer">
|
|
1295
|
+
<div class="table-premium-info">Showing 3 of 12 entries</div>
|
|
1296
|
+
<div class="flex gap-2">
|
|
1297
|
+
<button class="btn btn-secondary btn-sm" disabled>Prev</button>
|
|
1298
|
+
<button class="btn btn-secondary btn-sm">Next</button>
|
|
1299
|
+
</div>
|
|
1300
|
+
</div>
|
|
1301
|
+
</div>
|
|
1302
|
+
</div>
|
|
1303
|
+
</div>
|
|
1304
|
+
|
|
1116
1305
|
<!-- Form -->
|
|
1117
1306
|
<div class="starlight-card p-0 overflow-hidden">
|
|
1118
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.
|
|
1307
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.form)</div>
|
|
1119
1308
|
<div class="p-8">
|
|
1120
|
-
<div class="
|
|
1309
|
+
<div class="form">
|
|
1121
1310
|
<div class="flex flex-col gap-4">
|
|
1122
1311
|
<label class="text-sm font-semibold opacity-70">Mission Designation</label>
|
|
1123
1312
|
<input type="text" class="input-starlight" placeholder="Enter codename...">
|
|
@@ -1143,11 +1332,11 @@
|
|
|
1143
1332
|
|
|
1144
1333
|
<!-- Dialog -->
|
|
1145
1334
|
<div class="starlight-card p-0">
|
|
1146
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.
|
|
1335
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.dialog)</div>
|
|
1147
1336
|
<div class="p-8">
|
|
1148
1337
|
<!-- Inline Preview -->
|
|
1149
1338
|
<div class="dialog-base theme-glass relative mx-auto mb-8 shadow-none border-white_10" style="max-width: 500px;">
|
|
1150
|
-
<h3 class="text-xl font-bold mb-4 text-gradient
|
|
1339
|
+
<h3 class="text-xl font-bold mb-4 text-gradient">System Preview</h3>
|
|
1151
1340
|
<p class="mb-6 opacity-70 text-sm">This is an inline preview of the dialog component. It scales to fit its container.</p>
|
|
1152
1341
|
<div class="flex gap-4">
|
|
1153
1342
|
<button class="btn-starlight btn-sm flex-1">Action</button>
|
|
@@ -1163,22 +1352,22 @@
|
|
|
1163
1352
|
|
|
1164
1353
|
<!-- Accordion -->
|
|
1165
1354
|
<div class="starlight-card p-0 overflow-hidden">
|
|
1166
|
-
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion
|
|
1355
|
+
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion)</div>
|
|
1167
1356
|
<div class="p-8">
|
|
1168
1357
|
<div class="max-w-2xl mx-auto" data-accordion>
|
|
1169
|
-
<div class="accordion-item accordion
|
|
1358
|
+
<div class="accordion-item accordion active">
|
|
1170
1359
|
<div class="accordion-header">
|
|
1171
1360
|
<span>Cosmic Manifestation</span>
|
|
1172
|
-
<
|
|
1361
|
+
<i class="q-icon-chevron-down accordion-icon"></i>
|
|
1173
1362
|
</div>
|
|
1174
1363
|
<div class="accordion-content">
|
|
1175
1364
|
<p>The universe began as a singularity of infinite density and heat, expanding rapidly in a cosmic event known as the Big Bang.</p>
|
|
1176
1365
|
</div>
|
|
1177
1366
|
</div>
|
|
1178
|
-
<div class="accordion-item accordion
|
|
1367
|
+
<div class="accordion-item accordion">
|
|
1179
1368
|
<div class="accordion-header">
|
|
1180
1369
|
<span>Neural Synchronization</span>
|
|
1181
|
-
<
|
|
1370
|
+
<i class="q-icon-chevron-down accordion-icon"></i>
|
|
1182
1371
|
</div>
|
|
1183
1372
|
<div class="accordion-content">
|
|
1184
1373
|
<p>Advanced neural interfaces allow for near-instantaneous data transfer between organic consciousness and digital mesh networks.</p>
|
|
@@ -1280,11 +1469,11 @@
|
|
|
1280
1469
|
|
|
1281
1470
|
<!-- Dialog Overlay (Moved to bottom to prevent clipping) -->
|
|
1282
1471
|
<div class="dialog-overlay hidden" id="systemDialog">
|
|
1283
|
-
<div class="
|
|
1472
|
+
<div class="dialog">
|
|
1284
1473
|
<button class="dialog-close" onclick="toggleDialog(false)">
|
|
1285
|
-
<
|
|
1474
|
+
<i class="q-icon-close"></i>
|
|
1286
1475
|
</button>
|
|
1287
|
-
<h3 class="text-2xl font-bold mb-4 text-gradient
|
|
1476
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient">System Override</h3>
|
|
1288
1477
|
<p class="mb-6 opacity-70">You are about to bypass safety protocols. This action is irreversible.</p>
|
|
1289
1478
|
<div class="bg-black/20 p-4 rounded-lg mb-6 font-mono text-xs border border-white_5">
|
|
1290
1479
|
<div class="text-success">> STATUS: AUTHORIZED</div>
|
|
@@ -1301,7 +1490,7 @@
|
|
|
1301
1490
|
<div class="designer-panel" id="designerPanel">
|
|
1302
1491
|
<div class="designer-header" onclick="document.getElementById('designerPanel').classList.toggle('minimized')">
|
|
1303
1492
|
<div class="designer-title">Theme Designer</div>
|
|
1304
|
-
<
|
|
1493
|
+
<i class="q-icon-chevron-down"></i>
|
|
1305
1494
|
</div>
|
|
1306
1495
|
|
|
1307
1496
|
<div class="control-group">
|
|
@@ -1335,6 +1524,7 @@
|
|
|
1335
1524
|
// Simple HSL to Hex approximation for primary-500
|
|
1336
1525
|
root.style.setProperty('--q-color-primary', 'hsl(' + h + ', 91%, 60%)');
|
|
1337
1526
|
root.style.setProperty('--q-color-starlight-blue', 'hsl(' + h + ', 100%, 50%)');
|
|
1527
|
+
root.style.setProperty('--q-color-starlight-glow', 'hsl(' + h + ', 100%, 50%, 0.35)');
|
|
1338
1528
|
};
|
|
1339
1529
|
|
|
1340
1530
|
blurSlider.oninput = function() {
|
|
@@ -1342,7 +1532,7 @@
|
|
|
1342
1532
|
document.getElementById('blurVal').innerText = b + 'px';
|
|
1343
1533
|
root.style.setProperty('--q-glass-blur', 'blur(' + b + 'px)');
|
|
1344
1534
|
// Update all elements with inline glass overrides
|
|
1345
|
-
document.querySelectorAll('.glass, .starlight-card, .
|
|
1535
|
+
document.querySelectorAll('.glass, .starlight-card, .nav-header').forEach(el => {
|
|
1346
1536
|
el.style.backdropFilter = 'blur(' + b + 'px)';
|
|
1347
1537
|
el.style.webkitBackdropFilter = 'blur(' + b + 'px)';
|
|
1348
1538
|
});
|
|
@@ -1404,4 +1594,4 @@
|
|
|
1404
1594
|
}
|
|
1405
1595
|
</script>
|
|
1406
1596
|
</body>
|
|
1407
|
-
</html>
|
|
1597
|
+
</html>
|