@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,161 @@
|
|
|
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 AI - Design System</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<script src="../src/starlight.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
body {
|
|
11
|
+
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
|
|
12
|
+
color: white;
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
overflow-x: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.hero-glow {
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: -10%;
|
|
20
|
+
right: -10%;
|
|
21
|
+
width: 50%;
|
|
22
|
+
height: 50%;
|
|
23
|
+
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
24
|
+
filter: blur(60px);
|
|
25
|
+
z-index: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.hero-glow-2 {
|
|
29
|
+
position: absolute;
|
|
30
|
+
bottom: -10%;
|
|
31
|
+
left: -10%;
|
|
32
|
+
width: 50%;
|
|
33
|
+
height: 50%;
|
|
34
|
+
background: radial-gradient(circle, rgba(255, 179, 138, 0.1) 0%, transparent 70%);
|
|
35
|
+
filter: blur(60px);
|
|
36
|
+
z-index: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.float {
|
|
40
|
+
animation: float 6s ease-in-out infinite;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes float {
|
|
44
|
+
0% { transform: translateY(0px); }
|
|
45
|
+
50% { transform: translateY(-20px); }
|
|
46
|
+
100% { transform: translateY(0px); }
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Theme Toggle Styling */
|
|
50
|
+
.theme-toggle {
|
|
51
|
+
position: fixed;
|
|
52
|
+
top: 2rem;
|
|
53
|
+
right: 2rem;
|
|
54
|
+
z-index: 100;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
width: 2.5rem;
|
|
57
|
+
height: 2.5rem;
|
|
58
|
+
border-radius: 50%;
|
|
59
|
+
transition: background 0.3s ease;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.theme-toggle:hover {
|
|
67
|
+
background: rgba(255, 255, 255, 0.1);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
body.light-mode .theme-toggle:hover {
|
|
71
|
+
background: rgba(0, 0, 0, 0.05);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
body.light-mode {
|
|
75
|
+
background: #f1f5f9;
|
|
76
|
+
color: #1e293b;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
body.light-mode .glass {
|
|
80
|
+
background: rgba(0, 0, 0, 0.03) !important;
|
|
81
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
82
|
+
color: #1e293b !important;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sun-icon { display: none; }
|
|
86
|
+
body.light-mode .sun-icon { display: block; }
|
|
87
|
+
body.light-mode .moon-icon { display: none; }
|
|
88
|
+
</style>
|
|
89
|
+
</head>
|
|
90
|
+
<body class="p-8 min-h-screen">
|
|
91
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
92
|
+
<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>
|
|
93
|
+
<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>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="hero-glow"></div>
|
|
96
|
+
<div class="hero-glow-2"></div>
|
|
97
|
+
|
|
98
|
+
<div class="max-w-144 mx-auto">
|
|
99
|
+
<header class="mb-20 pt-16 text-center">
|
|
100
|
+
<h1 class="text-6xl font-bold tracking-tighter mb-6 float">
|
|
101
|
+
<span class="text-gradient-starlight">Starlight</span> Design
|
|
102
|
+
</h1>
|
|
103
|
+
<p class="text-xl text-gray-400 max-w-prose mx-auto mb-10">
|
|
104
|
+
An ethereal, futuristic CSS library inspired by the cosmos.
|
|
105
|
+
Built for the next generation of AI-driven interfaces.
|
|
106
|
+
</p>
|
|
107
|
+
<div class="flex justify-center gap-6">
|
|
108
|
+
<button class="bg-starlight text-black px-10 py-4 rounded-full font-bold glow-blue transition scale-105 hover:bg-white border-none">
|
|
109
|
+
Get Started
|
|
110
|
+
</button>
|
|
111
|
+
<button class="glass text-white px-12 py-4 rounded-full font-bold transition hover:bg-opacity-20 border-2 border-solid border-white border-opacity-20">
|
|
112
|
+
Documentation
|
|
113
|
+
</button>
|
|
114
|
+
</div>
|
|
115
|
+
</header>
|
|
116
|
+
|
|
117
|
+
<section class="mb-20">
|
|
118
|
+
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-10 text-center">Ethereal Components</h2>
|
|
119
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
120
|
+
<div class="glass p-10 rounded-2xl glow-blue">
|
|
121
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient-starlight">Glassmorphism</h3>
|
|
122
|
+
<p class="text-gray-400 mb-6">Translucent backgrounds with hardware-accelerated blur effects.</p>
|
|
123
|
+
<div class="glass p-4 rounded-xl">
|
|
124
|
+
<code class="text-sm text-starlight">.glass { backdrop-filter: blur(12px); }</code>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="glass p-10 rounded-2xl glow-peach">
|
|
129
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient-starlight">Atmospheric Glow</h3>
|
|
130
|
+
<p class="text-gray-400 mb-6">Soft, colored box shadows that create a sense of light and depth.</p>
|
|
131
|
+
<button class="w-full bg-starlight text-black py-3 rounded-xl font-bold glow-blue border-none">
|
|
132
|
+
Action Button
|
|
133
|
+
</button>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</section>
|
|
137
|
+
|
|
138
|
+
<section class="mb-20">
|
|
139
|
+
<div class="bg-starlight-deep glass p-12 rounded-3xl border border-white border-opacity-5 text-center">
|
|
140
|
+
<h2 class="text-4xl font-bold mb-6 text-gradient-starlight">Ready to Launch?</h2>
|
|
141
|
+
<p class="text-lg text-gray-400 mb-10">Experience the future of styling with Starlight AI.</p>
|
|
142
|
+
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
|
143
|
+
<input type="text" class="glass px-6 py-4 rounded-xl outline-none focus:border-starlight transition md:w-80" placeholder="Enter your email...">
|
|
144
|
+
<button class="bg-starlight text-black px-10 py-4 rounded-xl font-bold glow-blue transition hover:scale-105 border-none">
|
|
145
|
+
Join Waitlist
|
|
146
|
+
</button>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</section>
|
|
150
|
+
|
|
151
|
+
<footer class="mt-32 pt-10 border-t border-white border-opacity-10 text-center text-gray-500 text-sm">
|
|
152
|
+
© 2026 Starlight AI · Powered by Quantum CSS
|
|
153
|
+
</footer>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<script>
|
|
157
|
+
// Theme initialization and management is now handled
|
|
158
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
159
|
+
</script>
|
|
160
|
+
</body>
|
|
161
|
+
</html>
|
|
@@ -0,0 +1,174 @@
|
|
|
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
|
+
const savedTheme = localStorage.getItem('theme');
|
|
70
|
+
const effectiveTheme = localStorage.getItem('theme-effective');
|
|
71
|
+
const systemPrefers = window.matchMedia('(prefers-color-scheme: light)').matches;
|
|
72
|
+
|
|
73
|
+
const statusEl = document.getElementById('status');
|
|
74
|
+
const stateEl = document.getElementById('current-state');
|
|
75
|
+
|
|
76
|
+
// Debug information
|
|
77
|
+
console.log('Theme Debug:', {
|
|
78
|
+
currentTheme,
|
|
79
|
+
savedTheme,
|
|
80
|
+
effectiveTheme,
|
|
81
|
+
systemPrefers,
|
|
82
|
+
htmlDataTheme: html.getAttribute('data-theme'),
|
|
83
|
+
htmlAttributes: Object.keys(html.attributes).map(attr => `${attr}: ${html.getAttribute(attr)}`)
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
statusEl.innerHTML = `
|
|
87
|
+
<strong>Current Theme:</strong> ${currentTheme || 'null'}<br>
|
|
88
|
+
<strong>Saved Preference:</strong> ${savedTheme || 'none'}<br>
|
|
89
|
+
<strong>Effective Theme:</strong> ${effectiveTheme || currentTheme || 'null'}<br>
|
|
90
|
+
<strong>System Prefers:</strong> ${systemPrefers ? 'light' : 'dark'}
|
|
91
|
+
`;
|
|
92
|
+
|
|
93
|
+
stateEl.innerHTML = `
|
|
94
|
+
<div class="starlight-card" style="padding: 1rem; margin-top: 1rem;">
|
|
95
|
+
<h4>🎯 Theme Configuration:</h4>
|
|
96
|
+
<p><strong>html[data-theme]:</strong> ${currentTheme}</p>
|
|
97
|
+
<p><strong>localStorage theme:</strong> ${savedTheme || 'null'}</p>
|
|
98
|
+
<p><strong>localStorage theme-effective:</strong> ${effectiveTheme || 'null'}</p>
|
|
99
|
+
<p><strong>System prefers-color-scheme:</strong> ${systemPrefers ? 'light' : 'dark'}</p>
|
|
100
|
+
|
|
101
|
+
<h5>💡 How this works:</h5>
|
|
102
|
+
<ul>
|
|
103
|
+
<li>If theme is "auto", the system preference is followed</li>
|
|
104
|
+
<li>System theme changes are automatically detected</li>
|
|
105
|
+
<li>Your manual choice is saved and restored</li>
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
108
|
+
`;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Listen for theme changes
|
|
112
|
+
window.addEventListener('themechange', (e) => {
|
|
113
|
+
console.log('Theme changed:', e.detail);
|
|
114
|
+
updateStatus();
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// Listen for system theme changes
|
|
118
|
+
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
|
|
119
|
+
console.log('System theme changed to:', e.matches ? 'light' : 'dark');
|
|
120
|
+
updateStatus();
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// Initial update - wait for first themechange event or timeout
|
|
124
|
+
let themeInitialized = false;
|
|
125
|
+
const firstThemeChange = (e) => {
|
|
126
|
+
if (!themeInitialized) {
|
|
127
|
+
themeInitialized = true;
|
|
128
|
+
window.removeEventListener('themechange', firstThemeChange);
|
|
129
|
+
updateStatus();
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
window.addEventListener('themechange', firstThemeChange);
|
|
134
|
+
|
|
135
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
136
|
+
// Wait for Starlight to initialize, then check status
|
|
137
|
+
setTimeout(() => {
|
|
138
|
+
if (!themeInitialized) {
|
|
139
|
+
// If no themechange event fired yet, check current state
|
|
140
|
+
themeInitialized = true;
|
|
141
|
+
window.removeEventListener('themechange', firstThemeChange);
|
|
142
|
+
updateStatus();
|
|
143
|
+
}
|
|
144
|
+
}, 500); // Longer delay to ensure Starlight initialization
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
// Reset to auto function
|
|
148
|
+
function resetToAuto() {
|
|
149
|
+
console.log('Resetting to auto theme...');
|
|
150
|
+
if (typeof setTheme === 'function') {
|
|
151
|
+
setTheme('auto');
|
|
152
|
+
updateStatus();
|
|
153
|
+
} else {
|
|
154
|
+
console.error('setTheme function not available');
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// Also update every 2 seconds to show real-time changes
|
|
159
|
+
setInterval(updateStatus, 2000);
|
|
160
|
+
|
|
161
|
+
// Force refresh function
|
|
162
|
+
function forceRefresh() {
|
|
163
|
+
console.log('Forcing theme refresh...');
|
|
164
|
+
// Manually trigger Starlight theme initialization
|
|
165
|
+
if (window.Starlight && window.Starlight.initTheme) {
|
|
166
|
+
window.Starlight.initTheme();
|
|
167
|
+
setTimeout(updateStatus, 100);
|
|
168
|
+
} else {
|
|
169
|
+
console.error('Starlight not available');
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
</script>
|
|
173
|
+
</body>
|
|
174
|
+
</html>
|
|
@@ -0,0 +1,254 @@
|
|
|
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, #08081a, #000);
|
|
12
|
+
overflow-x: hidden;
|
|
13
|
+
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
|
+
}
|
|
15
|
+
body.light-mode {
|
|
16
|
+
background: #f1f5f9;
|
|
17
|
+
color: #1e293b;
|
|
18
|
+
}
|
|
19
|
+
.hero-glow {
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: -10%;
|
|
22
|
+
right: -10%;
|
|
23
|
+
width: 60%;
|
|
24
|
+
height: 60%;
|
|
25
|
+
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
26
|
+
filter: blur(100px);
|
|
27
|
+
z-index: 0;
|
|
28
|
+
transition: opacity 0.5s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body.light-mode .hero-glow {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Theme Toggle Styling */
|
|
36
|
+
.theme-toggle {
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
width: 2.5rem;
|
|
39
|
+
height: 2.5rem;
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
transition: background 0.3s ease;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
flex-shrink: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.theme-toggle:hover {
|
|
49
|
+
background: rgba(255, 255, 255, 0.1);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
body.light-mode .theme-toggle:hover {
|
|
53
|
+
background: rgba(0, 0, 0, 0.05);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
body.light-mode .glass {
|
|
57
|
+
background: rgba(0, 0, 0, 0.03) !important;
|
|
58
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
59
|
+
color: #1e293b !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.sun-icon { display: none; }
|
|
63
|
+
body.light-mode .sun-icon { display: block; }
|
|
64
|
+
body.light-mode .moon-icon { display: none; }
|
|
65
|
+
|
|
66
|
+
body.light-mode .starlight-card p,
|
|
67
|
+
body.light-mode header p,
|
|
68
|
+
body.light-mode section p {
|
|
69
|
+
color: #475569;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
body.light-mode .btn-outline:hover {
|
|
73
|
+
background-color: #1e293b;
|
|
74
|
+
color: white;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
body.light-mode input[type="date"]::-webkit-calendar-picker-indicator {
|
|
78
|
+
filter: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
input[type="date"] {
|
|
82
|
+
color-scheme: dark;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
body.light-mode input[type="date"] {
|
|
86
|
+
color-scheme: light;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
body.light-mode input {
|
|
90
|
+
color: #1e293b !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
body.light-mode input::placeholder {
|
|
94
|
+
color: rgba(0, 0, 0, 0.3) !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
body.light-mode .text-starlight-blue {
|
|
98
|
+
color: #2563eb !important;
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
101
|
+
</head>
|
|
102
|
+
<body class="text-primary">
|
|
103
|
+
<div class="hero-glow"></div>
|
|
104
|
+
|
|
105
|
+
<!-- Navigation -->
|
|
106
|
+
<nav class="glass sticky top-0 z-50 border-b border-white/10">
|
|
107
|
+
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
108
|
+
<div class="text-3xl font-black tracking-tighter text-gradient-starlight uppercase">NEBULA</div>
|
|
109
|
+
<div class="hidden md:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
110
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
|
|
111
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Cruises</a>
|
|
112
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Excursions</a>
|
|
113
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Concierge</a>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="flex items-center gap-4">
|
|
116
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
117
|
+
<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>
|
|
118
|
+
<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>
|
|
119
|
+
</div>
|
|
120
|
+
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</nav>
|
|
124
|
+
|
|
125
|
+
<!-- Hero Section -->
|
|
126
|
+
<header class="container mx-auto px-6 py-16 text-center">
|
|
127
|
+
<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>
|
|
128
|
+
<h1 class="text-7xl md:text-9xl font-black mb-10 leading-none uppercase italic tracking-tighter">
|
|
129
|
+
Travel Beyond <br>
|
|
130
|
+
<span class="text-gradient-starlight">The Horizon</span>
|
|
131
|
+
</h1>
|
|
132
|
+
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-16 font-medium leading-relaxed">
|
|
133
|
+
Experience the ethereal beauty of the outer rim with our exclusive Starlight-class lunar retreats and nebula cruises.
|
|
134
|
+
</p>
|
|
135
|
+
|
|
136
|
+
<!-- Search Bar -->
|
|
137
|
+
<div class="glass p-8 rounded-[2.5rem] max-w-5xl mx-auto flex flex-col md:flex-row gap-12 items-stretch shadow-2xl">
|
|
138
|
+
<div class="flex-1 flex flex-col items-start px-6">
|
|
139
|
+
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Destination</label>
|
|
140
|
+
<input type="text" class="w-full bg-transparent border-none text-white focus:outline-none text-2xl font-black p-0 placeholder:text-white/10" placeholder="Where to?">
|
|
141
|
+
</div>
|
|
142
|
+
<div class="border-l border-white/10 hidden md:block"></div>
|
|
143
|
+
<div class="flex-1 flex flex-col items-start px-6">
|
|
144
|
+
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Departure</label>
|
|
145
|
+
<input type="date" class="w-full bg-transparent border-none text-white focus:outline-none text-2xl font-black p-0" id="departure-date">
|
|
146
|
+
</div>
|
|
147
|
+
<button class="btn-starlight px-16 py-6 h-auto md:h-full text-lg font-black uppercase tracking-widest shadow-2xl hover:glow-blue">Search</button>
|
|
148
|
+
</div>
|
|
149
|
+
</header>
|
|
150
|
+
|
|
151
|
+
<!-- Featured Destinations -->
|
|
152
|
+
<section class="container mx-auto px-6 py-16">
|
|
153
|
+
<div class="flex justify-between items-end mb-16">
|
|
154
|
+
<div>
|
|
155
|
+
<span class="text-orange-600 font-black uppercase text-[10px] tracking-[0.3em] mb-3 block">Recommended Sights</span>
|
|
156
|
+
<h2 class="text-5xl font-black mb-3 uppercase italic tracking-tighter">Popular Sectors</h2>
|
|
157
|
+
<p class="text-slate-400 text-lg font-medium">Curated experiences from our master explorers.</p>
|
|
158
|
+
</div>
|
|
159
|
+
<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>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
|
|
163
|
+
<!-- Card 1 -->
|
|
164
|
+
<div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
|
|
165
|
+
<div class="h-80 bg-gray-800 relative overflow-hidden">
|
|
166
|
+
<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">
|
|
167
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
|
|
168
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
169
|
+
<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>
|
|
170
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">The Cassini</h3>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="p-10">
|
|
174
|
+
<p class="text-slate-400 font-medium leading-loose mb-10">Experience the majestic silence of the rings from our gold-plated observation deck. Artificial gravity enabled.</p>
|
|
175
|
+
<div class="flex justify-between items-center">
|
|
176
|
+
<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>
|
|
177
|
+
<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>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<!-- Card 2 -->
|
|
183
|
+
<div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
|
|
184
|
+
<div class="h-80 bg-gray-700 relative overflow-hidden">
|
|
185
|
+
<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">
|
|
186
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
|
|
187
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
188
|
+
<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>
|
|
189
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Biolume Forest</h3>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="p-10">
|
|
193
|
+
<p class="text-slate-400 font-medium leading-loose mb-10">Wander through the glowing flora of Proxima b in our climate-controlled bio-domes. Protective suits provided.</p>
|
|
194
|
+
<div class="flex justify-between items-center">
|
|
195
|
+
<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>
|
|
196
|
+
<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>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<!-- Card 3 -->
|
|
202
|
+
<div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
|
|
203
|
+
<div class="h-80 bg-gray-900 relative overflow-hidden">
|
|
204
|
+
<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">
|
|
205
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
|
|
206
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
207
|
+
<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>
|
|
208
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Valles Marineris</h3>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="p-10">
|
|
212
|
+
<p class="text-slate-400 font-medium leading-loose mb-10">Grand Canyon of Mars. Helicopter tours and dust-gliding available daily for elite members.</p>
|
|
213
|
+
<div class="flex justify-between items-center">
|
|
214
|
+
<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>
|
|
215
|
+
<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>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</section>
|
|
221
|
+
|
|
222
|
+
<!-- Newsletter -->
|
|
223
|
+
<section class="container mx-auto px-6 py-16">
|
|
224
|
+
<div class="glass p-16 rounded-[3rem] text-center glow-blue border-white/5 relative overflow-hidden">
|
|
225
|
+
<div class="absolute inset-0 bg-gradient-to-br from-starlight-blue/5 to-transparent"></div>
|
|
226
|
+
<h2 class="text-5xl font-black mb-6 uppercase italic tracking-tighter relative z-10">Join the Voyager Network</h2>
|
|
227
|
+
<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>
|
|
228
|
+
<div class="flex flex-col md:flex-row gap-6 max-w-xl mx-auto relative z-10 items-center">
|
|
229
|
+
<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">
|
|
230
|
+
<button class="btn-starlight px-12 h-16 text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-starlight-blue/20">Subscribe Link</button>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</section>
|
|
234
|
+
|
|
235
|
+
<!-- Footer -->
|
|
236
|
+
<footer class="border-t border-white/10 py-12 mt-20">
|
|
237
|
+
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
|
|
238
|
+
<div class="text-xl font-bold text-gradient-starlight">NEBULA</div>
|
|
239
|
+
<div class="flex space-x-6 text-sm text-muted">
|
|
240
|
+
<a href="#" class="hover:text-white">Privacy</a>
|
|
241
|
+
<a href="#" class="hover:text-white">Terms</a>
|
|
242
|
+
<a href="#" class="hover:text-white">Safety</a>
|
|
243
|
+
<a href="#" class="hover:text-white">Support</a>
|
|
244
|
+
</div>
|
|
245
|
+
<p class="text-xs text-muted">© 2026 Nebula Voyage Group. Clear skies.</p>
|
|
246
|
+
</div>
|
|
247
|
+
</footer>
|
|
248
|
+
|
|
249
|
+
<script>
|
|
250
|
+
// Theme initialization and management is now handled
|
|
251
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
252
|
+
</script>
|
|
253
|
+
</body>
|
|
254
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
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>
|