@howssatoshi/quantumcss 1.4.2 → 1.4.3
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/examples/blog-template.html +282 -0
- package/examples/gaming-template.html +375 -0
- package/examples/images/starlight.jpg +0 -0
- package/examples/index.html +141 -0
- package/examples/kitchen-sink.html +1012 -0
- package/examples/news-template.html +333 -0
- 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 +344 -0
- package/examples/starlight.html +174 -0
- package/examples/travel/index.html +267 -0
- package/examples/verify_fixes.html +51 -0
- package/examples/verify_presets.html +31 -0
- package/package.json +2 -1
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Quantum News | Decoding the Future</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
body { background-color: #020617; color: #f1f5f9; transition: background-color 0.5s ease, color 0.5s ease; }
|
|
10
|
+
body.light-mode { background-color: #ffffff; color: #0f172a; }
|
|
11
|
+
.news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
|
|
12
|
+
@media (min-width: 1024px) {
|
|
13
|
+
.news-grid { grid-template-columns: 3fr 1fr; }
|
|
14
|
+
}
|
|
15
|
+
.featured-card { position: relative; overflow: hidden; border-radius: 1rem; }
|
|
16
|
+
.featured-card img { width: 100%; height: 600px; object-cover: cover; transition: transform 0.5s ease; }
|
|
17
|
+
.featured-card:hover img { transform: scale(1.03); }
|
|
18
|
+
.featured-overlay {
|
|
19
|
+
position: absolute;
|
|
20
|
+
bottom: 0; left: 0; right: 0;
|
|
21
|
+
padding: 3rem;
|
|
22
|
+
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
|
|
23
|
+
color: white;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Theme Toggle Styling */
|
|
27
|
+
.theme-toggle {
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
width: 2.5rem;
|
|
30
|
+
height: 2.5rem;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
transition: background 0.3s ease;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.theme-toggle:hover {
|
|
40
|
+
background: rgba(255, 255, 255, 0.1);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
body.light-mode .theme-toggle:hover {
|
|
44
|
+
background: rgba(0, 0, 0, 0.05);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
nav {
|
|
48
|
+
background-color: #020617 !important;
|
|
49
|
+
border-bottom-color: #f1f5f9 !important;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
body.light-mode nav {
|
|
53
|
+
background-color: #ffffff !important;
|
|
54
|
+
border-bottom-color: #0f172a !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.bg-white {
|
|
58
|
+
background-color: #020617 !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
body.light-mode .bg-white {
|
|
62
|
+
background-color: #ffffff !important;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.bg-slate-50 {
|
|
66
|
+
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
body.light-mode .bg-slate-50 {
|
|
70
|
+
background-color: #f8fafc !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.border-slate-100 {
|
|
74
|
+
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
body.light-mode .border-slate-100 {
|
|
78
|
+
border-color: #f1f5f9 !important;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.text-slate-900,
|
|
82
|
+
.text-slate-500 {
|
|
83
|
+
color: #f1f5f9 !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
body.light-mode .text-slate-900 { color: #0f172a !important; }
|
|
87
|
+
body.light-mode .text-slate-500 { color: #64748b !important; }
|
|
88
|
+
|
|
89
|
+
.bg-slate-900 {
|
|
90
|
+
background-color: #f1f5f9 !important;
|
|
91
|
+
color: #020617 !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body.light-mode .bg-slate-900 {
|
|
95
|
+
background-color: #0f172a !important;
|
|
96
|
+
color: #ffffff !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Trending Terminal Number Visibility */
|
|
100
|
+
.text-slate-100 {
|
|
101
|
+
color: rgba(255, 255, 255, 0.2) !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
body.light-mode .text-slate-100 {
|
|
105
|
+
color: #cbd5e1 !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.hover\:text-slate-900:hover {
|
|
109
|
+
color: #f1f5f9 !important;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
body.light-mode .hover\:text-slate-900:hover {
|
|
113
|
+
color: #0f172a !important;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.group:hover .group-hover\:text-blue-100 {
|
|
117
|
+
color: #93c5fd !important;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
body.light-mode .group:hover .group-hover\:text-blue-100 {
|
|
121
|
+
color: #3b82f6 !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Glassy Hover for Icons */
|
|
125
|
+
.hover\:glass-light:hover {
|
|
126
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
127
|
+
backdrop-filter: blur(4px);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
body.light-mode .hover\:glass-light:hover {
|
|
131
|
+
background-color: rgba(0, 0, 0, 0.05) !important;
|
|
132
|
+
backdrop-filter: blur(4px);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Footer Link Visibility */
|
|
136
|
+
footer a:hover {
|
|
137
|
+
color: #93c5fd !important;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
body.light-mode footer a:hover {
|
|
141
|
+
color: #ea580c !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.moon-icon { display: block; }
|
|
145
|
+
body.light-mode .moon-icon { display: none; }
|
|
146
|
+
body.light-mode .sun-icon { display: block; }
|
|
147
|
+
.sun-icon { display: none; }
|
|
148
|
+
</style>
|
|
149
|
+
</head>
|
|
150
|
+
<body class="font-sans antialiased light-mode">
|
|
151
|
+
<!-- Top Bar -->
|
|
152
|
+
<div class="border-b border-slate-100 py-2 bg-slate-50">
|
|
153
|
+
<div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
|
|
154
|
+
<div>Monday, February 2, 2026</div>
|
|
155
|
+
<div class="flex gap-6">
|
|
156
|
+
<a href="#" class="hover:text-slate-900">Archive</a>
|
|
157
|
+
<a href="#" class="hover:text-slate-900">Terminal</a>
|
|
158
|
+
<a href="#" class="hover:text-slate-900">Status: Stable</a>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<!-- Navigation -->
|
|
164
|
+
<nav class="border-b border-slate-900 border-b-4 sticky top-0 bg-white z-50">
|
|
165
|
+
<div class="container mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
166
|
+
<div class="text-4xl font-black tracking-tighter uppercase italic">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
167
|
+
<div class="flex flex-wrap justify-center gap-8 text-xs font-black uppercase tracking-widest">
|
|
168
|
+
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Quantum Computing</a>
|
|
169
|
+
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Neural Nets</a>
|
|
170
|
+
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Bio-Tech</a>
|
|
171
|
+
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Space-X</a>
|
|
172
|
+
<a href="#" class="text-blue-600">Live Updates</a>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="flex items-center gap-4">
|
|
175
|
+
<button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors">
|
|
176
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
177
|
+
</button>
|
|
178
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
179
|
+
<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>
|
|
180
|
+
<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>
|
|
181
|
+
</div>
|
|
182
|
+
<button class="bg-slate-900 text-white px-6 py-2 rounded font-bold text-xs uppercase tracking-widest">Login</button>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</nav>
|
|
186
|
+
|
|
187
|
+
<!-- Breaking News -->
|
|
188
|
+
<div class="bg-blue-600 text-white py-3 overflow-hidden whitespace-nowrap">
|
|
189
|
+
<div class="inline-block animate-marquee uppercase font-black text-xs tracking-widest">
|
|
190
|
+
BREAKING: FIRST QUANTUM RECTIFIER DEPLOYED IN MARS COLONY • NEURAL LINK 5.0 BETA BEGINS NEXT WEEK • TOKAMAK REACTOR REACHES NET GAIN STABILITY FOR 48 HOURS •
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<main class="container mx-auto px-6 py-12">
|
|
195
|
+
<div class="news-grid">
|
|
196
|
+
<!-- Main Content -->
|
|
197
|
+
<div class="space-y-12">
|
|
198
|
+
<!-- Featured Article -->
|
|
199
|
+
<section class="featured-card group cursor-pointer">
|
|
200
|
+
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum Core">
|
|
201
|
+
<div class="featured-overlay">
|
|
202
|
+
<span class="bg-blue-600 text-white px-3 py-1 text-[10px] font-black uppercase tracking-widest mb-4 inline-block">Exclusive</span>
|
|
203
|
+
<h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter">Inside the First <br>Stable Qubit Lattice</h2>
|
|
204
|
+
<p class="text-slate-300 text-lg max-w-2xl mb-6 font-medium">Scientists have achieved a 99.99% coherence rate, effectively ending the era of digital computing as we know it.</p>
|
|
205
|
+
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-widest">
|
|
206
|
+
<span>By Dr. Aris Thorne</span>
|
|
207
|
+
<span class="text-slate-500">•</span>
|
|
208
|
+
<span>12 Min Read</span>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</section>
|
|
212
|
+
|
|
213
|
+
<!-- Secondary News -->
|
|
214
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
215
|
+
<article class="space-y-4 group cursor-pointer">
|
|
216
|
+
<div class="aspect-video bg-slate-100 overflow-hidden rounded-lg">
|
|
217
|
+
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
|
|
218
|
+
</div>
|
|
219
|
+
<span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Space-X</span>
|
|
220
|
+
<h3 class="text-2xl font-black tracking-tight leading-tight group-hover:underline">The Dyson Ring: First Solar Panels Deploy Around the Moon</h3>
|
|
221
|
+
<p class="text-slate-500 text-sm leading-relaxed">A massive infrastructure project aims to beam 500 terawatts of clean energy directly to Earth's grid.</p>
|
|
222
|
+
</article>
|
|
223
|
+
|
|
224
|
+
<article class="space-y-4 group cursor-pointer">
|
|
225
|
+
<div class="aspect-video bg-slate-100 overflow-hidden rounded-lg">
|
|
226
|
+
<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">
|
|
227
|
+
</div>
|
|
228
|
+
<span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Bio-Tech</span>
|
|
229
|
+
<h3 class="text-2xl font-black tracking-tight leading-tight group-hover:underline">Synthetic Neurons Successfully Grafted to Human Cortex</h3>
|
|
230
|
+
<p class="text-slate-500 text-sm leading-relaxed">The breakthrough could lead to a permanent cure for degenerative neural conditions by 2030.</p>
|
|
231
|
+
</article>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<!-- Sidebar -->
|
|
236
|
+
<aside class="space-y-12">
|
|
237
|
+
<div>
|
|
238
|
+
<h4 class="border-b-2 border-slate-900 pb-2 text-xs font-black uppercase tracking-widest mb-6">Trending Terminal</h4>
|
|
239
|
+
<div class="space-y-6">
|
|
240
|
+
<div class="flex gap-4 items-start group cursor-pointer">
|
|
241
|
+
<span class="text-4xl font-black text-slate-100 group-hover:text-blue-100 transition-colors">01</span>
|
|
242
|
+
<div>
|
|
243
|
+
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Market Pulse: Quantum Chip Stocks Surge 400%</h5>
|
|
244
|
+
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">2 hours ago</p>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="flex gap-4 items-start group cursor-pointer">
|
|
248
|
+
<span class="text-4xl font-black text-slate-100 group-hover:text-blue-100 transition-colors">02</span>
|
|
249
|
+
<div>
|
|
250
|
+
<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>
|
|
251
|
+
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">5 hours ago</p>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="flex gap-4 items-start group cursor-pointer">
|
|
255
|
+
<span class="text-4xl font-black text-slate-100 group-hover:text-blue-100 transition-colors">03</span>
|
|
256
|
+
<div>
|
|
257
|
+
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Ocean Cleanup: Nano-Bots Clear Great Pacific Patch</h5>
|
|
258
|
+
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">8 hours ago</p>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<div class="bg-slate-50 p-6 rounded-xl border border-slate-100">
|
|
265
|
+
<h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
|
|
266
|
+
<p class="text-xs text-slate-500 mb-6">Join 2.4M subscribers for daily quantum insights.</p>
|
|
267
|
+
<input type="email" placeholder="terminal@id.io" class="w-full bg-white border border-slate-200 p-3 rounded text-sm mb-4 outline-none focus:border-blue-600">
|
|
268
|
+
<button class="w-full bg-blue-600 text-white font-black text-[10px] uppercase tracking-widest py-3 rounded hover:bg-blue-700 transition-colors">Subscribe</button>
|
|
269
|
+
</div>
|
|
270
|
+
</aside>
|
|
271
|
+
</div>
|
|
272
|
+
</main>
|
|
273
|
+
|
|
274
|
+
<!-- Footer -->
|
|
275
|
+
<footer class="bg-slate-900 text-white py-20 mt-24">
|
|
276
|
+
<div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-slate-800 pb-16">
|
|
277
|
+
<div class="col-span-1 md:col-span-2">
|
|
278
|
+
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
279
|
+
<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>
|
|
280
|
+
</div>
|
|
281
|
+
<div>
|
|
282
|
+
<h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Network</h5>
|
|
283
|
+
<ul class="space-y-3 text-xs font-bold list-none p-0">
|
|
284
|
+
<li><a href="#" class="hover:text-blue-600">Quantum Intelligence</a></li>
|
|
285
|
+
<li><a href="#" class="hover:text-blue-600">Space Terminal</a></li>
|
|
286
|
+
<li><a href="#" class="hover:text-blue-600">Bio Nexus</a></li>
|
|
287
|
+
</ul>
|
|
288
|
+
</div>
|
|
289
|
+
<div>
|
|
290
|
+
<h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Connect</h5>
|
|
291
|
+
<ul class="space-y-3 text-xs font-bold list-none p-0">
|
|
292
|
+
<li><a href="#" class="hover:text-blue-600">Neural Link</a></li>
|
|
293
|
+
<li><a href="#" class="hover:text-blue-600">Secure Comms</a></li>
|
|
294
|
+
<li><a href="#" class="hover:text-blue-600">Terminal Access</a></li>
|
|
295
|
+
</ul>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="container mx-auto px-6 pt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
|
|
299
|
+
<p>© 2026 Quantum News Network</p>
|
|
300
|
+
<p>Verification Code: QN-9982-X</p>
|
|
301
|
+
</div>
|
|
302
|
+
</footer>
|
|
303
|
+
|
|
304
|
+
<style>
|
|
305
|
+
@keyframes marquee {
|
|
306
|
+
0% { transform: translateX(100%); }
|
|
307
|
+
100% { transform: translateX(-100%); }
|
|
308
|
+
}
|
|
309
|
+
.animate-marquee {
|
|
310
|
+
display: inline-block;
|
|
311
|
+
animation: marquee 30s linear infinite;
|
|
312
|
+
}
|
|
313
|
+
</style>
|
|
314
|
+
<script>
|
|
315
|
+
// Theme Toggle Logic
|
|
316
|
+
const themeBtn = document.getElementById('theme-btn');
|
|
317
|
+
if (themeBtn) {
|
|
318
|
+
themeBtn.addEventListener('click', () => {
|
|
319
|
+
document.body.classList.toggle('light-mode');
|
|
320
|
+
const isLight = document.body.classList.contains('light-mode');
|
|
321
|
+
|
|
322
|
+
// Update all icons
|
|
323
|
+
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
324
|
+
icon.style.display = isLight ? 'block' : 'none';
|
|
325
|
+
});
|
|
326
|
+
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
327
|
+
icon.style.display = isLight ? 'none' : 'block';
|
|
328
|
+
});
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
</script>
|
|
332
|
+
</body>
|
|
333
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|