@howssatoshi/quantumcss 1.8.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +2 -2
- package/examples/analytics-dashboard.html +6 -11
- package/examples/blog-template.html +16 -15
- package/examples/chat-messaging.html +33 -44
- package/examples/email-template.html +2 -2
- package/examples/gaming-template.html +148 -17
- package/examples/gradient-test.html +5 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +89 -116
- package/examples/kitchen-sink.html +49 -1
- package/examples/music-streaming.html +3 -3
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +121 -563
- package/examples/shopping/index.html +514 -327
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +4 -3
- package/examples/travel/index.html +170 -13
- package/examples/video-streaming.html +10 -3
- package/package.json +1 -1
- package/src/defaults.js +1 -0
- package/src/generator.js +12 -3
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +106 -58
- package/src/styles/quantum-components.css +550 -265
- package/src/styles/starlight.css +327 -99
- package/dist/index.html +0 -232
|
@@ -1,338 +1,525 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en" data-theme="dark">
|
|
3
3
|
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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>
|
|
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 href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" />
|
|
9
|
+
|
|
10
|
+
<!-- Quantum CSS Framework -->
|
|
11
|
+
<link rel="stylesheet" href="../../dist/quantum.min.css" />
|
|
12
|
+
|
|
13
|
+
<!-- Custom Nova Shop Styles -->
|
|
14
|
+
<link rel="stylesheet" href="nova-shop.css" />
|
|
122
15
|
</head>
|
|
123
|
-
<body
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<!-- ── Starfield ── -->
|
|
19
|
+
<div class="stars-bg" id="stars"></div>
|
|
20
|
+
|
|
21
|
+
<div class="site-wrapper">
|
|
22
|
+
|
|
23
|
+
<!-- ══════════ NAVBAR ══════════ -->
|
|
24
|
+
<nav class="starlight-navbar">
|
|
25
|
+
<div class="container mx-auto px-6 h-20 flex items-center justify-between">
|
|
26
|
+
<!-- Brand -->
|
|
27
|
+
<a href="#" class="nav-brand text-gradient-starlight">NOVA</a>
|
|
28
|
+
|
|
29
|
+
<!-- Nav links -->
|
|
30
|
+
<ul class="hidden md:flex items-center gap-8 nav-links">
|
|
31
|
+
<li><a href="#">New In</a></li>
|
|
32
|
+
<li><a href="#">Collections</a></li>
|
|
33
|
+
<li><a href="#">Sale</a></li>
|
|
34
|
+
<li><a href="#">Brands</a></li>
|
|
35
|
+
<li><a href="#">About</a></li>
|
|
36
|
+
</ul>
|
|
37
|
+
|
|
38
|
+
<!-- Actions -->
|
|
39
|
+
<div class="flex items-center gap-3">
|
|
40
|
+
<div class="search-bar-wrap">
|
|
41
|
+
<span class="search-icon-pos">
|
|
42
|
+
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
43
|
+
</span>
|
|
44
|
+
<input class="search-bar-input" type="search" placeholder="Search products…" />
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<button class="icon-btn" id="themeToggle" title="Toggle Theme">
|
|
48
|
+
<svg class="sun-icon hidden" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
49
|
+
<svg class="moon-icon hidden" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
50
|
+
<svg class="system-icon hidden" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
|
|
51
|
+
</button>
|
|
52
|
+
|
|
53
|
+
<button class="icon-btn">
|
|
54
|
+
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
|
55
|
+
</button>
|
|
56
|
+
|
|
57
|
+
<button class="icon-btn" style="position:relative">
|
|
58
|
+
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
|
59
|
+
<span class="badge-count absolute -top-1 -right-1">3</span>
|
|
60
|
+
</button>
|
|
61
|
+
|
|
62
|
+
<button class="icon-btn">
|
|
63
|
+
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</nav>
|
|
68
|
+
|
|
69
|
+
<!-- ══════════ HERO ══════════ -->
|
|
70
|
+
<section class="hero">
|
|
71
|
+
<div class="hero-glow"></div>
|
|
72
|
+
<div class="hero-content">
|
|
73
|
+
<div class="hero-eyebrow ani-slide-up">
|
|
74
|
+
<span></span>
|
|
75
|
+
New Collection — Summer 2025
|
|
76
|
+
</div>
|
|
77
|
+
<h1 class="ani-slide-up ani-stagger-1">
|
|
78
|
+
Dress the
|
|
79
|
+
<span class="text-gradient-starlight">Future.</span><br>
|
|
80
|
+
Own the Moment.
|
|
81
|
+
</h1>
|
|
82
|
+
<p class="hero-sub ani-slide-up ani-stagger-2">
|
|
83
|
+
Curated fashion from tomorrow's most iconic labels.
|
|
84
|
+
Pieces that define who you are before the world catches up.
|
|
85
|
+
</p>
|
|
86
|
+
<div class="flex flex-wrap justify-center gap-4 ani-slide-up ani-stagger-3">
|
|
87
|
+
<button class="btn-starlight" style="padding:.75rem 2rem; font-size:.95rem; border-radius:9999px;">
|
|
88
|
+
Shop Now
|
|
89
|
+
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
90
|
+
</button>
|
|
91
|
+
<button class="btn-outline-glow">
|
|
92
|
+
Explore Collections
|
|
93
|
+
</button>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="hero-stats ani-slide-up ani-stagger-4">
|
|
96
|
+
<div>
|
|
97
|
+
<div class="hero-stat-value">12K+</div>
|
|
98
|
+
<div class="hero-stat-label">Happy Customers</div>
|
|
99
|
+
</div>
|
|
100
|
+
<div>
|
|
101
|
+
<div class="hero-stat-value">340+</div>
|
|
102
|
+
<div class="hero-stat-label">Brands</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div>
|
|
105
|
+
<div class="hero-stat-value">4.9★</div>
|
|
106
|
+
<div class="hero-stat-label">Avg. Rating</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</section>
|
|
111
|
+
|
|
112
|
+
<!-- ══════════ TRUST BAR ══════════ -->
|
|
113
|
+
<div class="trust-section">
|
|
114
|
+
<div class="container">
|
|
115
|
+
<div class="flex flex-wrap justify-around gap-8">
|
|
116
|
+
<div class="trust-item">
|
|
117
|
+
<span class="trust-icon">🚀</span>
|
|
118
|
+
<div>
|
|
119
|
+
<div class="trust-text-title">Express Shipping</div>
|
|
120
|
+
<div class="trust-text-sub">Free on orders over $75</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="trust-item">
|
|
124
|
+
<span class="trust-icon">🔄</span>
|
|
125
|
+
<div>
|
|
126
|
+
<div class="trust-text-title">Free Returns</div>
|
|
127
|
+
<div class="trust-text-sub">Within 30 days, no hassle</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="trust-item">
|
|
131
|
+
<span class="trust-icon">🔐</span>
|
|
132
|
+
<div>
|
|
133
|
+
<div class="trust-text-title">Secure Payment</div>
|
|
134
|
+
<div class="trust-text-sub">256-bit SSL encryption</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="trust-item">
|
|
138
|
+
<span class="trust-icon">🌍</span>
|
|
139
|
+
<div>
|
|
140
|
+
<div class="trust-text-title">Ships Worldwide</div>
|
|
141
|
+
<div class="trust-text-sub">Over 120 countries</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<!-- ══════════ CATEGORIES ══════════ -->
|
|
149
|
+
<section class="categories-section">
|
|
150
|
+
<div class="container">
|
|
151
|
+
<div class="section-label">Browse by category</div>
|
|
152
|
+
<div class="categories-scroll">
|
|
153
|
+
<button class="cat-pill active"><span class="cat-pill-icon">✨</span> All</button>
|
|
154
|
+
<button class="cat-pill"><span class="cat-pill-icon">👗</span> Dresses</button>
|
|
155
|
+
<button class="cat-pill"><span class="cat-pill-icon">👟</span> Sneakers</button>
|
|
156
|
+
<button class="cat-pill"><span class="cat-pill-icon">🧥</span> Outerwear</button>
|
|
157
|
+
<button class="cat-pill"><span class="cat-pill-icon">👜</span> Bags</button>
|
|
158
|
+
<button class="cat-pill"><span class="cat-pill-icon">💍</span> Jewellery</button>
|
|
159
|
+
<button class="cat-pill"><span class="cat-pill-icon">🧢</span> Accessories</button>
|
|
160
|
+
<button class="cat-pill"><span class="cat-pill-icon">🩱</span> Swimwear</button>
|
|
161
|
+
<button class="cat-pill"><span class="cat-pill-icon">🎽</span> Activewear</button>
|
|
162
|
+
<button class="cat-pill"><span class="cat-pill-icon">🕶️</span> Eyewear</button>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
</section>
|
|
166
|
+
|
|
167
|
+
<!-- ══════════ TRENDING MARQUEE ══════════ -->
|
|
168
|
+
<div class="trending-section">
|
|
169
|
+
<div class="marquee-track" id="marquee">
|
|
170
|
+
<!-- items duplicated in JS -->
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<!-- ══════════ PRODUCTS ══════════ -->
|
|
175
|
+
<section class="products-section">
|
|
176
|
+
<div class="container">
|
|
177
|
+
<div class="section-header">
|
|
178
|
+
<div>
|
|
179
|
+
<div class="section-label">Hand-picked for you</div>
|
|
180
|
+
<h2 class="section-title">New Arrivals</h2>
|
|
181
|
+
</div>
|
|
182
|
+
<a href="#" class="view-all-link">
|
|
183
|
+
View all
|
|
184
|
+
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
185
|
+
</a>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<div class="product-grid" id="productGrid"></div>
|
|
127
189
|
</div>
|
|
190
|
+
</section>
|
|
191
|
+
|
|
192
|
+
<!-- ══════════ FEATURED BANNERS ══════════ -->
|
|
193
|
+
<section class="featured-section">
|
|
194
|
+
<div class="container">
|
|
195
|
+
<div class="section-label" style="margin-bottom:1.25rem">Spotlight</div>
|
|
196
|
+
<div class="featured-grid">
|
|
197
|
+
|
|
198
|
+
<div class="featured-card">
|
|
199
|
+
<div class="featured-card-bg featured-bg-1">
|
|
200
|
+
<div class="featured-glow-1"></div>
|
|
201
|
+
<div class="featured-float-icon" style="top:30%;left:60%;">👟</div>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="featured-content">
|
|
204
|
+
<div class="featured-eyebrow">New Drop — Limited Edition</div>
|
|
205
|
+
<h3 class="featured-title">Future-Sole<br>Sneaker Series</h3>
|
|
206
|
+
<p class="featured-desc">Ultra-light composites. Cosmic colourways. Zero-break-in comfort.</p>
|
|
207
|
+
<button class="btn-starlight" style="border-radius:9999px;">Shop Kicks →</button>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
128
210
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<div class="
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
211
|
+
<div class="featured-card">
|
|
212
|
+
<div class="featured-card-bg featured-bg-2">
|
|
213
|
+
<div class="featured-glow-2"></div>
|
|
214
|
+
<div class="featured-float-icon" style="top:25%;left:55%;">💫</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="featured-content">
|
|
217
|
+
<div class="featured-eyebrow" style="color:var(--q-color-starlight-peach)">Up to 60% Off</div>
|
|
218
|
+
<h3 class="featured-title">Summer<br>Edit Sale</h3>
|
|
219
|
+
<p class="featured-desc">The season's most wanted pieces, now at their best prices.</p>
|
|
220
|
+
<button class="btn-starlight" style="background:linear-gradient(135deg,#ff7e5f,#ffb38a);border-radius:9999px;">Grab a Deal →</button>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</section>
|
|
227
|
+
|
|
228
|
+
<!-- ══════════ BESTSELLERS ══════════ -->
|
|
229
|
+
<section class="products-section" style="padding-top:0">
|
|
230
|
+
<div class="container">
|
|
231
|
+
<div class="section-header">
|
|
232
|
+
<div>
|
|
233
|
+
<div class="section-label">Community favourites</div>
|
|
234
|
+
<h2 class="section-title">Best Sellers</h2>
|
|
235
|
+
</div>
|
|
236
|
+
<a href="#" class="view-all-link">View all <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="product-grid" id="bestsellersGrid"></div>
|
|
239
|
+
</div>
|
|
240
|
+
</section>
|
|
241
|
+
|
|
242
|
+
<!-- ══════════ TESTIMONIALS ══════════ -->
|
|
243
|
+
<section class="testimonials-section">
|
|
244
|
+
<div class="container">
|
|
245
|
+
<div class="section-header">
|
|
246
|
+
<div>
|
|
247
|
+
<div class="section-label">What they say</div>
|
|
248
|
+
<h2 class="section-title">Loved by thousands</h2>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
<div class="testimonials-grid" id="testimonialsGrid"></div>
|
|
252
|
+
</div>
|
|
253
|
+
</section>
|
|
254
|
+
|
|
255
|
+
<!-- ══════════ NEWSLETTER ══════════ -->
|
|
256
|
+
<section class="newsletter-section">
|
|
257
|
+
<div class="container">
|
|
258
|
+
<div class="newsletter-card">
|
|
259
|
+
<div class="newsletter-bg-glow"></div>
|
|
260
|
+
<div class="hero-eyebrow" style="display:inline-flex;margin-bottom:1.25rem;">
|
|
261
|
+
<span></span> Exclusive Access
|
|
151
262
|
</div>
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
<div class="
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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>
|
|
263
|
+
<h2 class="newsletter-title">
|
|
264
|
+
Stay ahead of the<br><span class="text-gradient-starlight">curve.</span>
|
|
265
|
+
</h2>
|
|
266
|
+
<p class="newsletter-sub">Early access, secret drops, and 10% off your first order.</p>
|
|
267
|
+
<div class="newsletter-form">
|
|
268
|
+
<input class="newsletter-input" type="email" placeholder="your@email.com" />
|
|
269
|
+
<button class="btn-starlight" style="border-radius:9999px;padding:.65rem 1.75rem;">
|
|
270
|
+
Subscribe →
|
|
271
|
+
</button>
|
|
172
272
|
</div>
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
</
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
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>
|
|
273
|
+
<p style="font-size:.72rem;color:var(--q-text-muted);margin-top:1rem;">No spam ever. Unsubscribe anytime.</p>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</section>
|
|
277
|
+
|
|
278
|
+
<!-- ══════════ FOOTER ══════════ -->
|
|
279
|
+
<footer class="starlight-footer">
|
|
280
|
+
<div class="container">
|
|
281
|
+
<div class="footer-grid">
|
|
282
|
+
<div>
|
|
283
|
+
<div class="footer-brand text-gradient-starlight">NOVA</div>
|
|
284
|
+
<p class="footer-desc">The destination for forward-thinking fashion. We curate the best from the world's most exciting brands — so you never have to compromise.</p>
|
|
285
|
+
<div class="footer-socials" style="margin-top:1.25rem;">
|
|
286
|
+
<a class="social-btn" href="#">𝕏</a>
|
|
287
|
+
<a class="social-btn" href="#">ig</a>
|
|
288
|
+
<a class="social-btn" href="#">in</a>
|
|
289
|
+
<a class="social-btn" href="#">yt</a>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
<div>
|
|
293
|
+
<div class="footer-col-title">Shop</div>
|
|
294
|
+
<ul class="footer-links">
|
|
295
|
+
<li><a href="#">New Arrivals</a></li>
|
|
296
|
+
<li><a href="#">Best Sellers</a></li>
|
|
297
|
+
<li><a href="#">Sale</a></li>
|
|
298
|
+
<li><a href="#">Brands</a></li>
|
|
299
|
+
<li><a href="#">Collections</a></li>
|
|
300
|
+
</ul>
|
|
301
|
+
</div>
|
|
302
|
+
<div>
|
|
303
|
+
<div class="footer-col-title">Help</div>
|
|
304
|
+
<ul class="footer-links">
|
|
305
|
+
<li><a href="#">Shipping & Returns</a></li>
|
|
306
|
+
<li><a href="#">Size Guide</a></li>
|
|
307
|
+
<li><a href="#">Track Order</a></li>
|
|
308
|
+
<li><a href="#">FAQ</a></li>
|
|
309
|
+
<li><a href="#">Contact Us</a></li>
|
|
310
|
+
</ul>
|
|
282
311
|
</div>
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
<
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
312
|
+
<div>
|
|
313
|
+
<div class="footer-col-title">Company</div>
|
|
314
|
+
<ul class="footer-links">
|
|
315
|
+
<li><a href="#">About NOVA</a></li>
|
|
316
|
+
<li><a href="#">Sustainability</a></li>
|
|
317
|
+
<li><a href="#">Careers</a></li>
|
|
318
|
+
<li><a href="#">Press</a></li>
|
|
319
|
+
<li><a href="#">Affiliates</a></li>
|
|
320
|
+
</ul>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
<hr class="footer-divider" />
|
|
324
|
+
<div class="footer-bottom">
|
|
325
|
+
<span>© 2025 NOVA Commerce Inc. All rights reserved.</span>
|
|
326
|
+
<span style="display:flex;gap:1.5rem;">
|
|
327
|
+
<a href="#" style="color:inherit;text-decoration:none;">Privacy</a>
|
|
328
|
+
<a href="#" style="color:inherit;text-decoration:none;">Terms</a>
|
|
329
|
+
<a href="#" style="color:inherit;text-decoration:none;">Cookies</a>
|
|
330
|
+
</span>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</footer>
|
|
334
|
+
|
|
335
|
+
</div><!-- /.site-wrapper -->
|
|
336
|
+
|
|
337
|
+
<!-- Floating cart -->
|
|
338
|
+
<div class="floating-cta">
|
|
339
|
+
<button class="floating-cart-btn">
|
|
340
|
+
🛒 Cart (3)
|
|
341
|
+
</button>
|
|
342
|
+
</div>
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
<script>
|
|
346
|
+
/* ── Stars ── */
|
|
347
|
+
const starsEl = document.getElementById('stars');
|
|
348
|
+
for (let i = 0; i < 120; i++) {
|
|
349
|
+
const s = document.createElement('div');
|
|
350
|
+
s.className = 'star';
|
|
351
|
+
const size = Math.random() * 2.5 + 0.5;
|
|
352
|
+
s.style.cssText = `
|
|
353
|
+
width:${size}px; height:${size}px;
|
|
354
|
+
left:${Math.random()*100}%; top:${Math.random()*100}%;
|
|
355
|
+
--d:${2+Math.random()*5}s;
|
|
356
|
+
animation-delay:${Math.random()*5}s;
|
|
357
|
+
`;
|
|
358
|
+
starsEl.appendChild(s);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* ── Product data ── */
|
|
362
|
+
const products = [
|
|
363
|
+
{ name: 'Aurora Silk Dress', brand: 'Lumière', price: 289, original: null, rating: 4.8, reviews: 214, emoji: '👗', bg: 'linear-gradient(135deg,#1a0a3e,#0d1f3e)', colors: ['#00d4ff','#ff7e5f','#1e293b'], badges: ['new'] },
|
|
364
|
+
{ name: 'Nebula Runner Pro', brand: 'Voidwear', price: 179, original: 229, rating: 4.9, reviews: 847, emoji: '👟', bg: 'linear-gradient(135deg,#0d2b1a,#1a1052)', colors: ['#10b981','#3b82f6','#f59e0b'], badges: ['sale','hot'] },
|
|
365
|
+
{ name: 'Quantum Puffer Vest', brand: 'Arctis', price: 195, original: null, rating: 4.7, reviews: 133, emoji: '🦺', bg: 'linear-gradient(135deg,#1f0a0a,#2d1a0a)', colors: ['#ef4444','#f59e0b','#1e293b'], badges: ['new'] },
|
|
366
|
+
{ name: 'Starmap Tote Bag', brand: 'Cosmo', price: 145, original: 195, rating: 4.8, reviews: 529, emoji: '👜', bg: 'linear-gradient(135deg,#080a2d,#1a0a3e)', colors: ['#8b5cf6','#ec4899','#f1f5f9'], badges: ['sale'] },
|
|
367
|
+
{ name: 'Photon Blazer', brand: 'Lumière', price: 349, original: null, rating: 4.6, reviews: 88, emoji: '🧥', bg: 'linear-gradient(135deg,#0a1f1a,#0d1f3e)', colors: ['#00d4ff','#1e293b'], badges: ['new'] },
|
|
368
|
+
{ name: 'Crystal Drop Earrings', brand: 'Stellaris', price: 89, original: 120, rating: 4.9, reviews: 302, emoji: '💎', bg: 'linear-gradient(135deg,#1a0a2d,#0a1a1f)', colors: ['#e2e8f0','#fbbf24','#ec4899'], badges: ['sale'] },
|
|
369
|
+
{ name: 'Void Linen Pants', brand: 'Voidwear', price: 165, original: null, rating: 4.5, reviews: 176, emoji: '👖', bg: 'linear-gradient(135deg,#0d1a0d,#1a1a0a)', colors: ['#1e293b','#f1f5f9','#78716c'], badges: [] },
|
|
370
|
+
{ name: 'Orbital Sunglasses', brand: 'Eclipse', price: 215, original: 269, rating: 4.8, reviews: 441, emoji: '🕶️', bg: 'linear-gradient(135deg,#1a0a0a,#1a1052)', colors: ['#000','#fbbf24','#ec4899'], badges: ['hot','sale'] },
|
|
371
|
+
];
|
|
372
|
+
|
|
373
|
+
const bestsellers = [
|
|
374
|
+
{ name: 'Supernova Hoodie', brand: 'Voidwear', price: 139, original: null, rating: 4.9, reviews: 1203, emoji: '🌟', bg: 'linear-gradient(135deg,#0a0a2d,#2d0a1a)', colors: ['#8b5cf6','#00d4ff','#f87171'], badges: ['hot'] },
|
|
375
|
+
{ name: 'Eclipse Trench Coat', brand: 'Arctis', price: 495, original: 629, rating: 4.8, reviews: 389, emoji: '🌑', bg: 'linear-gradient(135deg,#0a0a0a,#1a0a2d)', colors: ['#000','#1e293b','#ffb38a'], badges: ['sale'] },
|
|
376
|
+
{ name: 'Prism Mini Skirt', brand: 'Lumière', price: 115, original: null, rating: 4.7, reviews: 672, emoji: '🌈', bg: 'linear-gradient(135deg,#1a0a3e,#0a2d1a)', colors: ['#ec4899','#f59e0b','#00d4ff'], badges: ['new'] },
|
|
377
|
+
{ name: 'Gravity Belt', brand: 'Cosmo', price: 79, original: 99, rating: 4.6, reviews: 218, emoji: '⚡', bg: 'linear-gradient(135deg,#1f1a0a,#0a1a2d)', colors: ['#f59e0b','#1e293b','#f87171'], badges: ['sale'] },
|
|
378
|
+
];
|
|
379
|
+
|
|
380
|
+
function buildCard(p) {
|
|
381
|
+
const badgeHtml = p.badges.map(b => {
|
|
382
|
+
let variant = 'secondary';
|
|
383
|
+
if (b === 'new') variant = 'primary';
|
|
384
|
+
if (b === 'sale') variant = 'error';
|
|
385
|
+
if (b === 'hot') variant = 'warning';
|
|
386
|
+
return `<span class="badge badge-${variant}">${b}</span>`;
|
|
387
|
+
}).join('');
|
|
388
|
+
|
|
389
|
+
const colorHtml = p.colors.map((c, i) =>
|
|
390
|
+
`<span class="color-swatch ${i===0?'active':''}" style="background:${c}" title="${c}"></span>`
|
|
391
|
+
).join('');
|
|
392
|
+
const pct = p.original ? Math.round((1 - p.price/p.original)*100) : 0;
|
|
393
|
+
|
|
394
|
+
return `
|
|
395
|
+
<div class="product-card">
|
|
396
|
+
<div class="product-image-wrap">
|
|
397
|
+
<div class="product-img-placeholder" style="background:${p.bg}">
|
|
398
|
+
${p.emoji}
|
|
399
|
+
</div>
|
|
400
|
+
<div class="product-badge-wrap">${badgeHtml}</div>
|
|
401
|
+
<div class="product-quick-add">
|
|
402
|
+
<button class="btn-quick-add">+ Add to Cart</button>
|
|
403
|
+
<button class="btn-wishlist">♡</button>
|
|
404
|
+
</div>
|
|
321
405
|
</div>
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
406
|
+
<div class="product-info">
|
|
407
|
+
<div class="product-brand">${p.brand}</div>
|
|
408
|
+
<div class="product-name">${p.name}</div>
|
|
409
|
+
<div class="product-rating">
|
|
410
|
+
<span class="stars">${'★'.repeat(Math.floor(p.rating))}${'☆'.repeat(5-Math.floor(p.rating))}</span>
|
|
411
|
+
<span class="rating-count">(${p.reviews.toLocaleString()})</span>
|
|
412
|
+
</div>
|
|
413
|
+
<div class="product-price-row">
|
|
414
|
+
<span class="price-current">$${p.price}</span>
|
|
415
|
+
${p.original ? `<span class="price-original">$${p.original}</span><span class="price-discount">−${pct}%</span>` : ''}
|
|
416
|
+
</div>
|
|
417
|
+
<div class="product-colors">${colorHtml}</div>
|
|
418
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
`;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
document.getElementById('productGrid').innerHTML = products.map(buildCard).join('');
|
|
424
|
+
document.getElementById('bestsellersGrid').innerHTML = bestsellers.map(buildCard).join('');
|
|
425
|
+
|
|
426
|
+
/* ── Testimonials ── */
|
|
427
|
+
const testimonials = [
|
|
428
|
+
{ 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.", name: 'Aria M.', handle: '@aria.makes', initials: 'AM', stars: 5 },
|
|
429
|
+
{ text: "Delivery was faster than I expected, and the packaging feels like opening a gift. Even my friends are jealous of the unboxing experience.", name: 'Jordan K.', handle: '@jkvisuals', initials: 'JK', stars: 5 },
|
|
430
|
+
{ 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.", name: 'Priya S.', handle: '@priyastyle_', initials: 'PS', stars: 5 },
|
|
431
|
+
];
|
|
432
|
+
|
|
433
|
+
document.getElementById('testimonialsGrid').innerHTML = testimonials.map(t => `
|
|
434
|
+
<div class="testimonial-card">
|
|
435
|
+
<div class="testimonial-quote">"</div>
|
|
436
|
+
<p class="testimonial-text">${t.text}</p>
|
|
437
|
+
<div class="testimonial-author">
|
|
438
|
+
<div class="t-avatar">${t.initials}</div>
|
|
439
|
+
<div>
|
|
440
|
+
<div class="t-name">${t.name}</div>
|
|
441
|
+
<div class="t-handle">${t.handle} · ${'★'.repeat(t.stars)}</div>
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
`).join('');
|
|
446
|
+
|
|
447
|
+
/* ── Marquee ── */
|
|
448
|
+
const trendingItems = [
|
|
449
|
+
'Nebula Runner', 'Aurora Dress', 'Eclipse Trench', 'Prism Skirt',
|
|
450
|
+
'Void Pants', 'Crystal Drops', 'Supernova Hoodie', 'Photon Blazer',
|
|
451
|
+
'Orbital Shades', 'Starmap Tote'
|
|
452
|
+
];
|
|
453
|
+
const marquee = document.getElementById('marquee');
|
|
454
|
+
const all = [...trendingItems, ...trendingItems];
|
|
455
|
+
marquee.innerHTML = all.map((item, i) => `
|
|
456
|
+
<div class="marquee-item">
|
|
457
|
+
<span class="marquee-dot"></span>
|
|
458
|
+
Trending: <span>${item}</span>
|
|
459
|
+
</div>
|
|
460
|
+
`).join('');
|
|
461
|
+
|
|
462
|
+
/* ── Category filter ── */
|
|
463
|
+
document.querySelectorAll('.cat-pill').forEach(btn => {
|
|
464
|
+
btn.addEventListener('click', () => {
|
|
465
|
+
document.querySelectorAll('.cat-pill').forEach(b => b.classList.remove('active'));
|
|
466
|
+
btn.classList.add('active');
|
|
467
|
+
});
|
|
468
|
+
});
|
|
469
|
+
|
|
470
|
+
/* ── Wishlist toggle ── */
|
|
471
|
+
document.addEventListener('click', e => {
|
|
472
|
+
if (e.target.classList.contains('btn-wishlist')) {
|
|
473
|
+
e.target.textContent = e.target.textContent === '♡' ? '♥' : '♡';
|
|
474
|
+
e.target.style.color = e.target.textContent === '♥' ? '#f87171' : '';
|
|
475
|
+
}
|
|
476
|
+
});
|
|
477
|
+
|
|
478
|
+
/* ── Theme Toggle (3-State: Light, Dark, System) ── */
|
|
479
|
+
const themeToggle = document.getElementById('themeToggle');
|
|
480
|
+
const sunIcon = themeToggle.querySelector('.sun-icon');
|
|
481
|
+
const moonIcon = themeToggle.querySelector('.moon-icon');
|
|
482
|
+
const systemIcon = themeToggle.querySelector('.system-icon');
|
|
483
|
+
|
|
484
|
+
const modes = ['light', 'dark', 'system'];
|
|
485
|
+
|
|
486
|
+
const getNextMode = (current) => {
|
|
487
|
+
const idx = modes.indexOf(current);
|
|
488
|
+
return modes[(idx + 1) % modes.length];
|
|
489
|
+
};
|
|
490
|
+
|
|
491
|
+
const updateUI = (mode) => {
|
|
492
|
+
// Show correct icon
|
|
493
|
+
sunIcon.classList.toggle('hidden', mode !== 'light');
|
|
494
|
+
moonIcon.classList.toggle('hidden', mode !== 'dark');
|
|
495
|
+
systemIcon.classList.toggle('hidden', mode !== 'system');
|
|
496
|
+
|
|
497
|
+
// Apply theme
|
|
498
|
+
let themeToApply = mode;
|
|
499
|
+
if (mode === 'system') {
|
|
500
|
+
themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
501
|
+
}
|
|
502
|
+
document.documentElement.setAttribute('data-theme', themeToApply);
|
|
503
|
+
};
|
|
504
|
+
|
|
505
|
+
themeToggle.addEventListener('click', () => {
|
|
506
|
+
const currentMode = localStorage.getItem('nova-mode') || 'system';
|
|
507
|
+
const nextMode = getNextMode(currentMode);
|
|
508
|
+
|
|
509
|
+
localStorage.setItem('nova-mode', nextMode);
|
|
510
|
+
updateUI(nextMode);
|
|
511
|
+
});
|
|
512
|
+
|
|
513
|
+
// OS Preference Listener
|
|
514
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
515
|
+
if ((localStorage.getItem('nova-mode') || 'system') === 'system') {
|
|
516
|
+
updateUI('system');
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
// Initialize
|
|
521
|
+
const savedMode = localStorage.getItem('nova-mode') || 'system';
|
|
522
|
+
updateUI(savedMode);
|
|
523
|
+
</script>
|
|
337
524
|
</body>
|
|
338
525
|
</html>
|