@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,344 @@
|
|
|
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
|
+
<style>
|
|
9
|
+
body { background-color: #f8fafc; color: #0f172a; transition: background-color 0.5s ease, color 0.5s ease; }
|
|
10
|
+
body.dark-mode { background-color: #020617; color: #f1f5f9; }
|
|
11
|
+
.product-card:hover .product-image { transform: scale(1.05); }
|
|
12
|
+
.product-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
13
|
+
|
|
14
|
+
/* Twinkle Hover Effect */
|
|
15
|
+
a:hover, .product-card:hover, .color-swatch:hover {
|
|
16
|
+
animation: star-twinkle 1s infinite ease-in-out;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@keyframes star-twinkle {
|
|
20
|
+
0%, 100% { opacity: 0.8; transform: scale(1); }
|
|
21
|
+
50% { opacity: 1; transform: scale(1.02); }
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.color-swatch.selected {
|
|
25
|
+
box-shadow: 0 0 0 4px #00d4ff, 0 0 20px rgba(0, 212, 255, 0.6);
|
|
26
|
+
border-color: #00d4ff !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Theme Toggle Styling */
|
|
30
|
+
.theme-toggle {
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
width: 2.5rem;
|
|
33
|
+
height: 2.5rem;
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
transition: background 0.3s ease;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.theme-toggle:hover {
|
|
43
|
+
background: rgba(0, 0, 0, 0.05);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
body.dark-mode .theme-toggle:hover {
|
|
47
|
+
background: rgba(255, 255, 255, 0.1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
body.dark-mode .bg-white {
|
|
51
|
+
background-color: #0f172a !important;
|
|
52
|
+
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
body.dark-mode .bg-white\/80 {
|
|
56
|
+
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
body.dark-mode .glass {
|
|
60
|
+
background-color: rgba(255, 255, 255, 0.08) !important;
|
|
61
|
+
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
body.dark-mode .bg-slate-100 {
|
|
65
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
body.dark-mode .border-slate-100 {
|
|
69
|
+
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
body.dark-mode nav {
|
|
73
|
+
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
74
|
+
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
body.light-mode footer {
|
|
78
|
+
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
79
|
+
backdrop-filter: blur(20px);
|
|
80
|
+
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
81
|
+
color: #1e293b !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
body.light-mode footer h5 {
|
|
85
|
+
color: #64748b !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
body.light-mode footer a {
|
|
89
|
+
color: #475569 !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
body.light-mode footer a:hover {
|
|
93
|
+
color: #ea580c !important;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
body.light-mode footer .text-orange-600 {
|
|
97
|
+
color: #ea580c !important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
body.light-mode footer .bg-slate-950 {
|
|
101
|
+
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
body.dark-mode .text-slate-900 {
|
|
105
|
+
color: #f1f5f9 !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sun-icon { display: block; }
|
|
109
|
+
body.dark-mode .sun-icon { display: none; }
|
|
110
|
+
body.dark-mode .moon-icon { display: block; }
|
|
111
|
+
.moon-icon { display: none; }
|
|
112
|
+
</style>
|
|
113
|
+
</head>
|
|
114
|
+
<body class="light-mode">
|
|
115
|
+
<!-- Announcement Bar -->
|
|
116
|
+
<div class="bg-slate-900 text-white py-3 text-center text-[10px] font-black tracking-[0.3em] uppercase">
|
|
117
|
+
Interstellar Shipping Enabled • New Drops Every Sunday
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<!-- Navigation -->
|
|
121
|
+
<nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
|
|
122
|
+
<div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
|
|
123
|
+
<div class="text-2xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
124
|
+
<div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
125
|
+
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Men</a>
|
|
126
|
+
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Women</a>
|
|
127
|
+
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Cybernetics</a>
|
|
128
|
+
<a href="#" class="text-orange-600 font-bold">Limited</a>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="flex items-center space-x-6">
|
|
131
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
132
|
+
<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>
|
|
133
|
+
<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>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="relative group">
|
|
136
|
+
<a href="#" class="text-slate-900 w-10 h-10 flex items-center justify-center bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
|
|
137
|
+
<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>
|
|
138
|
+
<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>
|
|
139
|
+
</a>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</nav>
|
|
144
|
+
|
|
145
|
+
<!-- Header Section -->
|
|
146
|
+
<header class="bg-white border-b border-slate-100">
|
|
147
|
+
<div class="max-w-[1440px] mx-auto px-8 py-12">
|
|
148
|
+
<div class="flex flex-col md:flex-row justify-between items-end gap-12">
|
|
149
|
+
<div class="max-w-2xl">
|
|
150
|
+
<span class="text-orange-600 font-bold uppercase text-xs tracking-widest mb-4 block">Season 2026</span>
|
|
151
|
+
<h1 class="text-6xl font-black mb-4 uppercase italic tracking-tighter leading-none">Cyber-Wear</h1>
|
|
152
|
+
<p class="text-slate-500 text-xl font-medium leading-relaxed">Synthetics, LED-integration, and reactive fibers for the next digital era.</p>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="flex items-center space-x-6">
|
|
155
|
+
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Sort by</span>
|
|
156
|
+
<select class="input-starlight h-14 min-w-56 text-slate-900 border-slate-200">
|
|
157
|
+
<option>Newest Arrivals</option>
|
|
158
|
+
<option>Price: Low to High</option>
|
|
159
|
+
<option>Price: High to Low</option>
|
|
160
|
+
</select>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</header>
|
|
165
|
+
|
|
166
|
+
<!-- Main Content -->
|
|
167
|
+
<main class="max-w-[1440px] mx-auto px-8 py-16">
|
|
168
|
+
<div class="flex flex-col lg:flex-row gap-16 items-start">
|
|
169
|
+
<!-- Sidebar -->
|
|
170
|
+
<aside class="w-full lg:w-64 flex-shrink-0 space-y-12">
|
|
171
|
+
<div>
|
|
172
|
+
<h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Categories</h4>
|
|
173
|
+
<div class="space-y-4">
|
|
174
|
+
<label class="flex items-center space-x-4 cursor-pointer group">
|
|
175
|
+
<input type="checkbox" class="checkbox-starlight" checked>
|
|
176
|
+
<span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Heavy Jackets</span>
|
|
177
|
+
</label>
|
|
178
|
+
<label class="flex items-center space-x-4 cursor-pointer group">
|
|
179
|
+
<input type="checkbox" class="checkbox-starlight">
|
|
180
|
+
<span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Tech Footwear</span>
|
|
181
|
+
</label>
|
|
182
|
+
<label class="flex items-center space-x-4 cursor-pointer group">
|
|
183
|
+
<input type="checkbox" class="checkbox-starlight">
|
|
184
|
+
<span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Cyber-Accessories</span>
|
|
185
|
+
</label>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<div>
|
|
190
|
+
<h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Color Way</h4>
|
|
191
|
+
<div class="flex flex-wrap gap-4" id="color-swatches">
|
|
192
|
+
<button class="w-10 h-10 rounded-full border-2 border-slate-900 color-swatch selected transition-transform" style="background-color: #0f172a;"></button>
|
|
193
|
+
<button class="w-10 h-10 rounded-full border-2 border-slate-200 color-swatch transition-transform" style="background-color: #ffffff;"></button>
|
|
194
|
+
<button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #ea580c;"></button>
|
|
195
|
+
<button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #2563eb;"></button>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</aside>
|
|
199
|
+
|
|
200
|
+
<!-- Product Grid -->
|
|
201
|
+
<div class="flex-1 min-w-0">
|
|
202
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16">
|
|
203
|
+
<!-- Product 1 -->
|
|
204
|
+
<div class="product-card group cursor-pointer block">
|
|
205
|
+
<div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
|
|
206
|
+
<img src="images/windbreaker.jpg" alt="Neon Pulse" class="product-image w-full h-full object-cover">
|
|
207
|
+
<div class="absolute top-4 left-4 flex flex-col space-y-2">
|
|
208
|
+
<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>
|
|
209
|
+
</div>
|
|
210
|
+
<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">
|
|
211
|
+
<button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="flex justify-between items-start px-1">
|
|
215
|
+
<div>
|
|
216
|
+
<h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Neon Pulse Windbreaker</h3>
|
|
217
|
+
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Reflective Fiber</p>
|
|
218
|
+
</div>
|
|
219
|
+
<span class="font-black text-base text-slate-900">299S</span>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
|
+
<!-- Product 2 -->
|
|
224
|
+
<div class="product-card group cursor-pointer block">
|
|
225
|
+
<div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
|
|
226
|
+
<img src="images/sneakers.jpg" alt="Gravity-Lock" class="product-image w-full h-full object-cover">
|
|
227
|
+
<div class="absolute top-4 left-4">
|
|
228
|
+
<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>
|
|
229
|
+
</div>
|
|
230
|
+
<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">
|
|
231
|
+
<button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="flex justify-between items-start px-1">
|
|
235
|
+
<div>
|
|
236
|
+
<h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Gravity-Lock Sneakers</h3>
|
|
237
|
+
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Mag-Closure v4</p>
|
|
238
|
+
</div>
|
|
239
|
+
<span class="font-black text-base text-slate-900">540S</span>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<!-- Product 3 -->
|
|
244
|
+
<div class="product-card group cursor-pointer block">
|
|
245
|
+
<div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
|
|
246
|
+
<img src="images/headset.jpg" alt="Neural Link" class="product-image w-full h-full object-cover">
|
|
247
|
+
<div class="absolute top-4 left-4">
|
|
248
|
+
<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>
|
|
249
|
+
</div>
|
|
250
|
+
<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">
|
|
251
|
+
<button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="flex justify-between items-start px-1">
|
|
255
|
+
<div>
|
|
256
|
+
<h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Neural Link Headset v2</h3>
|
|
257
|
+
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Neural-Fiber Mesh</p>
|
|
258
|
+
</div>
|
|
259
|
+
<span class="font-black text-base text-slate-900">1,200S</span>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<!-- Pagination -->
|
|
265
|
+
<div class="mt-20 flex justify-center items-center space-x-6 w-full border-t border-slate-100 pt-16">
|
|
266
|
+
<button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-blue-600/50">1</button>
|
|
267
|
+
<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>
|
|
268
|
+
<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>
|
|
269
|
+
<div class="px-4 text-slate-200 font-black text-lg">/</div>
|
|
270
|
+
<button class="glass px-10 h-12 text-[10px] font-black uppercase tracking-widest shadow-sm opacity-80 hover:opacity-100">Next Cluster</button>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</main>
|
|
275
|
+
|
|
276
|
+
<!-- Footer -->
|
|
277
|
+
<footer class="bg-slate-950 text-white py-12 mt-32 relative">
|
|
278
|
+
<div class="max-w-[1440px] mx-auto px-8">
|
|
279
|
+
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
280
|
+
<div class="lg:col-span-4 space-y-8">
|
|
281
|
+
<div class="text-4xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
282
|
+
<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>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="lg:col-span-2">
|
|
285
|
+
<h5 class="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-slate-600">Inventory</h5>
|
|
286
|
+
<ul class="space-y-4 text-sm font-bold list-none p-0">
|
|
287
|
+
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Drops</a></li>
|
|
288
|
+
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Wanted</a></li>
|
|
289
|
+
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Tech</a></li>
|
|
290
|
+
</ul>
|
|
291
|
+
</div>
|
|
292
|
+
<div class="lg:col-span-2">
|
|
293
|
+
<h5 class="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-slate-600">Support</h5>
|
|
294
|
+
<ul class="space-y-4 text-sm font-bold list-none p-0">
|
|
295
|
+
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Logistics</a></li>
|
|
296
|
+
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Returns</a></li>
|
|
297
|
+
<li><a href="#" class="text-white hover:text-orange-600 transition-colors">Sizing</a></li>
|
|
298
|
+
</ul>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="lg:col-span-4 space-y-8">
|
|
301
|
+
<h5 class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-600">Neural Connect</h5>
|
|
302
|
+
<div class="flex flex-col space-y-4">
|
|
303
|
+
<input type="email" class="input-starlight h-12 w-full bg-slate-900 border-slate-800 text-white placeholder:text-slate-600" placeholder="id@nexus.io">
|
|
304
|
+
<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>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="mt-20 pt-12 border-t border-white/5 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
|
|
309
|
+
<p>© 2026 Quantum Store</p>
|
|
310
|
+
<p class="italic tracking-normal">Encrypted Connection Verified</p>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
</footer>
|
|
314
|
+
|
|
315
|
+
<script>
|
|
316
|
+
// Theme Toggle Logic
|
|
317
|
+
const themeBtn = document.getElementById('theme-btn');
|
|
318
|
+
if (themeBtn) {
|
|
319
|
+
themeBtn.addEventListener('click', () => {
|
|
320
|
+
document.body.classList.toggle('light-mode');
|
|
321
|
+
document.body.classList.toggle('dark-mode');
|
|
322
|
+
const isDark = document.body.classList.contains('dark-mode');
|
|
323
|
+
|
|
324
|
+
// Update all icons
|
|
325
|
+
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
326
|
+
icon.style.display = isDark ? 'none' : 'block';
|
|
327
|
+
});
|
|
328
|
+
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
329
|
+
icon.style.display = isDark ? 'block' : 'none';
|
|
330
|
+
});
|
|
331
|
+
});
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
// Color Swatch Selection
|
|
335
|
+
const swatches = document.querySelectorAll('.color-swatch');
|
|
336
|
+
swatches.forEach(swatch => {
|
|
337
|
+
swatch.addEventListener('click', () => {
|
|
338
|
+
swatches.forEach(s => s.classList.remove('selected'));
|
|
339
|
+
swatch.classList.add('selected');
|
|
340
|
+
});
|
|
341
|
+
});
|
|
342
|
+
</script>
|
|
343
|
+
</body>
|
|
344
|
+
</html>
|
|
@@ -0,0 +1,174 @@
|
|
|
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>Starlight AI - Design System</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
|
|
11
|
+
color: white;
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
overflow-x: hidden;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.hero-glow {
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: -10%;
|
|
19
|
+
right: -10%;
|
|
20
|
+
width: 50%;
|
|
21
|
+
height: 50%;
|
|
22
|
+
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
23
|
+
filter: blur(60px);
|
|
24
|
+
z-index: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.hero-glow-2 {
|
|
28
|
+
position: absolute;
|
|
29
|
+
bottom: -10%;
|
|
30
|
+
left: -10%;
|
|
31
|
+
width: 50%;
|
|
32
|
+
height: 50%;
|
|
33
|
+
background: radial-gradient(circle, rgba(255, 179, 138, 0.1) 0%, transparent 70%);
|
|
34
|
+
filter: blur(60px);
|
|
35
|
+
z-index: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.float {
|
|
39
|
+
animation: float 6s ease-in-out infinite;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@keyframes float {
|
|
43
|
+
0% { transform: translateY(0px); }
|
|
44
|
+
50% { transform: translateY(-20px); }
|
|
45
|
+
100% { transform: translateY(0px); }
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Theme Toggle Styling */
|
|
49
|
+
.theme-toggle {
|
|
50
|
+
position: fixed;
|
|
51
|
+
top: 2rem;
|
|
52
|
+
right: 2rem;
|
|
53
|
+
z-index: 100;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
width: 2.5rem;
|
|
56
|
+
height: 2.5rem;
|
|
57
|
+
border-radius: 50%;
|
|
58
|
+
transition: background 0.3s ease;
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.theme-toggle:hover {
|
|
66
|
+
background: rgba(255, 255, 255, 0.1);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
body.light-mode .theme-toggle:hover {
|
|
70
|
+
background: rgba(0, 0, 0, 0.05);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
body.light-mode {
|
|
74
|
+
background: #f1f5f9;
|
|
75
|
+
color: #1e293b;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
body.light-mode .glass {
|
|
79
|
+
background: rgba(0, 0, 0, 0.03) !important;
|
|
80
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
81
|
+
color: #1e293b !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.sun-icon { display: none; }
|
|
85
|
+
body.light-mode .sun-icon { display: block; }
|
|
86
|
+
body.light-mode .moon-icon { display: none; }
|
|
87
|
+
</style>
|
|
88
|
+
</head>
|
|
89
|
+
<body class="p-8 min-h-screen">
|
|
90
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
91
|
+
<svg class="w-6 h-6 sun-icon hidden" 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>
|
|
92
|
+
<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>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="hero-glow"></div>
|
|
95
|
+
<div class="hero-glow-2"></div>
|
|
96
|
+
|
|
97
|
+
<div class="max-w-144 mx-auto">
|
|
98
|
+
<header class="mb-20 pt-16 text-center">
|
|
99
|
+
<h1 class="text-6xl font-bold tracking-tighter mb-6 float">
|
|
100
|
+
<span class="text-gradient-starlight">Starlight</span> Design
|
|
101
|
+
</h1>
|
|
102
|
+
<p class="text-xl text-gray-400 max-w-prose mx-auto mb-10">
|
|
103
|
+
An ethereal, futuristic CSS library inspired by the cosmos.
|
|
104
|
+
Built for the next generation of AI-driven interfaces.
|
|
105
|
+
</p>
|
|
106
|
+
<div class="flex justify-center gap-6">
|
|
107
|
+
<button class="bg-starlight text-black px-10 py-4 rounded-full font-bold glow-blue transition scale-105 hover:bg-white border-none">
|
|
108
|
+
Get Started
|
|
109
|
+
</button>
|
|
110
|
+
<button class="glass text-white px-12 py-4 rounded-full font-bold transition hover:bg-opacity-20 border-2 border-solid border-white border-opacity-20">
|
|
111
|
+
Documentation
|
|
112
|
+
</button>
|
|
113
|
+
</div>
|
|
114
|
+
</header>
|
|
115
|
+
|
|
116
|
+
<section class="mb-20">
|
|
117
|
+
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-10 text-center">Ethereal Components</h2>
|
|
118
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
119
|
+
<div class="glass p-10 rounded-2xl glow-blue">
|
|
120
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient-starlight">Glassmorphism</h3>
|
|
121
|
+
<p class="text-gray-400 mb-6">Translucent backgrounds with hardware-accelerated blur effects.</p>
|
|
122
|
+
<div class="glass p-4 rounded-xl">
|
|
123
|
+
<code class="text-sm text-starlight">.glass { backdrop-filter: blur(12px); }</code>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="glass p-10 rounded-2xl glow-peach">
|
|
128
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient-starlight">Atmospheric Glow</h3>
|
|
129
|
+
<p class="text-gray-400 mb-6">Soft, colored box shadows that create a sense of light and depth.</p>
|
|
130
|
+
<button class="w-full bg-starlight text-black py-3 rounded-xl font-bold glow-blue border-none">
|
|
131
|
+
Action Button
|
|
132
|
+
</button>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</section>
|
|
136
|
+
|
|
137
|
+
<section class="mb-20">
|
|
138
|
+
<div class="bg-starlight-deep glass p-12 rounded-3xl border border-white border-opacity-5 text-center">
|
|
139
|
+
<h2 class="text-4xl font-bold mb-6 text-gradient-starlight">Ready to Launch?</h2>
|
|
140
|
+
<p class="text-lg text-gray-400 mb-10">Experience the future of styling with Starlight AI.</p>
|
|
141
|
+
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
|
142
|
+
<input type="text" class="glass px-6 py-4 rounded-xl outline-none focus:border-starlight transition md:w-80" placeholder="Enter your email...">
|
|
143
|
+
<button class="bg-starlight text-black px-10 py-4 rounded-xl font-bold glow-blue transition hover:scale-105 border-none">
|
|
144
|
+
Join Waitlist
|
|
145
|
+
</button>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</section>
|
|
149
|
+
|
|
150
|
+
<footer class="mt-32 pt-10 border-t border-white border-opacity-10 text-center text-gray-500 text-sm">
|
|
151
|
+
© 2026 Starlight AI · Powered by Quantum CSS
|
|
152
|
+
</footer>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<script>
|
|
156
|
+
// Theme Toggle Logic
|
|
157
|
+
const themeBtn = document.getElementById('theme-btn');
|
|
158
|
+
if (themeBtn) {
|
|
159
|
+
themeBtn.addEventListener('click', () => {
|
|
160
|
+
document.body.classList.toggle('light-mode');
|
|
161
|
+
const isLight = document.body.classList.contains('light-mode');
|
|
162
|
+
|
|
163
|
+
// Update all icons
|
|
164
|
+
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
165
|
+
icon.classList.toggle('hidden', !isLight);
|
|
166
|
+
});
|
|
167
|
+
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
168
|
+
icon.classList.toggle('hidden', isLight);
|
|
169
|
+
});
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
</script>
|
|
173
|
+
</body>
|
|
174
|
+
</html>
|