@howssatoshi/quantumcss 1.4.2 → 1.5.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 +8 -7
- package/dist/quantum.min.css +1 -4678
- package/examples/blog-template.html +268 -0
- package/examples/gaming-template.html +355 -0
- package/examples/images/starlight.jpg +0 -0
- package/examples/index.html +138 -0
- package/examples/kitchen-sink.html +1012 -0
- package/examples/news-template.html +320 -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 +330 -0
- package/examples/starlight.html +161 -0
- package/examples/theme-test.html +174 -0
- package/examples/travel/index.html +254 -0
- package/examples/verify_fixes.html +52 -0
- package/examples/verify_presets.html +32 -0
- package/package.json +8 -1
- package/src/generator.js +19 -8
- package/src/starlight.js +406 -15
- package/src/styles/quantum-animations.css +3 -2
- package/src/styles/quantum-base.css +295 -91
- package/src/styles/quantum-components.css +47 -47
- package/src/styles/quantum-responsive.css +5 -4
- package/src/styles/starlight.css +184 -184
|
@@ -0,0 +1,268 @@
|
|
|
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 Blog Template</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<script src="../src/starlight.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
/* Theme Toggle Styling */
|
|
11
|
+
.theme-toggle {
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
width: 2.5rem;
|
|
14
|
+
height: 2.5rem;
|
|
15
|
+
border-radius: 50%;
|
|
16
|
+
transition: background 0.3s ease;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
flex-shrink: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.theme-toggle:hover {
|
|
24
|
+
background: rgba(255, 255, 255, 0.1);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
body.light-mode .theme-toggle:hover {
|
|
28
|
+
background: rgba(0, 0, 0, 0.05);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.sun-icon { display: none; }
|
|
32
|
+
body.light-mode .sun-icon { display: block; }
|
|
33
|
+
body.light-mode .moon-icon { display: none; }
|
|
34
|
+
|
|
35
|
+
body.light-mode {
|
|
36
|
+
background-color: #f8fafc;
|
|
37
|
+
color: #1e293b;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
body.light-mode .text-white,
|
|
41
|
+
body.light-mode .text-primary,
|
|
42
|
+
body.light-mode h1,
|
|
43
|
+
body.light-mode h2,
|
|
44
|
+
body.light-mode h3,
|
|
45
|
+
body.light-mode h4 {
|
|
46
|
+
color: #0f172a !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
body.light-mode .text-secondary,
|
|
50
|
+
body.light-mode .text-muted,
|
|
51
|
+
body.light-mode .text-slate-300,
|
|
52
|
+
body.light-mode .prose,
|
|
53
|
+
body.light-mode .prose p {
|
|
54
|
+
color: #475569 !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
body.light-mode .glass {
|
|
58
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
59
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body.light-mode .starlight-card {
|
|
63
|
+
background: white;
|
|
64
|
+
border-color: #e2e8f0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
body.light-mode .code-window {
|
|
68
|
+
background: #f1f5f9;
|
|
69
|
+
border-color: #e2e8f0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
body.light-mode .code-window pre {
|
|
73
|
+
color: #1e293b;
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
76
|
+
</head>
|
|
77
|
+
<body class="bg-starlight-deep text-primary font-sans antialiased min-h-screen relative overflow-x-hidden">
|
|
78
|
+
|
|
79
|
+
<!-- Ambient Background Glows -->
|
|
80
|
+
<div class="starlight-stars">
|
|
81
|
+
<div class="star" style="top: 10%; left: 20%; --duration: 3s;"></div>
|
|
82
|
+
<div class="star" style="top: 30%; left: 80%; --duration: 4s;"></div>
|
|
83
|
+
<div class="star" style="top: 70%; left: 40%; --duration: 5s;"></div>
|
|
84
|
+
<div class="star" style="top: 50%; left: 10%; --duration: 3s;"></div>
|
|
85
|
+
<div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="fixed top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none">
|
|
89
|
+
<div class="absolute top-0 left-0 w-full h-full bg-gradient-radial from-primary opacity-10"></div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- Navigation -->
|
|
93
|
+
<nav class="sticky top-0 z-50 glass border-b border-white/10">
|
|
94
|
+
<div class="container mx-auto px-6 h-24 flex items-center justify-between">
|
|
95
|
+
<div class="flex items-center gap-4">
|
|
96
|
+
<div class="w-8 h-8 rounded-full bg-starlight animate-pulse"></div>
|
|
97
|
+
<span class="text-xl font-bold text-gradient-starlight">
|
|
98
|
+
StarlightBlog
|
|
99
|
+
</span>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="hidden md:flex items-center gap-8">
|
|
102
|
+
<a href="#" class="text-sm font-medium hover:text-primary transition-colors">Home</a>
|
|
103
|
+
<a href="#" class="text-sm font-medium hover:text-primary transition-colors">Articles</a>
|
|
104
|
+
<a href="#" class="text-sm font-medium hover:text-primary transition-colors">About</a>
|
|
105
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
106
|
+
<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>
|
|
107
|
+
<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>
|
|
108
|
+
</div>
|
|
109
|
+
<button class="btn-starlight btn-sm">Subscribe</button>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</nav>
|
|
113
|
+
|
|
114
|
+
<!-- Main Content -->
|
|
115
|
+
<main class="container mx-auto px-6 py-24">
|
|
116
|
+
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
117
|
+
|
|
118
|
+
<!-- Article Column -->
|
|
119
|
+
<article class="lg:col-span-8 space-y-16">
|
|
120
|
+
|
|
121
|
+
<!-- Header -->
|
|
122
|
+
<header class="space-y-8">
|
|
123
|
+
<div class="flex items-center gap-4 text-sm text-secondary">
|
|
124
|
+
<span class="badge badge-primary">Technology</span>
|
|
125
|
+
<span>•</span>
|
|
126
|
+
<time datetime="2026-02-01">February 1, 2026</time>
|
|
127
|
+
<span>•</span>
|
|
128
|
+
<span>5 min read</span>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<h1 class="text-5xl md:text-7xl font-black leading-tight text-white uppercase italic tracking-tighter">
|
|
132
|
+
The Future of <span class="text-gradient-starlight">UI Design</span>
|
|
133
|
+
</h1>
|
|
134
|
+
|
|
135
|
+
<div class="flex items-center gap-4 pt-4">
|
|
136
|
+
<img src="https://media.licdn.com/dms/image/v2/D5603AQFDAUK1PK6IzQ/profile-displayphoto-scale_100_100/B56Zml2ZwgJkAg-/0/1759424127811?e=1771459200&v=beta&t=kk4HtXlQ0REqJ5bz6yy3akXwYeEfvznb8PZ4hQg85u4" alt="Eric Yang" class="w-12 h-12 rounded-full border border-primary/30">
|
|
137
|
+
<div>
|
|
138
|
+
<p class="font-bold text-white uppercase text-xs tracking-widest">Eric Yang</p>
|
|
139
|
+
<p class="text-xs text-secondary font-medium">Frontend Architect</p>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</header>
|
|
143
|
+
|
|
144
|
+
<!-- Featured Image -->
|
|
145
|
+
<div class="rounded-2xl overflow-hidden glass p-1 group">
|
|
146
|
+
<div class="aspect-video bg-black/40 rounded-xl relative overflow-hidden">
|
|
147
|
+
<img src="images/starlight.jpg" alt="Starlight Aesthetics" class="w-full h-full object-cover">
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<!-- Content -->
|
|
152
|
+
<div class="prose max-w-none text-slate-300 text-lg leading-relaxed space-y-10">
|
|
153
|
+
<p class="text-2xl text-white font-medium">
|
|
154
|
+
Glassmorphism, neon glows, and deep gradients are making a comeback. Powered by modern CSS, they create an immersive experience.
|
|
155
|
+
</p>
|
|
156
|
+
|
|
157
|
+
<div class="space-y-6">
|
|
158
|
+
<h2 class="text-3xl font-black text-white uppercase italic tracking-tighter flex items-center gap-4">
|
|
159
|
+
<span class="w-2 h-10 bg-starlight rounded-full shadow-[0_0_15px_rgba(0,212,255,0.5)]"></span>
|
|
160
|
+
The Starlight Paradigm
|
|
161
|
+
</h2>
|
|
162
|
+
<p>
|
|
163
|
+
The "Starlight" aesthetic combines the ethereal beauty of space with the precision of modern interface design.
|
|
164
|
+
</p>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div class="glass p-8 rounded-2xl border-l-4 border-primary bg-primary/5 italic text-xl text-white">
|
|
168
|
+
"Design is not just what it looks like and feels like. Design is how it works... in zero gravity."
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div class="space-y-6">
|
|
172
|
+
<h2 class="text-3xl font-black text-white uppercase italic tracking-tighter">Code Interface</h2>
|
|
173
|
+
<div class="code-window">
|
|
174
|
+
<div class="code-window-header">
|
|
175
|
+
<div class="code-window-controls">
|
|
176
|
+
<div class="code-window-dot bg-red-500"></div>
|
|
177
|
+
<div class="code-window-dot bg-yellow-500"></div>
|
|
178
|
+
<div class="code-window-dot bg-green-500"></div>
|
|
179
|
+
</div>
|
|
180
|
+
<span class="code-window-title">quantum.config.json</span>
|
|
181
|
+
</div>
|
|
182
|
+
<pre class="p-8 text-sm overflow-x-auto bg-white/5"><code>{
|
|
183
|
+
"theme": {
|
|
184
|
+
"extend": {
|
|
185
|
+
"colors": {
|
|
186
|
+
"starlight": "#00d4ff"
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}</code></pre>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<!-- Tags -->
|
|
196
|
+
<div class="flex flex-wrap gap-2 pt-8 mt-12 border-t border-white/10">
|
|
197
|
+
<span class="text-muted text-sm mr-2">Tags:</span>
|
|
198
|
+
<a href="#" class="badge badge-secondary hover:bg-white/10 transition-colors">CSS</a>
|
|
199
|
+
<a href="#" class="badge badge-secondary hover:bg-white/10 transition-colors">Design</a>
|
|
200
|
+
<a href="#" class="badge badge-secondary hover:bg-white/10 transition-colors">QuantumCSS</a>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
</article>
|
|
204
|
+
|
|
205
|
+
<!-- Sidebar -->
|
|
206
|
+
<aside class="lg:col-span-4 space-y-8">
|
|
207
|
+
|
|
208
|
+
<!-- Author Card -->
|
|
209
|
+
<div class="starlight-card">
|
|
210
|
+
<h3 class="text-lg font-bold mb-4 text-white">About the Author</h3>
|
|
211
|
+
<p class="text-secondary text-sm mb-4">
|
|
212
|
+
Eric is a frontend wizard obsessed with making the web feel more organic and alive.
|
|
213
|
+
</p>
|
|
214
|
+
<button class="btn btn-outline w-full text-sm">Follow</button>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<!-- Newsletter -->
|
|
218
|
+
<div class="glass p-6 rounded-2xl glow-blue border border-white/5">
|
|
219
|
+
<h3 class="text-lg font-bold mb-2 text-white">Join the Newsletter</h3>
|
|
220
|
+
<p class="text-secondary text-sm mb-4">Get the latest design trends delivered to your inbox.</p>
|
|
221
|
+
<form class="space-y-3">
|
|
222
|
+
<input type="email" placeholder="your@email.com" class="input bg-black/20 border-white/10">
|
|
223
|
+
<button class="btn-starlight w-full">Subscribe</button>
|
|
224
|
+
</form>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<!-- Recommended -->
|
|
228
|
+
<div class="space-y-4">
|
|
229
|
+
<h3 class="text-xs font-bold text-muted uppercase tracking-wider">Recommended</h3>
|
|
230
|
+
|
|
231
|
+
<a href="#" class="block glass p-4 rounded-xl hover:bg-white/5 transition-colors group">
|
|
232
|
+
<h4 class="font-bold text-white group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
|
|
233
|
+
<p class="text-xs text-muted mt-1">Feb 1 • 4 min read</p>
|
|
234
|
+
</a>
|
|
235
|
+
|
|
236
|
+
<a href="#" class="block glass p-4 rounded-xl hover:bg-white/5 transition-colors group">
|
|
237
|
+
<h4 class="font-bold text-white group-hover:text-primary transition-colors">Modern CSS Variables</h4>
|
|
238
|
+
<p class="text-xs text-muted mt-1">Jan 28 • 8 min read</p>
|
|
239
|
+
</a>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
</aside>
|
|
243
|
+
|
|
244
|
+
</div>
|
|
245
|
+
</main>
|
|
246
|
+
|
|
247
|
+
<!-- Footer -->
|
|
248
|
+
<footer class="border-t border-white/10 mt-12 bg-black/20 backdrop-blur-md">
|
|
249
|
+
<div class="container mx-auto px-6 py-12">
|
|
250
|
+
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
251
|
+
<div class="text-muted text-sm">
|
|
252
|
+
© 2026 StarlightBlog. Powered by QuantumCSS.
|
|
253
|
+
</div>
|
|
254
|
+
<div class="flex gap-6">
|
|
255
|
+
<a href="#" class="text-muted hover:text-white transition-colors">Privacy</a>
|
|
256
|
+
<a href="#" class="text-muted hover:text-white transition-colors">Terms</a>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</footer>
|
|
261
|
+
|
|
262
|
+
<script>
|
|
263
|
+
// Theme initialization is handled automatically by starlight.js
|
|
264
|
+
// Custom template logic can go here
|
|
265
|
+
</script>
|
|
266
|
+
|
|
267
|
+
</body>
|
|
268
|
+
</html>
|
|
@@ -0,0 +1,355 @@
|
|
|
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>GameVault - Ultra Gaming Experience</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
background: radial-gradient(circle at top right, #1a1a3a, #0a0a1a 40%), #050505;
|
|
11
|
+
color: #f1f5f9;
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body.light-mode {
|
|
17
|
+
background: #f1f5f9;
|
|
18
|
+
color: #1e293b;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.hero-section {
|
|
22
|
+
background: linear-gradient(rgba(10, 10, 26, 0.4), rgba(10, 10, 26, 0.9)),
|
|
23
|
+
url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
|
|
24
|
+
background-size: cover;
|
|
25
|
+
background-position: center;
|
|
26
|
+
height: 80vh;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
text-align: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
body.light-mode .hero-section {
|
|
34
|
+
background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)),
|
|
35
|
+
url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
|
|
36
|
+
background-size: cover;
|
|
37
|
+
background-position: center;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.game-card-img {
|
|
41
|
+
height: 200px;
|
|
42
|
+
background-size: cover;
|
|
43
|
+
background-position: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Theme Toggle Styling */
|
|
47
|
+
.theme-toggle {
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
width: 2.5rem;
|
|
50
|
+
height: 2.5rem;
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
transition: background 0.3s ease;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.theme-toggle:hover {
|
|
60
|
+
background: rgba(255, 255, 255, 0.1);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
body.light-mode .theme-toggle:hover {
|
|
64
|
+
background: rgba(0, 0, 0, 0.05);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
body.light-mode .glass {
|
|
68
|
+
background: rgba(0, 0, 0, 0.03) !important;
|
|
69
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
70
|
+
color: #1e293b !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
body.light-mode .badge-secondary {
|
|
74
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
75
|
+
color: #475569;
|
|
76
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
body.light-mode .starlight-card p {
|
|
80
|
+
color: #64748b;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
body.light-mode footer {
|
|
84
|
+
background-color: #f1f5f9;
|
|
85
|
+
border-top-color: #e2e8f0;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
body.light-mode footer .text-gradient-starlight {
|
|
89
|
+
background: none;
|
|
90
|
+
-webkit-text-fill-color: #1e293b;
|
|
91
|
+
color: #1e293b;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body.light-mode footer p,
|
|
95
|
+
body.light-mode footer a {
|
|
96
|
+
color: #64748b;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
body.light-mode footer a:hover {
|
|
100
|
+
color: #2563eb;
|
|
101
|
+
}
|
|
102
|
+
</style>
|
|
103
|
+
</head>
|
|
104
|
+
<body class="font-sans">
|
|
105
|
+
<!-- Navigation -->
|
|
106
|
+
<nav class="starlight-nav">
|
|
107
|
+
<div class="p-4 md:px-8 flex justify-between items-center w-full">
|
|
108
|
+
<div class="text-3xl font-bold tracking-tighter text-gradient-starlight cursor-pointer">GAMEVAULT</div>
|
|
109
|
+
|
|
110
|
+
<div class="flex items-center gap-8">
|
|
111
|
+
<!-- Desktop Menu -->
|
|
112
|
+
<div class="nav-desktop">
|
|
113
|
+
<ul class="nav-list mr-8">
|
|
114
|
+
<li><a href="#" class="nav-link">Store</a></li>
|
|
115
|
+
<li><a href="#" class="nav-link">Games</a></li>
|
|
116
|
+
<li><a href="#" class="nav-link">News</a></li>
|
|
117
|
+
<li><a href="#" class="nav-link">Community</a></li>
|
|
118
|
+
</ul>
|
|
119
|
+
|
|
120
|
+
<div class="flex items-center gap-4">
|
|
121
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
122
|
+
<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>
|
|
123
|
+
<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>
|
|
124
|
+
</div>
|
|
125
|
+
<button class="bg-starlight text-black px-8 py-2.5 rounded-full font-bold glow-blue hover:scale-105 transition border-none">Play Now</button>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<!-- Mobile Actions -->
|
|
130
|
+
<div class="flex items-center gap-4 md:hidden">
|
|
131
|
+
<div id="theme-btn-mobile" class="theme-toggle" title="Toggle Theme">
|
|
132
|
+
<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>
|
|
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="hamburger">
|
|
136
|
+
<span></span>
|
|
137
|
+
<span></span>
|
|
138
|
+
<span></span>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<!-- Mobile Menu -->
|
|
145
|
+
<div class="nav-menu-mobile">
|
|
146
|
+
<ul class="nav-list vertical">
|
|
147
|
+
<li><a href="#" class="nav-link">Store</a></li>
|
|
148
|
+
<li><a href="#" class="nav-link">Games</a></li>
|
|
149
|
+
<li><a href="#" class="nav-link">News</a></li>
|
|
150
|
+
<li><a href="#" class="nav-link">Community</a></li>
|
|
151
|
+
<li class="pt-4 border-t border-white/10">
|
|
152
|
+
<button class="bg-starlight text-black w-full py-3 rounded-xl font-bold glow-blue border-none">Play Now</button>
|
|
153
|
+
</li>
|
|
154
|
+
</ul>
|
|
155
|
+
</div>
|
|
156
|
+
</nav>
|
|
157
|
+
|
|
158
|
+
<!-- Hero Section -->
|
|
159
|
+
<header class="hero-section">
|
|
160
|
+
<div class="max-w-[1200px] mx-auto px-6 animate-slide-up">
|
|
161
|
+
<span class="badge badge-primary mb-6">Trending Now</span>
|
|
162
|
+
<h1 class="text-7xl font-bold tracking-tighter mb-6">CYBERPUNK <span class="text-gradient-starlight">2077</span></h1>
|
|
163
|
+
<p class="text-xl text-gray-300 mb-10 max-w-prose mx-auto">
|
|
164
|
+
Step into Night City, an obsessed megalopolis where you play as V, a mercenary outlaw going after a one-of-a-kind implant.
|
|
165
|
+
</p>
|
|
166
|
+
<div class="flex flex-col sm:flex-row gap-6 justify-center">
|
|
167
|
+
<button class="bg-white text-black px-12 py-4 rounded-full font-bold hover:bg-starlight transition shadow-lg border-none">Buy Now - $59.99</button>
|
|
168
|
+
<button class="glass text-white px-12 py-4 rounded-full font-bold hover:bg-opacity-20 transition border-2 border-solid border-white border-opacity-20">Watch Trailer</button>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</header>
|
|
172
|
+
|
|
173
|
+
<!-- Featured Games -->
|
|
174
|
+
<main class="max-w-[1200px] mx-auto py-24 px-6">
|
|
175
|
+
<div class="flex justify-between items-end mb-12">
|
|
176
|
+
<div>
|
|
177
|
+
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-2">Editor's Choice</h2>
|
|
178
|
+
<h3 class="text-4xl font-bold tracking-tight">Featured Games</h3>
|
|
179
|
+
</div>
|
|
180
|
+
<a href="#" class="text-starlight font-bold border-b border-starlight pb-1 hover:text-white hover:border-white transition">View All Games →</a>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
184
|
+
<!-- Game Card 1 -->
|
|
185
|
+
<div class="starlight-card group cursor-pointer overflow-hidden p-0">
|
|
186
|
+
<div class="game-card-img group-hover:scale-105 transition duration-500" style="background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=800&q=80');"></div>
|
|
187
|
+
<div class="p-6">
|
|
188
|
+
<div class="flex justify-between items-start mb-2">
|
|
189
|
+
<h4 class="text-xl font-bold">Retro Pulse</h4>
|
|
190
|
+
<span class="text-starlight font-bold">$19.99</span>
|
|
191
|
+
</div>
|
|
192
|
+
<p class="text-sm text-gray-400 mb-4">A high-octane synthwave racer with neon visuals.</p>
|
|
193
|
+
<div class="flex gap-2">
|
|
194
|
+
<span class="badge badge-secondary text-2xs">Action</span>
|
|
195
|
+
<span class="badge badge-secondary text-2xs">Indie</span>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<!-- Game Card 2 -->
|
|
201
|
+
<div class="starlight-card group cursor-pointer overflow-hidden p-0">
|
|
202
|
+
<div class="game-card-img group-hover:scale-105 transition duration-500" style="background-image: url('https://images.unsplash.com/photo-1614680376593-902f74cf0d41?auto=format&fit=crop&w=800&q=80');"></div>
|
|
203
|
+
<div class="p-6">
|
|
204
|
+
<div class="flex justify-between items-start mb-2">
|
|
205
|
+
<h4 class="text-xl font-bold">Star Frontier</h4>
|
|
206
|
+
<span class="text-starlight font-bold">Free</span>
|
|
207
|
+
</div>
|
|
208
|
+
<p class="text-sm text-gray-400 mb-4">Explore the outer reaches of the galaxy in this MMO.</p>
|
|
209
|
+
<div class="flex gap-2">
|
|
210
|
+
<span class="badge badge-secondary text-2xs">MMO</span>
|
|
211
|
+
<span class="badge badge-secondary text-2xs">Sci-Fi</span>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<!-- Game Card 3 -->
|
|
217
|
+
<div class="starlight-card group cursor-pointer overflow-hidden p-0">
|
|
218
|
+
<div class="game-card-img group-hover:scale-105 transition duration-500" style="background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=800&q=80');"></div>
|
|
219
|
+
<div class="p-6">
|
|
220
|
+
<div class="flex justify-between items-start mb-2">
|
|
221
|
+
<h4 class="text-xl font-bold">Quest Lore</h4>
|
|
222
|
+
<span class="text-starlight font-bold">$44.99</span>
|
|
223
|
+
</div>
|
|
224
|
+
<p class="text-sm text-gray-400 mb-4">An epic open-world RPG with branching storylines.</p>
|
|
225
|
+
<div class="flex gap-2">
|
|
226
|
+
<span class="badge badge-secondary text-2xs">RPG</span>
|
|
227
|
+
<span class="badge badge-secondary text-2xs">Adventure</span>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</main>
|
|
233
|
+
|
|
234
|
+
<!-- FAQ Section -->
|
|
235
|
+
<section class="max-w-[1200px] mx-auto px-6 mb-32">
|
|
236
|
+
<div class="mb-12 text-center">
|
|
237
|
+
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-2">Support Center</h2>
|
|
238
|
+
<h3 class="text-4xl font-bold tracking-tight">Frequently Asked Questions</h3>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div class="max-w-144 mx-auto flex flex-col gap-4">
|
|
242
|
+
<!-- Accordion 1 -->
|
|
243
|
+
<div class="accordion-item accordion-starlight active">
|
|
244
|
+
<div class="accordion-header">
|
|
245
|
+
<span>What are the minimum system requirements?</span>
|
|
246
|
+
<svg class="accordion-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="accordion-content">
|
|
249
|
+
<p>For the best experience, we recommend an NVIDIA RTX 3060 or equivalent, 16GB RAM, and an i7 processor. However, most titles are optimized to run on mid-range hardware with adjusted settings.</p>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<!-- Accordion 2 -->
|
|
254
|
+
<div class="accordion-item accordion-starlight">
|
|
255
|
+
<div class="accordion-header">
|
|
256
|
+
<span>How do I claim my pre-order bonuses?</span>
|
|
257
|
+
<svg class="accordion-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="accordion-content">
|
|
260
|
+
<p>Pre-order bonuses are automatically linked to your GameVault account. Once the game launches, you can find your rewards in the "Inventory" tab of the game launcher.</p>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<!-- Accordion 3 -->
|
|
265
|
+
<div class="accordion-item accordion-starlight">
|
|
266
|
+
<div class="accordion-header">
|
|
267
|
+
<span>Is cross-platform play supported?</span>
|
|
268
|
+
<svg class="accordion-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="accordion-content">
|
|
271
|
+
<p>Yes! Most of our multiplayer titles support cross-play between PC, PlayStation, and Xbox. You can manage your cross-play preferences in the social settings menu.</p>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</section>
|
|
276
|
+
|
|
277
|
+
<!-- Call to Action -->
|
|
278
|
+
<section class="max-w-[1200px] mx-auto px-6 mb-32">
|
|
279
|
+
<div class="glass p-16 rounded-3xl border border-white border-opacity-5 text-center glow-blue">
|
|
280
|
+
<h2 class="text-5xl font-bold mb-6 tracking-tight">Join the <span class="text-gradient-starlight">Elite</span></h2>
|
|
281
|
+
<p class="text-lg text-gray-400 mb-10 max-w-prose mx-auto">Get exclusive access to beta tests, early drops, and a community of over 10 million gamers.</p>
|
|
282
|
+
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
|
283
|
+
<input type="email" class="glass px-8 py-4 rounded-xl outline-none focus:border-starlight transition md:w-96 text-white" placeholder="Enter your email...">
|
|
284
|
+
<button class="bg-starlight text-black px-12 py-4 rounded-xl font-bold glow-blue hover:scale-105 transition border-none">Sign Up Free</button>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</section>
|
|
288
|
+
|
|
289
|
+
<!-- Footer -->
|
|
290
|
+
<footer class="bg-black py-20 px-6 border-t border-white border-opacity-5">
|
|
291
|
+
<div class="max-w-[1200px] mx-auto grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
|
|
292
|
+
<div class="col-span-2 md:col-span-1">
|
|
293
|
+
<div class="text-2xl font-bold tracking-tighter text-gradient-starlight mb-6">GAMEVAULT</div>
|
|
294
|
+
<p class="text-gray-500 text-sm">The ultimate destination for gamers worldwide. Play, connect, and grow.</p>
|
|
295
|
+
</div>
|
|
296
|
+
<div>
|
|
297
|
+
<h5 class="font-bold mb-6">Platform</h5>
|
|
298
|
+
<ul class="flex flex-col gap-4 text-gray-400 text-sm">
|
|
299
|
+
<li><a href="#" class="hover:text-white transition">Download</a></li>
|
|
300
|
+
<li><a href="#" class="hover:text-white transition">Web Player</a></li>
|
|
301
|
+
<li><a href="#" class="hover:text-white transition">Mobile App</a></li>
|
|
302
|
+
<li><a href="#" class="hover:text-white transition">Pro Features</a></li>
|
|
303
|
+
</ul>
|
|
304
|
+
</div>
|
|
305
|
+
<div>
|
|
306
|
+
<h5 class="font-bold mb-6">Company</h5>
|
|
307
|
+
<ul class="flex flex-col gap-4 text-gray-400 text-sm">
|
|
308
|
+
<li><a href="#" class="hover:text-white transition">About Us</a></li>
|
|
309
|
+
<li><a href="#" class="hover:text-white transition">Careers</a></li>
|
|
310
|
+
<li><a href="#" class="hover:text-white transition">Press</a></li>
|
|
311
|
+
<li><a href="#" class="hover:text-white transition">Contact</a></li>
|
|
312
|
+
</ul>
|
|
313
|
+
</div>
|
|
314
|
+
<div>
|
|
315
|
+
<h5 class="font-bold mb-6">Support</h5>
|
|
316
|
+
<ul class="flex flex-col gap-4 text-gray-400 text-sm">
|
|
317
|
+
<li><a href="#" class="hover:text-white transition">Help Center</a></li>
|
|
318
|
+
<li><a href="#" class="hover:text-white transition">Safety</a></li>
|
|
319
|
+
<li><a href="#" class="hover:text-white transition">Terms</a></li>
|
|
320
|
+
<li><a href="#" class="hover:text-white transition">Privacy</a></li>
|
|
321
|
+
</ul>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="max-w-[1200px] mx-auto pt-8 border-t border-white border-opacity-5 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
325
|
+
<p class="text-gray-600 text-xs">© 2026 GameVault Interactive. All rights reserved.</p>
|
|
326
|
+
<div class="flex gap-6">
|
|
327
|
+
<a href="#" class="text-gray-600 hover:text-starlight transition">Twitter</a>
|
|
328
|
+
<a href="#" class="text-gray-600 hover:text-starlight transition">Discord</a>
|
|
329
|
+
<a href="#" class="text-gray-600 hover:text-starlight transition">Twitch</a>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</footer>
|
|
333
|
+
|
|
334
|
+
<script src="../src/starlight.js"></script>
|
|
335
|
+
<script>
|
|
336
|
+
// Accordion Logic
|
|
337
|
+
document.querySelectorAll('.accordion-header').forEach(header => {
|
|
338
|
+
header.addEventListener('click', () => {
|
|
339
|
+
const item = header.parentElement;
|
|
340
|
+
const isActive = item.classList.contains('active');
|
|
341
|
+
|
|
342
|
+
// Close other items
|
|
343
|
+
document.querySelectorAll('.accordion-item').forEach(otherItem => {
|
|
344
|
+
otherItem.classList.remove('active');
|
|
345
|
+
});
|
|
346
|
+
|
|
347
|
+
// Toggle current item
|
|
348
|
+
if (!isActive) {
|
|
349
|
+
item.classList.add('active');
|
|
350
|
+
}
|
|
351
|
+
});
|
|
352
|
+
});
|
|
353
|
+
</script>
|
|
354
|
+
</body>
|
|
355
|
+
</html>
|
|
Binary file
|