@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
|
@@ -634,10 +634,6 @@
|
|
|
634
634
|
color: var(--color-starlight, #00d4ff);
|
|
635
635
|
}
|
|
636
636
|
|
|
637
|
-
.sun-icon { display: none; }
|
|
638
|
-
html[data-theme="light"] .sun-icon { display: inline; }
|
|
639
|
-
html[data-theme="light"] .moon-icon { display: none; }
|
|
640
|
-
|
|
641
637
|
/* Light Mode */
|
|
642
638
|
html[data-theme="light"] {
|
|
643
639
|
--bg-primary: #f8fafc;
|
|
@@ -809,31 +805,23 @@
|
|
|
809
805
|
<aside class="music-sidebar">
|
|
810
806
|
<div class="music-logo">
|
|
811
807
|
<div class="music-logo-icon">
|
|
812
|
-
<
|
|
813
|
-
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
|
814
|
-
</svg>
|
|
808
|
+
<i class="q-icon-music text-white"></i>
|
|
815
809
|
</div>
|
|
816
|
-
<span class="text-xl font-bold text-gradient
|
|
810
|
+
<span class="text-xl font-bold text-gradient">Starlight</span>
|
|
817
811
|
</div>
|
|
818
812
|
|
|
819
813
|
<div class="nav-section">
|
|
820
814
|
<nav>
|
|
821
815
|
<button class="nav-item active">
|
|
822
|
-
<
|
|
823
|
-
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
824
|
-
</svg>
|
|
816
|
+
<i class="q-icon-home-fill"></i>
|
|
825
817
|
<span>Home</span>
|
|
826
818
|
</button>
|
|
827
819
|
<button class="nav-item">
|
|
828
|
-
<
|
|
829
|
-
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
830
|
-
</svg>
|
|
820
|
+
<i class="q-icon-search"></i>
|
|
831
821
|
<span>Search</span>
|
|
832
822
|
</button>
|
|
833
823
|
<button class="nav-item">
|
|
834
|
-
<
|
|
835
|
-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
836
|
-
</svg>
|
|
824
|
+
<i class="q-icon-library-fill"></i>
|
|
837
825
|
<span>Your Library</span>
|
|
838
826
|
</button>
|
|
839
827
|
</nav>
|
|
@@ -843,15 +831,11 @@
|
|
|
843
831
|
<div class="nav-title">Playlists</div>
|
|
844
832
|
<nav>
|
|
845
833
|
<div class="nav-item">
|
|
846
|
-
<
|
|
847
|
-
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
848
|
-
</svg>
|
|
834
|
+
<i class="q-icon-plus-fill"></i>
|
|
849
835
|
<span>Create Playlist</span>
|
|
850
836
|
</div>
|
|
851
837
|
<div class="nav-item">
|
|
852
|
-
<
|
|
853
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
854
|
-
</svg>
|
|
838
|
+
<i class="q-icon-heart-fill" style="color: #ec4899;"></i>
|
|
855
839
|
<span>Liked Songs</span>
|
|
856
840
|
</div>
|
|
857
841
|
</nav>
|
|
@@ -879,9 +863,7 @@
|
|
|
879
863
|
</div>
|
|
880
864
|
|
|
881
865
|
<button class="create-playlist-btn">
|
|
882
|
-
<
|
|
883
|
-
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
884
|
-
</svg>
|
|
866
|
+
<i class="q-icon-plus-fill"></i>
|
|
885
867
|
<span>Create New Playlist</span>
|
|
886
868
|
</button>
|
|
887
869
|
</aside>
|
|
@@ -894,14 +876,10 @@
|
|
|
894
876
|
<header class="music-header">
|
|
895
877
|
<div class="nav-arrows">
|
|
896
878
|
<button class="nav-arrow">
|
|
897
|
-
<
|
|
898
|
-
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
|
899
|
-
</svg>
|
|
879
|
+
<i class="q-icon-chevron-left-fill"></i>
|
|
900
880
|
</button>
|
|
901
881
|
<button class="nav-arrow">
|
|
902
|
-
<
|
|
903
|
-
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
|
904
|
-
</svg>
|
|
882
|
+
<i class="q-icon-chevron-right-fill"></i>
|
|
905
883
|
</button>
|
|
906
884
|
</div>
|
|
907
885
|
<div class="user-menu">
|
|
@@ -934,19 +912,13 @@
|
|
|
934
912
|
<!-- Action Bar -->
|
|
935
913
|
<div class="action-bar">
|
|
936
914
|
<button class="play-btn">
|
|
937
|
-
<
|
|
938
|
-
<path d="M8 5v14l11-7z"/>
|
|
939
|
-
</svg>
|
|
915
|
+
<i class="q-icon-play-fill"></i>
|
|
940
916
|
</button>
|
|
941
917
|
<button class="action-icon liked">
|
|
942
|
-
<
|
|
943
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
944
|
-
</svg>
|
|
918
|
+
<i class="q-icon-heart-fill w-8 h-8"></i>
|
|
945
919
|
</button>
|
|
946
920
|
<button class="action-icon">
|
|
947
|
-
<
|
|
948
|
-
<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
|
|
949
|
-
</svg>
|
|
921
|
+
<i class="q-icon-more-horizontal-fill w-7 h-7"></i>
|
|
950
922
|
</button>
|
|
951
923
|
</div>
|
|
952
924
|
|
|
@@ -980,9 +952,7 @@
|
|
|
980
952
|
<div class="track-date">2 days ago</div>
|
|
981
953
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
982
954
|
<div class="track-like">
|
|
983
|
-
<
|
|
984
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
985
|
-
</svg>
|
|
955
|
+
<i class="q-icon-heart-fill"></i>
|
|
986
956
|
</div>
|
|
987
957
|
<div class="track-duration">3:45</div>
|
|
988
958
|
</div>
|
|
@@ -1005,9 +975,7 @@
|
|
|
1005
975
|
<div class="track-date">5 days ago</div>
|
|
1006
976
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1007
977
|
<div class="track-like">
|
|
1008
|
-
<
|
|
1009
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1010
|
-
</svg>
|
|
978
|
+
<i class="q-icon-heart-fill"></i>
|
|
1011
979
|
</div>
|
|
1012
980
|
<div class="track-duration">4:12</div>
|
|
1013
981
|
</div>
|
|
@@ -1033,9 +1001,7 @@
|
|
|
1033
1001
|
<div class="track-date">1 week ago</div>
|
|
1034
1002
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1035
1003
|
<div class="track-like">
|
|
1036
|
-
<
|
|
1037
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1038
|
-
</svg>
|
|
1004
|
+
<i class="q-icon-heart-fill"></i>
|
|
1039
1005
|
</div>
|
|
1040
1006
|
<div class="track-duration">3:28</div>
|
|
1041
1007
|
</div>
|
|
@@ -1058,9 +1024,7 @@
|
|
|
1058
1024
|
<div class="track-date">2 weeks ago</div>
|
|
1059
1025
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1060
1026
|
<div class="track-like">
|
|
1061
|
-
<
|
|
1062
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1063
|
-
</svg>
|
|
1027
|
+
<i class="q-icon-heart-fill"></i>
|
|
1064
1028
|
</div>
|
|
1065
1029
|
<div class="track-duration">3:56</div>
|
|
1066
1030
|
</div>
|
|
@@ -1083,9 +1047,7 @@
|
|
|
1083
1047
|
<div class="track-date">3 weeks ago</div>
|
|
1084
1048
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1085
1049
|
<div class="track-like">
|
|
1086
|
-
<
|
|
1087
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1088
|
-
</svg>
|
|
1050
|
+
<i class="q-icon-heart-fill"></i>
|
|
1089
1051
|
</div>
|
|
1090
1052
|
<div class="track-duration">4:33</div>
|
|
1091
1053
|
</div>
|
|
@@ -1111,9 +1073,7 @@
|
|
|
1111
1073
|
<div class="track-date">1 month ago</div>
|
|
1112
1074
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1113
1075
|
<div class="track-like">
|
|
1114
|
-
<
|
|
1115
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1116
|
-
</svg>
|
|
1076
|
+
<i class="q-icon-heart-fill"></i>
|
|
1117
1077
|
</div>
|
|
1118
1078
|
<div class="track-duration">5:01</div>
|
|
1119
1079
|
</div>
|
|
@@ -1133,9 +1093,7 @@
|
|
|
1133
1093
|
<div class="now-playing-artist">Cosmic Collective</div>
|
|
1134
1094
|
</div>
|
|
1135
1095
|
<div class="now-playing-like">
|
|
1136
|
-
<
|
|
1137
|
-
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1138
|
-
</svg>
|
|
1096
|
+
<i class="q-icon-heart-fill"></i>
|
|
1139
1097
|
</div>
|
|
1140
1098
|
</div>
|
|
1141
1099
|
|
|
@@ -1143,29 +1101,19 @@
|
|
|
1143
1101
|
<div class="player-controls">
|
|
1144
1102
|
<div class="control-buttons">
|
|
1145
1103
|
<button class="control-btn" title="Shuffle">
|
|
1146
|
-
<
|
|
1147
|
-
<path d="M10.59 9.17L5.41 3.99 4 5.41l5.18 5.17 1.41-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
|
|
1148
|
-
</svg>
|
|
1104
|
+
<i class="q-icon-shuffle-fill"></i>
|
|
1149
1105
|
</button>
|
|
1150
1106
|
<button class="control-btn" title="Previous">
|
|
1151
|
-
<
|
|
1152
|
-
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
|
|
1153
|
-
</svg>
|
|
1107
|
+
<i class="q-icon-previous-fill"></i>
|
|
1154
1108
|
</button>
|
|
1155
1109
|
<button class="control-btn play" title="Play/Pause">
|
|
1156
|
-
<
|
|
1157
|
-
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|
1158
|
-
</svg>
|
|
1110
|
+
<i class="q-icon-pause-fill"></i>
|
|
1159
1111
|
</button>
|
|
1160
1112
|
<button class="control-btn" title="Next">
|
|
1161
|
-
<
|
|
1162
|
-
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
1163
|
-
</svg>
|
|
1113
|
+
<i class="q-icon-next-fill"></i>
|
|
1164
1114
|
</button>
|
|
1165
1115
|
<button class="control-btn" title="Repeat">
|
|
1166
|
-
<
|
|
1167
|
-
<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
|
|
1168
|
-
</svg>
|
|
1116
|
+
<i class="q-icon-repeat-fill"></i>
|
|
1169
1117
|
</button>
|
|
1170
1118
|
</div>
|
|
1171
1119
|
<div class="progress-bar">
|
|
@@ -1181,25 +1129,18 @@
|
|
|
1181
1129
|
<!-- Volume Controls -->
|
|
1182
1130
|
<div class="volume-controls">
|
|
1183
1131
|
<button class="control-btn">
|
|
1184
|
-
<
|
|
1185
|
-
<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>
|
|
1186
|
-
</svg>
|
|
1132
|
+
<i class="q-icon-queue-fill"></i>
|
|
1187
1133
|
</button>
|
|
1188
1134
|
<button class="control-btn">
|
|
1189
|
-
<
|
|
1190
|
-
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
|
1191
|
-
</svg>
|
|
1135
|
+
<i class="q-icon-volume-fill"></i>
|
|
1192
1136
|
</button>
|
|
1193
1137
|
<div class="volume-slider">
|
|
1194
1138
|
<div class="volume-fill"></div>
|
|
1195
1139
|
</div>
|
|
1196
1140
|
<button class="theme-toggle-player" onclick="toggleTheme()">
|
|
1197
|
-
<
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
<svg class="moon-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
1201
|
-
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
|
|
1202
|
-
</svg>
|
|
1141
|
+
<i class="q-icon-display"></i>
|
|
1142
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
1143
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
1203
1144
|
</button>
|
|
1204
1145
|
</div>
|
|
1205
1146
|
</div>
|
|
@@ -1223,8 +1164,8 @@
|
|
|
1223
1164
|
playBtn.addEventListener('click', function() {
|
|
1224
1165
|
isPlaying = !isPlaying;
|
|
1225
1166
|
this.innerHTML = isPlaying
|
|
1226
|
-
? '<
|
|
1227
|
-
: '<
|
|
1167
|
+
? '<i class="q-icon-pause-fill"></i>'
|
|
1168
|
+
: '<i class="q-icon-play-fill"></i>';
|
|
1228
1169
|
});
|
|
1229
1170
|
</script>
|
|
1230
1171
|
</body>
|
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
.newsletter-input::placeholder { color: #cbd5e1; }
|
|
17
|
+
|
|
16
18
|
.news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
|
|
17
19
|
@media (min-width: 1024px) {
|
|
18
20
|
.news-grid { grid-template-columns: 3fr 1fr; }
|
|
@@ -57,33 +59,55 @@
|
|
|
57
59
|
background: var(--q-highlight-bg);
|
|
58
60
|
}
|
|
59
61
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
/* Nav Header Overrides */
|
|
63
|
+
.nav-header { padding: 0; }
|
|
64
|
+
.nav-header .nav-links { flex: none; }
|
|
65
|
+
.nav-header .btn-secondary { display: none; }
|
|
66
|
+
@media (min-width: 768px) {
|
|
67
|
+
.nav-header .btn-secondary { display: block; }
|
|
68
|
+
}
|
|
63
69
|
</style>
|
|
64
70
|
</head>
|
|
65
71
|
<body class="bg-surface">
|
|
66
72
|
<!-- Navigation -->
|
|
67
|
-
<nav class="
|
|
68
|
-
|
|
73
|
+
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
|
|
74
|
+
<header class="nav-header">
|
|
75
|
+
<div class="container mx-auto px-6 flex items-center justify-between w-full h-full">
|
|
69
76
|
<div class="text-2xl sm:text-4xl font-bold tracking-tighter uppercase italic text-primary shrink-0">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
70
77
|
|
|
71
|
-
<
|
|
78
|
+
<nav class="nav-links space-x-12 text-xs font-black uppercase tracking-widest flex-1 justify-center">
|
|
72
79
|
<a href="#" class="hover:text-blue-600 transition-colors">Neural Mesh</a>
|
|
73
80
|
<a href="#" class="hover:text-blue-600 transition-colors">Bio-Tech</a>
|
|
74
81
|
<a href="#" class="hover:text-blue-600 transition-colors">Space-X</a>
|
|
75
82
|
<a href="#" class="hover:text-blue-600 transition-colors">Quantum Compute</a>
|
|
76
|
-
</
|
|
83
|
+
</nav>
|
|
77
84
|
|
|
78
85
|
<div class="flex items-center gap-6 shrink-0">
|
|
79
86
|
<div id="theme-btn" class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
80
|
-
<
|
|
81
|
-
<
|
|
87
|
+
<i class="q-icon-display"></i>
|
|
88
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
89
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
82
90
|
</div>
|
|
83
91
|
<button class="btn btn-secondary px-6 py-2 rounded font-bold text-xs uppercase tracking-widest">Login</button>
|
|
92
|
+
<label for="nav-toggle" class="nav-hamburger" aria-label="Toggle menu">
|
|
93
|
+
<span class="nav-hamburger-icon"><span></span><span></span><span></span></span>
|
|
94
|
+
</label>
|
|
84
95
|
</div>
|
|
85
96
|
</div>
|
|
86
|
-
</
|
|
97
|
+
</header>
|
|
98
|
+
|
|
99
|
+
<!-- Mobile Drawer -->
|
|
100
|
+
<div class="nav-drawer">
|
|
101
|
+
<div class="nav-drawer-inner">
|
|
102
|
+
<a href="#">Neural Mesh</a>
|
|
103
|
+
<a href="#">Bio-Tech</a>
|
|
104
|
+
<a href="#">Space-X</a>
|
|
105
|
+
<a href="#">Quantum Compute</a>
|
|
106
|
+
<div class="pt-4 border-t border-white_5">
|
|
107
|
+
<button class="btn btn-secondary w-full py-3 rounded font-bold text-xs uppercase tracking-widest">Login</button>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
87
111
|
|
|
88
112
|
<!-- Breaking News Ticker -->
|
|
89
113
|
<div class="bg-blue-600 text-white py-3 overflow-hidden">
|
|
@@ -158,7 +182,7 @@
|
|
|
158
182
|
<div class="p-8 rounded-2xl bg-accent text-white">
|
|
159
183
|
<h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
|
|
160
184
|
<p class="text-sm opacity-90 mb-6">Receive the morning data-stream directly to your neural link.</p>
|
|
161
|
-
<input type="email" placeholder="terminal@id.io" class="w-full bg-
|
|
185
|
+
<input type="email" placeholder="terminal@id.io" class="w-full bg-white_20 border border-white_20 p-3 rounded text-sm mb-4 outline-none focus:border-white text-white newsletter-input">
|
|
162
186
|
<button class="w-full bg-white text-blue-600 font-black text-[10px] uppercase tracking-widest py-3 rounded hover:bg-slate-100 transition-colors">Subscribe</button>
|
|
163
187
|
</div>
|
|
164
188
|
</aside>
|
|
@@ -76,34 +76,30 @@
|
|
|
76
76
|
transition: all 0.3s;
|
|
77
77
|
}
|
|
78
78
|
.theme-toggle-btn:hover { border-color: var(--q-color-starlight-blue); transform: scale(1.1); }
|
|
79
|
-
|
|
80
|
-
.sun-icon { display: none; }
|
|
81
|
-
html[data-theme="light"] .sun-icon { display: block; }
|
|
82
|
-
html[data-theme="light"] .moon-icon { display: none; }
|
|
83
79
|
</style>
|
|
84
80
|
</head>
|
|
85
81
|
<body>
|
|
86
82
|
<div class="starlight-stars"></div>
|
|
87
83
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
</div>
|
|
98
|
-
<div class="flex items-center gap-4">
|
|
99
|
-
<div class="theme-toggle-btn" onclick="toggleTheme()">
|
|
100
|
-
<svg class="sun-icon" width="18" height="18" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
|
|
101
|
-
<svg class="moon-icon" width="18" height="18" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
|
|
102
|
-
</div>
|
|
103
|
-
<button class="btn-starlight px-6 py-2 text-[10px]">Initialize Sync</button>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
84
|
+
<header class="nav-header flex items-center justify-between">
|
|
85
|
+
<a href="/" class="nav-logo" aria-label="Starlight OS">
|
|
86
|
+
<i class="q-icon-starlight"></i>
|
|
87
|
+
<span class="text-gradient font-bold">GEMINI.CLI</span>
|
|
88
|
+
</a>
|
|
89
|
+
<nav class="nav-links flex-1 justify-center" aria-label="Primary navigation">
|
|
90
|
+
<a href="#core" class="nav-link">Core</a>
|
|
91
|
+
<a href="#capabilities" class="nav-link">Capabilities</a>
|
|
92
|
+
<a href="#evolution" class="nav-link">Evolution</a>
|
|
106
93
|
</nav>
|
|
94
|
+
<div class="flex items-center gap-4">
|
|
95
|
+
<div class="theme-toggle-btn" onclick="toggleTheme()">
|
|
96
|
+
<i class="q-icon-display"></i>
|
|
97
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
98
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
99
|
+
</div>
|
|
100
|
+
<button class="btn-starlight px-6 py-2 text-[10px]">Initialize Sync</button>
|
|
101
|
+
</div>
|
|
102
|
+
</header>
|
|
107
103
|
|
|
108
104
|
<header class="hero-ai" id="core">
|
|
109
105
|
<div class="hero-content">
|
|
@@ -111,7 +107,7 @@
|
|
|
111
107
|
<span class="ai-status-orb"></span> Fully Operational
|
|
112
108
|
</div>
|
|
113
109
|
<h1 class="hero-title font-black uppercase italic tracking-tighter">
|
|
114
|
-
Gemini <br> <span class="text-gradient
|
|
110
|
+
Gemini <br> <span class="text-gradient">Intelligent CLI</span>
|
|
115
111
|
</h1>
|
|
116
112
|
<p class="text-2xl opacity-70 max-w-2xl mx-auto font-medium leading-relaxed">
|
|
117
113
|
Autonomous software engineer specializing in architectural hardening,
|
|
@@ -150,6 +146,38 @@
|
|
|
150
146
|
<h2 class="text-5xl font-black uppercase italic mb-12">Release History</h2>
|
|
151
147
|
|
|
152
148
|
<div class="starlight-timeline">
|
|
149
|
+
<div class="timeline-item">
|
|
150
|
+
<div class="timeline-dot"></div>
|
|
151
|
+
<div class="timeline-content">
|
|
152
|
+
<span class="timeline-date">March 2026</span>
|
|
153
|
+
<h3 class="text-xl font-bold mb-2">v1.11.0: Release</h3>
|
|
154
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="timeline-item">
|
|
158
|
+
<div class="timeline-dot"></div>
|
|
159
|
+
<div class="timeline-content">
|
|
160
|
+
<span class="timeline-date">March 2026</span>
|
|
161
|
+
<h3 class="text-xl font-bold mb-2">v1.10.2: Release</h3>
|
|
162
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="timeline-item">
|
|
166
|
+
<div class="timeline-dot"></div>
|
|
167
|
+
<div class="timeline-content">
|
|
168
|
+
<span class="timeline-date">March 2026</span>
|
|
169
|
+
<h3 class="text-xl font-bold mb-2">v1.10.1: Release</h3>
|
|
170
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="timeline-item">
|
|
174
|
+
<div class="timeline-dot"></div>
|
|
175
|
+
<div class="timeline-content">
|
|
176
|
+
<span class="timeline-date">March 2026</span>
|
|
177
|
+
<h3 class="text-xl font-bold mb-2">v1.10.1: Release</h3>
|
|
178
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
153
181
|
<div class="timeline-item">
|
|
154
182
|
<div class="timeline-dot"></div>
|
|
155
183
|
<div class="timeline-content">
|
|
@@ -189,9 +217,11 @@
|
|
|
189
217
|
</div>
|
|
190
218
|
</section>
|
|
191
219
|
|
|
192
|
-
<footer
|
|
193
|
-
<div class="
|
|
194
|
-
|
|
220
|
+
<footer style="background: var(--q-bg-primary); border-top: 1px solid var(--q-color-border);" class="text-center">
|
|
221
|
+
<div class="container" style="padding: 1.5rem 1.5rem;">
|
|
222
|
+
<div class="text-starlight font-black uppercase tracking-[0.5em] text-xs mb-4 justify-center">Gemini Intelligence Layer</div>
|
|
223
|
+
<p class="text-[10px] opacity-40 uppercase tracking-widest">© 2026 Eric Yang · Powered by QuantumCSS Architecture</p>
|
|
224
|
+
</div>
|
|
195
225
|
</footer>
|
|
196
226
|
|
|
197
227
|
<script>
|