@howssatoshi/quantumcss 1.8.0 → 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 +10 -1
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +136 -299
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +43 -70
- 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/images/eric.png +0 -0
- package/examples/index.html +342 -259
- package/examples/kitchen-sink.html +332 -94
- package/examples/music-streaming.html +32 -91
- package/examples/news.html +199 -0
- package/examples/nova-shop.css +984 -0
- package/examples/portfolio.html +235 -0
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +11 -9
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +310 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +19 -16
- package/src/generator.js +12 -3
- package/src/starlight.js +20 -15
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +110 -58
- package/src/styles/quantum-components.css +2379 -349
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2702 -1054
- package/dist/index.html +0 -232
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -287
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -340
- package/examples/gradient-test.html +0 -124
- package/examples/news-template.html +0 -317
- package/examples/portfolio-resume.html +0 -647
- 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 -338
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -275
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
package/examples/index.html
CHANGED
|
@@ -1,287 +1,370 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
|
|
15
|
-
width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer;
|
|
16
|
-
color: inherit; font-weight: 700; backdrop-filter: blur(10px);
|
|
17
|
-
display: flex; align-items: center; justify-content: center;
|
|
18
|
-
transition: all 0.3s ease;
|
|
19
|
-
flex-shrink: 0;
|
|
20
|
-
}
|
|
21
|
-
.theme-toggle:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }
|
|
22
|
-
html[data-theme="light"] .theme-toggle { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
|
|
23
|
-
.theme-toggle svg { width: 1.5rem; height: 1.5rem; }
|
|
24
|
-
.hidden { display: none; }
|
|
25
|
-
</style>
|
|
26
|
-
</head>
|
|
27
|
-
<body>
|
|
28
|
-
<div class="starlight-stars" id="stars">
|
|
29
|
-
<div class="star" style="top: 10%; left: 20%; --duration: 3s;"></div>
|
|
30
|
-
<div class="star" style="top: 30%; left: 80%; --duration: 4s;"></div>
|
|
31
|
-
<div class="star" style="top: 70%; left: 40%; --duration: 5s;"></div>
|
|
32
|
-
<div class="star" style="top: 50%; left: 10%; --duration: 3s;"></div>
|
|
33
|
-
<div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
|
|
34
|
-
</div>
|
|
35
|
-
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
36
|
-
<svg class="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>
|
|
37
|
-
<svg class="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>
|
|
38
|
-
</button>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Starlight Design System</title>
|
|
7
|
+
<!-- QuantumCSS -->
|
|
8
|
+
<link rel="stylesheet" href="../dist/quantum.min.css" />
|
|
9
|
+
<script src="../src/starlight.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
background: transparent !important;
|
|
13
|
+
}
|
|
39
14
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
15
|
+
/* Theme Toggle specific local style */
|
|
16
|
+
.theme-toggle {
|
|
17
|
+
position: fixed;
|
|
18
|
+
top: 2rem;
|
|
19
|
+
right: 2rem;
|
|
20
|
+
z-index: 100;
|
|
21
|
+
background: var(--q-color-surface);
|
|
22
|
+
border: 1px solid var(--q-color-border);
|
|
23
|
+
width: 2.7rem;
|
|
24
|
+
height: 2.7rem;
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
transition: all 0.3s ease;
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
}
|
|
33
|
+
.theme-toggle:hover {
|
|
34
|
+
background: var(--q-highlight-bg);
|
|
35
|
+
transform: scale(1.05);
|
|
36
|
+
}
|
|
37
|
+
.theme-toggle svg {
|
|
38
|
+
width: 1.5rem;
|
|
39
|
+
height: 1.5rem;
|
|
40
|
+
}
|
|
41
|
+
header,
|
|
42
|
+
section {
|
|
43
|
+
position: relative;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
}
|
|
57
46
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
47
|
+
/* Page-specific vibrancy: Primary hue for icons and titles */
|
|
48
|
+
.starlight-card h3 {
|
|
49
|
+
color: var(--q-color-starlight-blue);
|
|
50
|
+
transition: all 0.3s ease;
|
|
51
|
+
}
|
|
52
|
+
.starlight-card:hover h3 {
|
|
53
|
+
color: var(--q-color-starlight-peach);
|
|
54
|
+
text-shadow: 0 0 15px var(--q-color-starlight-glow);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.starlight-card svg {
|
|
58
|
+
color: var(--q-color-starlight-blue) !important;
|
|
59
|
+
filter: drop-shadow(0 0 10px var(--q-color-starlight-glow));
|
|
60
|
+
transition: all 0.3s ease;
|
|
61
|
+
}
|
|
62
|
+
.starlight-card:hover svg {
|
|
63
|
+
transform: scale(1.1);
|
|
64
|
+
filter: drop-shadow(0 0 20px var(--q-color-starlight-blue));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Light Mode Specific Overrides */
|
|
68
|
+
html[data-theme="light"] .starlight-card h3 {
|
|
69
|
+
color: #000;
|
|
70
|
+
background: none;
|
|
71
|
+
-webkit-text-fill-color: initial;
|
|
72
|
+
}
|
|
73
|
+
html[data-theme="light"] .starlight-card svg {
|
|
74
|
+
color: #000 !important;
|
|
75
|
+
filter: none;
|
|
76
|
+
}
|
|
77
|
+
html[data-theme="light"] .starlight-card:hover h3 {
|
|
78
|
+
color: var(--q-color-primary);
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
</head>
|
|
82
|
+
<body>
|
|
83
|
+
<div class="starlight-stars" id="stars"></div>
|
|
84
|
+
|
|
85
|
+
<button
|
|
86
|
+
class="theme-toggle"
|
|
87
|
+
onclick="toggleTheme()"
|
|
88
|
+
title="Toggle Theme"
|
|
89
|
+
>
|
|
90
|
+
<i class="q-icon-display"></i>
|
|
91
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
92
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
93
|
+
</button>
|
|
94
|
+
|
|
95
|
+
<div id="dialog" class="dialog-overlay" style="display: none">
|
|
96
|
+
<div class="dialog">
|
|
97
|
+
<button class="dialog-close" onclick="closeDialog()">
|
|
98
|
+
<i class="q-icon-close"></i>
|
|
99
|
+
</button>
|
|
100
|
+
<div class="p-4">
|
|
101
|
+
<h2
|
|
102
|
+
class="text-3xl font-black uppercase italic tracking-tighter mb-4 text-gradient"
|
|
103
|
+
>
|
|
104
|
+
System Synchronization
|
|
105
|
+
</h2>
|
|
106
|
+
<p class="text-base text-secondary font-medium mb-10">
|
|
107
|
+
Configure your synchronization parameters for the active
|
|
108
|
+
mesh network.
|
|
109
|
+
</p>
|
|
110
|
+
|
|
111
|
+
<div class="mb-10">
|
|
112
|
+
<label
|
|
113
|
+
class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-muted"
|
|
114
|
+
>Target Cluster</label
|
|
115
|
+
>
|
|
116
|
+
<select class="select-starlight w-full h-14">
|
|
117
|
+
<option>Andromeda Prime (Sector 7)</option>
|
|
118
|
+
<option>Nebula Secondary (Sector 2)</option>
|
|
119
|
+
<option>Triangulum Core (Sector 9)</option>
|
|
120
|
+
</select>
|
|
65
121
|
</div>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<div class="
|
|
69
|
-
<
|
|
70
|
-
|
|
122
|
+
|
|
123
|
+
<div class="grid grid-cols-2 gap-8 mb-12">
|
|
124
|
+
<div class="starlight-stat p-4">
|
|
125
|
+
<label
|
|
126
|
+
class="text-[10px] font-black uppercase tracking-[0.3em] mb-2 block text-muted"
|
|
127
|
+
>Node Priority</label
|
|
128
|
+
>
|
|
129
|
+
<div class="flex gap-2">
|
|
130
|
+
<span class="badge badge-accent">Alpha</span>
|
|
131
|
+
<span class="badge badge-secondary">Omega</span>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="starlight-stat p-4">
|
|
135
|
+
<label
|
|
136
|
+
class="text-[10px] font-black uppercase tracking-[0.3em] mb-2 block text-muted"
|
|
137
|
+
>Sync Status</label
|
|
138
|
+
>
|
|
139
|
+
<div class="flex items-center gap-2">
|
|
140
|
+
<div
|
|
141
|
+
class="w-2 h-2 rounded-full bg-green-500 ani-pulse"
|
|
142
|
+
></div>
|
|
143
|
+
<span
|
|
144
|
+
class="text-xs font-black uppercase tracking-widest text-accent"
|
|
145
|
+
>Ready</span
|
|
146
|
+
>
|
|
147
|
+
</div>
|
|
71
148
|
</div>
|
|
72
149
|
</div>
|
|
73
|
-
</div>
|
|
74
150
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
151
|
+
<div class="flex gap-6 justify-end">
|
|
152
|
+
<button
|
|
153
|
+
class="btn btn-secondary px-10 h-14 font-black uppercase tracking-widest text-[10px]"
|
|
154
|
+
onclick="closeDialog()"
|
|
155
|
+
>
|
|
156
|
+
Abort
|
|
157
|
+
</button>
|
|
158
|
+
<button
|
|
159
|
+
class="btn-starlight px-10 h-14 font-black uppercase tracking-widest text-[10px]"
|
|
160
|
+
>
|
|
161
|
+
Initialize Sync
|
|
162
|
+
</button>
|
|
163
|
+
</div>
|
|
78
164
|
</div>
|
|
79
165
|
</div>
|
|
80
166
|
</div>
|
|
81
|
-
</div>
|
|
82
|
-
|
|
83
|
-
<header class="hero container">
|
|
84
|
-
<div class="pt-8 pb-12 text-center">
|
|
85
|
-
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.9</span>
|
|
86
|
-
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
87
|
-
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
88
|
-
A standardized, high-performance UI library.
|
|
89
|
-
Standard design primitives. Premium components. Ethereal aesthetics.
|
|
90
|
-
</p>
|
|
91
|
-
<div class="flex justify-center gap-6">
|
|
92
|
-
<button class="btn-starlight px-12 h-14 text-[11px] font-black uppercase tracking-widest">Primary Launch</button>
|
|
93
|
-
<button class="btn-secondary px-12 h-14 text-[11px] font-black uppercase tracking-widest" onclick="openDialog()">Open Protocol</button>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</header>
|
|
97
|
-
|
|
98
|
-
<!-- Template Gallery -->
|
|
99
|
-
<section class="container py-12">
|
|
100
|
-
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
|
|
101
|
-
<div class="grid-3">
|
|
102
|
-
<a href="blog-template.html" class="starlight-card">
|
|
103
|
-
<div class="h-40 bg-gradient-to-br from-blue-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
104
|
-
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
105
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
106
|
-
</svg>
|
|
107
|
-
</div>
|
|
108
|
-
<h3 class="text-lg font-bold mb-2">Blog Template</h3>
|
|
109
|
-
<p class="text-sm text-slate-400">Modern blogging platform with dark mode support</p>
|
|
110
|
-
</a>
|
|
111
167
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
</
|
|
117
|
-
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
<
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
</
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
168
|
+
<header class="hero container">
|
|
169
|
+
<div class="pt-8 pb-12 text-center">
|
|
170
|
+
<span
|
|
171
|
+
class="text-[10px] font-black tracking-[0.3em] text-accent uppercase mb-6 block"
|
|
172
|
+
>QuantumCSS v1.10.1</span
|
|
173
|
+
>
|
|
174
|
+
<h1
|
|
175
|
+
class="text-7xl md:text-8xl text-gradient font-black uppercase italic tracking-tighter mb-8"
|
|
176
|
+
>
|
|
177
|
+
Starlight Design
|
|
178
|
+
</h1>
|
|
179
|
+
<p
|
|
180
|
+
class="text-xl text-secondary max-w-3xl mx-auto mb-12 font-medium leading-relaxed"
|
|
181
|
+
>
|
|
182
|
+
Next-generation UI library with ethereal aesthetics and
|
|
183
|
+
high-performance design primitives.
|
|
184
|
+
</p>
|
|
185
|
+
<div class="flex justify-center gap-6">
|
|
186
|
+
<button
|
|
187
|
+
class="btn-starlight px-12 h-14 text-[11px] font-black uppercase tracking-widest"
|
|
188
|
+
>
|
|
189
|
+
Primary Launch
|
|
190
|
+
</button>
|
|
191
|
+
<a
|
|
192
|
+
href="kitchen-sink.html"
|
|
193
|
+
class="btn btn-secondary px-12 h-14 text-[11px] font-black uppercase tracking-widest flex items-center"
|
|
194
|
+
>Kitchen Sink</a
|
|
195
|
+
>
|
|
196
|
+
<button
|
|
197
|
+
class="btn-secondary px-12 h-14 text-[11px] font-black uppercase tracking-widest"
|
|
198
|
+
onclick="openDialog()"
|
|
199
|
+
>
|
|
200
|
+
Open Protocol
|
|
201
|
+
</button>
|
|
138
202
|
</div>
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
</a>
|
|
203
|
+
</div>
|
|
204
|
+
</header>
|
|
142
205
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
206
|
+
<!-- Template Gallery -->
|
|
207
|
+
<section class="container py-12">
|
|
208
|
+
<h2
|
|
209
|
+
class="text-3xl font-black uppercase tracking-tighter mb-8 text-center text-primary"
|
|
210
|
+
>
|
|
211
|
+
Template Gallery
|
|
212
|
+
</h2>
|
|
213
|
+
<div class="grid-3">
|
|
214
|
+
<a href="blog.html" class="starlight-card">
|
|
215
|
+
<div
|
|
216
|
+
class="h-40 bg-gradient-to-br from-blue-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
217
|
+
>
|
|
218
|
+
<i class="q-icon-newspaper w-16 h-16 text-accent"></i>
|
|
219
|
+
</div>
|
|
220
|
+
<h3 class="text-lg font-bold mb-2">Blog Template</h3>
|
|
221
|
+
<p class="text-sm text-secondary">
|
|
222
|
+
Modern blogging platform with dark mode support
|
|
223
|
+
</p>
|
|
224
|
+
</a>
|
|
152
225
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
226
|
+
<a href="email-client.html" class="starlight-card">
|
|
227
|
+
<div
|
|
228
|
+
class="h-40 bg-gradient-to-br from-starlight_60 to-blue-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
229
|
+
>
|
|
230
|
+
<i class="q-icon-mail w-16 h-16 text-accent"></i>
|
|
231
|
+
</div>
|
|
232
|
+
<h3 class="text-lg font-bold mb-2">Email Client</h3>
|
|
233
|
+
<p class="text-sm text-secondary">
|
|
234
|
+
Full-featured email interface with sidebar navigation
|
|
235
|
+
</p>
|
|
236
|
+
</a>
|
|
162
237
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
238
|
+
<a href="gaming-portal.html" class="starlight-card">
|
|
239
|
+
<div
|
|
240
|
+
class="h-40 bg-gradient-to-br from-purple-500_60 to-pink-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
241
|
+
>
|
|
242
|
+
<i class="q-icon-play w-16 h-16 text-accent"></i>
|
|
243
|
+
</div>
|
|
244
|
+
<h3 class="text-lg font-bold mb-2">Gaming Portal</h3>
|
|
245
|
+
<p class="text-sm text-secondary">
|
|
246
|
+
Immersive gaming experience with cosmic aesthetics
|
|
247
|
+
</p>
|
|
248
|
+
</a>
|
|
172
249
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
250
|
+
<a href="news.html" class="starlight-card">
|
|
251
|
+
<div
|
|
252
|
+
class="h-40 bg-gradient-to-br from-orange-500_60 to-red-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
253
|
+
>
|
|
254
|
+
<i class="q-icon-newspaper w-16 h-16 text-accent"></i>
|
|
255
|
+
</div>
|
|
256
|
+
<h3 class="text-lg font-bold mb-2">News Portal</h3>
|
|
257
|
+
<p class="text-sm text-secondary">
|
|
258
|
+
Professional news platform with grid layouts
|
|
259
|
+
</p>
|
|
260
|
+
</a>
|
|
182
261
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
262
|
+
<a href="shopping.html" class="starlight-card">
|
|
263
|
+
<div
|
|
264
|
+
class="h-40 bg-gradient-to-br from-green-500_60 to-teal-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
265
|
+
>
|
|
266
|
+
<i class="q-icon-shopping-bag w-16 h-16 text-accent"></i>
|
|
267
|
+
</div>
|
|
268
|
+
<h3 class="text-lg font-bold mb-2">Shopping Site</h3>
|
|
269
|
+
<p class="text-sm text-secondary">
|
|
270
|
+
E-commerce template with product grids
|
|
271
|
+
</p>
|
|
272
|
+
</a>
|
|
192
273
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
274
|
+
<a href="travel.html" class="starlight-card">
|
|
275
|
+
<div
|
|
276
|
+
class="h-40 bg-gradient-to-br from-cyan-500_60 to-blue-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
277
|
+
>
|
|
278
|
+
<i class="q-icon-globe w-16 h-16 text-accent"></i>
|
|
279
|
+
</div>
|
|
280
|
+
<h3 class="text-lg font-bold mb-2">Travel Site</h3>
|
|
281
|
+
<p class="text-sm text-secondary">
|
|
282
|
+
Adventure booking platform with destinations
|
|
283
|
+
</p>
|
|
284
|
+
</a>
|
|
202
285
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
286
|
+
<a href="analytics-dashboard.html" class="starlight-card">
|
|
287
|
+
<div
|
|
288
|
+
class="h-40 bg-gradient-to-br from-indigo-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
289
|
+
>
|
|
290
|
+
<i class="q-icon-chart-bar w-16 h-16 text-accent"></i>
|
|
291
|
+
</div>
|
|
292
|
+
<h3 class="text-lg font-bold mb-2">Analytics Dashboard</h3>
|
|
293
|
+
<p class="text-sm text-secondary">
|
|
294
|
+
Data visualization with charts and real-time metrics
|
|
295
|
+
</p>
|
|
296
|
+
</a>
|
|
212
297
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
<
|
|
218
|
-
</
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
</section>
|
|
298
|
+
<a href="admin-panel.html" class="starlight-card">
|
|
299
|
+
<div
|
|
300
|
+
class="h-40 bg-gradient-to-br from-rose-500_60 to-orange-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
301
|
+
>
|
|
302
|
+
<i class="q-icon-users w-16 h-16 text-accent"></i>
|
|
303
|
+
</div>
|
|
304
|
+
<h3 class="text-lg font-bold mb-2">Admin Panel</h3>
|
|
305
|
+
<p class="text-sm text-secondary">
|
|
306
|
+
User management, data tables, and system settings
|
|
307
|
+
</p>
|
|
308
|
+
</a>
|
|
225
309
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
<div class="flex flex-col gap-6">
|
|
232
|
-
<div>
|
|
233
|
-
<label class="text-xs font-bold uppercase mb-2 block text-muted">Environment</label>
|
|
234
|
-
<select class="input-starlight w-full">
|
|
235
|
-
<option>Production</option>
|
|
236
|
-
<option>Staging</option>
|
|
237
|
-
</select>
|
|
310
|
+
<a href="music-streaming.html" class="starlight-card">
|
|
311
|
+
<div
|
|
312
|
+
class="h-40 bg-gradient-to-br from-pink-500_60 to-rose-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
313
|
+
>
|
|
314
|
+
<i class="q-icon-music w-16 h-16 text-accent"></i>
|
|
238
315
|
</div>
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
316
|
+
<h3 class="text-lg font-bold mb-2">Music Streaming</h3>
|
|
317
|
+
<p class="text-sm text-secondary">
|
|
318
|
+
Spotify-style music player with playlists and controls
|
|
319
|
+
</p>
|
|
320
|
+
</a>
|
|
321
|
+
|
|
322
|
+
<a href="chat-messaging.html" class="starlight-card">
|
|
323
|
+
<div
|
|
324
|
+
class="h-40 bg-gradient-to-br from-blue-500_60 to-cyan-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
325
|
+
>
|
|
326
|
+
<i class="q-icon-message-circle w-16 h-16 text-accent"></i>
|
|
245
327
|
</div>
|
|
246
|
-
|
|
247
|
-
|
|
328
|
+
<h3 class="text-lg font-bold mb-2">Chat Messaging</h3>
|
|
329
|
+
<p class="text-sm text-secondary">
|
|
330
|
+
Modern messaging app with real-time conversation UI
|
|
331
|
+
</p>
|
|
332
|
+
</a>
|
|
248
333
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
Asset Actions <span>↓</span>
|
|
255
|
-
</button>
|
|
256
|
-
<div id="demo-dropdown" class="dropdown-menu w-full">
|
|
257
|
-
<a href="kitchen-sink.html" class="dropdown-item">Kitchen Sink</a>
|
|
258
|
-
<button class="dropdown-item">Security Audit</button>
|
|
259
|
-
<div style="border-top: 1px solid rgba(255,255,255,0.05); margin: 0.5rem 0;"></div>
|
|
260
|
-
<button class="dropdown-item" style="color: #ff7e5f;">Decommission</button>
|
|
334
|
+
<a href="portfolio.html" class="starlight-card">
|
|
335
|
+
<div
|
|
336
|
+
class="h-40 bg-gradient-to-br from-violet-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
337
|
+
>
|
|
338
|
+
<i class="q-icon-user-circle w-16 h-16 text-accent"></i>
|
|
261
339
|
</div>
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
340
|
+
<h3 class="text-lg font-bold mb-2">Portfolio / Resume</h3>
|
|
341
|
+
<p class="text-sm text-secondary">
|
|
342
|
+
Professional portfolio with skills, projects, and
|
|
343
|
+
experience
|
|
344
|
+
</p>
|
|
345
|
+
</a>
|
|
265
346
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
<
|
|
273
|
-
|
|
274
|
-
|
|
347
|
+
<a href="video-streaming.html" class="starlight-card">
|
|
348
|
+
<div
|
|
349
|
+
class="h-40 bg-gradient-to-br from-red-500_60 to-orange-500_60 rounded-xl mb-4 flex items-center justify-center"
|
|
350
|
+
>
|
|
351
|
+
<i class="q-icon-play w-16 h-16 text-accent"></i>
|
|
352
|
+
</div>
|
|
353
|
+
<h3 class="text-lg font-bold mb-2">Video Streaming</h3>
|
|
354
|
+
<p class="text-sm text-secondary">
|
|
355
|
+
YouTube-style video platform with categories and shorts
|
|
356
|
+
</p>
|
|
357
|
+
</a>
|
|
275
358
|
</div>
|
|
276
|
-
</
|
|
277
|
-
</main>
|
|
359
|
+
</section>
|
|
278
360
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
</
|
|
287
|
-
</
|
|
361
|
+
<script>
|
|
362
|
+
function openDialog() {
|
|
363
|
+
document.getElementById("dialog").style.display = "flex";
|
|
364
|
+
}
|
|
365
|
+
function closeDialog() {
|
|
366
|
+
document.getElementById("dialog").style.display = "none";
|
|
367
|
+
}
|
|
368
|
+
</script>
|
|
369
|
+
</body>
|
|
370
|
+
</html>
|