htmlboard 0.0.0-stage → 0.1.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/LICENSE +21 -0
- package/README.md +289 -2
- package/bin/htmlboard.js +297 -0
- package/package.json +48 -4
- package/skills/htmlboard/SKILL.md +95 -0
- package/src/client/explorer.css +703 -0
- package/src/client/explorer.js +693 -0
- package/src/client/index.html +191 -0
- package/src/index.js +20 -0
- package/src/server.js +451 -0
- package/src/skills.js +116 -0
- package/src/templates/artboards/components.html +199 -0
- package/src/templates/artboards/desktop.html +397 -0
- package/src/templates/artboards/mobile.html +383 -0
- package/src/templates/designs.json +50 -0
|
@@ -0,0 +1,383 @@
|
|
|
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>Mobile Feed Screen</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: #090a0f;
|
|
16
|
+
--card-bg: #13151f;
|
|
17
|
+
--card-border: #232738;
|
|
18
|
+
--accent: #6366f1;
|
|
19
|
+
--accent-glow: rgba(99, 102, 241, 0.35);
|
|
20
|
+
--emerald: #10b981;
|
|
21
|
+
--rose: #f43f5e;
|
|
22
|
+
--text-main: #f8fafc;
|
|
23
|
+
--text-muted: #94a3b8;
|
|
24
|
+
}
|
|
25
|
+
body {
|
|
26
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
27
|
+
background: var(--bg);
|
|
28
|
+
color: var(--text-main);
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
overflow-x: hidden;
|
|
33
|
+
padding-bottom: 80px;
|
|
34
|
+
}
|
|
35
|
+
/* Status bar simulated */
|
|
36
|
+
.status-bar {
|
|
37
|
+
display: flex;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
align-items: center;
|
|
40
|
+
padding: 14px 24px 8px;
|
|
41
|
+
font-size: 13px;
|
|
42
|
+
font-weight: 600;
|
|
43
|
+
color: var(--text-muted);
|
|
44
|
+
}
|
|
45
|
+
/* Header */
|
|
46
|
+
.header {
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: center;
|
|
50
|
+
padding: 16px 20px;
|
|
51
|
+
}
|
|
52
|
+
.user-info {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 12px;
|
|
56
|
+
}
|
|
57
|
+
.avatar {
|
|
58
|
+
width: 44px;
|
|
59
|
+
height: 44px;
|
|
60
|
+
border-radius: 50%;
|
|
61
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
font-size: 16px;
|
|
67
|
+
box-shadow: 0 0 16px var(--accent-glow);
|
|
68
|
+
}
|
|
69
|
+
.greeting {
|
|
70
|
+
font-size: 13px;
|
|
71
|
+
color: var(--text-muted);
|
|
72
|
+
}
|
|
73
|
+
.username {
|
|
74
|
+
font-size: 17px;
|
|
75
|
+
font-weight: 700;
|
|
76
|
+
}
|
|
77
|
+
.icon-btn {
|
|
78
|
+
width: 40px;
|
|
79
|
+
height: 40px;
|
|
80
|
+
border-radius: 12px;
|
|
81
|
+
background: var(--card-bg);
|
|
82
|
+
border: 1px solid var(--card-border);
|
|
83
|
+
color: var(--text-main);
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
position: relative;
|
|
89
|
+
}
|
|
90
|
+
.badge-dot {
|
|
91
|
+
width: 8px;
|
|
92
|
+
height: 8px;
|
|
93
|
+
background: var(--rose);
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 10px;
|
|
97
|
+
right: 10px;
|
|
98
|
+
}
|
|
99
|
+
/* Hero Card */
|
|
100
|
+
.hero-card {
|
|
101
|
+
margin: 12px 20px;
|
|
102
|
+
padding: 24px;
|
|
103
|
+
background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%);
|
|
104
|
+
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
105
|
+
border-radius: 24px;
|
|
106
|
+
box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.35);
|
|
107
|
+
position: relative;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
}
|
|
110
|
+
.hero-card::after {
|
|
111
|
+
content: "";
|
|
112
|
+
position: absolute;
|
|
113
|
+
right: -40px;
|
|
114
|
+
top: -40px;
|
|
115
|
+
width: 140px;
|
|
116
|
+
height: 140px;
|
|
117
|
+
background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
}
|
|
120
|
+
.balance-label {
|
|
121
|
+
font-size: 13px;
|
|
122
|
+
color: #cbd5e1;
|
|
123
|
+
text-transform: uppercase;
|
|
124
|
+
letter-spacing: 0.05em;
|
|
125
|
+
margin-bottom: 6px;
|
|
126
|
+
}
|
|
127
|
+
.balance-value {
|
|
128
|
+
font-size: 34px;
|
|
129
|
+
font-weight: 800;
|
|
130
|
+
letter-spacing: -0.02em;
|
|
131
|
+
margin-bottom: 12px;
|
|
132
|
+
}
|
|
133
|
+
.balance-trend {
|
|
134
|
+
display: inline-flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
gap: 6px;
|
|
137
|
+
background: rgba(16, 185, 129, 0.15);
|
|
138
|
+
color: var(--emerald);
|
|
139
|
+
padding: 4px 10px;
|
|
140
|
+
border-radius: 20px;
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
font-weight: 600;
|
|
143
|
+
}
|
|
144
|
+
/* Quick Actions */
|
|
145
|
+
.actions-grid {
|
|
146
|
+
display: grid;
|
|
147
|
+
grid-template-columns: repeat(4, 1fr);
|
|
148
|
+
gap: 12px;
|
|
149
|
+
margin: 18px 20px;
|
|
150
|
+
}
|
|
151
|
+
.action-item {
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
align-items: center;
|
|
155
|
+
gap: 8px;
|
|
156
|
+
cursor: pointer;
|
|
157
|
+
}
|
|
158
|
+
.action-circle {
|
|
159
|
+
width: 52px;
|
|
160
|
+
height: 52px;
|
|
161
|
+
border-radius: 18px;
|
|
162
|
+
background: var(--card-bg);
|
|
163
|
+
border: 1px solid var(--card-border);
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
font-size: 20px;
|
|
168
|
+
transition: all 0.2s ease;
|
|
169
|
+
}
|
|
170
|
+
.action-circle:hover {
|
|
171
|
+
background: var(--accent);
|
|
172
|
+
border-color: var(--accent);
|
|
173
|
+
transform: translateY(-2px);
|
|
174
|
+
}
|
|
175
|
+
.action-label {
|
|
176
|
+
font-size: 12px;
|
|
177
|
+
font-weight: 500;
|
|
178
|
+
color: var(--text-muted);
|
|
179
|
+
}
|
|
180
|
+
/* Section Title */
|
|
181
|
+
.section-header {
|
|
182
|
+
display: flex;
|
|
183
|
+
justify-content: space-between;
|
|
184
|
+
align-items: center;
|
|
185
|
+
padding: 16px 20px 8px;
|
|
186
|
+
}
|
|
187
|
+
.section-title {
|
|
188
|
+
font-size: 17px;
|
|
189
|
+
font-weight: 700;
|
|
190
|
+
}
|
|
191
|
+
.see-all {
|
|
192
|
+
font-size: 13px;
|
|
193
|
+
color: var(--accent);
|
|
194
|
+
text-decoration: none;
|
|
195
|
+
font-weight: 600;
|
|
196
|
+
}
|
|
197
|
+
/* Transactions */
|
|
198
|
+
.tx-list {
|
|
199
|
+
display: flex;
|
|
200
|
+
flex-direction: column;
|
|
201
|
+
gap: 10px;
|
|
202
|
+
padding: 8px 20px;
|
|
203
|
+
}
|
|
204
|
+
.tx-item {
|
|
205
|
+
display: flex;
|
|
206
|
+
align-items: center;
|
|
207
|
+
justify-content: space-between;
|
|
208
|
+
padding: 14px 16px;
|
|
209
|
+
background: var(--card-bg);
|
|
210
|
+
border: 1px solid var(--card-border);
|
|
211
|
+
border-radius: 16px;
|
|
212
|
+
}
|
|
213
|
+
.tx-left {
|
|
214
|
+
display: flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
gap: 14px;
|
|
217
|
+
}
|
|
218
|
+
.tx-icon {
|
|
219
|
+
width: 40px;
|
|
220
|
+
height: 40px;
|
|
221
|
+
border-radius: 12px;
|
|
222
|
+
background: #1c2030;
|
|
223
|
+
display: flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
justify-content: center;
|
|
226
|
+
font-size: 18px;
|
|
227
|
+
}
|
|
228
|
+
.tx-name {
|
|
229
|
+
font-size: 14px;
|
|
230
|
+
font-weight: 600;
|
|
231
|
+
}
|
|
232
|
+
.tx-date {
|
|
233
|
+
font-size: 12px;
|
|
234
|
+
color: var(--text-muted);
|
|
235
|
+
margin-top: 2px;
|
|
236
|
+
}
|
|
237
|
+
.tx-amount {
|
|
238
|
+
font-size: 14px;
|
|
239
|
+
font-weight: 700;
|
|
240
|
+
}
|
|
241
|
+
.tx-amount.positive {
|
|
242
|
+
color: var(--emerald);
|
|
243
|
+
}
|
|
244
|
+
/* Bottom Navigation */
|
|
245
|
+
.bottom-nav {
|
|
246
|
+
position: fixed;
|
|
247
|
+
bottom: 0;
|
|
248
|
+
left: 0;
|
|
249
|
+
right: 0;
|
|
250
|
+
height: 72px;
|
|
251
|
+
background: rgba(9, 10, 15, 0.85);
|
|
252
|
+
backdrop-filter: blur(16px);
|
|
253
|
+
border-top: 1px solid var(--card-border);
|
|
254
|
+
display: flex;
|
|
255
|
+
justify-content: space-around;
|
|
256
|
+
align-items: center;
|
|
257
|
+
padding-bottom: 8px;
|
|
258
|
+
}
|
|
259
|
+
.nav-btn {
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-direction: column;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: 4px;
|
|
264
|
+
color: var(--text-muted);
|
|
265
|
+
font-size: 11px;
|
|
266
|
+
text-decoration: none;
|
|
267
|
+
cursor: pointer;
|
|
268
|
+
}
|
|
269
|
+
.nav-btn.active {
|
|
270
|
+
color: var(--accent);
|
|
271
|
+
}
|
|
272
|
+
.nav-icon {
|
|
273
|
+
font-size: 20px;
|
|
274
|
+
}
|
|
275
|
+
</style>
|
|
276
|
+
</head>
|
|
277
|
+
<body>
|
|
278
|
+
<div class="status-bar">
|
|
279
|
+
<span>9:41</span>
|
|
280
|
+
<span>5G 100%</span>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<header class="header">
|
|
284
|
+
<div class="user-info">
|
|
285
|
+
<div class="avatar">LC</div>
|
|
286
|
+
<div>
|
|
287
|
+
<div class="greeting">Welcome back,</div>
|
|
288
|
+
<div class="username">Luiz Carlos</div>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="icon-btn">
|
|
292
|
+
🔔
|
|
293
|
+
<span class="badge-dot"></span>
|
|
294
|
+
</div>
|
|
295
|
+
</header>
|
|
296
|
+
|
|
297
|
+
<section class="hero-card">
|
|
298
|
+
<div class="balance-label">Total Portfolio Value</div>
|
|
299
|
+
<div class="balance-value">$42,850.75</div>
|
|
300
|
+
<div class="balance-trend">
|
|
301
|
+
▲ +14.2% this month
|
|
302
|
+
</div>
|
|
303
|
+
</section>
|
|
304
|
+
|
|
305
|
+
<nav class="actions-grid">
|
|
306
|
+
<div class="action-item">
|
|
307
|
+
<div class="action-circle">↗</div>
|
|
308
|
+
<div class="action-label">Send</div>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="action-item">
|
|
311
|
+
<div class="action-circle">↙</div>
|
|
312
|
+
<div class="action-label">Receive</div>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="action-item">
|
|
315
|
+
<div class="action-circle">⚡</div>
|
|
316
|
+
<div class="action-label">Swap</div>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="action-item">
|
|
319
|
+
<div class="action-circle">⋯</div>
|
|
320
|
+
<div class="action-label">More</div>
|
|
321
|
+
</div>
|
|
322
|
+
</nav>
|
|
323
|
+
|
|
324
|
+
<div class="section-header">
|
|
325
|
+
<h2 class="section-title">Recent Activity</h2>
|
|
326
|
+
<a href="#" class="see-all">View All</a>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<div class="tx-list">
|
|
330
|
+
<div class="tx-item">
|
|
331
|
+
<div class="tx-left">
|
|
332
|
+
<div class="tx-icon">🛍️</div>
|
|
333
|
+
<div>
|
|
334
|
+
<div class="tx-name">Apple Store</div>
|
|
335
|
+
<div class="tx-date">Today, 2:15 PM • Electronics</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="tx-amount">-$199.00</div>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="tx-item">
|
|
342
|
+
<div class="tx-left">
|
|
343
|
+
<div class="tx-icon">💼</div>
|
|
344
|
+
<div>
|
|
345
|
+
<div class="tx-name">Client Invoice #1042</div>
|
|
346
|
+
<div class="tx-date">Yesterday • Wire Transfer</div>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="tx-amount positive">+$3,450.00</div>
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<div class="tx-item">
|
|
353
|
+
<div class="tx-left">
|
|
354
|
+
<div class="tx-icon">☕</div>
|
|
355
|
+
<div>
|
|
356
|
+
<div class="tx-name">Blue Bottle Coffee</div>
|
|
357
|
+
<div class="tx-date">Oct 26 • Food & Beverage</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="tx-amount">-$6.75</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<div class="bottom-nav">
|
|
365
|
+
<div class="nav-btn active">
|
|
366
|
+
<span class="nav-icon">✦</span>
|
|
367
|
+
<span>Home</span>
|
|
368
|
+
</div>
|
|
369
|
+
<div class="nav-btn">
|
|
370
|
+
<span class="nav-icon">📊</span>
|
|
371
|
+
<span>Analytics</span>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="nav-btn">
|
|
374
|
+
<span class="nav-icon">💳</span>
|
|
375
|
+
<span>Cards</span>
|
|
376
|
+
</div>
|
|
377
|
+
<div class="nav-btn">
|
|
378
|
+
<span class="nav-icon">⚙️</span>
|
|
379
|
+
<span>Settings</span>
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
</body>
|
|
383
|
+
</html>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Design Exploration Canvas",
|
|
3
|
+
"description": "Infinite canvas and artboard explorer for HTML designs and components",
|
|
4
|
+
"sections": [
|
|
5
|
+
{
|
|
6
|
+
"id": "screens",
|
|
7
|
+
"name": "Screen Layouts",
|
|
8
|
+
"description": "Full page layouts across mobile and desktop viewports",
|
|
9
|
+
"artboards": [
|
|
10
|
+
{
|
|
11
|
+
"id": "desktop-dashboard",
|
|
12
|
+
"title": "Desktop Dashboard",
|
|
13
|
+
"description": "Main analytics dashboard with sidebar, metric cards, and charts",
|
|
14
|
+
"file": "artboards/desktop.html",
|
|
15
|
+
"width": 1280,
|
|
16
|
+
"height": 820,
|
|
17
|
+
"category": "desktop",
|
|
18
|
+
"tags": ["desktop", "dashboard", "analytics", "dark-mode"]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"id": "mobile-app",
|
|
22
|
+
"title": "Mobile App Feed",
|
|
23
|
+
"description": "Smartphone screen with balance card, quick actions, and transaction feed",
|
|
24
|
+
"file": "artboards/mobile.html",
|
|
25
|
+
"width": 390,
|
|
26
|
+
"height": 844,
|
|
27
|
+
"category": "mobile",
|
|
28
|
+
"tags": ["mobile", "ios", "feed", "finance"]
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"id": "components",
|
|
34
|
+
"name": "Component Library",
|
|
35
|
+
"description": "Reusable atomic UI blocks and design system primitives",
|
|
36
|
+
"artboards": [
|
|
37
|
+
{
|
|
38
|
+
"id": "ui-primitives",
|
|
39
|
+
"title": "UI Component Kit",
|
|
40
|
+
"description": "Buttons, inputs, badges, cards, and interactive elements",
|
|
41
|
+
"file": "artboards/components.html",
|
|
42
|
+
"width": 780,
|
|
43
|
+
"height": 720,
|
|
44
|
+
"category": "components",
|
|
45
|
+
"tags": ["design-system", "buttons", "badges", "inputs"]
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|