htmlboard 0.0.0-stage → 0.2.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.
Files changed (22) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +306 -2
  3. package/bin/htmlboard.js +294 -0
  4. package/package.json +48 -4
  5. package/skills/htmlboard/SKILL.md +95 -0
  6. package/src/client/explorer.css +372 -0
  7. package/src/client/explorer.js +952 -0
  8. package/src/client/favicon.svg +1 -0
  9. package/src/client/fonts/OFL-bricolage-grotesque.txt +93 -0
  10. package/src/client/fonts/OFL-inter.txt +93 -0
  11. package/src/client/fonts/bricolage-grotesque.woff2 +0 -0
  12. package/src/client/fonts/inter.woff2 +0 -0
  13. package/src/client/index.html +101 -0
  14. package/src/client/logo.svg +1 -0
  15. package/src/client/mark.svg +1 -0
  16. package/src/index.js +21 -0
  17. package/src/server.js +529 -0
  18. package/src/skills.js +116 -0
  19. package/src/templates/artboards/components.html +199 -0
  20. package/src/templates/artboards/desktop.html +397 -0
  21. package/src/templates/artboards/mobile.html +383 -0
  22. package/src/templates/designs.json +50 -0
package/src/templates/artboards/components.html ADDED
@@ -0,0 +1,199 @@
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>Component Library Preview</title>
7
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ -webkit-font-smoothing: antialiased;
13
+ }
14
+ :root {
15
+ --bg: #0d0f17;
16
+ --card-bg: #141724;
17
+ --border: #24293e;
18
+ --text: #f8fafc;
19
+ --text-muted: #94a3b8;
20
+ --accent: #6366f1;
21
+ --accent-hover: #4f46e5;
22
+ --emerald: #10b981;
23
+ --rose: #f43f5e;
24
+ --amber: #f59e0b;
25
+ }
26
+ body {
27
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
28
+ background: var(--bg);
29
+ color: var(--text);
30
+ padding: 24px;
31
+ display: flex;
32
+ flex-direction: column;
33
+ gap: 24px;
34
+ }
35
+ .header {
36
+ border-bottom: 1px solid var(--border);
37
+ padding-bottom: 16px;
38
+ }
39
+ .title {
40
+ font-size: 20px;
41
+ font-weight: 700;
42
+ }
43
+ .subtitle {
44
+ font-size: 13px;
45
+ color: var(--text-muted);
46
+ margin-top: 4px;
47
+ }
48
+ .section {
49
+ background: var(--card-bg);
50
+ border: 1px solid var(--border);
51
+ border-radius: 12px;
52
+ padding: 20px;
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: 16px;
56
+ }
57
+ .section-title {
58
+ font-size: 14px;
59
+ font-weight: 600;
60
+ color: #cbd5e1;
61
+ text-transform: uppercase;
62
+ letter-spacing: 0.05em;
63
+ }
64
+ .flex-row {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 12px;
68
+ flex-wrap: wrap;
69
+ }
70
+ /* Buttons */
71
+ .btn {
72
+ padding: 9px 16px;
73
+ border-radius: 8px;
74
+ font-size: 13px;
75
+ font-weight: 600;
76
+ cursor: pointer;
77
+ display: inline-flex;
78
+ align-items: center;
79
+ gap: 8px;
80
+ border: 1px solid transparent;
81
+ transition: all 0.15s ease;
82
+ }
83
+ .btn-primary {
84
+ background: var(--accent);
85
+ color: #fff;
86
+ }
87
+ .btn-primary:hover { background: var(--accent-hover); }
88
+ .btn-secondary {
89
+ background: #1e2336;
90
+ border-color: var(--border);
91
+ color: var(--text);
92
+ }
93
+ .btn-secondary:hover { background: #262c44; }
94
+ .btn-outline {
95
+ background: transparent;
96
+ border-color: #3b4260;
97
+ color: var(--text);
98
+ }
99
+ .btn-outline:hover { background: rgba(255, 255, 255, 0.05); }
100
+ .btn-danger {
101
+ background: rgba(244, 63, 94, 0.15);
102
+ border-color: rgba(244, 63, 94, 0.3);
103
+ color: var(--rose);
104
+ }
105
+ .btn-danger:hover { background: rgba(244, 63, 94, 0.25); }
106
+
107
+ /* Badges */
108
+ .badge {
109
+ padding: 4px 10px;
110
+ border-radius: 20px;
111
+ font-size: 12px;
112
+ font-weight: 600;
113
+ display: inline-flex;
114
+ align-items: center;
115
+ gap: 6px;
116
+ }
117
+ .badge-dot {
118
+ width: 6px;
119
+ height: 6px;
120
+ border-radius: 50%;
121
+ }
122
+ .badge-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
123
+ .badge-indigo .badge-dot { background: #818cf8; }
124
+ .badge-emerald { background: rgba(16, 185, 129, 0.15); color: var(--emerald); }
125
+ .badge-emerald .badge-dot { background: var(--emerald); }
126
+ .badge-amber { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
127
+ .badge-amber .badge-dot { background: var(--amber); }
128
+ .badge-rose { background: rgba(244, 63, 94, 0.15); color: var(--rose); }
129
+ .badge-rose .badge-dot { background: var(--rose); }
130
+
131
+ /* Inputs */
132
+ .input-group {
133
+ display: flex;
134
+ flex-direction: column;
135
+ gap: 6px;
136
+ flex: 1;
137
+ min-width: 200px;
138
+ }
139
+ .input-label {
140
+ font-size: 12px;
141
+ font-weight: 500;
142
+ color: var(--text-muted);
143
+ }
144
+ .input-field {
145
+ background: #0d0f17;
146
+ border: 1px solid var(--border);
147
+ border-radius: 8px;
148
+ padding: 9px 12px;
149
+ color: var(--text);
150
+ font-size: 13px;
151
+ outline: none;
152
+ transition: border-color 0.15s ease;
153
+ }
154
+ .input-field:focus {
155
+ border-color: var(--accent);
156
+ }
157
+ </style>
158
+ </head>
159
+ <body>
160
+ <div class="header">
161
+ <h1 class="title">Design System Components</h1>
162
+ <p class="subtitle">Reusable UI atoms for consistency across platforms</p>
163
+ </div>
164
+
165
+ <div class="section">
166
+ <div class="section-title">Buttons & Interactive Triggers</div>
167
+ <div class="flex-row">
168
+ <button class="btn btn-primary"><span>✨</span> Primary Action</button>
169
+ <button class="btn btn-secondary">Secondary Action</button>
170
+ <button class="btn btn-outline">Outline Button</button>
171
+ <button class="btn btn-danger"><span>🗑️</span> Danger Action</button>
172
+ </div>
173
+ </div>
174
+
175
+ <div class="section">
176
+ <div class="section-title">Status Pills & Badges</div>
177
+ <div class="flex-row">
178
+ <div class="badge badge-indigo"><span class="badge-dot"></span> In Progress</div>
179
+ <div class="badge badge-emerald"><span class="badge-dot"></span> Active / Healthy</div>
180
+ <div class="badge badge-amber"><span class="badge-dot"></span> Review Required</div>
181
+ <div class="badge badge-rose"><span class="badge-dot"></span> Error / Offline</div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="section">
186
+ <div class="section-title">Form Controls</div>
187
+ <div class="flex-row">
188
+ <div class="input-group">
189
+ <label class="input-label">Project Name</label>
190
+ <input type="text" class="input-field" value="HtmlBoard Studio" />
191
+ </div>
192
+ <div class="input-group">
193
+ <label class="input-label">Environment Target</label>
194
+ <input type="text" class="input-field" value="production-edge-01" />
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </body>
199
+ </html>
package/src/templates/artboards/desktop.html ADDED
@@ -0,0 +1,397 @@
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
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ -webkit-font-smoothing: antialiased;
13
+ }
14
+ :root {
15
+ --bg: #0b0d13;
16
+ --sidebar-bg: #10131d;
17
+ --panel-bg: #151824;
18
+ --border: #23283c;
19
+ --accent: #6366f1;
20
+ --accent-light: #818cf8;
21
+ --text: #f1f5f9;
22
+ --text-muted: #94a3b8;
23
+ --emerald: #10b981;
24
+ --amber: #f59e0b;
25
+ --purple: #a855f7;
26
+ }
27
+ body {
28
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
29
+ background: var(--bg);
30
+ color: var(--text);
31
+ display: flex;
32
+ height: 100vh;
33
+ overflow: hidden;
34
+ }
35
+ /* Sidebar */
36
+ .sidebar {
37
+ width: 240px;
38
+ background: var(--sidebar-bg);
39
+ border-right: 1px solid var(--border);
40
+ display: flex;
41
+ flex-direction: column;
42
+ padding: 20px 16px;
43
+ flex-shrink: 0;
44
+ }
45
+ .logo-container {
46
+ display: flex;
47
+ align-items: center;
48
+ gap: 10px;
49
+ padding: 4px 8px 24px;
50
+ font-weight: 700;
51
+ font-size: 17px;
52
+ letter-spacing: -0.02em;
53
+ }
54
+ .logo-badge {
55
+ width: 32px;
56
+ height: 32px;
57
+ background: linear-gradient(135deg, #6366f1, #3b82f6);
58
+ border-radius: 8px;
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ font-size: 16px;
63
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
64
+ }
65
+ .nav-group {
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: 4px;
69
+ flex: 1;
70
+ }
71
+ .nav-label {
72
+ font-size: 11px;
73
+ text-transform: uppercase;
74
+ letter-spacing: 0.08em;
75
+ color: #64748b;
76
+ padding: 8px 12px 4px;
77
+ font-weight: 600;
78
+ }
79
+ .nav-link {
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 12px;
83
+ padding: 10px 12px;
84
+ border-radius: 8px;
85
+ color: var(--text-muted);
86
+ text-decoration: none;
87
+ font-size: 14px;
88
+ font-weight: 500;
89
+ transition: all 0.15s ease;
90
+ }
91
+ .nav-link:hover {
92
+ background: rgba(255, 255, 255, 0.04);
93
+ color: var(--text);
94
+ }
95
+ .nav-link.active {
96
+ background: rgba(99, 102, 241, 0.12);
97
+ color: var(--accent-light);
98
+ font-weight: 600;
99
+ }
100
+ .user-footer {
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 12px;
104
+ padding: 12px;
105
+ border-radius: 10px;
106
+ background: rgba(255, 255, 255, 0.03);
107
+ border: 1px solid var(--border);
108
+ }
109
+ .user-avatar {
110
+ width: 36px;
111
+ height: 36px;
112
+ border-radius: 50%;
113
+ background: linear-gradient(135deg, #ec4899, #8b5cf6);
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ font-weight: 600;
118
+ font-size: 14px;
119
+ }
120
+ /* Main Content */
121
+ .main {
122
+ flex: 1;
123
+ display: flex;
124
+ flex-direction: column;
125
+ overflow-y: auto;
126
+ }
127
+ /* Top Header */
128
+ .topbar {
129
+ height: 64px;
130
+ border-bottom: 1px solid var(--border);
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: space-between;
134
+ padding: 0 32px;
135
+ background: rgba(11, 13, 19, 0.8);
136
+ backdrop-filter: blur(12px);
137
+ }
138
+ .search-input {
139
+ background: var(--panel-bg);
140
+ border: 1px solid var(--border);
141
+ padding: 8px 16px 8px 36px;
142
+ border-radius: 8px;
143
+ color: var(--text);
144
+ font-size: 13px;
145
+ width: 280px;
146
+ position: relative;
147
+ }
148
+ .header-actions {
149
+ display: flex;
150
+ align-items: center;
151
+ gap: 16px;
152
+ }
153
+ .primary-btn {
154
+ background: var(--accent);
155
+ color: #fff;
156
+ border: none;
157
+ padding: 8px 18px;
158
+ border-radius: 8px;
159
+ font-size: 13px;
160
+ font-weight: 600;
161
+ cursor: pointer;
162
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
163
+ }
164
+ /* Dashboard Area */
165
+ .content {
166
+ padding: 28px 32px;
167
+ display: flex;
168
+ flex-direction: column;
169
+ gap: 24px;
170
+ }
171
+ .page-header {
172
+ display: flex;
173
+ justify-content: space-between;
174
+ align-items: flex-end;
175
+ }
176
+ .page-title {
177
+ font-size: 24px;
178
+ font-weight: 700;
179
+ letter-spacing: -0.02em;
180
+ }
181
+ .page-sub {
182
+ color: var(--text-muted);
183
+ font-size: 14px;
184
+ margin-top: 4px;
185
+ }
186
+ /* Stat Cards */
187
+ .stats-row {
188
+ display: grid;
189
+ grid-template-columns: repeat(4, 1fr);
190
+ gap: 20px;
191
+ }
192
+ .stat-card {
193
+ background: var(--panel-bg);
194
+ border: 1px solid var(--border);
195
+ border-radius: 14px;
196
+ padding: 20px;
197
+ }
198
+ .stat-title {
199
+ font-size: 13px;
200
+ color: var(--text-muted);
201
+ margin-bottom: 8px;
202
+ }
203
+ .stat-val {
204
+ font-size: 26px;
205
+ font-weight: 700;
206
+ margin-bottom: 8px;
207
+ }
208
+ .stat-badge {
209
+ font-size: 12px;
210
+ font-weight: 600;
211
+ display: inline-flex;
212
+ align-items: center;
213
+ gap: 4px;
214
+ }
215
+ .stat-badge.pos { color: var(--emerald); }
216
+ .stat-badge.warn { color: var(--amber); }
217
+
218
+ /* Visual Grid */
219
+ .grid-2 {
220
+ display: grid;
221
+ grid-template-columns: 2fr 1fr;
222
+ gap: 20px;
223
+ }
224
+ .panel {
225
+ background: var(--panel-bg);
226
+ border: 1px solid var(--border);
227
+ border-radius: 14px;
228
+ padding: 22px;
229
+ }
230
+ .panel-header {
231
+ display: flex;
232
+ justify-content: space-between;
233
+ align-items: center;
234
+ margin-bottom: 20px;
235
+ }
236
+ .panel-title {
237
+ font-size: 16px;
238
+ font-weight: 600;
239
+ }
240
+ /* Chart SVG */
241
+ .chart-container {
242
+ width: 100%;
243
+ height: 180px;
244
+ }
245
+ /* Table */
246
+ .data-table {
247
+ width: 100%;
248
+ border-collapse: collapse;
249
+ font-size: 13px;
250
+ }
251
+ .data-table th {
252
+ text-align: left;
253
+ color: #64748b;
254
+ font-weight: 500;
255
+ padding-bottom: 12px;
256
+ border-bottom: 1px solid var(--border);
257
+ }
258
+ .data-table td {
259
+ padding: 12px 0;
260
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
261
+ }
262
+ .status-pill {
263
+ display: inline-block;
264
+ padding: 3px 8px;
265
+ border-radius: 12px;
266
+ font-size: 11px;
267
+ font-weight: 600;
268
+ }
269
+ .status-pill.success { background: rgba(16, 185, 129, 0.15); color: var(--emerald); }
270
+ .status-pill.pending { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
271
+ </style>
272
+ </head>
273
+ <body>
274
+ <aside class="sidebar">
275
+ <div class="logo-container">
276
+ <div class="logo-badge">⚡</div>
277
+ <span>Nexus Platform</span>
278
+ </div>
279
+
280
+ <nav class="nav-group">
281
+ <div class="nav-label">Core</div>
282
+ <a href="#" class="nav-link active">📊 Dashboard</a>
283
+ <a href="#" class="nav-link">👥 Customers</a>
284
+ <a href="#" class="nav-link">💳 Invoices</a>
285
+ <a href="#" class="nav-link">📈 Analytics</a>
286
+
287
+ <div class="nav-label" style="margin-top: 16px;">System</div>
288
+ <a href="#" class="nav-link">⚙️ Settings</a>
289
+ <a href="#" class="nav-link">🛡️ Security</a>
290
+ </nav>
291
+
292
+ <div class="user-footer">
293
+ <div class="user-avatar">AD</div>
294
+ <div>
295
+ <div style="font-size: 13px; font-weight: 600;">Alex Morgan</div>
296
+ <div style="font-size: 11px; color: var(--text-muted);">alex@nexus.io</div>
297
+ </div>
298
+ </div>
299
+ </aside>
300
+
301
+ <main class="main">
302
+ <header class="topbar">
303
+ <input type="text" class="search-input" placeholder="Search resources, clients, reports...">
304
+ <div class="header-actions">
305
+ <span style="font-size: 13px; color: var(--text-muted);">Last sync: Just now</span>
306
+ <button class="primary-btn">+ New Deployment</button>
307
+ </div>
308
+ </header>
309
+
310
+ <div class="content">
311
+ <div class="page-header">
312
+ <div>
313
+ <h1 class="page-title">Executive Overview</h1>
314
+ <p class="page-sub">Performance metrics and active client deployments</p>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="stats-row">
319
+ <div class="stat-card">
320
+ <div class="stat-title">Monthly Recurring Revenue</div>
321
+ <div class="stat-val">$184,290</div>
322
+ <div class="stat-badge pos">▲ +12.4% vs last mo</div>
323
+ </div>
324
+ <div class="stat-card">
325
+ <div class="stat-title">Active Organizations</div>
326
+ <div class="stat-val">1,428</div>
327
+ <div class="stat-badge pos">▲ +48 new</div>
328
+ </div>
329
+ <div class="stat-card">
330
+ <div class="stat-title">API Requests (24h)</div>
331
+ <div class="stat-val">42.8M</div>
332
+ <div class="stat-badge pos">▲ 99.98% uptime</div>
333
+ </div>
334
+ <div class="stat-card">
335
+ <div class="stat-title">Average Latency</div>
336
+ <div class="stat-val">34ms</div>
337
+ <div class="stat-badge warn">▼ -2ms target</div>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="grid-2">
342
+ <div class="panel">
343
+ <div class="panel-header">
344
+ <h2 class="panel-title">Throughput & Workload Trends</h2>
345
+ <span style="font-size: 12px; color: var(--text-muted);">Trailing 7 Days</span>
346
+ </div>
347
+ <div class="chart-container">
348
+ <svg viewBox="0 0 500 150" width="100%" height="100%" preserveAspectRatio="none">
349
+ <defs>
350
+ <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
351
+ <stop offset="0%" stop-color="#6366f1" stop-opacity="0.5"/>
352
+ <stop offset="100%" stop-color="#6366f1" stop-opacity="0.0"/>
353
+ </linearGradient>
354
+ </defs>
355
+ <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)"/>
356
+ <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"/>
357
+ <circle cx="500" cy="20" r="4" fill="#a855f7" stroke="#fff" stroke-width="2"/>
358
+ </svg>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="panel">
363
+ <div class="panel-header">
364
+ <h2 class="panel-title">Recent Audits</h2>
365
+ </div>
366
+ <table class="data-table">
367
+ <thead>
368
+ <tr>
369
+ <th>Service</th>
370
+ <th>Status</th>
371
+ </tr>
372
+ </thead>
373
+ <tbody>
374
+ <tr>
375
+ <td>us-east-cluster-01</td>
376
+ <td><span class="status-pill success">Optimal</span></td>
377
+ </tr>
378
+ <tr>
379
+ <td>auth-gateway-proxy</td>
380
+ <td><span class="status-pill success">Optimal</span></td>
381
+ </tr>
382
+ <tr>
383
+ <td>edge-cache-frankfurt</td>
384
+ <td><span class="status-pill pending">Rebalancing</span></td>
385
+ </tr>
386
+ <tr>
387
+ <td>db-replica-primary</td>
388
+ <td><span class="status-pill success">Optimal</span></td>
389
+ </tr>
390
+ </tbody>
391
+ </table>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </main>
396
+ </body>
397
+ </html>