@howssatoshi/quantumcss 1.10.1 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +130 -288
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +11 -27
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/index.html +342 -232
- package/examples/kitchen-sink.html +284 -94
- package/examples/music-streaming.html +32 -91
- package/examples/{news-template.html → news.html} +35 -11
- package/examples/{portfolio-resume.html → portfolio.html} +56 -26
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +7 -6
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +303 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +18 -16
- package/src/starlight.js +20 -15
- package/src/styles/quantum-base.css +4 -0
- package/src/styles/quantum-components.css +1879 -134
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2606 -1186
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -288
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -471
- package/examples/gradient-test.html +0 -129
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -525
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -432
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
- /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
package/examples/theme-test.html
DELETED
|
@@ -1,159 +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>Theme Auto-Detection Test</title>
|
|
7
|
-
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
-
<script src="../src/starlight.js"></script>
|
|
9
|
-
<style>
|
|
10
|
-
body { min-height: 100vh; }
|
|
11
|
-
.demo-section {
|
|
12
|
-
margin: 2rem auto;
|
|
13
|
-
max-width: 600px;
|
|
14
|
-
padding: 2rem;
|
|
15
|
-
}
|
|
16
|
-
.theme-controls {
|
|
17
|
-
display: flex;
|
|
18
|
-
gap: 1rem;
|
|
19
|
-
margin-bottom: 2rem;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
}
|
|
22
|
-
.status-message {
|
|
23
|
-
background: var(--glass-bg);
|
|
24
|
-
border: 1px solid var(--glass-border);
|
|
25
|
-
border-radius: var(--radius-lg);
|
|
26
|
-
padding: 1rem;
|
|
27
|
-
margin-top: 1rem;
|
|
28
|
-
font-family: monospace;
|
|
29
|
-
font-size: 0.875rem;
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
<div class="starlight-stars" id="stars"></div>
|
|
35
|
-
|
|
36
|
-
<div class="demo-section starlight-card">
|
|
37
|
-
<h1>🎨 Theme Auto-Detection Test</h1>
|
|
38
|
-
|
|
39
|
-
<div class="theme-controls">
|
|
40
|
-
<button class="btn-starlight" onclick="setTheme('light')">☀️ Light</button>
|
|
41
|
-
<button class="btn-secondary" onclick="setTheme('dark')">🌙 Dark</button>
|
|
42
|
-
<button class="btn-outline" onclick="setTheme('auto')">🖥️ Follow System</button>
|
|
43
|
-
<button class="btn-ghost" onclick="toggleTheme()">🔄 Cycle</button>
|
|
44
|
-
<button class="btn-success" onclick="resetToAuto()">🔄 Reset to Auto</button>
|
|
45
|
-
<button class="btn-warning" onclick="forceRefresh()">🔃 Force Refresh</button>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<div class="status-message" id="status">
|
|
49
|
-
Loading theme information...
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
<h3>Instructions:</h3>
|
|
53
|
-
<ol>
|
|
54
|
-
<li>Click "Follow System" to enable automatic theme switching</li>
|
|
55
|
-
<li>Change your OS theme (macOS: System Settings → Appearance, Windows: Settings → Personalization → Colors)</li>
|
|
56
|
-
<li>The webpage should automatically switch to match your OS</li>
|
|
57
|
-
<li>Try "Cycle" to rotate through all available themes</li>
|
|
58
|
-
</ol>
|
|
59
|
-
|
|
60
|
-
<h3>Current State:</h3>
|
|
61
|
-
<div id="current-state"></div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<script>
|
|
65
|
-
// Monitor theme changes
|
|
66
|
-
function updateStatus() {
|
|
67
|
-
const html = document.documentElement;
|
|
68
|
-
const currentTheme = html.getAttribute('data-theme');
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
statusEl.innerHTML = `
|
|
72
|
-
<strong>Current Theme:</strong> ${currentTheme || 'null'}<br>
|
|
73
|
-
<strong>Saved Preference:</strong> ${savedTheme || 'none'}<br>
|
|
74
|
-
<strong>Effective Theme:</strong> ${effectiveTheme || currentTheme || 'null'}<br>
|
|
75
|
-
<strong>System Prefers:</strong> ${systemPrefers ? 'light' : 'dark'}
|
|
76
|
-
`;
|
|
77
|
-
|
|
78
|
-
stateEl.innerHTML = `
|
|
79
|
-
<div class="starlight-card" style="padding: 1rem; margin-top: 1rem;">
|
|
80
|
-
<h4>🎯 Theme Configuration:</h4>
|
|
81
|
-
<p><strong>html[data-theme]:</strong> ${currentTheme}</p>
|
|
82
|
-
<p><strong>localStorage theme:</strong> ${savedTheme || 'null'}</p>
|
|
83
|
-
<p><strong>localStorage theme-effective:</strong> ${effectiveTheme || 'null'}</p>
|
|
84
|
-
<p><strong>System prefers-color-scheme:</strong> ${systemPrefers ? 'light' : 'dark'}</p>
|
|
85
|
-
|
|
86
|
-
<h5>💡 How this works:</h5>
|
|
87
|
-
<ul>
|
|
88
|
-
<li>If theme is "auto", the system preference is followed</li>
|
|
89
|
-
<li>System theme changes are automatically detected</li>
|
|
90
|
-
<li>Your manual choice is saved and restored</li>
|
|
91
|
-
</ul>
|
|
92
|
-
</div>
|
|
93
|
-
`;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// Listen for theme changes
|
|
97
|
-
window.addEventListener('themechange', (e) => {
|
|
98
|
-
console.log('Theme changed:', e.detail);
|
|
99
|
-
updateStatus();
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
// Listen for system theme changes
|
|
103
|
-
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
|
|
104
|
-
console.log('System theme changed to:', e.matches ? 'light' : 'dark');
|
|
105
|
-
updateStatus();
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
// Initial update - wait for first themechange event or timeout
|
|
109
|
-
let themeInitialized = false;
|
|
110
|
-
const firstThemeChange = (e) => {
|
|
111
|
-
if (!themeInitialized) {
|
|
112
|
-
themeInitialized = true;
|
|
113
|
-
window.removeEventListener('themechange', firstThemeChange);
|
|
114
|
-
updateStatus();
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
window.addEventListener('themechange', firstThemeChange);
|
|
119
|
-
|
|
120
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
121
|
-
// Wait for Starlight to initialize, then check status
|
|
122
|
-
setTimeout(() => {
|
|
123
|
-
if (!themeInitialized) {
|
|
124
|
-
// If no themechange event fired yet, check current state
|
|
125
|
-
themeInitialized = true;
|
|
126
|
-
window.removeEventListener('themechange', firstThemeChange);
|
|
127
|
-
updateStatus();
|
|
128
|
-
}
|
|
129
|
-
}, 500); // Longer delay to ensure Starlight initialization
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
// Reset to auto function
|
|
133
|
-
function resetToAuto() {
|
|
134
|
-
console.log('Resetting to auto theme...');
|
|
135
|
-
if (typeof setTheme === 'function') {
|
|
136
|
-
setTheme('auto');
|
|
137
|
-
updateStatus();
|
|
138
|
-
} else {
|
|
139
|
-
console.error('setTheme function not available');
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// Also update every 2 seconds to show real-time changes
|
|
144
|
-
setInterval(updateStatus, 2000);
|
|
145
|
-
|
|
146
|
-
// Force refresh function
|
|
147
|
-
function forceRefresh() {
|
|
148
|
-
console.log('Forcing theme refresh...');
|
|
149
|
-
// Manually trigger Starlight theme initialization
|
|
150
|
-
if (window.Starlight && window.Starlight.initTheme) {
|
|
151
|
-
window.Starlight.initTheme();
|
|
152
|
-
setTimeout(updateStatus, 100);
|
|
153
|
-
} else {
|
|
154
|
-
console.error('Starlight not available');
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
</script>
|
|
158
|
-
</body>
|
|
159
|
-
</html>
|
|
@@ -1,432 +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>Nebula Voyage | Starlight Travel</title>
|
|
7
|
-
<link rel="stylesheet" href="../../dist/quantum.min.css">
|
|
8
|
-
<script src="../../src/starlight.js"></script>
|
|
9
|
-
<style>
|
|
10
|
-
body {
|
|
11
|
-
background: radial-gradient(circle at top right, var(--q-color-starlight-deep), #000);
|
|
12
|
-
overflow-x: hidden;
|
|
13
|
-
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
|
-
}
|
|
15
|
-
html[data-theme="dark"] {
|
|
16
|
-
color: var(--q-text-primary);
|
|
17
|
-
}
|
|
18
|
-
html[data-theme="light"] {
|
|
19
|
-
background: var(--q-light-bg) !important;
|
|
20
|
-
color: var(--q-light-text);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
html[data-theme="light"] body {
|
|
24
|
-
background: var(--q-light-bg) !important;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.hero-glow {
|
|
28
|
-
position: absolute;
|
|
29
|
-
top: -10%;
|
|
30
|
-
right: -10%;
|
|
31
|
-
width: 60%;
|
|
32
|
-
height: 60%;
|
|
33
|
-
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
34
|
-
filter: blur(100px);
|
|
35
|
-
z-index: -1;
|
|
36
|
-
transition: opacity 0.5s ease;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
html[data-theme="light"] .hero-glow {
|
|
40
|
-
opacity: 0;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/* Theme Toggle Styling */
|
|
44
|
-
.theme-toggle {
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
width: 2.5rem;
|
|
47
|
-
height: 2.5rem;
|
|
48
|
-
border-radius: 50%;
|
|
49
|
-
transition: background 0.3s ease;
|
|
50
|
-
display: flex;
|
|
51
|
-
align-items: center;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
flex-shrink: 0;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.theme-toggle:hover {
|
|
57
|
-
background: rgba(255, 255, 255, 0.1);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
html[data-theme="light"] .theme-toggle:hover {
|
|
61
|
-
background: rgba(0, 0, 0, 0.05);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
html[data-theme="light"] .glass {
|
|
65
|
-
background: var(--q-glass-bg) !important;
|
|
66
|
-
border-color: var(--q-glass-border) !important;
|
|
67
|
-
color: var(--q-light-text) !important;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
html[data-theme="light"] .starlight-card p,
|
|
71
|
-
html[data-theme="light"] header p,
|
|
72
|
-
html[data-theme="light"] section p {
|
|
73
|
-
color: var(--q-light-text-muted);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
html[data-theme="light"] .btn-outline:hover {
|
|
77
|
-
background-color: var(--q-light-text);
|
|
78
|
-
color: white;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
|
|
82
|
-
filter: none;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
input[type="date"] {
|
|
86
|
-
color-scheme: dark;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
html[data-theme="light"] input[type="date"] {
|
|
90
|
-
color-scheme: light;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
html[data-theme="light"] input {
|
|
94
|
-
color: var(--q-light-text) !important;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
html[data-theme="light"] input::placeholder {
|
|
98
|
-
color: var(--q-light-text-muted) !important;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
html[data-theme="light"] .text-starlight-blue {
|
|
102
|
-
color: var(--q-color-primary) !important;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
html[data-theme="light"] .starlight-navbar {
|
|
106
|
-
background: var(--q-light-card-bg) !important;
|
|
107
|
-
border-bottom-color: var(--q-light-card-border) !important;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
html[data-theme="light"] .starlight-navbar a {
|
|
111
|
-
color: var(--q-light-text-muted) !important;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
html[data-theme="light"] .starlight-navbar a:hover {
|
|
115
|
-
color: var(--q-color-primary) !important;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
html[data-theme="light"] .text-gradient-starlight {
|
|
119
|
-
background: none;
|
|
120
|
-
-webkit-text-fill-color: var(--q-light-text);
|
|
121
|
-
color: var(--q-light-text);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
html[data-theme="light"] .nav-link {
|
|
125
|
-
color: var(--q-light-text-muted) !important;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
html[data-theme="light"] .nav-link:hover {
|
|
129
|
-
color: var(--q-color-primary) !important;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
html[data-theme="light"] .glass {
|
|
133
|
-
background: var(--q-light-card-bg) !important;
|
|
134
|
-
border-color: var(--q-light-card-border) !important;
|
|
135
|
-
color: var(--q-light-text) !important;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
html[data-theme="light"] .glass input {
|
|
139
|
-
color: var(--q-light-text) !important;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
html[data-theme="light"] .glass input::placeholder {
|
|
143
|
-
color: var(--q-light-text-muted) !important;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
html[data-theme="light"] .glass .btn-starlight {
|
|
147
|
-
background: var(--q-light-text);
|
|
148
|
-
color: white;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
html[data-theme="light"] .starlight-card {
|
|
152
|
-
background: var(--q-light-card-bg) !important;
|
|
153
|
-
border-color: var(--q-light-card-border) !important;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
html[data-theme="light"] .starlight-card h3 {
|
|
157
|
-
color: var(--q-light-text) !important;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
html[data-theme="light"] .starlight-card .text-slate-400 {
|
|
161
|
-
color: var(--q-light-text-muted) !important;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
html[data-theme="light"] .btn-outline {
|
|
165
|
-
border-color: var(--q-light-text) !important;
|
|
166
|
-
color: var(--q-light-text) !important;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
html[data-theme="light"] .btn-outline:hover {
|
|
170
|
-
background-color: var(--q-light-text) !important;
|
|
171
|
-
color: white !important;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
html[data-theme="light"] .starlight-footer {
|
|
175
|
-
background: var(--q-light-bg) !important;
|
|
176
|
-
border-top-color: var(--q-light-card-border) !important;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
html[data-theme="light"] .starlight-footer a {
|
|
180
|
-
color: var(--q-light-text-muted) !important;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
html[data-theme="light"] .starlight-footer a:hover {
|
|
184
|
-
color: var(--q-color-primary) !important;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
html[data-theme="light"] .starlight-footer p {
|
|
188
|
-
color: var(--q-light-text-muted) !important;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
html[data-theme="light"] .badge-primary {
|
|
192
|
-
background-color: rgba(37, 99, 235, 0.1) !important;
|
|
193
|
-
color: var(--q-color-primary) !important;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
html[data-theme="light"] .border-white_10 {
|
|
197
|
-
border-color: var(--q-light-card-border) !important;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
html[data-theme="light"] .text-white {
|
|
201
|
-
color: var(--q-light-text) !important;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
html[data-theme="light"] .text-white_10 {
|
|
205
|
-
color: var(--q-light-text-muted) !important;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
html[data-theme="light"] .text-slate-400 {
|
|
209
|
-
color: var(--q-light-text-muted) !important;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
html[data-theme="light"] .text-slate-500 {
|
|
213
|
-
color: var(--q-light-text-muted) !important;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
html[data-theme="light"] .bg-white_5 {
|
|
217
|
-
background: var(--q-glass-bg) !important;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
html[data-theme="light"] .border-white_10 {
|
|
221
|
-
border-color: var(--q-light-card-border) !important;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
html[data-theme="light"] .border-white_5 {
|
|
225
|
-
border-color: var(--q-light-card-border) !important;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
html[data-theme="light"] h1 {
|
|
229
|
-
color: var(--q-light-text) !important;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
html[data-theme="light"] h2 {
|
|
233
|
-
color: var(--q-light-text) !important;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
html[data-theme="light"] h3 {
|
|
237
|
-
color: var(--q-light-text) !important;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
html[data-theme="light"] .bg-gray-800,
|
|
241
|
-
html[data-theme="light"] .bg-gray-700,
|
|
242
|
-
html[data-theme="light"] .bg-gray-900 {
|
|
243
|
-
background-color: var(--q-light-card-bg) !important;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
/* Card image overlay text stays light due to dark gradient */
|
|
247
|
-
html[data-theme="light"] .starlight-card .absolute .badge,
|
|
248
|
-
html[data-theme="light"] .starlight-card .absolute h3 {
|
|
249
|
-
color: white !important;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
/* Newsletter section text */
|
|
253
|
-
html[data-theme="light"] .bg-gradient-to-br {
|
|
254
|
-
background: linear-gradient(to bottom right, var(--q-color-primary-100), transparent) !important;
|
|
255
|
-
}
|
|
256
|
-
</style>
|
|
257
|
-
</head>
|
|
258
|
-
<body class="text-primary">
|
|
259
|
-
<div class="hero-glow"></div>
|
|
260
|
-
|
|
261
|
-
<!-- Navigation -->
|
|
262
|
-
<nav class="starlight-navbar">
|
|
263
|
-
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
264
|
-
<div class="md:hidden hamburger-left">
|
|
265
|
-
<div class="hamburger">
|
|
266
|
-
<span></span>
|
|
267
|
-
<span></span>
|
|
268
|
-
<span></span>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
<div class="text-3xl font-black tracking-tighter text-gradient-starlight uppercase">NEBULA</div>
|
|
272
|
-
<div class="hidden md:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
273
|
-
<a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
|
|
274
|
-
<a href="#" class="hover:text-starlight-blue transition-colors">Cruises</a>
|
|
275
|
-
<a href="#" class="hover:text-starlight-blue transition-colors">Excursions</a>
|
|
276
|
-
<a href="#" class="hover:text-starlight-blue transition-colors">Concierge</a>
|
|
277
|
-
</div>
|
|
278
|
-
<div class="flex items-center gap-4">
|
|
279
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
280
|
-
<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>
|
|
281
|
-
<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>
|
|
282
|
-
</div>
|
|
283
|
-
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
|
|
287
|
-
<!-- Mobile Menu -->
|
|
288
|
-
<div class="nav-menu-mobile">
|
|
289
|
-
<ul class="nav-list vertical">
|
|
290
|
-
<li><a href="#" class="nav-link">Destinations</a></li>
|
|
291
|
-
<li><a href="#" class="nav-link">Cruises</a></li>
|
|
292
|
-
<li><a href="#" class="nav-link">Excursions</a></li>
|
|
293
|
-
<li><a href="#" class="nav-link">Concierge</a></li>
|
|
294
|
-
<li class="pt-4 border-t border-white_5">
|
|
295
|
-
<button class="btn-starlight w-full py-3">Book Now</button>
|
|
296
|
-
</li>
|
|
297
|
-
</ul>
|
|
298
|
-
</div>
|
|
299
|
-
</nav>
|
|
300
|
-
|
|
301
|
-
<!-- Hero Section -->
|
|
302
|
-
<header class="starlight-hero">
|
|
303
|
-
<div class="max-w-5xl mx-auto">
|
|
304
|
-
<span class="badge badge-primary mb-8 animate-fade-in px-4 py-1.5 font-black tracking-[0.2em] text-[10px]">New Frontier: Titan IX</span>
|
|
305
|
-
<h1 class="text-6xl font-black mb-10 leading-none uppercase italic tracking-tighter text-center">
|
|
306
|
-
Travel Beyond <br>
|
|
307
|
-
<span class="text-gradient-starlight">The Horizon</span>
|
|
308
|
-
</h1>
|
|
309
|
-
<p class="text-xl text-slate-400 max-w-4xl mx-auto mb-16 font-medium leading-relaxed">
|
|
310
|
-
Experience the ethereal beauty of the outer rim with our exclusive Starlight-class lunar retreats and nebula cruises.
|
|
311
|
-
</p>
|
|
312
|
-
|
|
313
|
-
<!-- Search Bar -->
|
|
314
|
-
<div class="glass p-6 md:p-8 rounded-[2rem] md:rounded-[2.5rem] max-w-5xl mx-auto flex flex-col md:flex-row gap-6 md:gap-12 items-stretch shadow-2xl">
|
|
315
|
-
<div class="flex-1 flex flex-col items-start px-4 md:px-6">
|
|
316
|
-
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Destination</label>
|
|
317
|
-
<input type="text" class="w-full bg-transparent border-none text-white focus:outline-none text-xl md:text-2xl font-black p-0 placeholder:text-white_10" placeholder="Where to?">
|
|
318
|
-
</div>
|
|
319
|
-
<div class="border-l border-white_10 hidden md:block"></div>
|
|
320
|
-
<div class="flex-1 flex flex-col items-start px-4 md:px-6">
|
|
321
|
-
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Departure</label>
|
|
322
|
-
<input type="date" class="w-full bg-transparent border-none text-white focus:outline-none text-xl md:text-2xl font-black p-0" id="departure-date">
|
|
323
|
-
</div>
|
|
324
|
-
<button class="btn-starlight px-8 md:px-16 py-4 md:py-6 h-auto md:h-full text-base md:text-lg font-black uppercase tracking-widest shadow-2xl hover:glow-blue">Search</button>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
</header>
|
|
328
|
-
|
|
329
|
-
<!-- Featured Destinations -->
|
|
330
|
-
<section class="container mx-auto px-6 py-16">
|
|
331
|
-
<div class="flex justify-between items-end mb-16">
|
|
332
|
-
<div>
|
|
333
|
-
<span class="text-orange-600 font-black uppercase text-[10px] tracking-[0.3em] mb-3 block">Recommended Sights</span>
|
|
334
|
-
<h2 class="text-5xl font-black mb-3 uppercase italic tracking-tighter">Popular Sectors</h2>
|
|
335
|
-
<p class="text-slate-400 text-lg font-medium">Curated experiences from our master explorers.</p>
|
|
336
|
-
</div>
|
|
337
|
-
<a href="#" class="text-starlight-blue text-sm font-black uppercase tracking-widest hover:underline pb-2 border-b border-starlight-blue_30">View All Clusters</a>
|
|
338
|
-
</div>
|
|
339
|
-
|
|
340
|
-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
|
|
341
|
-
<!-- Card 1 -->
|
|
342
|
-
<div class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
|
|
343
|
-
<div class="h-80 bg-gray-800 relative overflow-hidden">
|
|
344
|
-
<img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=800&q=80" alt="Saturn" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
345
|
-
<div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
|
|
346
|
-
<div class="absolute bottom-8 left-8 z-20">
|
|
347
|
-
<span class="badge badge-primary bg-blue-600_20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Orbit Sector</span>
|
|
348
|
-
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">The Cassini</h3>
|
|
349
|
-
</div>
|
|
350
|
-
</div>
|
|
351
|
-
<div class="p-10 flex flex-col flex-1">
|
|
352
|
-
<p class="text-slate-400 font-medium leading-loose mb-10 flex-1">Experience the majestic silence of the rings from our gold-plated observation deck. Artificial gravity enabled.</p>
|
|
353
|
-
<div class="flex justify-between items-center">
|
|
354
|
-
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">4.2 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ night</span></span>
|
|
355
|
-
<button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
356
|
-
</div>
|
|
357
|
-
</div>
|
|
358
|
-
</div>
|
|
359
|
-
|
|
360
|
-
<!-- Card 2 -->
|
|
361
|
-
<div class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
|
|
362
|
-
<div class="h-80 bg-gray-700 relative overflow-hidden">
|
|
363
|
-
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80" alt="Alpha Centauri" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
364
|
-
<div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
|
|
365
|
-
<div class="absolute bottom-8 left-8 z-20">
|
|
366
|
-
<span class="badge badge-primary bg-emerald-600_20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Deep Space</span>
|
|
367
|
-
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Biolume Forest</h3>
|
|
368
|
-
</div>
|
|
369
|
-
</div>
|
|
370
|
-
<div class="p-10 flex flex-col flex-1">
|
|
371
|
-
<p class="text-slate-400 font-medium leading-loose mb-10 flex-1">Wander through the glowing flora of Proxima b in our climate-controlled bio-domes. Protective suits provided.</p>
|
|
372
|
-
<div class="flex justify-between items-center">
|
|
373
|
-
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">12.5 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ stay</span></span>
|
|
374
|
-
<button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
375
|
-
</div>
|
|
376
|
-
</div>
|
|
377
|
-
</div>
|
|
378
|
-
|
|
379
|
-
<!-- Card 3 -->
|
|
380
|
-
<div class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
|
|
381
|
-
<div class="h-80 bg-gray-900 relative overflow-hidden">
|
|
382
|
-
<img src="https://images.unsplash.com/photo-1614728894747-a83421e2b9c9?auto=format&fit=crop&w=800&q=80" alt="Mars" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
383
|
-
<div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
|
|
384
|
-
<div class="absolute bottom-8 left-8 z-20">
|
|
385
|
-
<span class="badge badge-primary bg-orange-600_20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Red Planet</span>
|
|
386
|
-
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Valles Marineris</h3>
|
|
387
|
-
</div>
|
|
388
|
-
</div>
|
|
389
|
-
<div class="p-10 flex flex-col flex-1">
|
|
390
|
-
<p class="text-slate-400 font-medium leading-loose mb-10 flex-1">Grand Canyon of Mars. Helicopter tours and dust-gliding available daily for elite members.</p>
|
|
391
|
-
<div class="flex justify-between items-center">
|
|
392
|
-
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">1.8 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ tour</span></span>
|
|
393
|
-
<button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
394
|
-
</div>
|
|
395
|
-
</div>
|
|
396
|
-
</div>
|
|
397
|
-
</div>
|
|
398
|
-
</section>
|
|
399
|
-
|
|
400
|
-
<!-- Newsletter -->
|
|
401
|
-
<section class="container mx-auto px-6 py-16">
|
|
402
|
-
<div class="glass p-16 rounded-[3rem] text-center glow-blue relative overflow-hidden">
|
|
403
|
-
<div class="absolute inset-0 bg-gradient-to-br from-starlight-blue_5 to-transparent"></div>
|
|
404
|
-
<h2 class="text-5xl font-black mb-6 uppercase italic tracking-tighter relative z-10">Join the Voyager Network</h2>
|
|
405
|
-
<p class="text-slate-400 text-xl font-medium mb-12 max-w-2xl mx-auto leading-relaxed relative z-10">Get early access to maiden voyages and exclusive stellar discounts directly in your comms link.</p>
|
|
406
|
-
<div class="flex flex-col md:flex-row gap-6 max-w-xl mx-auto relative z-10 items-center">
|
|
407
|
-
<input type="email" class="input-starlight h-16 flex-1 bg-white_5 border-white_10 text-white px-8 placeholder:text-white_20" placeholder="explorer@nebula.io">
|
|
408
|
-
<button class="btn-starlight px-12 h-16 text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-starlight-blue_20">Subscribe Link</button>
|
|
409
|
-
</div>
|
|
410
|
-
</div>
|
|
411
|
-
</section>
|
|
412
|
-
|
|
413
|
-
<!-- Footer -->
|
|
414
|
-
<footer class="starlight-footer">
|
|
415
|
-
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
|
|
416
|
-
<div class="text-xl font-bold text-gradient-starlight">NEBULA</div>
|
|
417
|
-
<div class="flex space-x-6 text-sm text-muted">
|
|
418
|
-
<a href="#" class="hover:text-white">Privacy</a>
|
|
419
|
-
<a href="#" class="hover:text-white">Terms</a>
|
|
420
|
-
<a href="#" class="hover:text-white">Safety</a>
|
|
421
|
-
<a href="#" class="hover:text-white">Support</a>
|
|
422
|
-
</div>
|
|
423
|
-
<p class="text-xs text-muted">© 2026 Nebula Voyage Group. Clear skies.</p>
|
|
424
|
-
</div>
|
|
425
|
-
</footer>
|
|
426
|
-
|
|
427
|
-
<script>
|
|
428
|
-
// Theme initialization and management is now handled
|
|
429
|
-
// automatically by Starlight.initTheme() in starlight.js
|
|
430
|
-
</script>
|
|
431
|
-
</body>
|
|
432
|
-
</html>
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Verification of Fixes</title>
|
|
6
|
-
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
7
|
-
<script src="../src/starlight.js"></script>
|
|
8
|
-
</head>
|
|
9
|
-
<body class="p-10 space-y-8 bg-black text-white">
|
|
10
|
-
<nav class="sticky top-0 z-50 glass p-4 mb-8">
|
|
11
|
-
<a href="#" class="font-bold">Home</a>
|
|
12
|
-
<a href="#" class="ml-4">Blog</a>
|
|
13
|
-
<a href="#" class="ml-4">About</a>
|
|
14
|
-
</nav>
|
|
15
|
-
|
|
16
|
-
<div class="starlight-card p-10">
|
|
17
|
-
<h1 class="text-4xl mb-4">Verification of Fixes</h1>
|
|
18
|
-
|
|
19
|
-
<div class="space-y-4">
|
|
20
|
-
<p>This paragraph should have margin-top if space-y-4 works.</p>
|
|
21
|
-
<p>Another paragraph to test vertical spacing.</p>
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
<div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-4">
|
|
25
|
-
<div class="lg="col-span-8" bg-blue-500 p-4">lg="grid-cols-12" test (8/12)</div>
|
|
26
|
-
<div class="lg="col-span-4" bg-red-500 p-4">lg="grid-cols-12" test (4/12)</div>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<div class="mt-8 flex gap-4">
|
|
30
|
-
<span class="badge badge-primary">Primary Badge</span>
|
|
31
|
-
<span class="badge badge-secondary">Secondary Badge</span>
|
|
32
|
-
<span class="badge badge-success">Success Badge</span>
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
<div class="mt-8">
|
|
36
|
-
<p>Testing <a href="#">link styling</a> within text.</p>
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<div class="mt-8 space-y-4">
|
|
40
|
-
<h3 class="text-xl">Form Elements</h3>
|
|
41
|
-
<input type="text" class="input-starlight" placeholder="Starlight Input">
|
|
42
|
-
<textarea class="textarea-starlight" placeholder="Starlight Textarea"></textarea>
|
|
43
|
-
<select class="input-starlight">
|
|
44
|
-
<option>Option 1</option>
|
|
45
|
-
<option>Option 2</option>
|
|
46
|
-
</select>
|
|
47
|
-
</div>
|
|
48
|
-
|
|
49
|
-
<div class="z-50 p-4 bg-green-500 mt-4">This has z-50</div>
|
|
50
|
-
</div>
|
|
51
|
-
</body>
|
|
52
|
-
</html>
|