@howssatoshi/quantumcss 1.7.7 → 1.10.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 +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +12 -20
- package/examples/analytics-dashboard.html +36 -30
- package/examples/blog-template.html +35 -34
- package/examples/chat-messaging.html +35 -56
- package/examples/email-template.html +22 -30
- package/examples/gaming-template.html +161 -30
- package/examples/images/eric.png +0 -0
- package/examples/index.html +102 -129
- package/examples/kitchen-sink.html +59 -23
- package/examples/music-streaming.html +19 -27
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +125 -588
- package/examples/shopping/index.html +514 -341
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +9 -8
- package/examples/theme-test.html +0 -15
- package/examples/travel/index.html +185 -28
- package/examples/video-streaming.html +40 -19
- package/package.json +1 -1
- package/src/defaults.js +77 -1
- package/src/generator.js +14 -5
- package/src/starlight.js +0 -4
- package/src/styles/quantum-base.css +192 -18
- package/src/styles/quantum-components.css +147 -136
- package/src/styles/starlight.css +907 -44
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
gap: 0.75rem;
|
|
60
60
|
padding: 0.875rem 1rem;
|
|
61
61
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(59, 130, 246, 0.15));
|
|
62
|
-
border: 1px solid rgba(0, 212, 255, 0.
|
|
62
|
+
border: 1px solid rgba(0, 212, 255, 0.6);
|
|
63
63
|
border-radius: 0.75rem;
|
|
64
64
|
color: var(--color-starlight, #00d4ff);
|
|
65
65
|
font-size: 0.875rem;
|
|
@@ -635,45 +635,45 @@
|
|
|
635
635
|
}
|
|
636
636
|
|
|
637
637
|
.sun-icon { display: none; }
|
|
638
|
-
|
|
639
|
-
|
|
638
|
+
html[data-theme="light"] .sun-icon { display: inline; }
|
|
639
|
+
html[data-theme="light"] .moon-icon { display: none; }
|
|
640
640
|
|
|
641
641
|
/* Light Mode */
|
|
642
|
-
|
|
642
|
+
html[data-theme="light"] {
|
|
643
643
|
--bg-primary: #f8fafc;
|
|
644
644
|
--text-primary: #0f172a;
|
|
645
645
|
--text-secondary: #475569;
|
|
646
646
|
--text-muted: #64748b;
|
|
647
647
|
}
|
|
648
648
|
|
|
649
|
-
|
|
649
|
+
html[data-theme="light"] .music-sidebar {
|
|
650
650
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
651
651
|
border-right-color: #e2e8f0;
|
|
652
652
|
}
|
|
653
653
|
|
|
654
|
-
|
|
654
|
+
html[data-theme="light"] .player-bar {
|
|
655
655
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
656
656
|
border-top-color: #e2e8f0;
|
|
657
657
|
}
|
|
658
658
|
|
|
659
|
-
|
|
659
|
+
html[data-theme="light"] .track-row:hover {
|
|
660
660
|
background: rgba(0, 0, 0, 0.03);
|
|
661
661
|
}
|
|
662
662
|
|
|
663
|
-
|
|
663
|
+
html[data-theme="light"] .track-row.active {
|
|
664
664
|
background: rgba(0, 212, 255, 0.08);
|
|
665
665
|
}
|
|
666
666
|
|
|
667
|
-
|
|
667
|
+
html[data-theme="light"] .nav-arrow {
|
|
668
668
|
background: rgba(0, 0, 0, 0.1);
|
|
669
669
|
}
|
|
670
670
|
|
|
671
|
-
|
|
671
|
+
html[data-theme="light"] .upgrade-btn {
|
|
672
672
|
border-color: rgba(0, 0, 0, 0.2);
|
|
673
673
|
color: var(--text-primary);
|
|
674
674
|
}
|
|
675
675
|
|
|
676
|
-
|
|
676
|
+
html[data-theme="light"] .control-btn.play {
|
|
677
677
|
background: var(--text-primary);
|
|
678
678
|
color: white;
|
|
679
679
|
}
|
|
@@ -696,7 +696,7 @@
|
|
|
696
696
|
background: rgba(255, 255, 255, 0.2);
|
|
697
697
|
}
|
|
698
698
|
|
|
699
|
-
|
|
699
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb {
|
|
700
700
|
background: #cbd5e1;
|
|
701
701
|
}
|
|
702
702
|
|
|
@@ -1142,29 +1142,29 @@
|
|
|
1142
1142
|
<!-- Player Controls -->
|
|
1143
1143
|
<div class="player-controls">
|
|
1144
1144
|
<div class="control-buttons">
|
|
1145
|
-
<button class="control-btn">
|
|
1145
|
+
<button class="control-btn" title="Shuffle">
|
|
1146
1146
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1147
|
-
<path d="
|
|
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
1148
|
</svg>
|
|
1149
1149
|
</button>
|
|
1150
|
-
<button class="control-btn">
|
|
1150
|
+
<button class="control-btn" title="Previous">
|
|
1151
1151
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1152
1152
|
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
|
|
1153
1153
|
</svg>
|
|
1154
1154
|
</button>
|
|
1155
|
-
<button class="control-btn play">
|
|
1155
|
+
<button class="control-btn play" title="Play/Pause">
|
|
1156
1156
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1157
1157
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|
1158
1158
|
</svg>
|
|
1159
1159
|
</button>
|
|
1160
|
-
<button class="control-btn">
|
|
1160
|
+
<button class="control-btn" title="Next">
|
|
1161
1161
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1162
1162
|
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
1163
1163
|
</svg>
|
|
1164
1164
|
</button>
|
|
1165
|
-
<button class="control-btn">
|
|
1165
|
+
<button class="control-btn" title="Repeat">
|
|
1166
1166
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1167
|
-
<path d="M7
|
|
1167
|
+
<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
|
|
1168
1168
|
</svg>
|
|
1169
1169
|
</button>
|
|
1170
1170
|
</div>
|
|
@@ -1206,15 +1206,7 @@
|
|
|
1206
1206
|
</div>
|
|
1207
1207
|
|
|
1208
1208
|
<script>
|
|
1209
|
-
function toggleTheme() {
|
|
1210
|
-
document.body.classList.toggle('light-mode');
|
|
1211
|
-
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
1212
|
-
}
|
|
1213
1209
|
|
|
1214
|
-
const savedTheme = localStorage.getItem('theme');
|
|
1215
|
-
if (savedTheme === 'light') {
|
|
1216
|
-
document.body.classList.add('light-mode');
|
|
1217
|
-
}
|
|
1218
1210
|
|
|
1219
1211
|
// Track row click handler
|
|
1220
1212
|
document.querySelectorAll('.track-row').forEach(row => {
|
|
@@ -7,10 +7,9 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
8
|
<script src="../src/starlight.js"></script>
|
|
9
9
|
<style>
|
|
10
|
-
/* Base / Dark Mode (Default) */
|
|
11
10
|
body {
|
|
12
|
-
background-color:
|
|
13
|
-
color:
|
|
11
|
+
background-color: var(--q-color-bg);
|
|
12
|
+
color: var(--q-color-text);
|
|
14
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
15
14
|
}
|
|
16
15
|
|
|
@@ -29,6 +28,17 @@
|
|
|
29
28
|
color: white;
|
|
30
29
|
}
|
|
31
30
|
|
|
31
|
+
/* Marquee Animation */
|
|
32
|
+
@keyframes marquee {
|
|
33
|
+
0% { transform: translateX(0); }
|
|
34
|
+
100% { transform: translateX(-50%); }
|
|
35
|
+
}
|
|
36
|
+
.animate-marquee {
|
|
37
|
+
display: flex;
|
|
38
|
+
width: max-content;
|
|
39
|
+
animation: marquee 30s linear infinite;
|
|
40
|
+
}
|
|
41
|
+
|
|
32
42
|
/* Theme Toggle Styling */
|
|
33
43
|
.theme-toggle {
|
|
34
44
|
cursor: pointer;
|
|
@@ -40,278 +50,126 @@
|
|
|
40
50
|
align-items: center;
|
|
41
51
|
justify-content: center;
|
|
42
52
|
flex-shrink: 0;
|
|
43
|
-
color:
|
|
53
|
+
color: var(--q-color-text);
|
|
44
54
|
}
|
|
45
55
|
|
|
46
56
|
.theme-toggle:hover {
|
|
47
|
-
background:
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* Dark Mode Styles (Default Overrides) */
|
|
51
|
-
.bg-white {
|
|
52
|
-
background-color: #020617 !important;
|
|
53
|
-
color: #f1f5f9 !important;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.bg-slate-50 {
|
|
57
|
-
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.bg-slate-900 {
|
|
61
|
-
background-color: #f1f5f9 !important;
|
|
62
|
-
color: #020617 !important;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.border-slate-100 {
|
|
66
|
-
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.text-slate-900,
|
|
70
|
-
.text-slate-500 {
|
|
71
|
-
color: #f1f5f9 !important;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.text-blue-600 {
|
|
75
|
-
color: #60a5fa !important;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
nav {
|
|
79
|
-
background-color: #020617 !important;
|
|
80
|
-
ottom-color: rgba(255, 255, 255, 0.1) !important;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Light Mode Overrides */
|
|
84
|
-
body.light-mode {
|
|
85
|
-
background-color: #ffffff;
|
|
86
|
-
color: #0f172a;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
body.light-mode .bg-white {
|
|
90
|
-
background-color: #ffffff !important;
|
|
91
|
-
color: #0f172a !important;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
body.light-mode .bg-slate-50 {
|
|
95
|
-
background-color: #f8fafc !important;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
body.light-mode .bg-slate-900 {
|
|
99
|
-
background-color: #0f172a !important;
|
|
100
|
-
color: #ffffff !important;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
body.light-mode .border-slate-100 {
|
|
104
|
-
border-color: #f1f5f9 !important;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
body.light-mode .text-slate-900 { color: #0f172a !important; }
|
|
108
|
-
body.light-mode .text-slate-500 { color: #64748b !important; }
|
|
109
|
-
body.light-mode .text-blue-600 { color: #2563eb !important; }
|
|
110
|
-
|
|
111
|
-
body.light-mode nav {
|
|
112
|
-
background-color: #ffffff !important;
|
|
113
|
-
ottom-color: #0f172a !important;
|
|
57
|
+
background: var(--q-highlight-bg);
|
|
114
58
|
}
|
|
115
59
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
body.light-mode .theme-toggle:hover {
|
|
121
|
-
background: rgba(0, 0, 0, 0.05);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/* Component Visibility */
|
|
125
|
-
.text-slate-100 {
|
|
126
|
-
color: rgba(255, 255, 255, 0.2) !important;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
body.light-mode .text-slate-100 {
|
|
130
|
-
color: #cbd5e1 !important;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* Glassy Hover for Icons */
|
|
134
|
-
.hover\:glass-light="hover" {
|
|
135
|
-
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
136
|
-
backdrop-filter: blur(4px);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
body.light-mode .hover\:glass-light="hover" {
|
|
140
|
-
background-color: rgba(0, 0, 0, 0.05) !important;
|
|
141
|
-
backdrop-filter: blur(4px);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
footer a:hover { color: #60a5fa !important; }
|
|
145
|
-
body.light-mode footer a:hover { color: #2563eb !important; }
|
|
60
|
+
.sun-icon { display: none; }
|
|
61
|
+
html[data-theme="light"] .sun-icon { display: inline; }
|
|
62
|
+
html[data-theme="light"] .moon-icon { display: none; }
|
|
146
63
|
</style>
|
|
147
64
|
</head>
|
|
148
|
-
<body class="
|
|
149
|
-
<!-- Top Bar -->
|
|
150
|
-
<div class=" border-slate-100 py-2 bg-slate-50">
|
|
151
|
-
<div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
|
|
152
|
-
<div>Monday, February 2, 2026</div>
|
|
153
|
-
<div class="flex gap-6">
|
|
154
|
-
<a href="#" class="hover="text-slate-900"">Archive</a>
|
|
155
|
-
<a href="#" class="hover="text-slate-900"">Terminal</a>
|
|
156
|
-
<a href="#" class="hover="text-slate-900"">Status: Stable</a>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
65
|
+
<body class="bg-surface">
|
|
161
66
|
<!-- Navigation -->
|
|
162
|
-
<nav class="
|
|
163
|
-
<div class="container mx-auto px-6
|
|
164
|
-
<div class="text-2xl sm:text-4xl font-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<a href="#" class="
|
|
168
|
-
<a href="#" class="
|
|
169
|
-
<a href="#" class="
|
|
170
|
-
<a href="#" class="text-blue-600">
|
|
67
|
+
<nav class="starlight-navbar">
|
|
68
|
+
<div class="container mx-auto px-6 h-20 flex justify-between items-center">
|
|
69
|
+
<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
|
+
|
|
71
|
+
<div class="hidden md:flex flex-1 justify-center gap-12 text-xs font-black uppercase tracking-widest">
|
|
72
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Neural Mesh</a>
|
|
73
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Bio-Tech</a>
|
|
74
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Space-X</a>
|
|
75
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Quantum Compute</a>
|
|
171
76
|
</div>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<svg class="w-6 h-6 sun-icon" 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"></path></svg>
|
|
178
|
-
<svg class="w-6 h-6 moon-icon" 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"></path></svg>
|
|
77
|
+
|
|
78
|
+
<div class="flex items-center gap-6 shrink-0">
|
|
79
|
+
<div id="theme-btn" class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
80
|
+
<svg class="sun-icon w-6 h-6" 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"></path></svg>
|
|
81
|
+
<svg class="moon-icon w-6 h-6" 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"></path></svg>
|
|
179
82
|
</div>
|
|
180
|
-
<button class="
|
|
83
|
+
<button class="btn btn-secondary px-6 py-2 rounded font-bold text-xs uppercase tracking-widest">Login</button>
|
|
181
84
|
</div>
|
|
182
85
|
</div>
|
|
183
86
|
</nav>
|
|
184
87
|
|
|
185
|
-
<!-- Breaking News -->
|
|
186
|
-
<div class="bg-blue-600 text-white py-3 overflow-hidden
|
|
187
|
-
<div class="
|
|
188
|
-
|
|
88
|
+
<!-- Breaking News Ticker -->
|
|
89
|
+
<div class="bg-blue-600 text-white py-3 overflow-hidden">
|
|
90
|
+
<div class="flex animate-marquee uppercase font-black text-xs tracking-widest gap-24 items-center">
|
|
91
|
+
<span class="whitespace-nowrap">First Mars colony reports stable oxygen synthesis</span>
|
|
92
|
+
<span class="whitespace-nowrap">Global Neural-Link rollout scheduled for Q3</span>
|
|
93
|
+
<span class="whitespace-nowrap">Quantum encryption broken by experimental lattice</span>
|
|
94
|
+
<span class="whitespace-nowrap">Voyager 1 signal restored after 50 years</span>
|
|
95
|
+
<!-- Duplicated for seamless loop -->
|
|
96
|
+
<span class="whitespace-nowrap">First Mars colony reports stable oxygen synthesis</span>
|
|
97
|
+
<span class="whitespace-nowrap">Global Neural-Link rollout scheduled for Q3</span>
|
|
98
|
+
<span class="whitespace-nowrap">Quantum encryption broken by experimental lattice</span>
|
|
99
|
+
<span class="whitespace-nowrap">Voyager 1 signal restored after 50 years</span>
|
|
189
100
|
</div>
|
|
190
101
|
</div>
|
|
191
102
|
|
|
192
|
-
|
|
103
|
+
<!-- Main Grid -->
|
|
104
|
+
<main class="max-w-7xl mx-auto px-6 py-12">
|
|
193
105
|
<div class="news-grid">
|
|
194
|
-
|
|
106
|
+
|
|
107
|
+
<!-- Left Column: News Feed -->
|
|
195
108
|
<div class="space-y-12">
|
|
196
109
|
<!-- Featured Article -->
|
|
197
|
-
<
|
|
198
|
-
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum
|
|
110
|
+
<div class="featured-card group cursor-pointer">
|
|
111
|
+
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum Compute">
|
|
199
112
|
<div class="featured-overlay">
|
|
200
113
|
<span class="bg-blue-600 text-white px-3 py-1 text-[10px] font-black uppercase tracking-widest mb-4 inline-block">Exclusive</span>
|
|
201
|
-
<h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter">Inside the First <br>Stable Qubit Lattice</h2>
|
|
202
|
-
<p class="text-
|
|
203
|
-
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-widest">
|
|
204
|
-
<span>By Dr. Aris Thorne</span>
|
|
205
|
-
<span class="text-slate-500">•</span>
|
|
206
|
-
<span>12 Min Read</span>
|
|
207
|
-
</div>
|
|
114
|
+
<h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter uppercase italic">Inside the First <br>Stable Qubit Lattice</h2>
|
|
115
|
+
<p class="text-lg opacity-90 max-w-xl">Deep dive into the breakthrough that ended the quantum decoherence era, paving the way for instantaneous planetary compute.</p>
|
|
208
116
|
</div>
|
|
209
|
-
</
|
|
117
|
+
</div>
|
|
210
118
|
|
|
211
|
-
<!-- Secondary
|
|
119
|
+
<!-- Secondary Grid -->
|
|
212
120
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
213
|
-
<
|
|
214
|
-
<div class="aspect-video bg-slate-
|
|
215
|
-
<img src="https://images.unsplash.com/photo-
|
|
121
|
+
<div class="group cursor-pointer">
|
|
122
|
+
<div class="overflow-hidden rounded-xl mb-6 aspect-video bg-slate-800">
|
|
123
|
+
<img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
216
124
|
</div>
|
|
217
125
|
<span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Space-X</span>
|
|
218
|
-
<h3 class="text-2xl font-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
<div class="aspect-video bg-slate-100 overflow-hidden rounded-lg">
|
|
224
|
-
<img src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
|
|
126
|
+
<h3 class="text-2xl font-bold tracking-tight leading-tight group-hover:underline uppercase mt-2">The Dyson Ring: First Solar Panels Deploy Around the Moon</h3>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="group cursor-pointer">
|
|
129
|
+
<div class="overflow-hidden rounded-xl mb-6 aspect-video bg-slate-800">
|
|
130
|
+
<img src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
225
131
|
</div>
|
|
226
132
|
<span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Bio-Tech</span>
|
|
227
|
-
<h3 class="text-2xl font-
|
|
228
|
-
|
|
229
|
-
</article>
|
|
133
|
+
<h3 class="text-2xl font-bold tracking-tight leading-tight group-hover:underline uppercase mt-2">Synthetic Neurons Successfully Grafted to Human Cortex</h3>
|
|
134
|
+
</div>
|
|
230
135
|
</div>
|
|
231
136
|
</div>
|
|
232
137
|
|
|
233
|
-
<!-- Sidebar -->
|
|
138
|
+
<!-- Right Column: Sidebar -->
|
|
234
139
|
<aside class="space-y-12">
|
|
235
|
-
<div>
|
|
236
|
-
<h4 class="border-b-2 border-
|
|
237
|
-
<div class="space-y-
|
|
238
|
-
<div class="flex gap-
|
|
239
|
-
<span class="text-4xl font-black text-
|
|
240
|
-
<
|
|
241
|
-
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Market Pulse: Quantum Chip Stocks Surge 400%</h5>
|
|
242
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">2 hours ago</p>
|
|
243
|
-
</div>
|
|
140
|
+
<div class="bg-highlight p-8 rounded-2xl border border-white_5">
|
|
141
|
+
<h4 class="border-b-2 border-accent pb-2 text-xs font-black uppercase tracking-widest mb-6">Trending Terminal</h4>
|
|
142
|
+
<div class="space-y-8">
|
|
143
|
+
<div class="flex gap-6 group cursor-pointer">
|
|
144
|
+
<span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">01</span>
|
|
145
|
+
<p class="text-sm font-bold leading-snug">The Ethics of Algorithmic Governance in Neo-Tokyo</p>
|
|
244
146
|
</div>
|
|
245
|
-
<div class="flex gap-
|
|
246
|
-
<span class="text-4xl font-black text-
|
|
247
|
-
<
|
|
248
|
-
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Autonomous Grid: AI Takes Over Power Distribution in EU</h5>
|
|
249
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">5 hours ago</p>
|
|
250
|
-
</div>
|
|
147
|
+
<div class="flex gap-6 group cursor-pointer">
|
|
148
|
+
<span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">02</span>
|
|
149
|
+
<p class="text-sm font-bold leading-snug">Liquid Metal Battery: Storage Problem Solved?</p>
|
|
251
150
|
</div>
|
|
252
|
-
<div class="flex gap-
|
|
253
|
-
<span class="text-4xl font-black text-
|
|
254
|
-
<
|
|
255
|
-
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Ocean Cleanup: Nano-Bots Clear Great Pacific Patch</h5>
|
|
256
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">8 hours ago</p>
|
|
257
|
-
</div>
|
|
151
|
+
<div class="flex gap-6 group cursor-pointer">
|
|
152
|
+
<span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">03</span>
|
|
153
|
+
<p class="text-sm font-bold leading-snug">Interstellar Web: Laser Relay Reaches Alpha Centauri</p>
|
|
258
154
|
</div>
|
|
259
155
|
</div>
|
|
260
156
|
</div>
|
|
261
157
|
|
|
262
|
-
<div class="
|
|
158
|
+
<div class="p-8 rounded-2xl bg-accent text-white">
|
|
263
159
|
<h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
|
|
264
|
-
<p class="text-
|
|
265
|
-
<input type="email" placeholder="terminal@id.io" class="w-full bg-
|
|
266
|
-
<button class="w-full bg-blue-600
|
|
160
|
+
<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-white_10 border border-white_20 p-3 rounded text-sm mb-4 outline-none focus:border-white text-white placeholder:text-white_50">
|
|
162
|
+
<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>
|
|
267
163
|
</div>
|
|
268
164
|
</aside>
|
|
269
165
|
</div>
|
|
270
166
|
</main>
|
|
271
167
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
<
|
|
276
|
-
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6 text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
277
|
-
<p class="text-slate-400 max-w-md text-sm leading-relaxed">Reporting from the edge of tomorrow. We translate complex breakthroughs into human experience.</p>
|
|
278
|
-
</div>
|
|
279
|
-
<div>
|
|
280
|
-
<h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Network</h5>
|
|
281
|
-
<ul class="space-y-3 text-xs font-bold list-none p-0">
|
|
282
|
-
<li><a href="#" class="hover:text-blue-600">Quantum Intelligence</a></li>
|
|
283
|
-
<li><a href="#" class="hover:text-blue-600">Space Terminal</a></li>
|
|
284
|
-
<li><a href="#" class="hover:text-blue-600">Bio Nexus</a></li>
|
|
285
|
-
</ul>
|
|
286
|
-
</div>
|
|
287
|
-
<div>
|
|
288
|
-
<h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Connect</h5>
|
|
289
|
-
<ul class="space-y-3 text-xs font-bold list-none p-0">
|
|
290
|
-
<li><a href="#" class="hover:text-blue-600">Neural Link</a></li>
|
|
291
|
-
<li><a href="#" class="hover:text-blue-600">Secure Comms</a></li>
|
|
292
|
-
<li><a href="#" class="hover:text-blue-600">Terminal Access</a></li>
|
|
293
|
-
</ul>
|
|
294
|
-
</div>
|
|
295
|
-
</div>
|
|
296
|
-
<div class="container mx-auto px-6 pt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
|
|
297
|
-
<p>© 2026 Quantum News Network</p>
|
|
298
|
-
<p>Verification Code: QN-9982-X</p>
|
|
168
|
+
<footer class="border-t border-white_5 py-12 mt-12 bg-surface">
|
|
169
|
+
<div class="max-w-7xl mx-auto px-6 text-center">
|
|
170
|
+
<div class="text-2xl font-black tracking-tighter uppercase italic text-primary mb-4">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
171
|
+
<p class="text-xs text-secondary uppercase tracking-[0.3em]">© 2026 Interstellar News Network. No Rights Reserved.</p>
|
|
299
172
|
</div>
|
|
300
173
|
</footer>
|
|
301
|
-
|
|
302
|
-
<style>
|
|
303
|
-
@keyframes marquee {
|
|
304
|
-
0% { transform: translateX(100%); }
|
|
305
|
-
100% { transform: translateX(-100%); }
|
|
306
|
-
}
|
|
307
|
-
.animate-marquee {
|
|
308
|
-
display: inline-block;
|
|
309
|
-
animation: marquee 30s linear infinite;
|
|
310
|
-
}
|
|
311
|
-
</style>
|
|
312
|
-
<script>
|
|
313
|
-
// Theme initialization and management is now handled
|
|
314
|
-
// automatically by Starlight.initTheme() in starlight.js
|
|
315
|
-
</script>
|
|
316
174
|
</body>
|
|
317
175
|
</html>
|