@howssatoshi/quantumcss 1.7.5 → 1.8.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 +1 -1
- package/dist/index.html +232 -0
- package/dist/quantum.min.css +1 -1
- package/examples/admin-panel.html +10 -18
- package/examples/analytics-dashboard.html +30 -19
- package/examples/blog-template.html +20 -20
- package/examples/chat-messaging.html +13 -23
- package/examples/email-template.html +20 -28
- package/examples/gaming-template.html +13 -13
- package/examples/gradient-test.html +0 -5
- package/examples/index.html +15 -15
- package/examples/kitchen-sink.html +15 -26
- package/examples/music-streaming.html +21 -29
- package/examples/news-template.html +14 -14
- package/examples/portfolio-resume.html +14 -35
- package/examples/shopping/index.html +10 -24
- package/examples/starlight.html +5 -5
- package/examples/theme-test.html +0 -15
- package/examples/travel/index.html +15 -15
- package/examples/video-streaming.html +30 -16
- package/package.json +1 -1
- package/src/defaults.js +78 -3
- package/src/generator.js +2 -2
- package/src/starlight.js +0 -4
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +158 -32
- package/src/styles/quantum-components.css +259 -533
- package/src/styles/starlight.css +680 -45
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Quantum CSS - Next-Generation Utility Framework
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
-brightgreen)
|
|
6
6
|
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-theme="dark">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Quantum CSS Mastery</title>
|
|
7
|
+
<link rel="stylesheet" href="./quantum.min.css" />
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body class="animate-fade-in">
|
|
11
|
+
|
|
12
|
+
<div class="app-layout">
|
|
13
|
+
|
|
14
|
+
<!-- Sidebar -->
|
|
15
|
+
<aside class="sidebar">
|
|
16
|
+
<div class="mb-8">
|
|
17
|
+
<h2 class="text-xl font-bold text-primary">⚡ Quantum</h2>
|
|
18
|
+
<p class="text-sm text-secondary">Design System Demo</p>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="nav-section">
|
|
22
|
+
<div class="nav-section-title">Core</div>
|
|
23
|
+
<button class="nav-item active">Dashboard <span class="nav-badge">New</span></button>
|
|
24
|
+
<button class="nav-item">Components</button>
|
|
25
|
+
<button class="nav-item">Analytics</button>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="nav-section">
|
|
29
|
+
<div class="nav-section-title">System</div>
|
|
30
|
+
<button class="nav-item">Settings</button>
|
|
31
|
+
<button class="nav-item">Logs</button>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="mt-auto">
|
|
35
|
+
<div class="badge badge-success">Quantum v1</div>
|
|
36
|
+
</div>
|
|
37
|
+
</aside>
|
|
38
|
+
|
|
39
|
+
<!-- Main Content -->
|
|
40
|
+
<main class="main-content p-8">
|
|
41
|
+
|
|
42
|
+
<!-- Top Nav -->
|
|
43
|
+
<div class="top-nav">
|
|
44
|
+
<div class="flex items-center gap-4">
|
|
45
|
+
<div class="spinner"></div>
|
|
46
|
+
<span class="text-sm text-secondary">System Operational</span>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="top-nav-actions">
|
|
50
|
+
|
|
51
|
+
<!-- Theme Toggle -->
|
|
52
|
+
<label class="toggle">
|
|
53
|
+
<input type="checkbox" class="toggle-input" id="themeToggle">
|
|
54
|
+
<span class="toggle-slider"></span>
|
|
55
|
+
</label>
|
|
56
|
+
|
|
57
|
+
<!-- Dropdown -->
|
|
58
|
+
<div class="dropdown" id="dropdown">
|
|
59
|
+
<button class="btn btn-secondary btn-sm">Menu</button>
|
|
60
|
+
<div class="dropdown-content">
|
|
61
|
+
<button class="dropdown-item">Profile</button>
|
|
62
|
+
<button class="dropdown-item">Billing</button>
|
|
63
|
+
<button class="dropdown-item text-error">Logout</button>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<button class="btn btn-primary btn-sm">Deploy</button>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<!-- Stats -->
|
|
72
|
+
<div class="stats-grid">
|
|
73
|
+
<div class="card animate-slide-up">
|
|
74
|
+
<div class="card-body">
|
|
75
|
+
<div class="text-sm text-secondary">Active Nodes</div>
|
|
76
|
+
<div class="text-3xl font-bold text-primary">128</div>
|
|
77
|
+
<div class="badge badge-primary mt-2">+12%</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="card animate-slide-up">
|
|
82
|
+
<div class="card-body">
|
|
83
|
+
<div class="text-sm text-secondary">Throughput</div>
|
|
84
|
+
<div class="text-3xl font-bold text-success">98%</div>
|
|
85
|
+
<div class="progress mt-3">
|
|
86
|
+
<div class="progress-bar bg-success" style="width:98%"></div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="card animate-slide-up">
|
|
92
|
+
<div class="card-body">
|
|
93
|
+
<div class="text-sm text-secondary">Warnings</div>
|
|
94
|
+
<div class="text-3xl font-bold text-warning">3</div>
|
|
95
|
+
<div class="badge badge-warning mt-2">Investigate</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="card animate-slide-up">
|
|
100
|
+
<div class="card-body">
|
|
101
|
+
<div class="text-sm text-secondary">Errors</div>
|
|
102
|
+
<div class="text-3xl font-bold text-error">1</div>
|
|
103
|
+
<div class="badge badge-error mt-2">Critical</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<!-- Tabs -->
|
|
109
|
+
<div class="card mb-8">
|
|
110
|
+
<div class="card-header">
|
|
111
|
+
<div class="tab-list">
|
|
112
|
+
<button class="tab-button active" data-tab="overview">Overview</button>
|
|
113
|
+
<button class="tab-button" data-tab="activity">Activity</button>
|
|
114
|
+
<button class="tab-button" data-tab="system">System</button>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div class="tab-content">
|
|
119
|
+
<div class="tab-panel active" id="overview">
|
|
120
|
+
<p class="text-secondary">Quantum CSS provides layout, components, theming, motion, and accessibility — all in one system.</p>
|
|
121
|
+
<div class="skeleton h-8 w-full mt-4"></div>
|
|
122
|
+
<div class="skeleton h-8 w-full mt-2"></div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="tab-panel" id="activity">
|
|
126
|
+
<div class="alert alert-info">System synced 2 minutes ago.</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="tab-panel" id="system">
|
|
130
|
+
<div class="badge badge-success">All services healthy</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<!-- Accordion -->
|
|
136
|
+
<div class="accordion-item">
|
|
137
|
+
<div class="accordion-header">
|
|
138
|
+
Advanced Configuration
|
|
139
|
+
<span class="accordion-icon">⌄</span>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="accordion-content">
|
|
142
|
+
<p class="text-secondary">
|
|
143
|
+
This demonstrates animated height transitions and icon rotation.
|
|
144
|
+
</p>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<!-- Table -->
|
|
149
|
+
<div class="card mt-8">
|
|
150
|
+
<div class="card-header font-semibold">Recent Deployments</div>
|
|
151
|
+
<div class="table-wrapper">
|
|
152
|
+
<table class="table">
|
|
153
|
+
<thead>
|
|
154
|
+
<tr>
|
|
155
|
+
<th>ID</th>
|
|
156
|
+
<th>Status</th>
|
|
157
|
+
<th>Date</th>
|
|
158
|
+
<th>Latency</th>
|
|
159
|
+
</tr>
|
|
160
|
+
</thead>
|
|
161
|
+
<tbody>
|
|
162
|
+
<tr>
|
|
163
|
+
<td>#1021</td>
|
|
164
|
+
<td><span class="badge badge-success">Success</span></td>
|
|
165
|
+
<td>Today</td>
|
|
166
|
+
<td>120ms</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td>#1020</td>
|
|
170
|
+
<td><span class="badge badge-warning">Delayed</span></td>
|
|
171
|
+
<td>Yesterday</td>
|
|
172
|
+
<td>430ms</td>
|
|
173
|
+
</tr>
|
|
174
|
+
<tr>
|
|
175
|
+
<td>#1019</td>
|
|
176
|
+
<td><span class="badge badge-error">Failed</span></td>
|
|
177
|
+
<td>2 days ago</td>
|
|
178
|
+
<td>—</td>
|
|
179
|
+
</tr>
|
|
180
|
+
</tbody>
|
|
181
|
+
</table>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
</main>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<!-- Modal -->
|
|
189
|
+
<div class="modal-overlay hidden" id="modal">
|
|
190
|
+
<div class="modal-content p-8">
|
|
191
|
+
<h3 class="text-xl font-bold mb-4">Quantum Modal</h3>
|
|
192
|
+
<p class="text-secondary mb-6">This modal uses your overlay + content styling.</p>
|
|
193
|
+
<button class="btn btn-primary" onclick="toggleModal()">Close</button>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<script>
|
|
198
|
+
// Theme toggle
|
|
199
|
+
document.getElementById("themeToggle").addEventListener("change", e => {
|
|
200
|
+
document.documentElement.setAttribute(
|
|
201
|
+
"data-theme",
|
|
202
|
+
e.target.checked ? "light" : "dark"
|
|
203
|
+
);
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
// Dropdown
|
|
207
|
+
document.querySelector("#dropdown button").addEventListener("click", () => {
|
|
208
|
+
document.getElementById("dropdown").classList.toggle("active");
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
// Tabs
|
|
212
|
+
document.querySelectorAll(".tab-button").forEach(btn => {
|
|
213
|
+
btn.addEventListener("click", () => {
|
|
214
|
+
document.querySelectorAll(".tab-button").forEach(b => b.classList.remove("active"));
|
|
215
|
+
document.querySelectorAll(".tab-panel").forEach(p => p.classList.remove("active"));
|
|
216
|
+
btn.classList.add("active");
|
|
217
|
+
document.getElementById(btn.dataset.tab).classList.add("active");
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
// Accordion
|
|
222
|
+
document.querySelector(".accordion-header").addEventListener("click", () => {
|
|
223
|
+
document.querySelector(".accordion-item").classList.toggle("active");
|
|
224
|
+
});
|
|
225
|
+
|
|
226
|
+
function toggleModal() {
|
|
227
|
+
document.getElementById("modal").classList.toggle("hidden");
|
|
228
|
+
}
|
|
229
|
+
</script>
|
|
230
|
+
|
|
231
|
+
</body>
|
|
232
|
+
</html>
|