@howssatoshi/quantumcss 1.10.1 → 1.11.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 +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +303 -608
- package/examples/analytics-dashboard.html +128 -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} +72 -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 +1025 -546
- 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 +1882 -136
- 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
|
@@ -1,471 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>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: var(--q-text-primary);
|
|
12
|
-
min-height: 100vh;
|
|
13
|
-
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
html[data-theme="light"] {
|
|
17
|
-
background: var(--q-light-bg);
|
|
18
|
-
color: var(--q-light-text);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
html[data-theme="light"] body {
|
|
22
|
-
background: var(--q-light-bg) !important;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.hero-section {
|
|
26
|
-
background: linear-gradient(rgba(10, 10, 26, 0.4), rgba(10, 10, 26, 0.9)),
|
|
27
|
-
url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
|
|
28
|
-
background-size: cover;
|
|
29
|
-
background-position: center;
|
|
30
|
-
height: 80vh;
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
justify-content: center;
|
|
34
|
-
text-align: center;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
html[data-theme="light"] .hero-section {
|
|
38
|
-
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95)),
|
|
39
|
-
url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
|
|
40
|
-
background-size: cover;
|
|
41
|
-
background-position: center;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.game-card-img {
|
|
45
|
-
height: 200px;
|
|
46
|
-
background-size: cover;
|
|
47
|
-
background-position: center;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* Theme Toggle Styling */
|
|
51
|
-
.theme-toggle {
|
|
52
|
-
cursor: pointer;
|
|
53
|
-
width: 2.5rem;
|
|
54
|
-
height: 2.5rem;
|
|
55
|
-
border-radius: 50%;
|
|
56
|
-
transition: background 0.3s ease;
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
flex-shrink: 0;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.theme-toggle:hover {
|
|
64
|
-
background: rgba(255, 255, 255, 0.1);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
html[data-theme="light"] .theme-toggle:hover {
|
|
68
|
-
background: rgba(0, 0, 0, 0.05);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
html[data-theme="light"] .glass {
|
|
72
|
-
background: var(--q-light-card-bg) !important;
|
|
73
|
-
border-color: var(--q-light-card-border) !important;
|
|
74
|
-
color: var(--q-light-text) !important;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
html[data-theme="light"] .badge-secondary {
|
|
78
|
-
background-color: var(--q-glass-bg);
|
|
79
|
-
color: var(--q-light-text-muted);
|
|
80
|
-
border-color: var(--q-light-card-border);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
html[data-theme="light"] .starlight-card p {
|
|
84
|
-
color: var(--q-light-text-muted);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
html[data-theme="light"] footer {
|
|
88
|
-
background-color: var(--q-light-bg);
|
|
89
|
-
border-top-color: var(--q-light-card-border);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
html[data-theme="light"] footer .text-gradient-starlight {
|
|
93
|
-
background: none;
|
|
94
|
-
-webkit-text-fill-color: var(--q-light-text);
|
|
95
|
-
color: var(--q-light-text);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
html[data-theme="light"] footer p,
|
|
99
|
-
html[data-theme="light"] footer a {
|
|
100
|
-
color: var(--q-light-text-muted);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
html[data-theme="light"] footer a:hover {
|
|
104
|
-
color: var(--q-color-primary);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
html[data-theme="light"] .starlight-nav {
|
|
108
|
-
background: var(--q-light-card-bg) !important;
|
|
109
|
-
border-bottom-color: var(--q-light-card-border) !important;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
html[data-theme="light"] .starlight-nav .text-gradient-starlight {
|
|
113
|
-
background: none;
|
|
114
|
-
-webkit-text-fill-color: var(--q-light-text);
|
|
115
|
-
color: var(--q-light-text);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
html[data-theme="light"] .nav-link {
|
|
119
|
-
color: var(--q-light-text-muted) !important;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
html[data-theme="light"] .nav-link:hover {
|
|
123
|
-
color: var(--q-color-primary) !important;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
html[data-theme="light"] .hero-section h1 {
|
|
127
|
-
color: var(--q-light-text) !important;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
html[data-theme="light"] .hero-section p {
|
|
131
|
-
color: var(--q-light-text-muted) !important;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
html[data-theme="light"] .hero-section .badge-primary {
|
|
135
|
-
background-color: rgba(37, 99, 235, 0.1) !important;
|
|
136
|
-
color: var(--q-color-primary) !important;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
html[data-theme="light"] .glass {
|
|
140
|
-
background: var(--q-light-card-bg) !important;
|
|
141
|
-
border-color: var(--q-light-card-border) !important;
|
|
142
|
-
color: var(--q-light-text) !important;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
html[data-theme="light"] .glass.text-white {
|
|
146
|
-
color: var(--q-light-text) !important;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
html[data-theme="light"] .starlight-card {
|
|
150
|
-
background: var(--q-light-card-bg) !important;
|
|
151
|
-
border-color: var(--q-light-card-border) !important;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
html[data-theme="light"] .starlight-card h4 {
|
|
155
|
-
color: var(--q-light-text) !important;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
html[data-theme="light"] .starlight-card p {
|
|
159
|
-
color: var(--q-light-text-muted) !important;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
html[data-theme="light"] .text-gray-300 {
|
|
163
|
-
color: var(--q-light-text-muted) !important;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
html[data-theme="light"] .text-gray-400 {
|
|
167
|
-
color: var(--q-light-text-muted) !important;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
html[data-theme="light"] .text-gray-500 {
|
|
171
|
-
color: var(--q-light-text-muted) !important;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
html[data-theme="light"] .text-gray-600 {
|
|
175
|
-
color: var(--q-light-text-muted) !important;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
html[data-theme="light"] .bg-white {
|
|
179
|
-
background-color: var(--q-light-card-bg) !important;
|
|
180
|
-
color: var(--q-light-text) !important;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
html[data-theme="light"] .text-black {
|
|
184
|
-
color: var(--q-light-text) !important;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
html[data-theme="light"] .text-starlight {
|
|
188
|
-
color: var(--q-color-primary) !important;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
html[data-theme="light"] .border-white_5 {
|
|
192
|
-
border-color: var(--q-light-card-border) !important;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
html[data-theme="light"] .border-starlight {
|
|
196
|
-
border-color: var(--q-color-primary) !important;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
html[data-theme="light"] .border-opacity-20 {
|
|
200
|
-
border-color: var(--q-light-card-border) !important;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
html[data-theme="light"] a.text-starlight {
|
|
204
|
-
color: var(--q-color-primary) !important;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
html[data-theme="light"] .accordion-starlight {
|
|
208
|
-
background: var(--q-light-card-bg) !important;
|
|
209
|
-
border-color: var(--q-light-card-border) !important;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
html[data-theme="light"] .accordion-header {
|
|
213
|
-
color: var(--q-light-text) !important;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
html[data-theme="light"] .accordion-content p {
|
|
217
|
-
color: var(--q-light-text-muted) !important;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
html[data-theme="light"] input.glass {
|
|
221
|
-
background: var(--q-light-card-bg) !important;
|
|
222
|
-
color: var(--q-light-text) !important;
|
|
223
|
-
border-color: var(--q-light-card-border) !important;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
html[data-theme="light"] input.glass::placeholder {
|
|
227
|
-
color: var(--q-light-text-muted) !important;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
html[data-theme="light"] .bg-black {
|
|
231
|
-
background-color: var(--q-light-bg) !important;
|
|
232
|
-
}
|
|
233
|
-
</style>
|
|
234
|
-
</head>
|
|
235
|
-
<body class="font-sans">
|
|
236
|
-
<!-- Navigation -->
|
|
237
|
-
<nav class="starlight-nav">
|
|
238
|
-
<div class="p-4 md:px-8 flex justify-between items-center w-full">
|
|
239
|
-
<div class="text-3xl font-bold tracking-tighter text-gradient-starlight cursor-pointer">GAMEVAULT</div>
|
|
240
|
-
|
|
241
|
-
<div class="flex items-center gap-8">
|
|
242
|
-
<!-- Desktop Menu -->
|
|
243
|
-
<div class="nav-desktop">
|
|
244
|
-
<ul class="nav-list mr-8">
|
|
245
|
-
<li><a href="#" class="nav-link">Store</a></li>
|
|
246
|
-
<li><a href="#" class="nav-link">Games</a></li>
|
|
247
|
-
<li><a href="#" class="nav-link">News</a></li>
|
|
248
|
-
<li><a href="#" class="nav-link">Community</a></li>
|
|
249
|
-
</ul>
|
|
250
|
-
|
|
251
|
-
<div class="flex items-center gap-4">
|
|
252
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
253
|
-
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
254
|
-
<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>
|
|
255
|
-
</div>
|
|
256
|
-
<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>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
259
|
-
|
|
260
|
-
<!-- Mobile Actions -->
|
|
261
|
-
<div class="flex items-center gap-4 md:hidden hamburger-left">
|
|
262
|
-
<div id="theme-btn-mobile" class="theme-toggle" title="Toggle Theme">
|
|
263
|
-
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
264
|
-
<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>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="hamburger">
|
|
267
|
-
<span></span>
|
|
268
|
-
<span></span>
|
|
269
|
-
<span></span>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
|
|
275
|
-
<!-- Mobile Menu -->
|
|
276
|
-
<div class="nav-menu-mobile">
|
|
277
|
-
<ul class="nav-list vertical">
|
|
278
|
-
<li><a href="#" class="nav-link">Store</a></li>
|
|
279
|
-
<li><a href="#" class="nav-link">Games</a></li>
|
|
280
|
-
<li><a href="#" class="nav-link">News</a></li>
|
|
281
|
-
<li><a href="#" class="nav-link">Community</a></li>
|
|
282
|
-
<li class="pt-4 border-t border-white_5">
|
|
283
|
-
<button class="bg-starlight text-black w-full py-3 rounded-xl font-bold glow-blue border-none">Play Now</button>
|
|
284
|
-
</li>
|
|
285
|
-
</ul>
|
|
286
|
-
</div>
|
|
287
|
-
</nav>
|
|
288
|
-
|
|
289
|
-
<!-- Hero Section -->
|
|
290
|
-
<header class="hero-section">
|
|
291
|
-
<div class="max-w-[1200px] mx-auto px-6 animate-slide-up">
|
|
292
|
-
<span class="badge badge-primary mb-6">Trending Now</span>
|
|
293
|
-
<h1 class="text-7xl font-bold tracking-tighter mb-6">CYBERPUNK <span class="text-gradient-starlight">2077</span></h1>
|
|
294
|
-
<p class="text-xl text-gray-300 mb-10 max-w-prose mx-auto">
|
|
295
|
-
Step into Night City, an obsessed megalopolis where you play as V, a mercenary outlaw going after a one-of-a-kind implant.
|
|
296
|
-
</p>
|
|
297
|
-
<div class="flex flex-col sm:flex-row gap-6 justify-center">
|
|
298
|
-
<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>
|
|
299
|
-
<button class="glass text-white px-12 py-4 rounded-full font-bold hover:bg-opacity-20 transition border-2 border-solid border-opacity-20">Watch Trailer</button>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
</header>
|
|
303
|
-
|
|
304
|
-
<!-- Featured Games -->
|
|
305
|
-
<main class="max-w-[1200px] mx-auto py-24 px-6">
|
|
306
|
-
<div class="flex justify-between items-end mb-12">
|
|
307
|
-
<div>
|
|
308
|
-
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-2">Editor's Choice</h2>
|
|
309
|
-
<h3 class="text-4xl font-bold tracking-tight">Featured Games</h3>
|
|
310
|
-
</div>
|
|
311
|
-
<a href="#" class="text-starlight font-bold border-b border-starlight pb-1 hover:text-white transition">View All Games →</a>
|
|
312
|
-
</div>
|
|
313
|
-
|
|
314
|
-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
315
|
-
<!-- Game Card 1 -->
|
|
316
|
-
<div class="starlight-card group cursor-pointer overflow-hidden p-0">
|
|
317
|
-
<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>
|
|
318
|
-
<div class="p-6">
|
|
319
|
-
<div class="flex justify-between items-start mb-2">
|
|
320
|
-
<h4 class="text-xl font-bold">Retro Pulse</h4>
|
|
321
|
-
<span class="text-starlight font-bold">$19.99</span>
|
|
322
|
-
</div>
|
|
323
|
-
<p class="text-sm text-gray-400 mb-4">A high-octane synthwave racer with neon visuals.</p>
|
|
324
|
-
<div class="flex gap-2">
|
|
325
|
-
<span class="badge badge-secondary text-2xs">Action</span>
|
|
326
|
-
<span class="badge badge-secondary text-2xs">Indie</span>
|
|
327
|
-
</div>
|
|
328
|
-
</div>
|
|
329
|
-
</div>
|
|
330
|
-
|
|
331
|
-
<!-- Game Card 2 -->
|
|
332
|
-
<div class="starlight-card group cursor-pointer overflow-hidden p-0">
|
|
333
|
-
<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>
|
|
334
|
-
<div class="p-6">
|
|
335
|
-
<div class="flex justify-between items-start mb-2">
|
|
336
|
-
<h4 class="text-xl font-bold">Star Frontier</h4>
|
|
337
|
-
<span class="text-starlight font-bold">Free</span>
|
|
338
|
-
</div>
|
|
339
|
-
<p class="text-sm text-gray-400 mb-4">Explore the outer reaches of the galaxy in this MMO.</p>
|
|
340
|
-
<div class="flex gap-2">
|
|
341
|
-
<span class="badge badge-secondary text-2xs">MMO</span>
|
|
342
|
-
<span class="badge badge-secondary text-2xs">Sci-Fi</span>
|
|
343
|
-
</div>
|
|
344
|
-
</div>
|
|
345
|
-
</div>
|
|
346
|
-
|
|
347
|
-
<!-- Game Card 3 -->
|
|
348
|
-
<div class="starlight-card group cursor-pointer overflow-hidden p-0">
|
|
349
|
-
<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>
|
|
350
|
-
<div class="p-6">
|
|
351
|
-
<div class="flex justify-between items-start mb-2">
|
|
352
|
-
<h4 class="text-xl font-bold">Quest Lore</h4>
|
|
353
|
-
<span class="text-starlight font-bold">$44.99</span>
|
|
354
|
-
</div>
|
|
355
|
-
<p class="text-sm text-gray-400 mb-4">An epic open-world RPG with branching storylines.</p>
|
|
356
|
-
<div class="flex gap-2">
|
|
357
|
-
<span class="badge badge-secondary text-2xs">RPG</span>
|
|
358
|
-
<span class="badge badge-secondary text-2xs">Adventure</span>
|
|
359
|
-
</div>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
</div>
|
|
363
|
-
</main>
|
|
364
|
-
|
|
365
|
-
<!-- FAQ Section -->
|
|
366
|
-
<section class="max-w-[1200px] mx-auto px-6 mb-32">
|
|
367
|
-
<div class="mb-12 text-center">
|
|
368
|
-
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-2">Support Center</h2>
|
|
369
|
-
<h3 class="text-4xl font-bold tracking-tight">Frequently Asked Questions</h3>
|
|
370
|
-
</div>
|
|
371
|
-
|
|
372
|
-
<div class="max-w-144 mx-auto flex flex-col gap-4" data-accordion>
|
|
373
|
-
<!-- Accordion 1 -->
|
|
374
|
-
<div class="accordion-item accordion-starlight active">
|
|
375
|
-
<div class="accordion-header">
|
|
376
|
-
<span>What are the minimum system requirements?</span>
|
|
377
|
-
<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>
|
|
378
|
-
</div>
|
|
379
|
-
<div class="accordion-content">
|
|
380
|
-
<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>
|
|
381
|
-
</div>
|
|
382
|
-
</div>
|
|
383
|
-
|
|
384
|
-
<!-- Accordion 2 -->
|
|
385
|
-
<div class="accordion-item accordion-starlight">
|
|
386
|
-
<div class="accordion-header">
|
|
387
|
-
<span>How do I claim my pre-order bonuses?</span>
|
|
388
|
-
<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>
|
|
389
|
-
</div>
|
|
390
|
-
<div class="accordion-content">
|
|
391
|
-
<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>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
|
|
395
|
-
<!-- Accordion 3 -->
|
|
396
|
-
<div class="accordion-item accordion-starlight">
|
|
397
|
-
<div class="accordion-header">
|
|
398
|
-
<span>Is cross-platform play supported?</span>
|
|
399
|
-
<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>
|
|
400
|
-
</div>
|
|
401
|
-
<div class="accordion-content">
|
|
402
|
-
<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>
|
|
403
|
-
</div>
|
|
404
|
-
</div>
|
|
405
|
-
</div>
|
|
406
|
-
</section>
|
|
407
|
-
|
|
408
|
-
<!-- Call to Action -->
|
|
409
|
-
<section class="max-w-[1200px] mx-auto px-6 mb-32">
|
|
410
|
-
<div class="glass p-16 rounded-3xl border text-center glow-blue">
|
|
411
|
-
<h2 class="text-5xl font-bold mb-6 tracking-tight">Join the <span class="text-gradient-starlight">Elite</span></h2>
|
|
412
|
-
<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>
|
|
413
|
-
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
|
414
|
-
<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...">
|
|
415
|
-
<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>
|
|
416
|
-
</div>
|
|
417
|
-
</div>
|
|
418
|
-
</section>
|
|
419
|
-
|
|
420
|
-
<!-- Footer -->
|
|
421
|
-
<footer class="bg-black py-20 px-6 border-t border-white_5">
|
|
422
|
-
<div class="max-w-[1200px] mx-auto grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
|
|
423
|
-
<div class="col-span-2 md:col-span-1">
|
|
424
|
-
<div class="text-2xl font-bold tracking-tighter text-gradient-starlight mb-6">GAMEVAULT</div>
|
|
425
|
-
<p class="text-gray-500 text-sm">The ultimate destination for gamers worldwide. Play, connect, and grow.</p>
|
|
426
|
-
</div>
|
|
427
|
-
<div>
|
|
428
|
-
<h5 class="font-bold mb-6">Platform</h5>
|
|
429
|
-
<ul class="flex flex-col gap-4 text-gray-400 text-sm">
|
|
430
|
-
<li><a href="#" class="hover:text-white transition">Download</a></li>
|
|
431
|
-
<li><a href="#" class="hover:text-white transition">Web Player</a></li>
|
|
432
|
-
<li><a href="#" class="hover:text-white transition">Mobile App</a></li>
|
|
433
|
-
<li><a href="#" class="hover:text-white transition">Pro Features</a></li>
|
|
434
|
-
</ul>
|
|
435
|
-
</div>
|
|
436
|
-
<div>
|
|
437
|
-
<h5 class="font-bold mb-6">Company</h5>
|
|
438
|
-
<ul class="flex flex-col gap-4 text-gray-400 text-sm">
|
|
439
|
-
<li><a href="#" class="hover:text-white transition">About Us</a></li>
|
|
440
|
-
<li><a href="#" class="hover:text-white transition">Careers</a></li>
|
|
441
|
-
<li><a href="#" class="hover:text-white transition">Press</a></li>
|
|
442
|
-
<li><a href="#" class="hover:text-white transition">Contact</a></li>
|
|
443
|
-
</ul>
|
|
444
|
-
</div>
|
|
445
|
-
<div>
|
|
446
|
-
<h5 class="font-bold mb-6">Support</h5>
|
|
447
|
-
<ul class="flex flex-col gap-4 text-gray-400 text-sm">
|
|
448
|
-
<li><a href="#" class="hover:text-white transition">Help Center</a></li>
|
|
449
|
-
<li><a href="#" class="hover:text-white transition">Safety</a></li>
|
|
450
|
-
<li><a href="#" class="hover:text-white transition">Terms</a></li>
|
|
451
|
-
<li><a href="#" class="hover:text-white transition">Privacy</a></li>
|
|
452
|
-
</ul>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
<div class="max-w-[1200px] mx-auto pt-8 border-t border-white_5 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
456
|
-
<p class="text-gray-600 text-xs">© 2026 GameVault Interactive. All rights reserved.</p>
|
|
457
|
-
<div class="flex gap-6">
|
|
458
|
-
<a href="#" class="text-gray-600 hover:text-starlight transition">Twitter</a>
|
|
459
|
-
<a href="#" class="text-gray-600 hover:text-starlight transition">Discord</a>
|
|
460
|
-
<a href="#" class="text-gray-600 hover:text-starlight transition">Twitch</a>
|
|
461
|
-
</div>
|
|
462
|
-
</div>
|
|
463
|
-
</footer>
|
|
464
|
-
|
|
465
|
-
<script src="../src/starlight.js"></script>
|
|
466
|
-
<script>
|
|
467
|
-
// Theme initialization and management is now handled
|
|
468
|
-
// automatically by Starlight.initTheme() in starlight.js
|
|
469
|
-
</script>
|
|
470
|
-
</body>
|
|
471
|
-
</html>
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Quantum CSS - Interactivity & Theme Test</title>
|
|
7
|
-
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
-
<style>
|
|
9
|
-
.test-box {
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 120px;
|
|
12
|
-
border-radius: 1rem;
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
color: white;
|
|
17
|
-
font-weight: 900;
|
|
18
|
-
font-size: 1.25rem;
|
|
19
|
-
text-transform: uppercase;
|
|
20
|
-
letter-spacing: 0.1em;
|
|
21
|
-
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/* Theme Styles */
|
|
25
|
-
.theme-blue-peach .hero-gradient { background: linear-gradient(to right, var(--q-color-starlight-blue), var(--q-color-starlight-peach)); }
|
|
26
|
-
.theme-purple-via .hero-gradient { background: linear-gradient(to br, #3b82f6, #a855f7, #ef4444); }
|
|
27
|
-
|
|
28
|
-
body { transition: background-color 0.5s ease; }
|
|
29
|
-
</style>
|
|
30
|
-
</head>
|
|
31
|
-
<body class="bg-starlight-deep p-10 theme-blue-peach">
|
|
32
|
-
|
|
33
|
-
<!-- Theme Toggle -->
|
|
34
|
-
<div class="mb-12 flex justify-between items-center">
|
|
35
|
-
<div>
|
|
36
|
-
<h1 class="text-white text-2xl font-black uppercase tracking-widest mb-2">Interactivity Test</h1>
|
|
37
|
-
<p class="text-slate-500 text-sm">Testing JIT Gradients, Focus Glows, and Overlays</p>
|
|
38
|
-
</div>
|
|
39
|
-
<button class="btn-starlight px-8 py-3 rounded-full font-bold" onclick="toggleTheme()">
|
|
40
|
-
Switch Visual Theme
|
|
41
|
-
</button>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<!-- Hero Gradient Section -->
|
|
45
|
-
<div class="mb-10">
|
|
46
|
-
<div class="hero-gradient test-box shadow-2xl">
|
|
47
|
-
Active Theme Gradient
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<!-- Text Effects -->
|
|
52
|
-
<div class="mb-12">
|
|
53
|
-
<div class="text-transparent bg-clip-text bg-gradient-to-r from-starlight-orange to-starlight-peach text-6xl font-black mb-4">
|
|
54
|
-
GRADIENT TEXT
|
|
55
|
-
</div>
|
|
56
|
-
<div class="flex gap-4 items-center">
|
|
57
|
-
<div class="bg-starlight-blue_10 border border-starlight-blue_30 p-4 rounded-lg text-starlight-blue font-bold text-sm">
|
|
58
|
-
OPACITY BG + BORDER
|
|
59
|
-
</div>
|
|
60
|
-
<div class="border-4 border-red-500_50 p-4 rounded-lg font-black text-white uppercase tracking-tighter">
|
|
61
|
-
50% RED BORDER
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<!-- SVG & Overlay Section -->
|
|
67
|
-
<div class="mb-12">
|
|
68
|
-
<h3 class="text-slate-500 text-[10px] font-black uppercase tracking-widest mb-4">SVG Positioning Primitives</h3>
|
|
69
|
-
<div class="relative bg-slate-900 rounded-2xl overflow-hidden border border-white_5" style="width: 100%; height: 300px;">
|
|
70
|
-
<svg class="svg-fluid opacity-20" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
71
|
-
<rect x="0" y="0" width="100" height="100" fill="url(#grad)" />
|
|
72
|
-
<defs>
|
|
73
|
-
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
74
|
-
<stop offset="0%" style="stop-color:var(--q-color-starlight-blue);stop-opacity:1" />
|
|
75
|
-
<stop offset="100%" style="stop-color:var(--q-color-purple-500);stop-opacity:1" />
|
|
76
|
-
</linearGradient>
|
|
77
|
-
</defs>
|
|
78
|
-
</svg>
|
|
79
|
-
<div class="overlay-base text-white text-3xl font-black text-center w-full pointer-events-none">
|
|
80
|
-
CENTERED<br>OVERLAY
|
|
81
|
-
</div>
|
|
82
|
-
<div class="overlay-top-left p-4 bg-black_50 text-[10px] font-bold text-starlight-blue tracking-widest">TOP LEFT</div>
|
|
83
|
-
<div class="overlay-bottom-right p-4 bg-black_50 text-[10px] font-bold text-starlight-blue tracking-widest">BOTTOM RIGHT</div>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- Focus Glow Interaction Section -->
|
|
88
|
-
<div class="mb-12">
|
|
89
|
-
<h3 class="text-slate-500 text-[10px] font-black uppercase tracking-widest mb-6">Interactive Focus Primitives (Click to Test Glow)</h3>
|
|
90
|
-
|
|
91
|
-
<div class="flex flex-wrap gap-6 mb-8">
|
|
92
|
-
<button class="btn-starlight focus-glow-purple-500 px-8 py-4">Purple Glow Button</button>
|
|
93
|
-
<button class="btn-secondary focus-glow-orange-500 px-8 py-4">Orange Glow Button</button>
|
|
94
|
-
<button class="bg-white_5 p-4 rounded-xl focus-glow text-white font-bold px-8">Default Glow Button</button>
|
|
95
|
-
</div>
|
|
96
|
-
|
|
97
|
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
98
|
-
<div>
|
|
99
|
-
<label class="text-[10px] font-bold text-slate-500 uppercase mb-3 block">Purple Focus Input</label>
|
|
100
|
-
<input type="text" class="input-starlight focus-glow-purple-500 h-14" placeholder="Focus for Purple Glow...">
|
|
101
|
-
</div>
|
|
102
|
-
<div>
|
|
103
|
-
<label class="text-[10px] font-bold text-slate-500 uppercase mb-3 block">Orange Focus Input</label>
|
|
104
|
-
<input type="text" class="input-starlight focus-glow-orange-500 h-14" placeholder="Focus for Orange Glow...">
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
<!-- Plugin Extension Test -->
|
|
110
|
-
<div class="mt-20 pt-10 border-t border-white_10">
|
|
111
|
-
<h3 class="text-white text-xl font-black uppercase tracking-widest mb-6">Plugin Extension Test</h3>
|
|
112
|
-
<div class="flex gap-8 items-center">
|
|
113
|
-
<button class="btn-neon">Neon Plugin Button</button>
|
|
114
|
-
<div class="text-glow text-4xl font-black text-neon-green">NEON GLOW TEXT</div>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<script>
|
|
119
|
-
function toggleTheme() {
|
|
120
|
-
const body = document.body;
|
|
121
|
-
if (body.classList.contains('theme-blue-peach')) {
|
|
122
|
-
body.classList.replace('theme-blue-peach', 'theme-purple-via');
|
|
123
|
-
} else {
|
|
124
|
-
body.classList.replace('theme-purple-via', 'theme-blue-peach');
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
</script>
|
|
128
|
-
</body>
|
|
129
|
-
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|