htmlboard 0.4.0 → 0.5.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 +169 -7
- package/bin/htmlboard.js +152 -0
- package/package.json +1 -1
- package/skills/htmlboard/SKILL.md +41 -7
- package/src/catalog.js +449 -0
- package/src/check.js +173 -0
- package/src/client/check.js +349 -0
- package/src/client/explorer.js +68 -2
- package/src/client/probe.js +41 -0
- package/src/components.js +95 -0
- package/src/designs.js +63 -15
- package/src/index.js +18 -0
- package/src/server.js +167 -11
- package/src/templates/01-screens/01-dashboard.html +112 -0
- package/src/templates/01-screens/02-customers.html +77 -0
- package/src/templates/01-screens/{02-mobile.html → 03-mobile.html} +4 -54
- package/src/templates/{02-components/01-ui-kit.html → 02-ui-kit/01-overview.html} +16 -4
- package/src/templates/components/app-sidebar.html +67 -0
- package/src/templates/components/app-topbar.html +19 -0
- package/src/templates/components/stat-card.html +14 -0
- package/src/templates/components/tx-item.html +33 -0
- package/src/templates/components.js +180 -0
- package/src/templates/styles.css +24 -2
- package/src/templates/01-screens/01-desktop.html +0 -281
|
@@ -1,281 +0,0 @@
|
|
|
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>Desktop Dashboard</title>
|
|
7
|
-
<meta name="description" content="Main analytics dashboard with sidebar, metric cards, and charts">
|
|
8
|
-
<meta name="htmlboard" content="width=1280, height=820">
|
|
9
|
-
<link rel="stylesheet" href="../styles.css">
|
|
10
|
-
<style>
|
|
11
|
-
body {
|
|
12
|
-
display: flex;
|
|
13
|
-
height: 100vh;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
}
|
|
16
|
-
/* Sidebar */
|
|
17
|
-
.sidebar {
|
|
18
|
-
width: 240px;
|
|
19
|
-
background: #10131d;
|
|
20
|
-
border-right: 1px solid var(--border);
|
|
21
|
-
display: flex;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
padding: 20px 16px;
|
|
24
|
-
flex-shrink: 0;
|
|
25
|
-
}
|
|
26
|
-
.logo-container {
|
|
27
|
-
padding: 4px 8px 24px;
|
|
28
|
-
gap: 10px;
|
|
29
|
-
font-weight: 700;
|
|
30
|
-
font-size: 17px;
|
|
31
|
-
letter-spacing: -0.02em;
|
|
32
|
-
}
|
|
33
|
-
.logo-badge {
|
|
34
|
-
width: 32px;
|
|
35
|
-
height: 32px;
|
|
36
|
-
background: linear-gradient(135deg, var(--accent), #3b82f6);
|
|
37
|
-
border-radius: var(--radius);
|
|
38
|
-
display: flex;
|
|
39
|
-
align-items: center;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
font-size: 16px;
|
|
42
|
-
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
|
|
43
|
-
}
|
|
44
|
-
.nav-group {
|
|
45
|
-
display: flex;
|
|
46
|
-
flex-direction: column;
|
|
47
|
-
gap: 4px;
|
|
48
|
-
flex: 1;
|
|
49
|
-
}
|
|
50
|
-
.nav-group .label { padding: 8px 12px 4px; font-size: 11px; }
|
|
51
|
-
.nav-link {
|
|
52
|
-
display: flex;
|
|
53
|
-
align-items: center;
|
|
54
|
-
gap: 12px;
|
|
55
|
-
padding: 10px 12px;
|
|
56
|
-
border-radius: var(--radius);
|
|
57
|
-
color: var(--text-muted);
|
|
58
|
-
font-size: 14px;
|
|
59
|
-
font-weight: 500;
|
|
60
|
-
transition: all 0.15s ease;
|
|
61
|
-
}
|
|
62
|
-
.nav-link:hover {
|
|
63
|
-
background: rgba(255, 255, 255, 0.04);
|
|
64
|
-
color: var(--text);
|
|
65
|
-
}
|
|
66
|
-
.nav-link.active {
|
|
67
|
-
background: rgba(99, 102, 241, 0.12);
|
|
68
|
-
color: var(--accent-light);
|
|
69
|
-
font-weight: 600;
|
|
70
|
-
}
|
|
71
|
-
.user-footer {
|
|
72
|
-
padding: 12px;
|
|
73
|
-
border-radius: 10px;
|
|
74
|
-
background: rgba(255, 255, 255, 0.03);
|
|
75
|
-
border: 1px solid var(--border);
|
|
76
|
-
}
|
|
77
|
-
.user-footer .avatar { background: linear-gradient(135deg, #ec4899, #8b5cf6); font-weight: 600; }
|
|
78
|
-
/* Main Content */
|
|
79
|
-
.main {
|
|
80
|
-
flex: 1;
|
|
81
|
-
display: flex;
|
|
82
|
-
flex-direction: column;
|
|
83
|
-
overflow-y: auto;
|
|
84
|
-
}
|
|
85
|
-
.topbar {
|
|
86
|
-
height: 64px;
|
|
87
|
-
border-bottom: 1px solid var(--border);
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: space-between;
|
|
91
|
-
padding: 0 32px;
|
|
92
|
-
background: rgba(11, 13, 19, 0.8);
|
|
93
|
-
backdrop-filter: blur(12px);
|
|
94
|
-
}
|
|
95
|
-
.topbar .input { width: 280px; padding: 8px 16px; }
|
|
96
|
-
.topbar .row { gap: 16px; font-size: 13px; }
|
|
97
|
-
.content {
|
|
98
|
-
padding: 28px 32px;
|
|
99
|
-
display: flex;
|
|
100
|
-
flex-direction: column;
|
|
101
|
-
gap: 24px;
|
|
102
|
-
}
|
|
103
|
-
.page-title {
|
|
104
|
-
font-size: 24px;
|
|
105
|
-
font-weight: 700;
|
|
106
|
-
letter-spacing: -0.02em;
|
|
107
|
-
}
|
|
108
|
-
.page-sub { font-size: 14px; margin-top: 4px; }
|
|
109
|
-
/* Stat Cards */
|
|
110
|
-
.stats-row {
|
|
111
|
-
display: grid;
|
|
112
|
-
grid-template-columns: repeat(4, 1fr);
|
|
113
|
-
gap: 20px;
|
|
114
|
-
}
|
|
115
|
-
.stat-title { font-size: 13px; margin-bottom: 8px; }
|
|
116
|
-
.stat-val {
|
|
117
|
-
font-size: 26px;
|
|
118
|
-
font-weight: 700;
|
|
119
|
-
margin-bottom: 8px;
|
|
120
|
-
}
|
|
121
|
-
.stat-badge { font-size: 12px; font-weight: 600; }
|
|
122
|
-
.stat-badge.pos { color: var(--emerald); }
|
|
123
|
-
.stat-badge.warn { color: var(--amber); }
|
|
124
|
-
/* Panels */
|
|
125
|
-
.grid-2 {
|
|
126
|
-
display: grid;
|
|
127
|
-
grid-template-columns: 2fr 1fr;
|
|
128
|
-
gap: 20px;
|
|
129
|
-
}
|
|
130
|
-
.grid-2 .card { padding: 22px; }
|
|
131
|
-
.panel-header {
|
|
132
|
-
display: flex;
|
|
133
|
-
justify-content: space-between;
|
|
134
|
-
align-items: center;
|
|
135
|
-
margin-bottom: 20px;
|
|
136
|
-
font-size: 12px;
|
|
137
|
-
}
|
|
138
|
-
.panel-title { font-size: 16px; font-weight: 600; }
|
|
139
|
-
.chart-container { width: 100%; height: 180px; }
|
|
140
|
-
.data-table {
|
|
141
|
-
width: 100%;
|
|
142
|
-
border-collapse: collapse;
|
|
143
|
-
font-size: 13px;
|
|
144
|
-
}
|
|
145
|
-
.data-table th {
|
|
146
|
-
text-align: left;
|
|
147
|
-
color: var(--text-subtle);
|
|
148
|
-
font-weight: 500;
|
|
149
|
-
padding-bottom: 12px;
|
|
150
|
-
border-bottom: 1px solid var(--border);
|
|
151
|
-
}
|
|
152
|
-
.data-table td {
|
|
153
|
-
padding: 12px 0;
|
|
154
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
|
155
|
-
}
|
|
156
|
-
.data-table .badge { padding: 3px 8px; font-size: 11px; }
|
|
157
|
-
</style>
|
|
158
|
-
</head>
|
|
159
|
-
<body>
|
|
160
|
-
<aside class="sidebar">
|
|
161
|
-
<div class="logo-container row">
|
|
162
|
-
<div class="logo-badge">⚡</div>
|
|
163
|
-
<span>Nexus Platform</span>
|
|
164
|
-
</div>
|
|
165
|
-
|
|
166
|
-
<nav class="nav-group">
|
|
167
|
-
<div class="label">Core</div>
|
|
168
|
-
<a href="#" class="nav-link active">📊 Dashboard</a>
|
|
169
|
-
<a href="#" class="nav-link">👥 Customers</a>
|
|
170
|
-
<a href="#" class="nav-link">💳 Invoices</a>
|
|
171
|
-
<a href="#" class="nav-link">📈 Analytics</a>
|
|
172
|
-
|
|
173
|
-
<div class="label" style="margin-top: 16px">System</div>
|
|
174
|
-
<a href="#" class="nav-link">⚙️ Settings</a>
|
|
175
|
-
<a href="#" class="nav-link">🛡️ Security</a>
|
|
176
|
-
</nav>
|
|
177
|
-
|
|
178
|
-
<div class="user-footer row">
|
|
179
|
-
<div class="avatar">AD</div>
|
|
180
|
-
<div>
|
|
181
|
-
<div style="font-size: 13px; font-weight: 600">Alex Morgan</div>
|
|
182
|
-
<div class="muted" style="font-size: 11px">alex@nexus.io</div>
|
|
183
|
-
</div>
|
|
184
|
-
</div>
|
|
185
|
-
</aside>
|
|
186
|
-
|
|
187
|
-
<main class="main">
|
|
188
|
-
<header class="topbar">
|
|
189
|
-
<input type="text" class="input" placeholder="Search resources, clients, reports...">
|
|
190
|
-
<div class="row">
|
|
191
|
-
<span class="muted">Last sync: Just now</span>
|
|
192
|
-
<button class="btn btn-primary">+ New Deployment</button>
|
|
193
|
-
</div>
|
|
194
|
-
</header>
|
|
195
|
-
|
|
196
|
-
<div class="content">
|
|
197
|
-
<div>
|
|
198
|
-
<h1 class="page-title">Executive Overview</h1>
|
|
199
|
-
<p class="page-sub muted">Performance metrics and active client deployments</p>
|
|
200
|
-
</div>
|
|
201
|
-
|
|
202
|
-
<div class="stats-row">
|
|
203
|
-
<div class="card">
|
|
204
|
-
<div class="stat-title muted">Monthly Recurring Revenue</div>
|
|
205
|
-
<div class="stat-val">$184,290</div>
|
|
206
|
-
<div class="stat-badge pos">▲ +12.4% vs last mo</div>
|
|
207
|
-
</div>
|
|
208
|
-
<div class="card">
|
|
209
|
-
<div class="stat-title muted">Active Organizations</div>
|
|
210
|
-
<div class="stat-val">1,428</div>
|
|
211
|
-
<div class="stat-badge pos">▲ +48 new</div>
|
|
212
|
-
</div>
|
|
213
|
-
<div class="card">
|
|
214
|
-
<div class="stat-title muted">API Requests (24h)</div>
|
|
215
|
-
<div class="stat-val">42.8M</div>
|
|
216
|
-
<div class="stat-badge pos">▲ 99.98% uptime</div>
|
|
217
|
-
</div>
|
|
218
|
-
<div class="card">
|
|
219
|
-
<div class="stat-title muted">Average Latency</div>
|
|
220
|
-
<div class="stat-val">34ms</div>
|
|
221
|
-
<div class="stat-badge warn">▼ -2ms target</div>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
224
|
-
|
|
225
|
-
<div class="grid-2">
|
|
226
|
-
<div class="card">
|
|
227
|
-
<div class="panel-header">
|
|
228
|
-
<h2 class="panel-title">Throughput & Workload Trends</h2>
|
|
229
|
-
<span class="muted">Trailing 7 Days</span>
|
|
230
|
-
</div>
|
|
231
|
-
<div class="chart-container">
|
|
232
|
-
<svg viewBox="0 0 500 150" width="100%" height="100%" preserveAspectRatio="none">
|
|
233
|
-
<defs>
|
|
234
|
-
<linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
|
|
235
|
-
<stop offset="0%" stop-color="#6366f1" stop-opacity="0.5"/>
|
|
236
|
-
<stop offset="100%" stop-color="#6366f1" stop-opacity="0.0"/>
|
|
237
|
-
</linearGradient>
|
|
238
|
-
</defs>
|
|
239
|
-
<path d="M 0 130 Q 80 70, 150 90 T 300 40 T 420 50 T 500 20 L 500 150 L 0 150 Z" fill="url(#chartGrad)"/>
|
|
240
|
-
<path d="M 0 130 Q 80 70, 150 90 T 300 40 T 420 50 T 500 20" fill="none" stroke="#6366f1" stroke-width="3"/>
|
|
241
|
-
<circle cx="500" cy="20" r="4" fill="#a855f7" stroke="#fff" stroke-width="2"/>
|
|
242
|
-
</svg>
|
|
243
|
-
</div>
|
|
244
|
-
</div>
|
|
245
|
-
|
|
246
|
-
<div class="card">
|
|
247
|
-
<div class="panel-header">
|
|
248
|
-
<h2 class="panel-title">Recent Audits</h2>
|
|
249
|
-
</div>
|
|
250
|
-
<table class="data-table">
|
|
251
|
-
<thead>
|
|
252
|
-
<tr>
|
|
253
|
-
<th>Service</th>
|
|
254
|
-
<th>Status</th>
|
|
255
|
-
</tr>
|
|
256
|
-
</thead>
|
|
257
|
-
<tbody>
|
|
258
|
-
<tr>
|
|
259
|
-
<td>us-east-cluster-01</td>
|
|
260
|
-
<td><span class="badge badge-emerald">Optimal</span></td>
|
|
261
|
-
</tr>
|
|
262
|
-
<tr>
|
|
263
|
-
<td>auth-gateway-proxy</td>
|
|
264
|
-
<td><span class="badge badge-emerald">Optimal</span></td>
|
|
265
|
-
</tr>
|
|
266
|
-
<tr>
|
|
267
|
-
<td>edge-cache-frankfurt</td>
|
|
268
|
-
<td><span class="badge badge-amber">Rebalancing</span></td>
|
|
269
|
-
</tr>
|
|
270
|
-
<tr>
|
|
271
|
-
<td>db-replica-primary</td>
|
|
272
|
-
<td><span class="badge badge-emerald">Optimal</span></td>
|
|
273
|
-
</tr>
|
|
274
|
-
</tbody>
|
|
275
|
-
</table>
|
|
276
|
-
</div>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</main>
|
|
280
|
-
</body>
|
|
281
|
-
</html>
|