@howssatoshi/quantumcss 1.8.0 → 1.10.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 +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +2 -2
- package/examples/analytics-dashboard.html +6 -11
- package/examples/blog-template.html +16 -15
- package/examples/chat-messaging.html +33 -44
- package/examples/email-template.html +2 -2
- package/examples/gaming-template.html +148 -17
- package/examples/gradient-test.html +5 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +89 -116
- package/examples/kitchen-sink.html +49 -1
- package/examples/music-streaming.html +3 -3
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +121 -563
- package/examples/shopping/index.html +514 -327
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +4 -3
- package/examples/travel/index.html +170 -13
- package/examples/video-streaming.html +10 -3
- package/package.json +1 -1
- package/src/defaults.js +1 -0
- package/src/generator.js +12 -3
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +106 -58
- package/src/styles/quantum-components.css +550 -265
- package/src/styles/starlight.css +327 -99
- package/dist/index.html +0 -232
package/examples/index.html
CHANGED
|
@@ -8,30 +8,59 @@
|
|
|
8
8
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
9
9
|
<script src="../src/starlight.js"></script>
|
|
10
10
|
<style>
|
|
11
|
+
body { background: transparent !important; }
|
|
12
|
+
|
|
11
13
|
/* Theme Toggle specific local style */
|
|
12
14
|
.theme-toggle {
|
|
13
15
|
position: fixed; top: 2rem; right: 2rem; z-index: 100;
|
|
14
|
-
background:
|
|
16
|
+
background: var(--q-color-surface); border: 1px solid var(--q-color-border);
|
|
15
17
|
width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer;
|
|
16
|
-
color: inherit; font-weight: 700; backdrop-filter: blur(10px);
|
|
17
18
|
display: flex; align-items: center; justify-content: center;
|
|
18
19
|
transition: all 0.3s ease;
|
|
19
20
|
flex-shrink: 0;
|
|
20
21
|
}
|
|
21
|
-
.theme-toggle:hover { background:
|
|
22
|
-
html[data-theme="light"] .theme-toggle { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
|
|
22
|
+
.theme-toggle:hover { background: var(--q-highlight-bg); transform: scale(1.05); }
|
|
23
23
|
.theme-toggle svg { width: 1.5rem; height: 1.5rem; }
|
|
24
|
-
|
|
24
|
+
header, section { position: relative; z-index: 1; }
|
|
25
|
+
|
|
26
|
+
/* Page-specific vibrancy: Primary hue for icons and titles */
|
|
27
|
+
.starlight-card h3 {
|
|
28
|
+
color: var(--q-color-starlight-blue);
|
|
29
|
+
transition: all 0.3s ease;
|
|
30
|
+
}
|
|
31
|
+
.starlight-card:hover h3 {
|
|
32
|
+
color: var(--q-color-starlight-peach);
|
|
33
|
+
text-shadow: 0 0 15px var(--q-color-starlight-glow);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.starlight-card svg {
|
|
37
|
+
color: var(--q-color-starlight-blue) !important;
|
|
38
|
+
filter: drop-shadow(0 0 10px var(--q-color-starlight-glow));
|
|
39
|
+
transition: all 0.3s ease;
|
|
40
|
+
}
|
|
41
|
+
.starlight-card:hover svg {
|
|
42
|
+
transform: scale(1.1);
|
|
43
|
+
filter: drop-shadow(0 0 20px var(--q-color-starlight-blue));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Light Mode Specific Overrides */
|
|
47
|
+
html[data-theme="light"] .starlight-card h3 {
|
|
48
|
+
color: #000;
|
|
49
|
+
background: none;
|
|
50
|
+
-webkit-text-fill-color: initial;
|
|
51
|
+
}
|
|
52
|
+
html[data-theme="light"] .starlight-card svg {
|
|
53
|
+
color: #000 !important;
|
|
54
|
+
filter: none;
|
|
55
|
+
}
|
|
56
|
+
html[data-theme="light"] .starlight-card:hover h3 {
|
|
57
|
+
color: var(--q-color-primary);
|
|
58
|
+
}
|
|
25
59
|
</style>
|
|
26
60
|
</head>
|
|
27
61
|
<body>
|
|
28
|
-
<div class="starlight-stars" id="stars">
|
|
29
|
-
|
|
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>
|
|
62
|
+
<div class="starlight-stars" id="stars"></div>
|
|
63
|
+
|
|
35
64
|
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
36
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>
|
|
37
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>
|
|
@@ -43,38 +72,38 @@
|
|
|
43
72
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
44
73
|
</button>
|
|
45
74
|
<div class="p-4">
|
|
46
|
-
<h2 class="text-3xl font-black uppercase italic tracking-tighter mb-4 text-gradient-starlight">
|
|
47
|
-
<p class="text-base text-
|
|
75
|
+
<h2 class="text-3xl font-black uppercase italic tracking-tighter mb-4 text-gradient-starlight">System Synchronization</h2>
|
|
76
|
+
<p class="text-base text-secondary font-medium mb-10">Configure your synchronization parameters for the active mesh network.</p>
|
|
48
77
|
|
|
49
78
|
<div class="mb-10">
|
|
50
|
-
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-
|
|
51
|
-
<select class="
|
|
52
|
-
<option>Andromeda Prime</option>
|
|
53
|
-
<option>Nebula Secondary</option>
|
|
54
|
-
<option>Triangulum Core</option>
|
|
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>
|
|
55
84
|
</select>
|
|
56
85
|
</div>
|
|
57
86
|
|
|
58
87
|
<div class="grid grid-cols-2 gap-8 mb-12">
|
|
59
|
-
<div>
|
|
60
|
-
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-
|
|
61
|
-
<div class="flex gap-
|
|
62
|
-
<span class="badge
|
|
63
|
-
<span class="badge
|
|
88
|
+
<div class="starlight-stat p-4">
|
|
89
|
+
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-2 block text-muted">Node Priority</label>
|
|
90
|
+
<div class="flex gap-2">
|
|
91
|
+
<span class="badge badge-accent">Alpha</span>
|
|
92
|
+
<span class="badge badge-secondary">Omega</span>
|
|
64
93
|
</div>
|
|
65
94
|
</div>
|
|
66
|
-
<div>
|
|
67
|
-
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-
|
|
68
|
-
<div class="flex items-center gap-
|
|
95
|
+
<div class="starlight-stat p-4">
|
|
96
|
+
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-2 block text-muted">Sync Status</label>
|
|
97
|
+
<div class="flex items-center gap-2">
|
|
69
98
|
<div class="w-2 h-2 rounded-full bg-green-500 ani-pulse"></div>
|
|
70
|
-
<span class="text-xs font-
|
|
99
|
+
<span class="text-xs font-black uppercase tracking-widest text-accent">Ready</span>
|
|
71
100
|
</div>
|
|
72
101
|
</div>
|
|
73
102
|
</div>
|
|
74
103
|
|
|
75
104
|
<div class="flex gap-6 justify-end">
|
|
76
|
-
<button class="btn-secondary px-10 h-14 font-black uppercase tracking-widest text-[10px]" onclick="closeDialog()">
|
|
77
|
-
<button class="btn-starlight px-10 h-14 font-black uppercase tracking-widest text-[10px]">
|
|
105
|
+
<button class="btn btn-secondary px-10 h-14 font-black uppercase tracking-widest text-[10px]" onclick="closeDialog()">Abort</button>
|
|
106
|
+
<button class="btn-starlight px-10 h-14 font-black uppercase tracking-widest text-[10px]">Initialize Sync</button>
|
|
78
107
|
</div>
|
|
79
108
|
</div>
|
|
80
109
|
</div>
|
|
@@ -82,14 +111,14 @@
|
|
|
82
111
|
|
|
83
112
|
<header class="hero container">
|
|
84
113
|
<div class="pt-8 pb-12 text-center">
|
|
85
|
-
<span class="text-[10px] font-black tracking-[0.3em] text-
|
|
114
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-accent uppercase mb-6 block">QuantumCSS v1.10.1</span>
|
|
86
115
|
<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-
|
|
88
|
-
|
|
89
|
-
Standard design primitives. Premium components. Ethereal aesthetics.
|
|
116
|
+
<p class="text-xl text-secondary max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
117
|
+
Next-generation UI library with ethereal aesthetics and high-performance design primitives.
|
|
90
118
|
</p>
|
|
91
119
|
<div class="flex justify-center gap-6">
|
|
92
120
|
<button class="btn-starlight px-12 h-14 text-[11px] font-black uppercase tracking-widest">Primary Launch</button>
|
|
121
|
+
<a href="kitchen-sink.html" class="btn btn-secondary px-12 h-14 text-[11px] font-black uppercase tracking-widest flex items-center">Kitchen Sink</a>
|
|
93
122
|
<button class="btn-secondary px-12 h-14 text-[11px] font-black uppercase tracking-widest" onclick="openDialog()">Open Protocol</button>
|
|
94
123
|
</div>
|
|
95
124
|
</div>
|
|
@@ -97,191 +126,135 @@
|
|
|
97
126
|
|
|
98
127
|
<!-- Template Gallery -->
|
|
99
128
|
<section class="container py-12">
|
|
100
|
-
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
|
|
129
|
+
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center text-primary">Template Gallery</h2>
|
|
101
130
|
<div class="grid-3">
|
|
102
131
|
<a href="blog-template.html" class="starlight-card">
|
|
103
132
|
<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-
|
|
133
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
105
134
|
<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
135
|
</svg>
|
|
107
136
|
</div>
|
|
108
137
|
<h3 class="text-lg font-bold mb-2">Blog Template</h3>
|
|
109
|
-
<p class="text-sm text-
|
|
138
|
+
<p class="text-sm text-secondary">Modern blogging platform with dark mode support</p>
|
|
110
139
|
</a>
|
|
111
140
|
|
|
112
141
|
<a href="email-template.html" class="starlight-card">
|
|
113
142
|
<div class="h-40 bg-gradient-to-br from-starlight_60 to-blue-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
114
|
-
<svg class="w-16 h-16 text-
|
|
143
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
115
144
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
116
145
|
</svg>
|
|
117
146
|
</div>
|
|
118
147
|
<h3 class="text-lg font-bold mb-2">Email Client</h3>
|
|
119
|
-
<p class="text-sm text-
|
|
148
|
+
<p class="text-sm text-secondary">Full-featured email interface with sidebar navigation</p>
|
|
120
149
|
</a>
|
|
121
150
|
|
|
122
151
|
<a href="gaming-template.html" class="starlight-card">
|
|
123
152
|
<div class="h-40 bg-gradient-to-br from-purple-500_60 to-pink-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
124
|
-
<svg class="w-16 h-16 text-
|
|
153
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
125
154
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
126
155
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
127
156
|
</svg>
|
|
128
157
|
</div>
|
|
129
158
|
<h3 class="text-lg font-bold mb-2">Gaming Portal</h3>
|
|
130
|
-
<p class="text-sm text-
|
|
159
|
+
<p class="text-sm text-secondary">Immersive gaming experience with cosmic aesthetics</p>
|
|
131
160
|
</a>
|
|
132
161
|
|
|
133
162
|
<a href="news-template.html" class="starlight-card">
|
|
134
163
|
<div class="h-40 bg-gradient-to-br from-orange-500_60 to-red-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
135
|
-
<svg class="w-16 h-16 text-
|
|
164
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
136
165
|
<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>
|
|
137
166
|
</svg>
|
|
138
167
|
</div>
|
|
139
168
|
<h3 class="text-lg font-bold mb-2">News Portal</h3>
|
|
140
|
-
<p class="text-sm text-
|
|
169
|
+
<p class="text-sm text-secondary">Professional news platform with grid layouts</p>
|
|
141
170
|
</a>
|
|
142
171
|
|
|
143
172
|
<a href="shopping/index.html" class="starlight-card">
|
|
144
173
|
<div class="h-40 bg-gradient-to-br from-green-500_60 to-teal-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
145
|
-
<svg class="w-16 h-16 text-
|
|
174
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
146
175
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
147
176
|
</svg>
|
|
148
177
|
</div>
|
|
149
178
|
<h3 class="text-lg font-bold mb-2">Shopping Site</h3>
|
|
150
|
-
<p class="text-sm text-
|
|
179
|
+
<p class="text-sm text-secondary">E-commerce template with product grids</p>
|
|
151
180
|
</a>
|
|
152
181
|
|
|
153
182
|
<a href="travel/index.html" class="starlight-card">
|
|
154
183
|
<div class="h-40 bg-gradient-to-br from-cyan-500_60 to-blue-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
155
|
-
<svg class="w-16 h-16 text-
|
|
184
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
156
185
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
157
186
|
</svg>
|
|
158
187
|
</div>
|
|
159
188
|
<h3 class="text-lg font-bold mb-2">Travel Site</h3>
|
|
160
|
-
<p class="text-sm text-
|
|
189
|
+
<p class="text-sm text-secondary">Adventure booking platform with destinations</p>
|
|
161
190
|
</a>
|
|
162
191
|
|
|
163
192
|
<a href="analytics-dashboard.html" class="starlight-card">
|
|
164
193
|
<div class="h-40 bg-gradient-to-br from-indigo-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
165
|
-
<svg class="w-16 h-16 text-
|
|
194
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
166
195
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
167
196
|
</svg>
|
|
168
197
|
</div>
|
|
169
198
|
<h3 class="text-lg font-bold mb-2">Analytics Dashboard</h3>
|
|
170
|
-
<p class="text-sm text-
|
|
199
|
+
<p class="text-sm text-secondary">Data visualization with charts and real-time metrics</p>
|
|
171
200
|
</a>
|
|
172
201
|
|
|
173
202
|
<a href="admin-panel.html" class="starlight-card">
|
|
174
203
|
<div class="h-40 bg-gradient-to-br from-rose-500_60 to-orange-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
175
|
-
<svg class="w-16 h-16 text-
|
|
204
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
176
205
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
177
206
|
</svg>
|
|
178
207
|
</div>
|
|
179
208
|
<h3 class="text-lg font-bold mb-2">Admin Panel</h3>
|
|
180
|
-
<p class="text-sm text-
|
|
209
|
+
<p class="text-sm text-secondary">User management, data tables, and system settings</p>
|
|
181
210
|
</a>
|
|
182
211
|
|
|
183
212
|
<a href="music-streaming.html" class="starlight-card">
|
|
184
213
|
<div class="h-40 bg-gradient-to-br from-pink-500_60 to-rose-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
185
|
-
<svg class="w-16 h-16 text-
|
|
214
|
+
<svg class="w-16 h-16 text-accent" fill="currentColor" viewBox="0 0 24 24">
|
|
186
215
|
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
|
187
216
|
</svg>
|
|
188
217
|
</div>
|
|
189
218
|
<h3 class="text-lg font-bold mb-2">Music Streaming</h3>
|
|
190
|
-
<p class="text-sm text-
|
|
219
|
+
<p class="text-sm text-secondary">Spotify-style music player with playlists and controls</p>
|
|
191
220
|
</a>
|
|
192
221
|
|
|
193
222
|
<a href="chat-messaging.html" class="starlight-card">
|
|
194
223
|
<div class="h-40 bg-gradient-to-br from-blue-500_60 to-cyan-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
195
|
-
<svg class="w-16 h-16 text-
|
|
224
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
196
225
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
197
226
|
</svg>
|
|
198
227
|
</div>
|
|
199
228
|
<h3 class="text-lg font-bold mb-2">Chat Messaging</h3>
|
|
200
|
-
<p class="text-sm text-
|
|
229
|
+
<p class="text-sm text-secondary">Modern messaging app with real-time conversation UI</p>
|
|
201
230
|
</a>
|
|
202
231
|
|
|
203
232
|
<a href="portfolio-resume.html" class="starlight-card">
|
|
204
233
|
<div class="h-40 bg-gradient-to-br from-violet-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
205
|
-
<svg class="w-16 h-16 text-
|
|
234
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
206
235
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
207
236
|
</svg>
|
|
208
237
|
</div>
|
|
209
238
|
<h3 class="text-lg font-bold mb-2">Portfolio / Resume</h3>
|
|
210
|
-
<p class="text-sm text-
|
|
239
|
+
<p class="text-sm text-secondary">Professional portfolio with skills, projects, and experience</p>
|
|
211
240
|
</a>
|
|
212
241
|
|
|
213
242
|
<a href="video-streaming.html" class="starlight-card">
|
|
214
243
|
<div class="h-40 bg-gradient-to-br from-red-500_60 to-orange-500_60 rounded-xl mb-4 flex items-center justify-center">
|
|
215
|
-
<svg class="w-16 h-16 text-
|
|
244
|
+
<svg class="w-16 h-16 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
216
245
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
217
246
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
218
247
|
</svg>
|
|
219
248
|
</div>
|
|
220
249
|
<h3 class="text-lg font-bold mb-2">Video Streaming</h3>
|
|
221
|
-
<p class="text-sm text-
|
|
250
|
+
<p class="text-sm text-secondary">YouTube-style video platform with categories and shorts</p>
|
|
222
251
|
</a>
|
|
223
252
|
</div>
|
|
224
253
|
</section>
|
|
225
254
|
|
|
226
|
-
<main class="container py-20">
|
|
227
|
-
<div class="grid-3">
|
|
228
|
-
<!-- Form Controls -->
|
|
229
|
-
<div class="starlight-card">
|
|
230
|
-
<h3 class="text-xl font-bold mb-6">Standard Controls</h3>
|
|
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>
|
|
238
|
-
</div>
|
|
239
|
-
<div class="flex gap-4">
|
|
240
|
-
<label class="has-tooltip flex items-center gap-3 cursor-pointer">
|
|
241
|
-
<input type="checkbox" class="checkbox-starlight" checked>
|
|
242
|
-
<span class="text-sm">Auto-sync</span>
|
|
243
|
-
<div class="tooltip">Synchronize with mesh network</div>
|
|
244
|
-
</label>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
|
|
249
|
-
<!-- Custom Menu -->
|
|
250
|
-
<div class="starlight-card" id="menu-card">
|
|
251
|
-
<h3 class="text-xl font-bold mb-6">Floating Menus</h3>
|
|
252
|
-
<div class="dropdown w-full">
|
|
253
|
-
<button class="btn-secondary w-full justify-between">
|
|
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>
|
|
261
|
-
</div>
|
|
262
|
-
</div>
|
|
263
|
-
<p class="text-xs text-muted mt-6">Optimized layering with standardized stacking contexts.</p>
|
|
264
|
-
</div>
|
|
265
|
-
|
|
266
|
-
<!-- Loading States -->
|
|
267
|
-
<div class="starlight-card">
|
|
268
|
-
<h3 class="text-xl font-bold mb-6">Loading States</h3>
|
|
269
|
-
<div class="flex flex-col gap-4">
|
|
270
|
-
<div class="skeleton w-3_4 h-6"></div>
|
|
271
|
-
<div class="skeleton w-full h-12"></div>
|
|
272
|
-
<div class="skeleton w-1_2 h-4"></div>
|
|
273
|
-
</div>
|
|
274
|
-
<p class="text-xs text-muted mt-6">Visible and high-contrast in both light and dark modes.</p>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
277
|
-
</main>
|
|
278
|
-
|
|
279
255
|
<script>
|
|
280
256
|
function openDialog() { document.getElementById('dialog').style.display = 'flex'; }
|
|
281
257
|
function closeDialog() { document.getElementById('dialog').style.display = 'none'; }
|
|
282
|
-
|
|
283
|
-
// Theme initialization and system preference detection are now handled
|
|
284
|
-
// automatically by Starlight.initTheme() in starlight.js
|
|
285
258
|
</script>
|
|
286
259
|
</body>
|
|
287
|
-
</html>
|
|
260
|
+
</html>
|
|
@@ -1047,7 +1047,7 @@
|
|
|
1047
1047
|
<div class="starlight-card p-0 overflow-hidden">
|
|
1048
1048
|
<div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.starlight-search)</div>
|
|
1049
1049
|
<div class="p-12 flex flex-col items-center gap-6">
|
|
1050
|
-
<div class="starlight-search">
|
|
1050
|
+
<div class="starlight-search has-icon">
|
|
1051
1051
|
<svg class="search-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
1052
1052
|
<input type="text" class="input-starlight search-input" placeholder="Search the cosmos...">
|
|
1053
1053
|
</div>
|
|
@@ -1225,6 +1225,54 @@
|
|
|
1225
1225
|
</div>
|
|
1226
1226
|
</section>
|
|
1227
1227
|
|
|
1228
|
+
<!-- Loading States Section -->
|
|
1229
|
+
<section class="mb-20">
|
|
1230
|
+
<h2 class="text-sm font-black uppercase tracking-[0.3em] text-starlight mb-10 opacity-50">14. Loading States</h2>
|
|
1231
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
1232
|
+
<!-- Large Image Shimmer -->
|
|
1233
|
+
<div class="starlight-card">
|
|
1234
|
+
<h3 class="text-xl font-bold mb-6">Large Image Preview</h3>
|
|
1235
|
+
<div class="skeleton w-full h-64 mb-6"></div>
|
|
1236
|
+
<div class="flex flex-col gap-3">
|
|
1237
|
+
<div class="skeleton w-3_4 h-6"></div>
|
|
1238
|
+
<div class="skeleton w-1_2 h-4"></div>
|
|
1239
|
+
</div>
|
|
1240
|
+
<p class="text-xs text-muted mt-6 uppercase tracking-widest">Loading high-resolution asset...</p>
|
|
1241
|
+
</div>
|
|
1242
|
+
|
|
1243
|
+
<!-- List Loading -->
|
|
1244
|
+
<div class="starlight-card">
|
|
1245
|
+
<h3 class="text-xl font-bold mb-6">Component Feed</h3>
|
|
1246
|
+
<div class="flex flex-col gap-6">
|
|
1247
|
+
<div class="flex items-center gap-4">
|
|
1248
|
+
<div class="skeleton w-12 h-12 rounded-full flex-shrink-0"></div>
|
|
1249
|
+
<div class="flex-1 space-y-2">
|
|
1250
|
+
<div class="skeleton w-1_2 h-4"></div>
|
|
1251
|
+
<div class="skeleton w-1_4 h-3"></div>
|
|
1252
|
+
</div>
|
|
1253
|
+
</div>
|
|
1254
|
+
<div class="flex items-center gap-4">
|
|
1255
|
+
<div class="skeleton w-12 h-12 rounded-full flex-shrink-0"></div>
|
|
1256
|
+
<div class="flex-1 space-y-2">
|
|
1257
|
+
<div class="skeleton w-1_2 h-4"></div>
|
|
1258
|
+
<div class="skeleton w-1_4 h-3"></div>
|
|
1259
|
+
</div>
|
|
1260
|
+
</div>
|
|
1261
|
+
<div class="flex items-center gap-4">
|
|
1262
|
+
<div class="skeleton w-12 h-12 rounded-full flex-shrink-0"></div>
|
|
1263
|
+
<div class="flex-1 space-y-2">
|
|
1264
|
+
<div class="skeleton w-1_2 h-4"></div>
|
|
1265
|
+
<div class="skeleton w-1_4 h-3"></div>
|
|
1266
|
+
</div>
|
|
1267
|
+
</div>
|
|
1268
|
+
</div>
|
|
1269
|
+
<div class="mt-8 flex justify-center">
|
|
1270
|
+
<div class="spinner"></div>
|
|
1271
|
+
</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
</div>
|
|
1274
|
+
</section>
|
|
1275
|
+
|
|
1228
1276
|
<footer class="mt-20 opacity-50 text-sm">
|
|
1229
1277
|
Generated by Quantum CSS Dynamic Docs · 3/2/2026
|
|
1230
1278
|
</footer>
|
|
@@ -1143,8 +1143,8 @@
|
|
|
1143
1143
|
<div class="player-controls">
|
|
1144
1144
|
<div class="control-buttons">
|
|
1145
1145
|
<button class="control-btn" title="Shuffle">
|
|
1146
|
-
<svg class="w-
|
|
1147
|
-
<path d="M10.59 9.17L5.41
|
|
1146
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1147
|
+
<path d="M10.59 9.17L5.41 3.99 4 5.41l5.18 5.17 1.41-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
|
|
1148
1148
|
</svg>
|
|
1149
1149
|
</button>
|
|
1150
1150
|
<button class="control-btn" title="Previous">
|
|
@@ -1163,7 +1163,7 @@
|
|
|
1163
1163
|
</svg>
|
|
1164
1164
|
</button>
|
|
1165
1165
|
<button class="control-btn" title="Repeat">
|
|
1166
|
-
<svg class="w-
|
|
1166
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1167
1167
|
<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
|
|
1168
1168
|
</svg>
|
|
1169
1169
|
</button>
|