@howssatoshi/quantumcss 1.10.1 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +130 -288
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +11 -27
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/index.html +342 -232
- package/examples/kitchen-sink.html +284 -94
- package/examples/music-streaming.html +32 -91
- package/examples/{news-template.html → news.html} +35 -11
- package/examples/{portfolio-resume.html → portfolio.html} +56 -26
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +7 -6
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +303 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +18 -16
- package/src/starlight.js +20 -15
- package/src/styles/quantum-base.css +4 -0
- package/src/styles/quantum-components.css +1879 -134
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2606 -1186
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -288
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -471
- package/examples/gradient-test.html +0 -129
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -525
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -432
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
- /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
|
@@ -0,0 +1,812 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="dark">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>NOVA — Quantum Shop</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link
|
|
9
|
+
href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap"
|
|
10
|
+
rel="stylesheet"
|
|
11
|
+
/>
|
|
12
|
+
|
|
13
|
+
<!-- Quantum CSS Framework -->
|
|
14
|
+
<link rel="stylesheet" href="../dist/quantum.min.css" />
|
|
15
|
+
|
|
16
|
+
<!-- Custom Nova Shop Styles -->
|
|
17
|
+
<link rel="stylesheet" href="nova-shop.css" />
|
|
18
|
+
|
|
19
|
+
<!-- Starlight UI -->
|
|
20
|
+
<script src="../src/starlight.js"></script>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<!-- ── Starfield ── -->
|
|
24
|
+
<div class="stars-bg" id="stars"></div>
|
|
25
|
+
|
|
26
|
+
<div class="site-wrapper">
|
|
27
|
+
<!-- ══════════ NAVBAR ══════════ -->
|
|
28
|
+
<header class="nav-header">
|
|
29
|
+
<a href="#" class="nav-brand text-gradient">NOVA</a>
|
|
30
|
+
|
|
31
|
+
<!-- Nav links -->
|
|
32
|
+
<ul class="hidden md:flex items-center gap-8 nav-links">
|
|
33
|
+
<li><a href="#">New In</a></li>
|
|
34
|
+
<li><a href="#">Collections</a></li>
|
|
35
|
+
<li><a href="#">Sale</a></li>
|
|
36
|
+
<li><a href="#">Brands</a></li>
|
|
37
|
+
<li><a href="#">About</a></li>
|
|
38
|
+
</ul>
|
|
39
|
+
|
|
40
|
+
<!-- Actions -->
|
|
41
|
+
<div class="flex items-center gap-3">
|
|
42
|
+
<div class="search-bar-wrap">
|
|
43
|
+
<span class="search-icon-pos">
|
|
44
|
+
<i class="q-icon-search w-3.5 h-3.5"></i>
|
|
45
|
+
</span>
|
|
46
|
+
<input
|
|
47
|
+
class="search-bar-input"
|
|
48
|
+
type="search"
|
|
49
|
+
placeholder="Search products…"
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<button
|
|
54
|
+
class="icon-btn theme-toggle"
|
|
55
|
+
id="themeToggle"
|
|
56
|
+
title="Toggle Theme"
|
|
57
|
+
>
|
|
58
|
+
<i class="q-icon-display"></i>
|
|
59
|
+
<i class="q-icon-sun hidden sun-icon"></i>
|
|
60
|
+
<i class="q-icon-moon hidden moon-icon"></i>
|
|
61
|
+
</button>
|
|
62
|
+
|
|
63
|
+
<button class="icon-btn">
|
|
64
|
+
<i class="q-icon-heart"></i>
|
|
65
|
+
</button>
|
|
66
|
+
|
|
67
|
+
<button class="icon-btn" style="position: relative">
|
|
68
|
+
<i class="q-icon-shopping-bag"></i>
|
|
69
|
+
<span class="badge-count absolute -top-1 -right-1"
|
|
70
|
+
>3</span
|
|
71
|
+
>
|
|
72
|
+
</button>
|
|
73
|
+
|
|
74
|
+
<button class="icon-btn">
|
|
75
|
+
<i class="q-icon-user"></i>
|
|
76
|
+
</button>
|
|
77
|
+
</header>
|
|
78
|
+
|
|
79
|
+
<!-- ══════════ HERO ══════════ -->
|
|
80
|
+
<section class="hero">
|
|
81
|
+
<div class="hero-glow"></div>
|
|
82
|
+
<div class="hero-content">
|
|
83
|
+
<div class="hero-eyebrow ani-slide-up">
|
|
84
|
+
<span></span>
|
|
85
|
+
New Collection — Summer 2025
|
|
86
|
+
</div>
|
|
87
|
+
<h1 class="ani-slide-up ani-stagger-1">
|
|
88
|
+
Dress the
|
|
89
|
+
<span class="text-gradient">Future.</span
|
|
90
|
+
><br />
|
|
91
|
+
Own the Moment.
|
|
92
|
+
</h1>
|
|
93
|
+
<p class="hero-sub ani-slide-up ani-stagger-2">
|
|
94
|
+
Curated fashion from tomorrow's most iconic labels.
|
|
95
|
+
Pieces that define who you are before the world catches
|
|
96
|
+
up.
|
|
97
|
+
</p>
|
|
98
|
+
<div
|
|
99
|
+
class="flex flex-wrap justify-center gap-4 ani-slide-up ani-stagger-3"
|
|
100
|
+
>
|
|
101
|
+
<button
|
|
102
|
+
class="btn-starlight"
|
|
103
|
+
style="
|
|
104
|
+
padding: 0.75rem 2rem;
|
|
105
|
+
font-size: 0.95rem;
|
|
106
|
+
border-radius: 9999px;
|
|
107
|
+
"
|
|
108
|
+
>
|
|
109
|
+
Shop Now
|
|
110
|
+
<i class="q-icon-chevron-right w-3.5 h-3.5"></i>
|
|
111
|
+
</button>
|
|
112
|
+
<button class="btn-outline-glow">
|
|
113
|
+
Explore Collections
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="hero-stats ani-slide-up ani-stagger-4">
|
|
117
|
+
<div>
|
|
118
|
+
<div class="hero-stat-value">12K+</div>
|
|
119
|
+
<div class="hero-stat-label">Happy Customers</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div>
|
|
122
|
+
<div class="hero-stat-value">340+</div>
|
|
123
|
+
<div class="hero-stat-label">Brands</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div>
|
|
126
|
+
<div class="hero-stat-value">4.9★</div>
|
|
127
|
+
<div class="hero-stat-label">Avg. Rating</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</section>
|
|
132
|
+
|
|
133
|
+
<!-- ══════════ TRUST BAR ══════════ -->
|
|
134
|
+
<div class="trust-section">
|
|
135
|
+
<div class="container">
|
|
136
|
+
<div class="flex flex-wrap justify-around gap-8">
|
|
137
|
+
<div class="trust-item">
|
|
138
|
+
<span class="trust-icon">🚀</span>
|
|
139
|
+
<div>
|
|
140
|
+
<div class="trust-text-title">
|
|
141
|
+
Express Shipping
|
|
142
|
+
</div>
|
|
143
|
+
<div class="trust-text-sub">
|
|
144
|
+
Free on orders over $75
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="trust-item">
|
|
149
|
+
<span class="trust-icon">🔄</span>
|
|
150
|
+
<div>
|
|
151
|
+
<div class="trust-text-title">Free Returns</div>
|
|
152
|
+
<div class="trust-text-sub">
|
|
153
|
+
Within 30 days, no hassle
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="trust-item">
|
|
158
|
+
<span class="trust-icon">🔐</span>
|
|
159
|
+
<div>
|
|
160
|
+
<div class="trust-text-title">
|
|
161
|
+
Secure Payment
|
|
162
|
+
</div>
|
|
163
|
+
<div class="trust-text-sub">
|
|
164
|
+
256-bit SSL encryption
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="trust-item">
|
|
169
|
+
<span class="trust-icon">🌍</span>
|
|
170
|
+
<div>
|
|
171
|
+
<div class="trust-text-title">
|
|
172
|
+
Ships Worldwide
|
|
173
|
+
</div>
|
|
174
|
+
<div class="trust-text-sub">
|
|
175
|
+
Over 120 countries
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<!-- ══════════ CATEGORIES ══════════ -->
|
|
184
|
+
<section class="categories-section">
|
|
185
|
+
<div class="container">
|
|
186
|
+
<div class="section-label">Browse by category</div>
|
|
187
|
+
<div class="categories-scroll">
|
|
188
|
+
<button class="chip chip-primary">
|
|
189
|
+
<span>✨</span> All
|
|
190
|
+
</button>
|
|
191
|
+
<button class="chip">
|
|
192
|
+
<span>👗</span> Dresses
|
|
193
|
+
</button>
|
|
194
|
+
<button class="chip">
|
|
195
|
+
<span>👟</span> Sneakers
|
|
196
|
+
</button>
|
|
197
|
+
<button class="chip">
|
|
198
|
+
<span>🧥</span> Outerwear
|
|
199
|
+
</button>
|
|
200
|
+
<button class="chip">
|
|
201
|
+
<span>👜</span> Bags
|
|
202
|
+
</button>
|
|
203
|
+
<button class="chip">
|
|
204
|
+
<span>💍</span> Jewellery
|
|
205
|
+
</button>
|
|
206
|
+
<button class="chip">
|
|
207
|
+
<span>🧢</span> Accessories
|
|
208
|
+
</button>
|
|
209
|
+
<button class="chip">
|
|
210
|
+
<span>🩱</span> Swimwear
|
|
211
|
+
</button>
|
|
212
|
+
<button class="chip">
|
|
213
|
+
<span>🎽</span> Activewear
|
|
214
|
+
</button>
|
|
215
|
+
<button class="chip">
|
|
216
|
+
<span>🕶️</span> Eyewear
|
|
217
|
+
</button>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</section>
|
|
221
|
+
|
|
222
|
+
<!-- ══════════ TRENDING MARQUEE ══════════ -->
|
|
223
|
+
<div class="trending-section">
|
|
224
|
+
<div class="marquee-track" id="marquee">
|
|
225
|
+
<!-- items duplicated in JS -->
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<!-- ══════════ PRODUCTS ══════════ -->
|
|
230
|
+
<section class="products-section">
|
|
231
|
+
<div class="container">
|
|
232
|
+
<div class="section-header">
|
|
233
|
+
<div>
|
|
234
|
+
<div class="section-label">Hand-picked for you</div>
|
|
235
|
+
<h2 class="section-title">New Arrivals</h2>
|
|
236
|
+
</div>
|
|
237
|
+
<a href="#" class="view-all-link">
|
|
238
|
+
View all
|
|
239
|
+
<i class="q-icon-chevron-right w-3.5 h-3.5"></i>
|
|
240
|
+
</a>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<div class="product-grid" id="productGrid"></div>
|
|
244
|
+
</div>
|
|
245
|
+
</section>
|
|
246
|
+
|
|
247
|
+
<!-- ══════════ FEATURED BANNERS ══════════ -->
|
|
248
|
+
<section class="featured-section">
|
|
249
|
+
<div class="container">
|
|
250
|
+
<div class="section-label" style="margin-bottom: 1.25rem">
|
|
251
|
+
Spotlight
|
|
252
|
+
</div>
|
|
253
|
+
<div class="featured-grid">
|
|
254
|
+
<div class="featured-card">
|
|
255
|
+
<div class="featured-card-bg featured-bg-1">
|
|
256
|
+
<div class="featured-glow-1"></div>
|
|
257
|
+
<div
|
|
258
|
+
class="featured-float-icon"
|
|
259
|
+
style="top: 30%; left: 60%"
|
|
260
|
+
>
|
|
261
|
+
👟
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="featured-content">
|
|
265
|
+
<div class="featured-eyebrow">
|
|
266
|
+
New Drop — Limited Edition
|
|
267
|
+
</div>
|
|
268
|
+
<h3 class="featured-title">
|
|
269
|
+
Future-Sole<br />Sneaker Series
|
|
270
|
+
</h3>
|
|
271
|
+
<p class="featured-desc">
|
|
272
|
+
Ultra-light composites. Cosmic colourways.
|
|
273
|
+
Zero-break-in comfort.
|
|
274
|
+
</p>
|
|
275
|
+
<button
|
|
276
|
+
class="btn-starlight"
|
|
277
|
+
style="border-radius: 9999px"
|
|
278
|
+
>
|
|
279
|
+
Shop Kicks →
|
|
280
|
+
</button>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<div class="featured-card">
|
|
285
|
+
<div class="featured-card-bg featured-bg-2">
|
|
286
|
+
<div class="featured-glow-2"></div>
|
|
287
|
+
<div
|
|
288
|
+
class="featured-float-icon"
|
|
289
|
+
style="top: 25%; left: 55%"
|
|
290
|
+
>
|
|
291
|
+
💫
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="featured-content">
|
|
295
|
+
<div
|
|
296
|
+
class="featured-eyebrow"
|
|
297
|
+
style="
|
|
298
|
+
color: var(--q-color-starlight-peach);
|
|
299
|
+
"
|
|
300
|
+
>
|
|
301
|
+
Up to 60% Off
|
|
302
|
+
</div>
|
|
303
|
+
<h3 class="featured-title">
|
|
304
|
+
Summer<br />Edit Sale
|
|
305
|
+
</h3>
|
|
306
|
+
<p class="featured-desc">
|
|
307
|
+
The season's most wanted pieces, now at
|
|
308
|
+
their best prices.
|
|
309
|
+
</p>
|
|
310
|
+
<button
|
|
311
|
+
class="btn-starlight"
|
|
312
|
+
style="
|
|
313
|
+
background: linear-gradient(
|
|
314
|
+
135deg,
|
|
315
|
+
#ff7e5f,
|
|
316
|
+
#ffb38a
|
|
317
|
+
);
|
|
318
|
+
border-radius: 9999px;
|
|
319
|
+
"
|
|
320
|
+
>
|
|
321
|
+
Grab a Deal →
|
|
322
|
+
</button>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</section>
|
|
328
|
+
|
|
329
|
+
<!-- ══════════ BESTSELLERS ══════════ -->
|
|
330
|
+
<section class="products-section" style="padding-top: 0">
|
|
331
|
+
<div class="container">
|
|
332
|
+
<div class="section-header">
|
|
333
|
+
<div>
|
|
334
|
+
<div class="section-label">
|
|
335
|
+
Community favourites
|
|
336
|
+
</div>
|
|
337
|
+
<h2 class="section-title">Best Sellers</h2>
|
|
338
|
+
</div>
|
|
339
|
+
<a href="#" class="view-all-link"
|
|
340
|
+
>View all
|
|
341
|
+
<i class="q-icon-chevron-right w-3.5 h-3.5"></i></a>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="product-grid" id="bestsellersGrid"></div>
|
|
344
|
+
</div>
|
|
345
|
+
</section>
|
|
346
|
+
|
|
347
|
+
<!-- ══════════ TESTIMONIALS ══════════ -->
|
|
348
|
+
<section class="testimonials-section">
|
|
349
|
+
<div class="container">
|
|
350
|
+
<div class="section-header">
|
|
351
|
+
<div>
|
|
352
|
+
<div class="section-label">What they say</div>
|
|
353
|
+
<h2 class="section-title">Loved by thousands</h2>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="testimonials-grid" id="testimonialsGrid"></div>
|
|
357
|
+
</div>
|
|
358
|
+
</section>
|
|
359
|
+
|
|
360
|
+
<!-- ══════════ NEWSLETTER ══════════ -->
|
|
361
|
+
<section class="newsletter-section">
|
|
362
|
+
<div class="container">
|
|
363
|
+
<div class="newsletter-card">
|
|
364
|
+
<div class="newsletter-bg-glow"></div>
|
|
365
|
+
<div
|
|
366
|
+
class="hero-eyebrow"
|
|
367
|
+
style="display: inline-flex; margin-bottom: 1.25rem"
|
|
368
|
+
>
|
|
369
|
+
<span></span> Exclusive Access
|
|
370
|
+
</div>
|
|
371
|
+
<h2 class="newsletter-title">
|
|
372
|
+
Stay ahead of the<br /><span
|
|
373
|
+
class="text-gradient"
|
|
374
|
+
>curve.</span
|
|
375
|
+
>
|
|
376
|
+
</h2>
|
|
377
|
+
<p class="newsletter-sub">
|
|
378
|
+
Early access, secret drops, and 10% off your first
|
|
379
|
+
order.
|
|
380
|
+
</p>
|
|
381
|
+
<div class="newsletter-form">
|
|
382
|
+
<input
|
|
383
|
+
class="newsletter-input"
|
|
384
|
+
type="email"
|
|
385
|
+
placeholder="your@email.com"
|
|
386
|
+
/>
|
|
387
|
+
<button
|
|
388
|
+
class="btn-starlight"
|
|
389
|
+
style="
|
|
390
|
+
border-radius: 9999px;
|
|
391
|
+
padding: 0.65rem 1.75rem;
|
|
392
|
+
"
|
|
393
|
+
>
|
|
394
|
+
Subscribe →
|
|
395
|
+
</button>
|
|
396
|
+
</div>
|
|
397
|
+
<p
|
|
398
|
+
style="
|
|
399
|
+
font-size: 0.72rem;
|
|
400
|
+
color: var(--q-text-muted);
|
|
401
|
+
margin-top: 1rem;
|
|
402
|
+
"
|
|
403
|
+
>
|
|
404
|
+
No spam ever. Unsubscribe anytime.
|
|
405
|
+
</p>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
</section>
|
|
409
|
+
|
|
410
|
+
<!-- ══════════ FOOTER ══════════ -->
|
|
411
|
+
<footer class="starlight-footer">
|
|
412
|
+
<div class="container">
|
|
413
|
+
<div class="footer-grid">
|
|
414
|
+
<div>
|
|
415
|
+
<div class="footer-brand text-gradient">
|
|
416
|
+
NOVA
|
|
417
|
+
</div>
|
|
418
|
+
<p class="footer-desc">
|
|
419
|
+
The destination for forward-thinking fashion. We
|
|
420
|
+
curate the best from the world's most exciting
|
|
421
|
+
brands — so you never have to compromise.
|
|
422
|
+
</p>
|
|
423
|
+
<div
|
|
424
|
+
class="footer-socials"
|
|
425
|
+
style="margin-top: 1.25rem"
|
|
426
|
+
>
|
|
427
|
+
<a class="social-btn" href="#">𝕏</a>
|
|
428
|
+
<a class="social-btn" href="#">ig</a>
|
|
429
|
+
<a class="social-btn" href="#">in</a>
|
|
430
|
+
<a class="social-btn" href="#">yt</a>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
<div>
|
|
434
|
+
<div class="footer-col-title">Shop</div>
|
|
435
|
+
<ul class="footer-links">
|
|
436
|
+
<li><a href="#">New Arrivals</a></li>
|
|
437
|
+
<li><a href="#">Best Sellers</a></li>
|
|
438
|
+
<li><a href="#">Sale</a></li>
|
|
439
|
+
<li><a href="#">Brands</a></li>
|
|
440
|
+
<li><a href="#">Collections</a></li>
|
|
441
|
+
</ul>
|
|
442
|
+
</div>
|
|
443
|
+
<div>
|
|
444
|
+
<div class="footer-col-title">Help</div>
|
|
445
|
+
<ul class="footer-links">
|
|
446
|
+
<li><a href="#">Shipping & Returns</a></li>
|
|
447
|
+
<li><a href="#">Size Guide</a></li>
|
|
448
|
+
<li><a href="#">Track Order</a></li>
|
|
449
|
+
<li><a href="#">FAQ</a></li>
|
|
450
|
+
<li><a href="#">Contact Us</a></li>
|
|
451
|
+
</ul>
|
|
452
|
+
</div>
|
|
453
|
+
<div>
|
|
454
|
+
<div class="footer-col-title">Company</div>
|
|
455
|
+
<ul class="footer-links">
|
|
456
|
+
<li><a href="#">About NOVA</a></li>
|
|
457
|
+
<li><a href="#">Sustainability</a></li>
|
|
458
|
+
<li><a href="#">Careers</a></li>
|
|
459
|
+
<li><a href="#">Press</a></li>
|
|
460
|
+
<li><a href="#">Affiliates</a></li>
|
|
461
|
+
</ul>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
<hr class="footer-divider" />
|
|
465
|
+
<div class="footer-bottom">
|
|
466
|
+
<span
|
|
467
|
+
>© 2025 NOVA Commerce Inc. All rights
|
|
468
|
+
reserved.</span
|
|
469
|
+
>
|
|
470
|
+
<span style="display: flex; gap: 1.5rem">
|
|
471
|
+
<a
|
|
472
|
+
href="#"
|
|
473
|
+
style="color: inherit; text-decoration: none"
|
|
474
|
+
>Privacy</a
|
|
475
|
+
>
|
|
476
|
+
<a
|
|
477
|
+
href="#"
|
|
478
|
+
style="color: inherit; text-decoration: none"
|
|
479
|
+
>Terms</a
|
|
480
|
+
>
|
|
481
|
+
<a
|
|
482
|
+
href="#"
|
|
483
|
+
style="color: inherit; text-decoration: none"
|
|
484
|
+
>Cookies</a
|
|
485
|
+
>
|
|
486
|
+
</span>
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
</footer>
|
|
490
|
+
</div>
|
|
491
|
+
<!-- /.site-wrapper -->
|
|
492
|
+
|
|
493
|
+
<!-- Floating cart -->
|
|
494
|
+
<div class="floating-cta">
|
|
495
|
+
<button class="floating-cart-btn">🛒 Cart (3)</button>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
<script>
|
|
499
|
+
/* ── Stars ── */
|
|
500
|
+
const starsEl = document.getElementById("stars");
|
|
501
|
+
for (let i = 0; i < 120; i++) {
|
|
502
|
+
const s = document.createElement("div");
|
|
503
|
+
s.className = "star";
|
|
504
|
+
const size = Math.random() * 2.5 + 0.5;
|
|
505
|
+
s.style.cssText = `
|
|
506
|
+
width:${size}px; height:${size}px;
|
|
507
|
+
left:${Math.random() * 100}%; top:${Math.random() * 100}%;
|
|
508
|
+
--d:${2 + Math.random() * 5}s;
|
|
509
|
+
animation-delay:${Math.random() * 5}s;
|
|
510
|
+
`;
|
|
511
|
+
starsEl.appendChild(s);
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
/* ── Product data ── */
|
|
515
|
+
const products = [
|
|
516
|
+
{
|
|
517
|
+
name: "Aurora Silk Dress",
|
|
518
|
+
brand: "Lumière",
|
|
519
|
+
price: 289,
|
|
520
|
+
original: null,
|
|
521
|
+
rating: 4.8,
|
|
522
|
+
reviews: 214,
|
|
523
|
+
emoji: "👗",
|
|
524
|
+
bg: "linear-gradient(135deg,#1a0a3e,#0d1f3e)",
|
|
525
|
+
colors: ["#00d4ff", "#ff7e5f", "#1e293b"],
|
|
526
|
+
badges: ["new"],
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
name: "Nebula Runner Pro",
|
|
530
|
+
brand: "Voidwear",
|
|
531
|
+
price: 179,
|
|
532
|
+
original: 229,
|
|
533
|
+
rating: 4.9,
|
|
534
|
+
reviews: 847,
|
|
535
|
+
emoji: "👟",
|
|
536
|
+
bg: "linear-gradient(135deg,#0d2b1a,#1a1052)",
|
|
537
|
+
colors: ["#10b981", "#3b82f6", "#f59e0b"],
|
|
538
|
+
badges: ["sale", "hot"],
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
name: "Quantum Puffer Vest",
|
|
542
|
+
brand: "Arctis",
|
|
543
|
+
price: 195,
|
|
544
|
+
original: null,
|
|
545
|
+
rating: 4.7,
|
|
546
|
+
reviews: 133,
|
|
547
|
+
emoji: "🦺",
|
|
548
|
+
bg: "linear-gradient(135deg,#1f0a0a,#2d1a0a)",
|
|
549
|
+
colors: ["#ef4444", "#f59e0b", "#1e293b"],
|
|
550
|
+
badges: ["new"],
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
name: "Starmap Tote Bag",
|
|
554
|
+
brand: "Cosmo",
|
|
555
|
+
price: 145,
|
|
556
|
+
original: 195,
|
|
557
|
+
rating: 4.8,
|
|
558
|
+
reviews: 529,
|
|
559
|
+
emoji: "👜",
|
|
560
|
+
bg: "linear-gradient(135deg,#080a2d,#1a0a3e)",
|
|
561
|
+
colors: ["#8b5cf6", "#ec4899", "#f1f5f9"],
|
|
562
|
+
badges: ["sale"],
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
name: "Photon Blazer",
|
|
566
|
+
brand: "Lumière",
|
|
567
|
+
price: 349,
|
|
568
|
+
original: null,
|
|
569
|
+
rating: 4.6,
|
|
570
|
+
reviews: 88,
|
|
571
|
+
emoji: "🧥",
|
|
572
|
+
bg: "linear-gradient(135deg,#0a1f1a,#0d1f3e)",
|
|
573
|
+
colors: ["#00d4ff", "#1e293b"],
|
|
574
|
+
badges: ["new"],
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
name: "Crystal Drop Earrings",
|
|
578
|
+
brand: "Stellaris",
|
|
579
|
+
price: 89,
|
|
580
|
+
original: 120,
|
|
581
|
+
rating: 4.9,
|
|
582
|
+
reviews: 302,
|
|
583
|
+
emoji: "💎",
|
|
584
|
+
bg: "linear-gradient(135deg,#1a0a2d,#0a1a1f)",
|
|
585
|
+
colors: ["#e2e8f0", "#fbbf24", "#ec4899"],
|
|
586
|
+
badges: ["sale"],
|
|
587
|
+
},
|
|
588
|
+
{
|
|
589
|
+
name: "Void Linen Pants",
|
|
590
|
+
brand: "Voidwear",
|
|
591
|
+
price: 165,
|
|
592
|
+
original: null,
|
|
593
|
+
rating: 4.5,
|
|
594
|
+
reviews: 176,
|
|
595
|
+
emoji: "👖",
|
|
596
|
+
bg: "linear-gradient(135deg,#0d1a0d,#1a1a0a)",
|
|
597
|
+
colors: ["#1e293b", "#f1f5f9", "#78716c"],
|
|
598
|
+
badges: [],
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
name: "Orbital Sunglasses",
|
|
602
|
+
brand: "Eclipse",
|
|
603
|
+
price: 215,
|
|
604
|
+
original: 269,
|
|
605
|
+
rating: 4.8,
|
|
606
|
+
reviews: 441,
|
|
607
|
+
emoji: "🕶️",
|
|
608
|
+
bg: "linear-gradient(135deg,#1a0a0a,#1a1052)",
|
|
609
|
+
colors: ["#000", "#fbbf24", "#ec4899"],
|
|
610
|
+
badges: ["hot", "sale"],
|
|
611
|
+
},
|
|
612
|
+
];
|
|
613
|
+
|
|
614
|
+
const bestsellers = [
|
|
615
|
+
{
|
|
616
|
+
name: "Supernova Hoodie",
|
|
617
|
+
brand: "Voidwear",
|
|
618
|
+
price: 139,
|
|
619
|
+
original: null,
|
|
620
|
+
rating: 4.9,
|
|
621
|
+
reviews: 1203,
|
|
622
|
+
emoji: "🌟",
|
|
623
|
+
bg: "linear-gradient(135deg,#0a0a2d,#2d0a1a)",
|
|
624
|
+
colors: ["#8b5cf6", "#00d4ff", "#f87171"],
|
|
625
|
+
badges: ["hot"],
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
name: "Eclipse Trench Coat",
|
|
629
|
+
brand: "Arctis",
|
|
630
|
+
price: 495,
|
|
631
|
+
original: 629,
|
|
632
|
+
rating: 4.8,
|
|
633
|
+
reviews: 389,
|
|
634
|
+
emoji: "🌑",
|
|
635
|
+
bg: "linear-gradient(135deg,#0a0a0a,#1a0a2d)",
|
|
636
|
+
colors: ["#000", "#1e293b", "#ffb38a"],
|
|
637
|
+
badges: ["sale"],
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
name: "Prism Mini Skirt",
|
|
641
|
+
brand: "Lumière",
|
|
642
|
+
price: 115,
|
|
643
|
+
original: null,
|
|
644
|
+
rating: 4.7,
|
|
645
|
+
reviews: 672,
|
|
646
|
+
emoji: "🌈",
|
|
647
|
+
bg: "linear-gradient(135deg,#1a0a3e,#0a2d1a)",
|
|
648
|
+
colors: ["#ec4899", "#f59e0b", "#00d4ff"],
|
|
649
|
+
badges: ["new"],
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
name: "Gravity Belt",
|
|
653
|
+
brand: "Cosmo",
|
|
654
|
+
price: 79,
|
|
655
|
+
original: 99,
|
|
656
|
+
rating: 4.6,
|
|
657
|
+
reviews: 218,
|
|
658
|
+
emoji: "⚡",
|
|
659
|
+
bg: "linear-gradient(135deg,#1f1a0a,#0a1a2d)",
|
|
660
|
+
colors: ["#f59e0b", "#1e293b", "#f87171"],
|
|
661
|
+
badges: ["sale"],
|
|
662
|
+
},
|
|
663
|
+
];
|
|
664
|
+
|
|
665
|
+
function buildCard(p) {
|
|
666
|
+
const badgeHtml = p.badges
|
|
667
|
+
.map((b) => {
|
|
668
|
+
let variant = "secondary";
|
|
669
|
+
if (b === "new") variant = "primary";
|
|
670
|
+
if (b === "sale") variant = "error";
|
|
671
|
+
if (b === "hot") variant = "warning";
|
|
672
|
+
return `<span class="badge badge-${variant}">${b}</span>`;
|
|
673
|
+
})
|
|
674
|
+
.join("");
|
|
675
|
+
|
|
676
|
+
const colorHtml = p.colors
|
|
677
|
+
.map(
|
|
678
|
+
(c, i) =>
|
|
679
|
+
`<span class="color-swatch ${i === 0 ? "active" : ""}" style="background:${c}" title="${c}"></span>`,
|
|
680
|
+
)
|
|
681
|
+
.join("");
|
|
682
|
+
const pct = p.original
|
|
683
|
+
? Math.round((1 - p.price / p.original) * 100)
|
|
684
|
+
: 0;
|
|
685
|
+
|
|
686
|
+
return `
|
|
687
|
+
<div class="product-card">
|
|
688
|
+
<div class="product-image-wrap">
|
|
689
|
+
<div class="product-img-placeholder" style="background:${p.bg}">
|
|
690
|
+
${p.emoji}
|
|
691
|
+
</div>
|
|
692
|
+
<div class="product-badge-wrap">${badgeHtml}</div>
|
|
693
|
+
<div class="product-quick-add">
|
|
694
|
+
<button class="btn-quick-add">+ Add to Cart</button>
|
|
695
|
+
<button class="btn-wishlist">♡</button>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="product-info">
|
|
699
|
+
<div class="product-brand">${p.brand}</div>
|
|
700
|
+
<div class="product-name">${p.name}</div>
|
|
701
|
+
<div class="product-rating">
|
|
702
|
+
<span class="stars">${"★".repeat(Math.floor(p.rating))}${"☆".repeat(5 - Math.floor(p.rating))}</span>
|
|
703
|
+
<span class="rating-count">(${p.reviews.toLocaleString()})</span>
|
|
704
|
+
</div>
|
|
705
|
+
<div class="product-price-row">
|
|
706
|
+
<span class="price-current">$${p.price}</span>
|
|
707
|
+
${p.original ? `<span class="price-original">$${p.original}</span><span class="price-discount">−${pct}%</span>` : ""}
|
|
708
|
+
</div>
|
|
709
|
+
<div class="product-colors">${colorHtml}</div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
`;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
document.getElementById("productGrid").innerHTML = products
|
|
716
|
+
.map(buildCard)
|
|
717
|
+
.join("");
|
|
718
|
+
document.getElementById("bestsellersGrid").innerHTML = bestsellers
|
|
719
|
+
.map(buildCard)
|
|
720
|
+
.join("");
|
|
721
|
+
|
|
722
|
+
/* ── Testimonials ── */
|
|
723
|
+
const testimonials = [
|
|
724
|
+
{
|
|
725
|
+
text: "NOVA is genuinely the only store I trust for cutting-edge pieces. The curation is unreal — every drop feels like it was made for me.",
|
|
726
|
+
name: "Aria M.",
|
|
727
|
+
handle: "@aria.makes",
|
|
728
|
+
initials: "AM",
|
|
729
|
+
stars: 5,
|
|
730
|
+
},
|
|
731
|
+
{
|
|
732
|
+
text: "Delivery was faster than I expected, and the packaging feels like opening a gift. Even my friends are jealous of the unboxing experience.",
|
|
733
|
+
name: "Jordan K.",
|
|
734
|
+
handle: "@jkvisuals",
|
|
735
|
+
initials: "JK",
|
|
736
|
+
stars: 5,
|
|
737
|
+
},
|
|
738
|
+
{
|
|
739
|
+
text: "I've been shopping fashion for 10 years and NOVA just changed the game. The Nebula Runner is the most comfortable sneaker I've ever owned.",
|
|
740
|
+
name: "Priya S.",
|
|
741
|
+
handle: "@priyastyle_",
|
|
742
|
+
initials: "PS",
|
|
743
|
+
stars: 5,
|
|
744
|
+
},
|
|
745
|
+
];
|
|
746
|
+
|
|
747
|
+
document.getElementById("testimonialsGrid").innerHTML = testimonials
|
|
748
|
+
.map(
|
|
749
|
+
(t) => `
|
|
750
|
+
<div class="testimonial-card">
|
|
751
|
+
<div class="testimonial-quote">"</div>
|
|
752
|
+
<p class="testimonial-text">${t.text}</p>
|
|
753
|
+
<div class="testimonial-author">
|
|
754
|
+
<div class="t-avatar">${t.initials}</div>
|
|
755
|
+
<div>
|
|
756
|
+
<div class="t-name">${t.name}</div>
|
|
757
|
+
<div class="t-handle">${t.handle} · ${"★".repeat(t.stars)}</div>
|
|
758
|
+
</div>
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
`,
|
|
762
|
+
)
|
|
763
|
+
.join("");
|
|
764
|
+
|
|
765
|
+
/* ── Marquee ── */
|
|
766
|
+
const trendingItems = [
|
|
767
|
+
"Nebula Runner",
|
|
768
|
+
"Aurora Dress",
|
|
769
|
+
"Eclipse Trench",
|
|
770
|
+
"Prism Skirt",
|
|
771
|
+
"Void Pants",
|
|
772
|
+
"Crystal Drops",
|
|
773
|
+
"Supernova Hoodie",
|
|
774
|
+
"Photon Blazer",
|
|
775
|
+
"Orbital Shades",
|
|
776
|
+
"Starmap Tote",
|
|
777
|
+
];
|
|
778
|
+
const marquee = document.getElementById("marquee");
|
|
779
|
+
const all = [...trendingItems, ...trendingItems];
|
|
780
|
+
marquee.innerHTML = all
|
|
781
|
+
.map(
|
|
782
|
+
(item, i) => `
|
|
783
|
+
<div class="marquee-item">
|
|
784
|
+
<span class="marquee-dot"></span>
|
|
785
|
+
Trending: <span>${item}</span>
|
|
786
|
+
</div>
|
|
787
|
+
`,
|
|
788
|
+
)
|
|
789
|
+
.join("");
|
|
790
|
+
|
|
791
|
+
/* ── Category filter ── */
|
|
792
|
+
document.querySelectorAll(".chip").forEach((btn) => {
|
|
793
|
+
btn.addEventListener("click", () => {
|
|
794
|
+
document
|
|
795
|
+
.querySelectorAll(".chip")
|
|
796
|
+
.forEach((b) => b.classList.remove("chip-primary"));
|
|
797
|
+
btn.classList.add("chip-primary");
|
|
798
|
+
});
|
|
799
|
+
});
|
|
800
|
+
|
|
801
|
+
/* ── Wishlist toggle ── */
|
|
802
|
+
document.addEventListener("click", (e) => {
|
|
803
|
+
if (e.target.classList.contains("btn-wishlist")) {
|
|
804
|
+
e.target.textContent =
|
|
805
|
+
e.target.textContent === "♡" ? "♥" : "♡";
|
|
806
|
+
e.target.style.color =
|
|
807
|
+
e.target.textContent === "♥" ? "#f87171" : "";
|
|
808
|
+
}
|
|
809
|
+
});
|
|
810
|
+
</script>
|
|
811
|
+
</body>
|
|
812
|
+
</html>
|