@howssatoshi/quantumcss 1.8.0 → 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 +10 -1
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +136 -299
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +43 -70
- 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/images/eric.png +0 -0
- package/examples/index.html +342 -259
- package/examples/kitchen-sink.html +332 -94
- package/examples/music-streaming.html +32 -91
- package/examples/news.html +199 -0
- package/examples/nova-shop.css +984 -0
- package/examples/portfolio.html +235 -0
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +11 -9
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +310 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +19 -16
- package/src/generator.js +12 -3
- package/src/starlight.js +20 -15
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +110 -58
- package/src/styles/quantum-components.css +2379 -349
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2702 -1054
- package/dist/index.html +0 -232
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -287
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -340
- package/examples/gradient-test.html +0 -124
- package/examples/news-template.html +0 -317
- package/examples/portfolio-resume.html +0 -647
- 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 -338
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -275
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
|
@@ -1,338 +0,0 @@
|
|
|
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 Store | Future of Fashion</title>
|
|
7
|
-
<link rel="stylesheet" href="../../dist/quantum.min.css">
|
|
8
|
-
<script src="../../src/starlight.js"></script>
|
|
9
|
-
<style>
|
|
10
|
-
body { background-color: #f8fafc; color: #0f172a; transition: background-color 0.5s ease, color 0.5s ease; }
|
|
11
|
-
html[data-theme="dark"] { background-color: #020617; color: #f1f5f9; }
|
|
12
|
-
.product-card:hover .product-image { transform: scale(1.05); }
|
|
13
|
-
.product-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
14
|
-
|
|
15
|
-
/* Twinkle Hover Effect */
|
|
16
|
-
a:hover, .product-card:hover, .color-swatch:hover {
|
|
17
|
-
animation: star-twinkle 1s infinite ease-in-out;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@keyframes star-twinkle {
|
|
21
|
-
0%, 100% { opacity: 0.8; transform: scale(1); }
|
|
22
|
-
50% { opacity: 1; transform: scale(1.02); }
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.color-swatch.selected {
|
|
26
|
-
box-shadow: 0 0 0 4px #00d4ff, 0 0 20px rgba(0, 212, 255, 0.6);
|
|
27
|
-
border-color: #00d4ff !important;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* Theme Toggle Styling */
|
|
31
|
-
.theme-toggle {
|
|
32
|
-
cursor: pointer;
|
|
33
|
-
width: 2.5rem;
|
|
34
|
-
height: 2.5rem;
|
|
35
|
-
border-radius: 50%;
|
|
36
|
-
transition: background 0.3s ease;
|
|
37
|
-
display: flex;
|
|
38
|
-
align-items: center;
|
|
39
|
-
justify-content: center;
|
|
40
|
-
flex-shrink: 0;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.theme-toggle:hover {
|
|
44
|
-
background: rgba(0, 0, 0, 0.05);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
html[data-theme="dark"] .theme-toggle:hover {
|
|
48
|
-
background: rgba(255, 255, 255, 0.1);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
html[data-theme="dark"] .bg-white {
|
|
52
|
-
background-color: #0f172a !important;
|
|
53
|
-
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
54
|
-
color: #f1f5f9 !important;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
html[data-theme="dark"] .bg-white\_80 {
|
|
58
|
-
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
html[data-theme="dark"] .glass {
|
|
62
|
-
background-color: rgba(255, 255, 255, 0.08) !important;
|
|
63
|
-
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
html[data-theme="dark"] .bg-slate-100 {
|
|
67
|
-
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
html[data-theme="dark"] .border-slate-100 {
|
|
71
|
-
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
html[data-theme="dark"] nav {
|
|
75
|
-
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
76
|
-
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
html[data-theme="light"] footer {
|
|
80
|
-
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
81
|
-
backdrop-filter: blur(20px);
|
|
82
|
-
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
83
|
-
color: #1e293b !important;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
html[data-theme="light"] footer h5 {
|
|
87
|
-
color: #64748b !important;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
html[data-theme="light"] footer a {
|
|
91
|
-
color: #475569 !important;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
html[data-theme="light"] footer a:hover {
|
|
95
|
-
color: #ea580c !important;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
html[data-theme="light"] footer .text-orange-600 {
|
|
99
|
-
color: #ea580c !important;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
html[data-theme="light"] footer .bg-slate-950 {
|
|
103
|
-
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
html[data-theme="dark"] .text-slate-500 {
|
|
107
|
-
color: #f1f5f9 !important;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
html[data-theme="light"] .text-slate-500 {
|
|
111
|
-
color: #0f172a !important;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
html[data-theme="dark"] .text-slate-900 {
|
|
115
|
-
color: #ffffff !important;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
html[data-theme="dark"] .text-slate-600 {
|
|
119
|
-
color: #cbd5e1 !important;
|
|
120
|
-
}
|
|
121
|
-
</style>
|
|
122
|
-
</head>
|
|
123
|
-
<body class="">
|
|
124
|
-
<!-- Announcement Bar -->
|
|
125
|
-
<div class="bg-slate-900 text-white py-3 text-center text-[10px] font-black tracking-[0.3em] uppercase">
|
|
126
|
-
Interstellar Shipping Enabled • New Drops Every Sunday
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
<!-- Navigation -->
|
|
130
|
-
<nav class="bg-white_80 backdrop-blur-md sticky top-0 z-50">
|
|
131
|
-
<div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
|
|
132
|
-
<div class="text-2xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
133
|
-
<div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
134
|
-
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Men</a>
|
|
135
|
-
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Women</a>
|
|
136
|
-
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Cybernetics</a>
|
|
137
|
-
<a href="#" class="text-orange-600 font-bold">Limited</a>
|
|
138
|
-
</div>
|
|
139
|
-
<div class="flex items-center space-x-6">
|
|
140
|
-
<div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
|
|
141
|
-
<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>
|
|
142
|
-
<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>
|
|
143
|
-
</div>
|
|
144
|
-
<div class="relative group">
|
|
145
|
-
<a href="#" class="text-primary w-10 h-10 flex items-center justify-center bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
|
|
146
|
-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
|
147
|
-
<span class="absolute -top-1 -right-1 bg-orange-600 text-white text-[9px] w-5 h-5 rounded-full flex items-center justify-center font-black shadow-lg border-2 border-white">3</span>
|
|
148
|
-
</a>
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</nav>
|
|
153
|
-
|
|
154
|
-
<!-- Header Section -->
|
|
155
|
-
<header class="bg-white">
|
|
156
|
-
<div class="max-w-[1440px] mx-auto px-8 py-12">
|
|
157
|
-
<div class="flex flex-col md:flex-row justify-between items-end gap-12">
|
|
158
|
-
<div class="max-w-2xl">
|
|
159
|
-
<span class="text-orange-600 font-bold uppercase text-xs tracking-widest mb-4 block">Season 2026</span>
|
|
160
|
-
<h1 class="text-6xl font-black mb-4 uppercase italic tracking-tighter leading-none">Cyber-Wear</h1>
|
|
161
|
-
<p class="text-slate-500 text-xl font-medium leading-relaxed">Synthetics, LED-integration, and reactive fibers for the next digital era.</p>
|
|
162
|
-
</div>
|
|
163
|
-
<div class="flex items-center space-x-6">
|
|
164
|
-
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Sort by</span>
|
|
165
|
-
<select class="input-starlight h-14 min-w-56 text-slate-900 border-none">
|
|
166
|
-
<option>Newest Arrivals</option>
|
|
167
|
-
<option>Price: Low to High</option>
|
|
168
|
-
<option>Price: High to Low</option>
|
|
169
|
-
</select>
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
|
-
</header>
|
|
174
|
-
|
|
175
|
-
<!-- Main Content -->
|
|
176
|
-
<main class="max-w-[1440px] mx-auto px-8 py-16">
|
|
177
|
-
<div class="flex flex-col lg:flex-row gap-16 items-start">
|
|
178
|
-
<!-- Sidebar -->
|
|
179
|
-
<aside class="w-full lg:w-64 flex-shrink-0 space-y-12">
|
|
180
|
-
<div>
|
|
181
|
-
<h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Categories</h4>
|
|
182
|
-
<div class="space-y-4">
|
|
183
|
-
<label class="flex items-center space-x-4 cursor-pointer group">
|
|
184
|
-
<input type="checkbox" class="checkbox-starlight" checked>
|
|
185
|
-
<span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Heavy Jackets</span>
|
|
186
|
-
</label>
|
|
187
|
-
<label class="flex items-center space-x-4 cursor-pointer group">
|
|
188
|
-
<input type="checkbox" class="checkbox-starlight">
|
|
189
|
-
<span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Tech Footwear</span>
|
|
190
|
-
</label>
|
|
191
|
-
<label class="flex items-center space-x-4 cursor-pointer group">
|
|
192
|
-
<input type="checkbox" class="checkbox-starlight">
|
|
193
|
-
<span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Cyber-Accessories</span>
|
|
194
|
-
</label>
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<div>
|
|
199
|
-
<h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Color Way</h4>
|
|
200
|
-
<div class="flex flex-wrap gap-4" id="color-swatches">
|
|
201
|
-
<button class="w-10 h-10 rounded-full border-2 border-slate-900 color-swatch selected transition-transform" style="background-color: #0f172a;"></button>
|
|
202
|
-
<button class="w-10 h-10 rounded-full border-2 border-none color-swatch transition-transform" style="background-color: #ffffff;"></button>
|
|
203
|
-
<button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #ea580c;"></button>
|
|
204
|
-
<button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #2563eb;"></button>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
</aside>
|
|
208
|
-
|
|
209
|
-
<!-- Product Grid -->
|
|
210
|
-
<div class="flex-1 min-w-0">
|
|
211
|
-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16">
|
|
212
|
-
<!-- Product 1 -->
|
|
213
|
-
<div class="product-card group cursor-pointer block">
|
|
214
|
-
<div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl ">
|
|
215
|
-
<img src="images/windbreaker.jpg" alt="Neon Pulse" class="product-image w-full h-full object-cover">
|
|
216
|
-
<div class="absolute top-4 left-4 flex flex-col space-y-2">
|
|
217
|
-
<span class="badge badge-primary bg-orange-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">New Season</span>
|
|
218
|
-
</div>
|
|
219
|
-
<div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
|
|
220
|
-
<button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
|
|
221
|
-
</div>
|
|
222
|
-
</div>
|
|
223
|
-
<div class="flex justify-between items-start px-1">
|
|
224
|
-
<div>
|
|
225
|
-
<h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Neon Pulse Windbreaker</h3>
|
|
226
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Reflective Fiber</p>
|
|
227
|
-
</div>
|
|
228
|
-
<span class="font-black text-base text-slate-900">299S</span>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
231
|
-
|
|
232
|
-
<!-- Product 2 -->
|
|
233
|
-
<div class="product-card group cursor-pointer block">
|
|
234
|
-
<div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl ">
|
|
235
|
-
<img src="images/sneakers.jpg" alt="Gravity-Lock" class="product-image w-full h-full object-cover">
|
|
236
|
-
<div class="absolute top-4 left-4">
|
|
237
|
-
<span class="badge badge-secondary bg-slate-900_80 text-white border-none px-3 py-1 text-[9px] backdrop-blur-md font-black tracking-widest">Best Seller</span>
|
|
238
|
-
</div>
|
|
239
|
-
<div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
|
|
240
|
-
<button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
<div class="flex justify-between items-start px-1">
|
|
244
|
-
<div>
|
|
245
|
-
<h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Gravity-Lock Sneakers</h3>
|
|
246
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Mag-Closure v4</p>
|
|
247
|
-
</div>
|
|
248
|
-
<span class="font-black text-base text-slate-900">540S</span>
|
|
249
|
-
</div>
|
|
250
|
-
</div>
|
|
251
|
-
|
|
252
|
-
<!-- Product 3 -->
|
|
253
|
-
<div class="product-card group cursor-pointer block">
|
|
254
|
-
<div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl ">
|
|
255
|
-
<img src="images/headset.jpg" alt="Neural Link" class="product-image w-full h-full object-cover">
|
|
256
|
-
<div class="absolute top-4 left-4">
|
|
257
|
-
<span class="badge badge-secondary bg-blue-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">Pre-Order</span>
|
|
258
|
-
</div>
|
|
259
|
-
<div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
|
|
260
|
-
<button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
|
|
261
|
-
</div>
|
|
262
|
-
</div>
|
|
263
|
-
<div class="flex justify-between items-start px-1">
|
|
264
|
-
<div>
|
|
265
|
-
<h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Neural Link Headset v2</h3>
|
|
266
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Neural-Fiber Mesh</p>
|
|
267
|
-
</div>
|
|
268
|
-
<span class="font-black text-base text-slate-900">1,200S</span>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
|
|
273
|
-
<!-- Pagination -->
|
|
274
|
-
<div class="mt-20 flex flex-wrap justify-center items-center gap-4 space-x-0 md:space-x-6 w-full pt-16">
|
|
275
|
-
<button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-none">1</button>
|
|
276
|
-
<button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">2</button>
|
|
277
|
-
<button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">3</button>
|
|
278
|
-
<div class="px-4 text-slate-200 font-black text-lg">/</div>
|
|
279
|
-
<button class="glass px-10 h-12 text-[10px] font-black uppercase tracking-widest shadow-sm opacity-80 hover:opacity-100">Next Cluster</button>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
</main>
|
|
284
|
-
|
|
285
|
-
<!-- Footer -->
|
|
286
|
-
<footer class="bg-slate-950 text-white py-12 mt-32 relative">
|
|
287
|
-
<div class="max-w-[1440px] mx-auto px-8">
|
|
288
|
-
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
289
|
-
<div class="lg:col-span-4 space-y-8">
|
|
290
|
-
<div class="text-4xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
291
|
-
<p class="text-slate-400 text-sm font-medium leading-loose max-w-sm">Redefining human aesthetics for the digital era through synthetic fiber and light integration.</p>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="lg:col-span-2">
|
|
294
|
-
<h5 class="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-slate-600">Inventory</h5>
|
|
295
|
-
<ul class="space-y-4 text-sm font-bold list-none p-0">
|
|
296
|
-
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Drops</a></li>
|
|
297
|
-
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Wanted</a></li>
|
|
298
|
-
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Tech</a></li>
|
|
299
|
-
</ul>
|
|
300
|
-
</div>
|
|
301
|
-
<div class="lg:col-span-2">
|
|
302
|
-
<h5 class="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-slate-600">Support</h5>
|
|
303
|
-
<ul class="space-y-4 text-sm font-bold list-none p-0">
|
|
304
|
-
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Logistics</a></li>
|
|
305
|
-
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Returns</a></li>
|
|
306
|
-
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Sizing</a></li>
|
|
307
|
-
</ul>
|
|
308
|
-
</div>
|
|
309
|
-
<div class="lg:col-span-4 space-y-8">
|
|
310
|
-
<h5 class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-600">Neural Connect</h5>
|
|
311
|
-
<div class="flex flex-col space-y-4">
|
|
312
|
-
<input type="email" class="input-starlight h-12 w-full bg-slate-900 border-none text-white placeholder:text-slate-600" placeholder="id@nexus.io">
|
|
313
|
-
<button class="btn-starlight w-full h-12 text-[10px] font-black uppercase tracking-widest shadow-2xl shadow-orange-600_20">Sync Comms Link</button>
|
|
314
|
-
</div>
|
|
315
|
-
</div>
|
|
316
|
-
</div>
|
|
317
|
-
<div class="mt-20 pt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
|
|
318
|
-
<p>© 2026 Quantum Store</p>
|
|
319
|
-
<p class="italic tracking-normal">Encrypted Connection Verified</p>
|
|
320
|
-
</div>
|
|
321
|
-
</div>
|
|
322
|
-
</footer>
|
|
323
|
-
|
|
324
|
-
<script>
|
|
325
|
-
// Color Swatch Selection
|
|
326
|
-
const swatches = document.querySelectorAll('.color-swatch');
|
|
327
|
-
swatches.forEach(swatch => {
|
|
328
|
-
swatch.addEventListener('click', () => {
|
|
329
|
-
swatches.forEach(s => s.classList.remove('selected'));
|
|
330
|
-
swatch.classList.add('selected');
|
|
331
|
-
});
|
|
332
|
-
});
|
|
333
|
-
|
|
334
|
-
// Theme initialization and management is now handled
|
|
335
|
-
// automatically by Starlight.initTheme() in starlight.js
|
|
336
|
-
</script>
|
|
337
|
-
</body>
|
|
338
|
-
</html>
|
package/examples/theme-test.html
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
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>Theme Auto-Detection Test</title>
|
|
7
|
-
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
-
<script src="../src/starlight.js"></script>
|
|
9
|
-
<style>
|
|
10
|
-
body { min-height: 100vh; }
|
|
11
|
-
.demo-section {
|
|
12
|
-
margin: 2rem auto;
|
|
13
|
-
max-width: 600px;
|
|
14
|
-
padding: 2rem;
|
|
15
|
-
}
|
|
16
|
-
.theme-controls {
|
|
17
|
-
display: flex;
|
|
18
|
-
gap: 1rem;
|
|
19
|
-
margin-bottom: 2rem;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
}
|
|
22
|
-
.status-message {
|
|
23
|
-
background: var(--glass-bg);
|
|
24
|
-
border: 1px solid var(--glass-border);
|
|
25
|
-
border-radius: var(--radius-lg);
|
|
26
|
-
padding: 1rem;
|
|
27
|
-
margin-top: 1rem;
|
|
28
|
-
font-family: monospace;
|
|
29
|
-
font-size: 0.875rem;
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
<div class="starlight-stars" id="stars"></div>
|
|
35
|
-
|
|
36
|
-
<div class="demo-section starlight-card">
|
|
37
|
-
<h1>🎨 Theme Auto-Detection Test</h1>
|
|
38
|
-
|
|
39
|
-
<div class="theme-controls">
|
|
40
|
-
<button class="btn-starlight" onclick="setTheme('light')">☀️ Light</button>
|
|
41
|
-
<button class="btn-secondary" onclick="setTheme('dark')">🌙 Dark</button>
|
|
42
|
-
<button class="btn-outline" onclick="setTheme('auto')">🖥️ Follow System</button>
|
|
43
|
-
<button class="btn-ghost" onclick="toggleTheme()">🔄 Cycle</button>
|
|
44
|
-
<button class="btn-success" onclick="resetToAuto()">🔄 Reset to Auto</button>
|
|
45
|
-
<button class="btn-warning" onclick="forceRefresh()">🔃 Force Refresh</button>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<div class="status-message" id="status">
|
|
49
|
-
Loading theme information...
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
<h3>Instructions:</h3>
|
|
53
|
-
<ol>
|
|
54
|
-
<li>Click "Follow System" to enable automatic theme switching</li>
|
|
55
|
-
<li>Change your OS theme (macOS: System Settings → Appearance, Windows: Settings → Personalization → Colors)</li>
|
|
56
|
-
<li>The webpage should automatically switch to match your OS</li>
|
|
57
|
-
<li>Try "Cycle" to rotate through all available themes</li>
|
|
58
|
-
</ol>
|
|
59
|
-
|
|
60
|
-
<h3>Current State:</h3>
|
|
61
|
-
<div id="current-state"></div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<script>
|
|
65
|
-
// Monitor theme changes
|
|
66
|
-
function updateStatus() {
|
|
67
|
-
const html = document.documentElement;
|
|
68
|
-
const currentTheme = html.getAttribute('data-theme');
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
statusEl.innerHTML = `
|
|
72
|
-
<strong>Current Theme:</strong> ${currentTheme || 'null'}<br>
|
|
73
|
-
<strong>Saved Preference:</strong> ${savedTheme || 'none'}<br>
|
|
74
|
-
<strong>Effective Theme:</strong> ${effectiveTheme || currentTheme || 'null'}<br>
|
|
75
|
-
<strong>System Prefers:</strong> ${systemPrefers ? 'light' : 'dark'}
|
|
76
|
-
`;
|
|
77
|
-
|
|
78
|
-
stateEl.innerHTML = `
|
|
79
|
-
<div class="starlight-card" style="padding: 1rem; margin-top: 1rem;">
|
|
80
|
-
<h4>🎯 Theme Configuration:</h4>
|
|
81
|
-
<p><strong>html[data-theme]:</strong> ${currentTheme}</p>
|
|
82
|
-
<p><strong>localStorage theme:</strong> ${savedTheme || 'null'}</p>
|
|
83
|
-
<p><strong>localStorage theme-effective:</strong> ${effectiveTheme || 'null'}</p>
|
|
84
|
-
<p><strong>System prefers-color-scheme:</strong> ${systemPrefers ? 'light' : 'dark'}</p>
|
|
85
|
-
|
|
86
|
-
<h5>💡 How this works:</h5>
|
|
87
|
-
<ul>
|
|
88
|
-
<li>If theme is "auto", the system preference is followed</li>
|
|
89
|
-
<li>System theme changes are automatically detected</li>
|
|
90
|
-
<li>Your manual choice is saved and restored</li>
|
|
91
|
-
</ul>
|
|
92
|
-
</div>
|
|
93
|
-
`;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// Listen for theme changes
|
|
97
|
-
window.addEventListener('themechange', (e) => {
|
|
98
|
-
console.log('Theme changed:', e.detail);
|
|
99
|
-
updateStatus();
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
// Listen for system theme changes
|
|
103
|
-
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
|
|
104
|
-
console.log('System theme changed to:', e.matches ? 'light' : 'dark');
|
|
105
|
-
updateStatus();
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
// Initial update - wait for first themechange event or timeout
|
|
109
|
-
let themeInitialized = false;
|
|
110
|
-
const firstThemeChange = (e) => {
|
|
111
|
-
if (!themeInitialized) {
|
|
112
|
-
themeInitialized = true;
|
|
113
|
-
window.removeEventListener('themechange', firstThemeChange);
|
|
114
|
-
updateStatus();
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
window.addEventListener('themechange', firstThemeChange);
|
|
119
|
-
|
|
120
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
121
|
-
// Wait for Starlight to initialize, then check status
|
|
122
|
-
setTimeout(() => {
|
|
123
|
-
if (!themeInitialized) {
|
|
124
|
-
// If no themechange event fired yet, check current state
|
|
125
|
-
themeInitialized = true;
|
|
126
|
-
window.removeEventListener('themechange', firstThemeChange);
|
|
127
|
-
updateStatus();
|
|
128
|
-
}
|
|
129
|
-
}, 500); // Longer delay to ensure Starlight initialization
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
// Reset to auto function
|
|
133
|
-
function resetToAuto() {
|
|
134
|
-
console.log('Resetting to auto theme...');
|
|
135
|
-
if (typeof setTheme === 'function') {
|
|
136
|
-
setTheme('auto');
|
|
137
|
-
updateStatus();
|
|
138
|
-
} else {
|
|
139
|
-
console.error('setTheme function not available');
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// Also update every 2 seconds to show real-time changes
|
|
144
|
-
setInterval(updateStatus, 2000);
|
|
145
|
-
|
|
146
|
-
// Force refresh function
|
|
147
|
-
function forceRefresh() {
|
|
148
|
-
console.log('Forcing theme refresh...');
|
|
149
|
-
// Manually trigger Starlight theme initialization
|
|
150
|
-
if (window.Starlight && window.Starlight.initTheme) {
|
|
151
|
-
window.Starlight.initTheme();
|
|
152
|
-
setTimeout(updateStatus, 100);
|
|
153
|
-
} else {
|
|
154
|
-
console.error('Starlight not available');
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
</script>
|
|
158
|
-
</body>
|
|
159
|
-
</html>
|