@howssatoshi/quantumcss 1.10.1 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +303 -608
- package/examples/analytics-dashboard.html +128 -288
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +11 -27
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/index.html +342 -232
- package/examples/kitchen-sink.html +284 -94
- package/examples/music-streaming.html +32 -91
- package/examples/{news-template.html → news.html} +35 -11
- package/examples/{portfolio-resume.html → portfolio.html} +72 -26
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +7 -6
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +1025 -546
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +18 -16
- package/src/starlight.js +20 -15
- package/src/styles/quantum-base.css +4 -0
- package/src/styles/quantum-components.css +1882 -136
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2606 -1186
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -288
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -471
- package/examples/gradient-test.html +0 -129
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -525
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -432
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
- /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
package/examples/index.html
CHANGED
|
@@ -1,260 +1,370 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
.theme-toggle {
|
|
15
|
-
position: fixed; top: 2rem; right: 2rem; z-index: 100;
|
|
16
|
-
background: var(--q-color-surface); border: 1px solid var(--q-color-border);
|
|
17
|
-
width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer;
|
|
18
|
-
display: flex; align-items: center; justify-content: center;
|
|
19
|
-
transition: all 0.3s ease;
|
|
20
|
-
flex-shrink: 0;
|
|
21
|
-
}
|
|
22
|
-
.theme-toggle:hover { background: var(--q-highlight-bg); transform: scale(1.05); }
|
|
23
|
-
.theme-toggle svg { width: 1.5rem; height: 1.5rem; }
|
|
24
|
-
header, section { position: relative; z-index: 1; }
|
|
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
|
+
}
|
|
25
14
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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
|
+
}
|
|
45
46
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
html[data-theme="light"] .starlight-card:hover h3 {
|
|
57
|
-
color: var(--q-color-primary);
|
|
58
|
-
}
|
|
59
|
-
</style>
|
|
60
|
-
</head>
|
|
61
|
-
<body>
|
|
62
|
-
<div class="starlight-stars" id="stars"></div>
|
|
63
|
-
|
|
64
|
-
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
65
|
-
<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>
|
|
66
|
-
<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>
|
|
67
|
-
</button>
|
|
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
|
+
}
|
|
68
56
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<div class="mb-10">
|
|
79
|
-
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-muted">Target Cluster</label>
|
|
80
|
-
<select class="select-starlight w-full h-14">
|
|
81
|
-
<option>Andromeda Prime (Sector 7)</option>
|
|
82
|
-
<option>Nebula Secondary (Sector 2)</option>
|
|
83
|
-
<option>Triangulum Core (Sector 9)</option>
|
|
84
|
-
</select>
|
|
85
|
-
</div>
|
|
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
|
+
}
|
|
86
66
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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>
|
|
94
121
|
</div>
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<div class="
|
|
98
|
-
<
|
|
99
|
-
|
|
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>
|
|
100
148
|
</div>
|
|
101
149
|
</div>
|
|
102
|
-
</div>
|
|
103
150
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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>
|
|
107
164
|
</div>
|
|
108
165
|
</div>
|
|
109
166
|
</div>
|
|
110
|
-
</div>
|
|
111
167
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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.11.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>
|
|
202
|
+
</div>
|
|
123
203
|
</div>
|
|
124
|
-
</
|
|
125
|
-
</header>
|
|
204
|
+
</header>
|
|
126
205
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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>
|
|
140
225
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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>
|
|
150
237
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
<
|
|
156
|
-
</
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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>
|
|
161
249
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
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>
|
|
171
261
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
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>
|
|
181
273
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
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>
|
|
191
285
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
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>
|
|
201
297
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
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>
|
|
211
309
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
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>
|
|
315
|
+
</div>
|
|
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>
|
|
221
321
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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>
|
|
327
|
+
</div>
|
|
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>
|
|
231
333
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
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>
|
|
339
|
+
</div>
|
|
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>
|
|
241
346
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<
|
|
247
|
-
</
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
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>
|
|
358
|
+
</div>
|
|
359
|
+
</section>
|
|
254
360
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
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>
|
|
260
370
|
</html>
|