@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/starlight.html
CHANGED
|
@@ -89,8 +89,9 @@
|
|
|
89
89
|
</head>
|
|
90
90
|
<body class="p-8 min-h-screen">
|
|
91
91
|
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
92
|
-
<
|
|
93
|
-
<
|
|
92
|
+
<i class="q-icon-display"></i>
|
|
93
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
94
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
94
95
|
</div>
|
|
95
96
|
<div class="hero-glow"></div>
|
|
96
97
|
<div class="hero-glow-2"></div>
|
|
@@ -98,7 +99,7 @@
|
|
|
98
99
|
<div class="max-w-144 mx-auto">
|
|
99
100
|
<header class="mb-20 pt-16 text-center">
|
|
100
101
|
<h1 class="text-6xl font-bold tracking-tighter mb-6 float">
|
|
101
|
-
<span class="text-gradient
|
|
102
|
+
<span class="text-gradient">Starlight</span> Design
|
|
102
103
|
</h1>
|
|
103
104
|
<p class="text-xl text-gray-400 max-w-prose mx-auto mb-10">
|
|
104
105
|
An ethereal, futuristic CSS library inspired by the cosmos.
|
|
@@ -118,7 +119,7 @@
|
|
|
118
119
|
<h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-10 text-center">Ethereal Components</h2>
|
|
119
120
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
120
121
|
<div class="glass p-10 rounded-2xl glow-blue">
|
|
121
|
-
<h3 class="text-2xl font-bold mb-4 text-gradient
|
|
122
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient">Glassmorphism</h3>
|
|
122
123
|
<p class="text-gray-400 mb-6">Translucent backgrounds with hardware-accelerated blur effects.</p>
|
|
123
124
|
<div class="glass p-4 rounded-xl">
|
|
124
125
|
<code class="text-sm text-starlight">.glass { backdrop-filter: blur(12px); }</code>
|
|
@@ -126,7 +127,7 @@
|
|
|
126
127
|
</div>
|
|
127
128
|
|
|
128
129
|
<div class="glass p-10 rounded-2xl glow-peach">
|
|
129
|
-
<h3 class="text-2xl font-bold mb-4 text-gradient
|
|
130
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient">Atmospheric Glow</h3>
|
|
130
131
|
<p class="text-gray-400 mb-6">Soft, colored box shadows that create a sense of light and depth.</p>
|
|
131
132
|
<button class="w-full bg-starlight text-black py-3 rounded-xl font-bold glow-blue border-none">
|
|
132
133
|
Action Button
|
|
@@ -137,7 +138,7 @@
|
|
|
137
138
|
|
|
138
139
|
<section class="mb-20">
|
|
139
140
|
<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
|
|
141
|
+
<h2 class="text-4xl font-bold mb-6 text-gradient">Ready to Launch?</h2>
|
|
141
142
|
<p class="text-lg text-gray-400 mb-10">Experience the future of styling with Starlight AI.</p>
|
|
142
143
|
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
|
143
144
|
<input type="text" class="glass px-6 py-4 rounded-xl outline-none focus:border-starlight transition md:w-80" placeholder="Enter your email...">
|
package/examples/task.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
Add styles to email-client.semantic.css for email-client.semantic.html to match the appearance of
|
|
2
|
+
email-client.html.
|
|
3
|
+
|
|
4
|
+
Revise semantic html for email-client.semantic.html to use html5 custom tag syntax.
|
|
5
|
+
Produce reusable components layout and styling separately:
|
|
6
|
+
|
|
7
|
+
layout:
|
|
8
|
+
actions
|
|
9
|
+
|
|
10
|
+
component layout and starlight styling:
|
|
11
|
+
email-sidebar, user-cell, email-list, email-content, email-header, email-body, attachments
|
|
12
|
+
|
|
@@ -0,0 +1,514 @@
|
|
|
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
|
+
/* Theme variables */
|
|
11
|
+
body {
|
|
12
|
+
background: radial-gradient(
|
|
13
|
+
circle at top right,
|
|
14
|
+
var(--q-color-starlight-deep),
|
|
15
|
+
#000
|
|
16
|
+
);
|
|
17
|
+
overflow-x: hidden;
|
|
18
|
+
transition: background-color 0.5s ease, color 0.5s ease;
|
|
19
|
+
}
|
|
20
|
+
html[data-theme="dark"] { color: var(--q-text-primary); }
|
|
21
|
+
html[data-theme="light"] {
|
|
22
|
+
background: var(--q-light-bg) !important;
|
|
23
|
+
color: var(--q-light-text);
|
|
24
|
+
}
|
|
25
|
+
html[data-theme="light"] body { background: var(--q-light-bg) !important; }
|
|
26
|
+
|
|
27
|
+
/* Hero Glow */
|
|
28
|
+
.hero-glow {
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: -10%;
|
|
31
|
+
right: -10%;
|
|
32
|
+
width: 60%;
|
|
33
|
+
height: 60%;
|
|
34
|
+
background: radial-gradient(
|
|
35
|
+
circle,
|
|
36
|
+
rgba(0, 212, 255, 0.15) 0%,
|
|
37
|
+
transparent 70%
|
|
38
|
+
);
|
|
39
|
+
filter: blur(100px);
|
|
40
|
+
z-index: -1;
|
|
41
|
+
transition: opacity 0.5s ease;
|
|
42
|
+
}
|
|
43
|
+
html[data-theme="light"] .hero-glow { opacity: 0; }
|
|
44
|
+
|
|
45
|
+
/* Theme Toggle Styling */
|
|
46
|
+
.theme-toggle {
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
width: 2.5rem;
|
|
49
|
+
height: 2.5rem;
|
|
50
|
+
border-radius: 50%;
|
|
51
|
+
transition: background 0.3s ease;
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
flex-shrink: 0;
|
|
56
|
+
}
|
|
57
|
+
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); }
|
|
58
|
+
|
|
59
|
+
/* Light mode overrides */
|
|
60
|
+
html[data-theme="light"] .glass {
|
|
61
|
+
background: var(--q-glass-bg) !important;
|
|
62
|
+
border-color: var(--q-glass-border) !important;
|
|
63
|
+
color: var(--q-light-text) !important;
|
|
64
|
+
}
|
|
65
|
+
html[data-theme="light"] .starlight-card p,
|
|
66
|
+
html[data-theme="light"] header p,
|
|
67
|
+
html[data-theme="light"] section p { color: var(--q-light-text-muted); }
|
|
68
|
+
html[data-theme="light"] .btn-outline:hover {
|
|
69
|
+
background-color: var(--q-light-text);
|
|
70
|
+
color: white;
|
|
71
|
+
}
|
|
72
|
+
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
|
|
73
|
+
html[data-theme="light"] input[type="date"] { color-scheme: light; }
|
|
74
|
+
html[data-theme="light"] input { color: var(--q-light-text) !important; }
|
|
75
|
+
html[data-theme="light"] input::placeholder { color: var(--q-light-text-muted) !important; }
|
|
76
|
+
html[data-theme="light"] .text-starlight-blue { color: var(--q-color-primary) !important; }
|
|
77
|
+
html[data-theme="light"] .nav-header {
|
|
78
|
+
background: var(--q-light-card-bg) !important;
|
|
79
|
+
border-bottom-color: var(--q-light-card-border) !important;
|
|
80
|
+
}
|
|
81
|
+
.nav-header { padding: 0; }
|
|
82
|
+
.nav-header .nav-links { flex: none; }
|
|
83
|
+
.nav-header .btn-starlight { display: none; }
|
|
84
|
+
@media (min-width: 768px) {
|
|
85
|
+
.nav-header .btn-starlight { display: block; }
|
|
86
|
+
}
|
|
87
|
+
html[data-theme="light"] .nav-header a { color: var(--q-light-text-muted) !important; }
|
|
88
|
+
html[data-theme="light"] .nav-header a:hover { color: var(--q-color-primary) !important; }
|
|
89
|
+
html[data-theme="light"] .text-gradient {
|
|
90
|
+
background: none;
|
|
91
|
+
-webkit-text-fill-color: var(--q-light-text);
|
|
92
|
+
color: var(--q-light-text);
|
|
93
|
+
}
|
|
94
|
+
html[data-theme="light"] .glass input { color: var(--q-light-text) !important; }
|
|
95
|
+
html[data-theme="light"] .glass input::placeholder { color: var(--q-light-text-muted) !important; }
|
|
96
|
+
html[data-theme="light"] .glass .btn-starlight { background: var(--q-light-text); color: white; }
|
|
97
|
+
html[data-theme="light"] .starlight-card {
|
|
98
|
+
background: var(--q-light-card-bg) !important;
|
|
99
|
+
border-color: var(--q-light-card-border) !important;
|
|
100
|
+
}
|
|
101
|
+
html[data-theme="light"] .starlight-card h3 { color: var(--q-light-text) !important; }
|
|
102
|
+
html[data-theme="light"] .starlight-card .text-slate-400 { color: var(--q-light-text-muted) !important; }
|
|
103
|
+
html[data-theme="light"] .btn-outline {
|
|
104
|
+
border-color: var(--q-light-text) !important;
|
|
105
|
+
color: var(--q-light-text) !important;
|
|
106
|
+
}
|
|
107
|
+
html[data-theme="light"] .btn-outline:hover {
|
|
108
|
+
background-color: var(--q-light-text) !important;
|
|
109
|
+
color: white !important;
|
|
110
|
+
}
|
|
111
|
+
html[data-theme="light"] .starlight-footer {
|
|
112
|
+
background: var(--q-light-bg) !important;
|
|
113
|
+
border-top-color: var(--q-light-card-border) !important;
|
|
114
|
+
}
|
|
115
|
+
html[data-theme="light"] .starlight-footer a { color: var(--q-light-text-muted) !important; }
|
|
116
|
+
html[data-theme="light"] .starlight-footer a:hover { color: var(--q-color-primary) !important; }
|
|
117
|
+
html[data-theme="light"] .starlight-footer p { color: var(--q-light-text-muted) !important; }
|
|
118
|
+
html[data-theme="light"] .badge-primary {
|
|
119
|
+
background-color: rgba(37, 99, 235, 0.1) !important;
|
|
120
|
+
color: var(--q-color-primary) !important;
|
|
121
|
+
}
|
|
122
|
+
html[data-theme="light"] .border-white_10 { border-color: var(--q-light-card-border) !important; }
|
|
123
|
+
html[data-theme="light"] .text-white { color: var(--q-light-text) !important; }
|
|
124
|
+
html[data-theme="light"] .text-white_10 { color: var(--q-light-text-muted) !important; }
|
|
125
|
+
html[data-theme="light"] .text-slate-400 { color: var(--q-light-text-muted) !important; }
|
|
126
|
+
html[data-theme="light"] .text-slate-500 { color: var(--q-light-text-muted) !important; }
|
|
127
|
+
html[data-theme="light"] .bg-white_5 { background: var(--q-glass-bg) !important; }
|
|
128
|
+
html[data-theme="light"] h1 { color: var(--q-light-text) !important; }
|
|
129
|
+
html[data-theme="light"] h2 { color: var(--q-light-text) !important; }
|
|
130
|
+
html[data-theme="light"] h3 { color: var(--q-light-text) !important; }
|
|
131
|
+
html[data-theme="light"] .bg-gray-800,
|
|
132
|
+
html[data-theme="light"] .bg-gray-700,
|
|
133
|
+
html[data-theme="light"] .bg-gray-900 { background-color: var(--q-light-card-bg) !important; }
|
|
134
|
+
html[data-theme="light"] .starlight-card .absolute .badge,
|
|
135
|
+
html[data-theme="light"] .starlight-card .absolute h3 { color: white !important; }
|
|
136
|
+
html[data-theme="light"] .bg-gradient-to-br {
|
|
137
|
+
background: linear-gradient(to bottom right, var(--q-color-primary-100), transparent) !important;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* Date Picker Starlight Theme */
|
|
141
|
+
#departure-picker .date-picker-dropdown {
|
|
142
|
+
background: rgba(8, 8, 26, 0.95);
|
|
143
|
+
border-color: rgba(0, 212, 255, 0.2);
|
|
144
|
+
backdrop-filter: blur(20px);
|
|
145
|
+
}
|
|
146
|
+
#departure-picker .date-picker-title {
|
|
147
|
+
color: var(--q-color-starlight-blue);
|
|
148
|
+
}
|
|
149
|
+
#departure-picker .date-picker-nav-btn {
|
|
150
|
+
color: rgba(255, 255, 255, 0.7);
|
|
151
|
+
}
|
|
152
|
+
#departure-picker .date-picker-nav-btn:hover {
|
|
153
|
+
color: var(--q-color-starlight-blue);
|
|
154
|
+
background: rgba(0, 212, 255, 0.1);
|
|
155
|
+
}
|
|
156
|
+
#departure-picker .date-picker-day {
|
|
157
|
+
color: rgba(255, 255, 255, 0.8);
|
|
158
|
+
}
|
|
159
|
+
#departure-picker .date-picker-day:hover {
|
|
160
|
+
background: rgba(0, 212, 255, 0.2);
|
|
161
|
+
color: var(--q-color-starlight-blue);
|
|
162
|
+
}
|
|
163
|
+
#departure-picker .date-picker-day.today {
|
|
164
|
+
color: var(--q-color-starlight-blue);
|
|
165
|
+
font-weight: bold;
|
|
166
|
+
}
|
|
167
|
+
#departure-picker .date-picker-day.selected {
|
|
168
|
+
background: var(--q-color-starlight-blue);
|
|
169
|
+
color: #000;
|
|
170
|
+
}
|
|
171
|
+
#departure-picker .date-picker-day.disabled {
|
|
172
|
+
color: rgba(255, 255, 255, 0.3);
|
|
173
|
+
}
|
|
174
|
+
#departure-picker .date-picker-day.other-month {
|
|
175
|
+
color: rgba(255, 255, 255, 0.2);
|
|
176
|
+
}
|
|
177
|
+
html[data-theme="light"] #departure-picker .date-picker-dropdown {
|
|
178
|
+
background: rgba(255, 255, 255, 0.98);
|
|
179
|
+
border-color: #e2e8f0;
|
|
180
|
+
}
|
|
181
|
+
html[data-theme="light"] #departure-picker .date-picker-day {
|
|
182
|
+
color: var(--q-light-text);
|
|
183
|
+
}
|
|
184
|
+
html[data-theme="light"] #departure-picker .date-picker-day:hover {
|
|
185
|
+
background: rgba(59, 130, 246, 0.1);
|
|
186
|
+
color: var(--q-color-primary);
|
|
187
|
+
}
|
|
188
|
+
html[data-theme="light"] #departure-picker .date-picker-day.today {
|
|
189
|
+
color: var(--q-color-primary);
|
|
190
|
+
}
|
|
191
|
+
html[data-theme="light"] #departure-picker .date-picker-day.selected {
|
|
192
|
+
background: var(--q-color-primary);
|
|
193
|
+
color: white;
|
|
194
|
+
}
|
|
195
|
+
</style>
|
|
196
|
+
</head>
|
|
197
|
+
<body class="text-primary">
|
|
198
|
+
<div class="hero-glow"></div>
|
|
199
|
+
|
|
200
|
+
<!-- Navigation -->
|
|
201
|
+
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
|
|
202
|
+
<header class="nav-header">
|
|
203
|
+
<div class="container mx-auto px-6 flex items-center justify-between w-full">
|
|
204
|
+
<h1 class="text-3xl font-black tracking-tighter text-gradient uppercase">NEBULA</h1>
|
|
205
|
+
|
|
206
|
+
<nav class="nav-links space-x-12 text-[11px] font-black uppercase tracking-[0.2em] flex-1 justify-center">
|
|
207
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
|
|
208
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Cruises</a>
|
|
209
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Excursions</a>
|
|
210
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Concierge</a>
|
|
211
|
+
</nav>
|
|
212
|
+
|
|
213
|
+
<div class="flex items-center gap-4">
|
|
214
|
+
<button id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
215
|
+
<i class="q-icon-display"></i>
|
|
216
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
217
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
218
|
+
</button>
|
|
219
|
+
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
220
|
+
<label for="nav-toggle" class="nav-hamburger" aria-label="Toggle menu">
|
|
221
|
+
<span class="nav-hamburger-icon"><span></span><span></span><span></span></span>
|
|
222
|
+
</label>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</header>
|
|
226
|
+
|
|
227
|
+
<!-- Mobile Drawer -->
|
|
228
|
+
<div class="nav-drawer">
|
|
229
|
+
<div class="nav-drawer-inner">
|
|
230
|
+
<a href="#">Destinations</a>
|
|
231
|
+
<a href="#">Cruises</a>
|
|
232
|
+
<a href="#">Excursions</a>
|
|
233
|
+
<a href="#">Concierge</a>
|
|
234
|
+
<div class="pt-4 border-t border-white_5">
|
|
235
|
+
<button class="btn-starlight w-full py-3">Book Now</button>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<!-- Hero Section -->
|
|
241
|
+
<section class="starlight-hero" style="overflow: visible;">
|
|
242
|
+
<div class="max-w-5xl mx-auto">
|
|
243
|
+
<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>
|
|
244
|
+
<h1 class="text-6xl font-black mb-10 leading-none uppercase italic tracking-tighter text-center">
|
|
245
|
+
Travel Beyond <br />
|
|
246
|
+
<span class="text-gradient">The Horizon</span>
|
|
247
|
+
</h1>
|
|
248
|
+
<p class="text-xl text-slate-400 max-w-4xl mx-auto mb-16 font-medium leading-relaxed">
|
|
249
|
+
Experience the ethereal beauty of the outer rim with our exclusive Starlight-class lunar retreats and nebula cruises.
|
|
250
|
+
</p>
|
|
251
|
+
|
|
252
|
+
<!-- Search Form -->
|
|
253
|
+
<form 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-center shadow-2xl" style="overflow: visible;">
|
|
254
|
+
<div class="flex-1 flex flex-col items-start px-4 md:px-6 py-2">
|
|
255
|
+
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Destination</label>
|
|
256
|
+
<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="Where to?" style="color: rgba(255,255,255,0.4);">
|
|
257
|
+
</div>
|
|
258
|
+
<div class="border-l border-white_10 hidden md:block self-stretch"></div>
|
|
259
|
+
<div class="flex-1 flex flex-col items-start px-4 md:px-6 py-2 relative" style="overflow: visible;">
|
|
260
|
+
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Departure</label>
|
|
261
|
+
<div class="date-picker w-full" id="departure-picker" style="overflow: visible;">
|
|
262
|
+
<input type="text" class="date-picker-input bg-transparent border-none text-white focus:outline-none text-xl md:text-2xl font-black p-0 w-full cursor-pointer" id="departure-date" placeholder="Select date" readonly>
|
|
263
|
+
<div class="date-picker-dropdown" id="departure-calendar" style="position: absolute; top: 100%; margin-top: 0.5rem; overflow: visible;"></div>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
<button type="submit" class="btn-starlight px-8 md:px-16 py-4 md:py-6 text-base md:text-lg font-black uppercase tracking-widest shadow-2xl hover:glow-blue shrink-0">Search</button>
|
|
267
|
+
</form>
|
|
268
|
+
</div>
|
|
269
|
+
</section>
|
|
270
|
+
|
|
271
|
+
<!-- Featured Destinations -->
|
|
272
|
+
<section class="container mx-auto px-6 py-16" data-section="destinations">
|
|
273
|
+
<div class="flex justify-between items-end mb-16">
|
|
274
|
+
<div>
|
|
275
|
+
<span class="text-orange-600 font-black uppercase text-[10px] tracking-[0.3em] mb-3 block">Recommended Sights</span>
|
|
276
|
+
<h2 class="text-5xl font-black mb-3 uppercase italic tracking-tighter">Popular Sectors</h2>
|
|
277
|
+
<p class="text-slate-400 text-lg font-medium">Curated experiences from our master explorers.</p>
|
|
278
|
+
</div>
|
|
279
|
+
<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>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
283
|
+
<!-- Card 1 -->
|
|
284
|
+
<article class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
|
|
285
|
+
<div class="h-64 bg-gray-800 relative overflow-hidden">
|
|
286
|
+
<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">
|
|
287
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
|
|
288
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
289
|
+
<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>
|
|
290
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">The Cassini</h3>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="p-6 flex flex-col flex-1">
|
|
294
|
+
<p class="text-slate-400 font-medium leading-loose mb-6 flex-1">Experience the majestic silence of the rings from our gold-plated observation deck. Artificial gravity enabled.</p>
|
|
295
|
+
<div class="flex justify-between items-center whitespace-nowrap gap-4">
|
|
296
|
+
<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>
|
|
297
|
+
<button class="btn btn-outline px-4 h-10 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</article>
|
|
301
|
+
|
|
302
|
+
<!-- Card 2 -->
|
|
303
|
+
<article class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
|
|
304
|
+
<div class="h-64 bg-gray-800 relative overflow-hidden">
|
|
305
|
+
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80" alt="Nebula" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
306
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
|
|
307
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
308
|
+
<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">Deep Space</span>
|
|
309
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Orion Station</h3>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="p-6 flex flex-col flex-1">
|
|
313
|
+
<p class="text-slate-400 font-medium leading-loose mb-6 flex-1">Luxury accommodations at the edge of known space. Zero-gravity spa and stellar dining.</p>
|
|
314
|
+
<div class="flex justify-between items-center whitespace-nowrap gap-4">
|
|
315
|
+
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">6.8 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ night</span></span>
|
|
316
|
+
<button class="btn btn-outline px-4 h-10 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
</article>
|
|
320
|
+
|
|
321
|
+
<!-- Card 3 -->
|
|
322
|
+
<article class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
|
|
323
|
+
<div class="h-64 bg-gray-800 relative overflow-hidden">
|
|
324
|
+
<img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=800&q=80" alt="Galaxy" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
325
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
|
|
326
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
327
|
+
<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">Exoplanet</span>
|
|
328
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Kepler Resort</h3>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
<div class="p-6 flex flex-col flex-1">
|
|
332
|
+
<p class="text-slate-400 font-medium leading-loose mb-6 flex-1">First Earth-like exoplanet resort. Atmosphere synth and artificial sunlight.</p>
|
|
333
|
+
<div class="flex justify-between items-center whitespace-nowrap gap-4">
|
|
334
|
+
<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">/ night</span></span>
|
|
335
|
+
<button class="btn btn-outline px-4 h-10 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
</article>
|
|
339
|
+
</div>
|
|
340
|
+
</section>
|
|
341
|
+
|
|
342
|
+
<!-- Newsletter -->
|
|
343
|
+
<section class="container mx-auto px-6 py-16" data-section="newsletter">
|
|
344
|
+
<div class="glass p-16 rounded-[3rem] text-center glow-blue relative overflow-hidden">
|
|
345
|
+
<div class="absolute inset-0 bg-gradient-to-br from-starlight-blue_5 to-transparent"></div>
|
|
346
|
+
<h2 class="text-5xl font-black mb-6 uppercase italic tracking-tighter relative z-10">Join the Voyager Network</h2>
|
|
347
|
+
<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>
|
|
348
|
+
<div class="flex flex-col md:flex-row gap-6 max-w-xl mx-auto relative z-10 items-center">
|
|
349
|
+
<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">
|
|
350
|
+
<button type="submit" class="btn-starlight px-10 h-16 text-[10px] font-black uppercase tracking-widest">Subscribe</button>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</section>
|
|
354
|
+
|
|
355
|
+
<!-- Footer -->
|
|
356
|
+
<footer class="starlight-footer border-t border-white_10 mt-16">
|
|
357
|
+
<div class="container mx-auto px-6 py-12">
|
|
358
|
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
|
|
359
|
+
<div>
|
|
360
|
+
<h3 class="text-2xl font-black mb-4 uppercase italic text-gradient">Nebula</h3>
|
|
361
|
+
<p class="text-slate-400 font-medium">Pioneering cosmic travel since 2089. Your journey to the stars begins here.</p>
|
|
362
|
+
</div>
|
|
363
|
+
<div>
|
|
364
|
+
<h4 class="font-black uppercase text-[10px] tracking-[0.2em] mb-4">Destinations</h4>
|
|
365
|
+
<ul class="space-y-2">
|
|
366
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Andromeda</a></li>
|
|
367
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Orion</a></li>
|
|
368
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Pleiades</a></li>
|
|
369
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Milky Way</a></li>
|
|
370
|
+
</ul>
|
|
371
|
+
</div>
|
|
372
|
+
<div>
|
|
373
|
+
<h4 class="font-black uppercase text-[10px] tracking-[0.2em] mb-4">Company</h4>
|
|
374
|
+
<ul class="space-y-2">
|
|
375
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">About</a></li>
|
|
376
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Careers</a></li>
|
|
377
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Press</a></li>
|
|
378
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Blog</a></li>
|
|
379
|
+
</ul>
|
|
380
|
+
</div>
|
|
381
|
+
<div>
|
|
382
|
+
<h4 class="font-black uppercase text-[10px] tracking-[0.2em] mb-4">Support</h4>
|
|
383
|
+
<ul class="space-y-2">
|
|
384
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Contact</a></li>
|
|
385
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">FAQ</a></li>
|
|
386
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Privacy</a></li>
|
|
387
|
+
<li><a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors font-medium">Terms</a></li>
|
|
388
|
+
</ul>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
<div class="border-t border-white_10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
392
|
+
<p class="text-slate-500 text-sm font-medium">© 2089 Nebula Travel. All rights reserved.</p>
|
|
393
|
+
<div class="flex gap-4">
|
|
394
|
+
<a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors">
|
|
395
|
+
<i class="q-icon-twitter"></i>
|
|
396
|
+
</a>
|
|
397
|
+
<a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors">
|
|
398
|
+
<i class="q-icon-instagram"></i>
|
|
399
|
+
</a>
|
|
400
|
+
<a href="#" class="text-slate-400 hover:text-starlight-blue transition-colors">
|
|
401
|
+
<i class="q-icon-github"></i>
|
|
402
|
+
</a>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</footer>
|
|
407
|
+
|
|
408
|
+
<script>
|
|
409
|
+
// Theme toggle
|
|
410
|
+
const themeBtn = document.getElementById('theme-btn');
|
|
411
|
+
themeBtn?.addEventListener('click', () => {
|
|
412
|
+
const html = document.documentElement;
|
|
413
|
+
const current = html.getAttribute('data-theme');
|
|
414
|
+
html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
|
|
415
|
+
});
|
|
416
|
+
|
|
417
|
+
// Date Picker for Departure
|
|
418
|
+
(function() {
|
|
419
|
+
const picker = document.getElementById('departure-picker');
|
|
420
|
+
const input = document.getElementById('departure-date');
|
|
421
|
+
const calendar = document.getElementById('departure-calendar');
|
|
422
|
+
|
|
423
|
+
if (!picker || !input || !calendar) return;
|
|
424
|
+
|
|
425
|
+
let currentDate = new Date();
|
|
426
|
+
let viewDate = new Date();
|
|
427
|
+
|
|
428
|
+
const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
429
|
+
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June',
|
|
430
|
+
'July', 'August', 'September', 'October', 'November', 'December'];
|
|
431
|
+
|
|
432
|
+
function renderCalendar(date) {
|
|
433
|
+
const year = date.getFullYear();
|
|
434
|
+
const month = date.getMonth();
|
|
435
|
+
const firstDay = new Date(year, month, 1).getDay();
|
|
436
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
437
|
+
const today = new Date();
|
|
438
|
+
|
|
439
|
+
let html = `
|
|
440
|
+
<div class="date-picker-header">
|
|
441
|
+
<span class="date-picker-title">${MONTHS[month]} ${year}</span>
|
|
442
|
+
<div class="date-picker-nav">
|
|
443
|
+
<button class="date-picker-nav-btn" data-action="prev"><</button>
|
|
444
|
+
<button class="date-picker-nav-btn" data-action="next">></button>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
<div class="date-picker-grid">
|
|
448
|
+
${DAYS.map(d => `<div class="date-picker-weekday">${d}</div>`).join('')}
|
|
449
|
+
`;
|
|
450
|
+
|
|
451
|
+
for (let i = 0; i < firstDay; i++) {
|
|
452
|
+
html += '<div class="date-picker-day other-month"></div>';
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
for (let day = 1; day <= daysInMonth; day++) {
|
|
456
|
+
const dayDate = new Date(year, month, day);
|
|
457
|
+
const isToday = dayDate.toDateString() === today.toDateString();
|
|
458
|
+
const isSelected = dayDate.toDateString() === currentDate.toDateString();
|
|
459
|
+
const isPast = dayDate < today && !isToday;
|
|
460
|
+
|
|
461
|
+
let classes = 'date-picker-day';
|
|
462
|
+
if (isToday) classes += ' today';
|
|
463
|
+
if (isSelected) classes += ' selected';
|
|
464
|
+
if (isPast) classes += ' disabled';
|
|
465
|
+
|
|
466
|
+
html += `<div class="${classes}" data-date="${dayDate.toISOString()}">${day}</div>`;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
html += '</div>';
|
|
470
|
+
calendar.innerHTML = html;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
function selectDate(dateStr) {
|
|
474
|
+
const date = new Date(dateStr);
|
|
475
|
+
currentDate = date;
|
|
476
|
+
input.value = date.toLocaleDateString('en-US', {
|
|
477
|
+
month: 'short',
|
|
478
|
+
day: 'numeric',
|
|
479
|
+
year: 'numeric'
|
|
480
|
+
});
|
|
481
|
+
picker.classList.remove('active');
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
function changeMonth(delta) {
|
|
485
|
+
viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + delta, 1);
|
|
486
|
+
renderCalendar(viewDate);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
input.addEventListener('click', () => {
|
|
490
|
+
picker.classList.toggle('active');
|
|
491
|
+
renderCalendar(viewDate);
|
|
492
|
+
});
|
|
493
|
+
|
|
494
|
+
calendar.addEventListener('click', (e) => {
|
|
495
|
+
const target = e.target;
|
|
496
|
+
|
|
497
|
+
if (target.dataset.action === 'prev') {
|
|
498
|
+
changeMonth(-1);
|
|
499
|
+
} else if (target.dataset.action === 'next') {
|
|
500
|
+
changeMonth(1);
|
|
501
|
+
} else if (target.dataset.date && !target.classList.contains('disabled')) {
|
|
502
|
+
selectDate(target.dataset.date);
|
|
503
|
+
}
|
|
504
|
+
});
|
|
505
|
+
|
|
506
|
+
document.addEventListener('click', (e) => {
|
|
507
|
+
if (!picker.contains(e.target)) {
|
|
508
|
+
picker.classList.remove('active');
|
|
509
|
+
}
|
|
510
|
+
});
|
|
511
|
+
})();
|
|
512
|
+
</script>
|
|
513
|
+
</body>
|
|
514
|
+
</html>
|