@jaimevalasek/aioson 1.5.1 โ 1.6.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 +6 -0
- package/docs/design-previews/aurora-command-ui-website.html +884 -0
- package/docs/design-previews/aurora-command-ui.html +682 -0
- package/docs/design-previews/bold-editorial-ui-website.html +658 -0
- package/docs/design-previews/bold-editorial-ui.html +717 -0
- package/docs/design-previews/clean-saas-ui-website.html +1202 -0
- package/docs/design-previews/clean-saas-ui.html +549 -0
- package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
- package/docs/design-previews/cognitive-core-ui.html +463 -0
- package/docs/design-previews/glassmorphism-ui-website.html +572 -0
- package/docs/design-previews/glassmorphism-ui.html +886 -0
- package/docs/design-previews/index.html +699 -0
- package/docs/design-previews/interface-design-website.html +1187 -0
- package/docs/design-previews/interface-design.html +513 -0
- package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
- package/docs/design-previews/neo-brutalist-ui.html +797 -0
- package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
- package/docs/design-previews/premium-command-center-ui.html +552 -0
- package/docs/design-previews/warm-craft-ui-website.html +684 -0
- package/docs/design-previews/warm-craft-ui.html +739 -0
- package/docs/en/cli-reference.md +20 -9
- package/docs/pt/README.md +7 -0
- package/docs/pt/agent-sharding.md +132 -0
- package/docs/pt/agentes.md +8 -2
- package/docs/pt/busca-de-contexto.md +129 -0
- package/docs/pt/cache-de-contexto.md +156 -0
- package/docs/pt/comandos-cli.md +28 -0
- package/docs/pt/design-hybrid-forge.md +107 -0
- package/docs/pt/inicio-rapido.md +54 -3
- package/docs/pt/inteligencia-adaptativa.md +324 -0
- package/docs/pt/monitor-de-contexto.md +104 -0
- package/docs/pt/recuperacao-de-sessao.md +125 -0
- package/docs/pt/sandbox.md +125 -0
- package/docs/pt/skills.md +98 -6
- package/package.json +1 -1
- package/src/agent-loader.js +280 -0
- package/src/cli.js +94 -0
- package/src/commands/agent-loader.js +85 -0
- package/src/commands/context-cache.js +90 -0
- package/src/commands/context-monitor.js +92 -0
- package/src/commands/context-search.js +66 -0
- package/src/commands/design-hybrid-options.js +385 -0
- package/src/commands/health.js +214 -0
- package/src/commands/init.js +54 -13
- package/src/commands/install.js +52 -13
- package/src/commands/learning-evolve.js +355 -0
- package/src/commands/live.js +34 -0
- package/src/commands/recovery.js +43 -0
- package/src/commands/sandbox.js +37 -0
- package/src/commands/setup-context.js +22 -2
- package/src/commands/setup.js +178 -0
- package/src/commands/skill.js +79 -32
- package/src/commands/tool-registry-cmd.js +232 -0
- package/src/commands/update.js +7 -0
- package/src/constants.js +9 -0
- package/src/context-cache.js +159 -0
- package/src/context-search.js +326 -0
- package/src/design-variation-catalog.js +503 -0
- package/src/i18n/messages/en.js +32 -2
- package/src/i18n/messages/es.js +30 -2
- package/src/i18n/messages/fr.js +30 -2
- package/src/i18n/messages/pt-BR.js +32 -2
- package/src/install-animation.js +260 -0
- package/src/install-profile.js +143 -0
- package/src/install-wizard.js +474 -0
- package/src/installer.js +38 -10
- package/src/parser.js +7 -1
- package/src/recovery-context-session.js +154 -0
- package/src/runtime-store.js +97 -1
- package/src/sandbox.js +177 -0
- package/src/tool-executor.js +94 -0
- package/src/updater.js +11 -3
- package/template/.aioson/agents/analyst.md +58 -3
- package/template/.aioson/agents/architect.md +38 -0
- package/template/.aioson/agents/design-hybrid-forge.md +127 -0
- package/template/.aioson/agents/dev.md +103 -0
- package/template/.aioson/agents/deyvin.md +57 -0
- package/template/.aioson/agents/pm.md +58 -0
- package/template/.aioson/agents/product.md +28 -0
- package/template/.aioson/agents/qa.md +79 -0
- package/template/.aioson/agents/setup.md +65 -3
- package/template/.aioson/agents/sheldon.md +107 -6
- package/template/.aioson/agents/tester.md +156 -0
- package/template/.aioson/config.md +15 -0
- package/template/.aioson/context/forensics/.gitkeep +0 -0
- package/template/.aioson/context/seeds/seed-example.md +27 -0
- package/template/.aioson/context/user-profile.md +42 -0
- package/template/.aioson/locales/en/agents/setup.md +33 -1
- package/template/.aioson/locales/es/agents/setup.md +33 -1
- package/template/.aioson/locales/fr/agents/setup.md +33 -1
- package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
- package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
- package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
- package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
- package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
- package/template/AGENTS.md +23 -1
- package/template/CLAUDE.md +1 -0
|
@@ -0,0 +1,739 @@
|
|
|
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>Warm Craft UI โ AIOSON Design Skill Preview</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
|
10
|
+
<style>
|
|
11
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
--accent: #E07A5F;
|
|
15
|
+
--accent-light: #F4BFAD;
|
|
16
|
+
--accent-xlight: #FDF2EE;
|
|
17
|
+
--bg: #F8F6F3;
|
|
18
|
+
--sidebar-bg: #F3F1ED;
|
|
19
|
+
--topbar-bg: #FDFCFA;
|
|
20
|
+
--card-bg: #FFFFFF;
|
|
21
|
+
--text-heading: #2D3436;
|
|
22
|
+
--text-body: #4A5568;
|
|
23
|
+
--text-secondary: #8896A6;
|
|
24
|
+
--border: #E8E5E0;
|
|
25
|
+
--shadow: 0 2px 8px rgba(120, 80, 60, 0.08);
|
|
26
|
+
--shadow-md: 0 4px 16px rgba(120, 80, 60, 0.10);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
html, body {
|
|
30
|
+
height: 100%;
|
|
31
|
+
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
color: var(--text-body);
|
|
34
|
+
background: var(--bg);
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* โโ Layout โโ */
|
|
39
|
+
.shell {
|
|
40
|
+
display: flex;
|
|
41
|
+
height: 100vh;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* โโ Sidebar โโ */
|
|
45
|
+
.sidebar {
|
|
46
|
+
width: 200px;
|
|
47
|
+
flex-shrink: 0;
|
|
48
|
+
background: var(--sidebar-bg);
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
border-right: 1px solid var(--border);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sidebar-logo {
|
|
55
|
+
padding: 28px 20px 22px;
|
|
56
|
+
border-bottom: 1px solid var(--border);
|
|
57
|
+
}
|
|
58
|
+
.bloom-mark {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 6px;
|
|
62
|
+
}
|
|
63
|
+
.bloom-dot {
|
|
64
|
+
width: 10px;
|
|
65
|
+
height: 10px;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
background: var(--accent);
|
|
68
|
+
flex-shrink: 0;
|
|
69
|
+
margin-top: 1px;
|
|
70
|
+
}
|
|
71
|
+
.bloom-name {
|
|
72
|
+
font-family: 'Source Serif 4', Georgia, serif;
|
|
73
|
+
font-size: 22px;
|
|
74
|
+
font-weight: 700;
|
|
75
|
+
color: var(--text-heading);
|
|
76
|
+
letter-spacing: -0.5px;
|
|
77
|
+
line-height: 1;
|
|
78
|
+
}
|
|
79
|
+
.bloom-tagline {
|
|
80
|
+
font-size: 11px;
|
|
81
|
+
color: var(--text-secondary);
|
|
82
|
+
margin-top: 6px;
|
|
83
|
+
line-height: 1.5;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.nav-section {
|
|
87
|
+
padding: 18px 12px;
|
|
88
|
+
flex: 1;
|
|
89
|
+
}
|
|
90
|
+
.nav-label {
|
|
91
|
+
font-size: 10px;
|
|
92
|
+
font-weight: 600;
|
|
93
|
+
color: var(--text-secondary);
|
|
94
|
+
letter-spacing: 0.09em;
|
|
95
|
+
text-transform: uppercase;
|
|
96
|
+
padding: 0 10px;
|
|
97
|
+
margin-bottom: 6px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.nav-item {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 9px;
|
|
104
|
+
padding: 9px 10px;
|
|
105
|
+
border-radius: 10px;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
color: var(--text-secondary);
|
|
108
|
+
font-size: 13px;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
margin-bottom: 2px;
|
|
111
|
+
transition: all 0.15s ease;
|
|
112
|
+
}
|
|
113
|
+
.nav-item:hover {
|
|
114
|
+
background: rgba(224,122,95,0.07);
|
|
115
|
+
color: var(--text-body);
|
|
116
|
+
}
|
|
117
|
+
.nav-item.active {
|
|
118
|
+
background: var(--card-bg);
|
|
119
|
+
color: var(--accent);
|
|
120
|
+
box-shadow: var(--shadow);
|
|
121
|
+
}
|
|
122
|
+
.nav-icon {
|
|
123
|
+
width: 16px;
|
|
124
|
+
height: 16px;
|
|
125
|
+
flex-shrink: 0;
|
|
126
|
+
}
|
|
127
|
+
.nav-count {
|
|
128
|
+
margin-left: auto;
|
|
129
|
+
font-size: 10px;
|
|
130
|
+
font-weight: 600;
|
|
131
|
+
background: var(--accent-xlight);
|
|
132
|
+
color: var(--accent);
|
|
133
|
+
padding: 2px 7px;
|
|
134
|
+
border-radius: 20px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.sidebar-footer {
|
|
138
|
+
padding: 16px 12px 20px;
|
|
139
|
+
border-top: 1px solid var(--border);
|
|
140
|
+
}
|
|
141
|
+
.user-card {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
gap: 10px;
|
|
145
|
+
padding: 10px;
|
|
146
|
+
border-radius: 12px;
|
|
147
|
+
background: var(--card-bg);
|
|
148
|
+
box-shadow: var(--shadow);
|
|
149
|
+
}
|
|
150
|
+
.avatar {
|
|
151
|
+
width: 32px;
|
|
152
|
+
height: 32px;
|
|
153
|
+
border-radius: 50%;
|
|
154
|
+
display: flex;
|
|
155
|
+
align-items: center;
|
|
156
|
+
justify-content: center;
|
|
157
|
+
font-size: 12px;
|
|
158
|
+
font-weight: 600;
|
|
159
|
+
flex-shrink: 0;
|
|
160
|
+
}
|
|
161
|
+
.av-terracotta { background: var(--accent); color: #fff; }
|
|
162
|
+
.av-sage { background: #81B29A; color: #fff; }
|
|
163
|
+
.av-mustard { background: #F2CC8F; color: #7A6030; }
|
|
164
|
+
.av-slate { background: #6B8CAE; color: #fff; }
|
|
165
|
+
|
|
166
|
+
.user-name { font-size: 12px; font-weight: 600; color: var(--text-heading); }
|
|
167
|
+
.user-role { font-size: 11px; color: var(--text-secondary); }
|
|
168
|
+
|
|
169
|
+
/* โโ Main โโ */
|
|
170
|
+
.main {
|
|
171
|
+
flex: 1;
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
overflow: hidden;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* โโ Topbar โโ */
|
|
178
|
+
.topbar {
|
|
179
|
+
height: 60px;
|
|
180
|
+
background: var(--topbar-bg);
|
|
181
|
+
border-bottom: 1px solid var(--border);
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
padding: 0 28px;
|
|
185
|
+
gap: 14px;
|
|
186
|
+
flex-shrink: 0;
|
|
187
|
+
}
|
|
188
|
+
.topbar-title {
|
|
189
|
+
font-size: 13px;
|
|
190
|
+
font-weight: 500;
|
|
191
|
+
color: var(--text-body);
|
|
192
|
+
flex: 1;
|
|
193
|
+
overflow: hidden;
|
|
194
|
+
text-overflow: ellipsis;
|
|
195
|
+
white-space: nowrap;
|
|
196
|
+
}
|
|
197
|
+
.topbar-badge {
|
|
198
|
+
background: var(--accent-xlight);
|
|
199
|
+
color: var(--accent);
|
|
200
|
+
font-size: 10.5px;
|
|
201
|
+
font-weight: 600;
|
|
202
|
+
padding: 4px 11px;
|
|
203
|
+
border-radius: 20px;
|
|
204
|
+
white-space: nowrap;
|
|
205
|
+
}
|
|
206
|
+
.topbar-avatar {
|
|
207
|
+
width: 34px;
|
|
208
|
+
height: 34px;
|
|
209
|
+
border-radius: 50%;
|
|
210
|
+
background: var(--accent);
|
|
211
|
+
color: #fff;
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
justify-content: center;
|
|
215
|
+
font-size: 12px;
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
cursor: pointer;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* โโ Content โโ */
|
|
221
|
+
.content {
|
|
222
|
+
flex: 1;
|
|
223
|
+
overflow-y: auto;
|
|
224
|
+
padding: 32px 36px 48px;
|
|
225
|
+
}
|
|
226
|
+
.content::-webkit-scrollbar { width: 5px; }
|
|
227
|
+
.content::-webkit-scrollbar-track { background: transparent; }
|
|
228
|
+
.content::-webkit-scrollbar-thumb { background: var(--accent-light); border-radius: 3px; }
|
|
229
|
+
|
|
230
|
+
/* โโ Page header โโ */
|
|
231
|
+
.page-header { margin-bottom: 28px; }
|
|
232
|
+
.page-greeting {
|
|
233
|
+
font-family: 'Source Serif 4', Georgia, serif;
|
|
234
|
+
font-size: 30px;
|
|
235
|
+
font-weight: 600;
|
|
236
|
+
color: var(--text-heading);
|
|
237
|
+
letter-spacing: -0.5px;
|
|
238
|
+
line-height: 1.25;
|
|
239
|
+
}
|
|
240
|
+
.page-greeting em {
|
|
241
|
+
font-style: italic;
|
|
242
|
+
color: var(--accent);
|
|
243
|
+
}
|
|
244
|
+
.page-subtitle {
|
|
245
|
+
font-size: 13.5px;
|
|
246
|
+
color: var(--text-secondary);
|
|
247
|
+
margin-top: 7px;
|
|
248
|
+
line-height: 1.7;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* โโ Stat cards โโ */
|
|
252
|
+
.stats-grid {
|
|
253
|
+
display: grid;
|
|
254
|
+
grid-template-columns: repeat(3, 1fr);
|
|
255
|
+
gap: 16px;
|
|
256
|
+
margin-bottom: 20px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.card {
|
|
260
|
+
background: var(--card-bg);
|
|
261
|
+
border-radius: 16px;
|
|
262
|
+
box-shadow: var(--shadow);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.stat-card {
|
|
266
|
+
padding: 22px 20px 20px;
|
|
267
|
+
}
|
|
268
|
+
.stat-icon-row {
|
|
269
|
+
display: flex;
|
|
270
|
+
align-items: center;
|
|
271
|
+
justify-content: space-between;
|
|
272
|
+
margin-bottom: 14px;
|
|
273
|
+
}
|
|
274
|
+
.stat-icon {
|
|
275
|
+
width: 38px;
|
|
276
|
+
height: 38px;
|
|
277
|
+
border-radius: 12px;
|
|
278
|
+
background: var(--accent-xlight);
|
|
279
|
+
display: flex;
|
|
280
|
+
align-items: center;
|
|
281
|
+
justify-content: center;
|
|
282
|
+
font-size: 18px;
|
|
283
|
+
}
|
|
284
|
+
.stat-trend {
|
|
285
|
+
font-size: 11px;
|
|
286
|
+
font-weight: 600;
|
|
287
|
+
color: #5B8C5A;
|
|
288
|
+
background: #EDF6EC;
|
|
289
|
+
padding: 3px 9px;
|
|
290
|
+
border-radius: 20px;
|
|
291
|
+
}
|
|
292
|
+
.stat-trend.warn { color: #A27B2B; background: #FEF9EA; }
|
|
293
|
+
|
|
294
|
+
.stat-number {
|
|
295
|
+
font-family: 'Source Serif 4', Georgia, serif;
|
|
296
|
+
font-size: 38px;
|
|
297
|
+
font-weight: 700;
|
|
298
|
+
color: var(--text-heading);
|
|
299
|
+
letter-spacing: -1.5px;
|
|
300
|
+
line-height: 1;
|
|
301
|
+
margin-bottom: 4px;
|
|
302
|
+
}
|
|
303
|
+
.stat-label {
|
|
304
|
+
font-size: 12.5px;
|
|
305
|
+
font-weight: 500;
|
|
306
|
+
color: var(--text-secondary);
|
|
307
|
+
}
|
|
308
|
+
.stat-sub {
|
|
309
|
+
font-size: 11.5px;
|
|
310
|
+
color: var(--text-secondary);
|
|
311
|
+
margin-top: 10px;
|
|
312
|
+
padding-top: 10px;
|
|
313
|
+
border-top: 1px solid var(--border);
|
|
314
|
+
line-height: 1.5;
|
|
315
|
+
}
|
|
316
|
+
.stat-sub strong { color: var(--text-body); font-weight: 600; }
|
|
317
|
+
|
|
318
|
+
/* โโ Content grid โโ */
|
|
319
|
+
.content-grid {
|
|
320
|
+
display: grid;
|
|
321
|
+
grid-template-columns: 1fr 320px;
|
|
322
|
+
gap: 16px;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* โโ Activity feed โโ */
|
|
326
|
+
.card-header {
|
|
327
|
+
padding: 18px 22px 14px;
|
|
328
|
+
border-bottom: 1px solid var(--border);
|
|
329
|
+
display: flex;
|
|
330
|
+
align-items: center;
|
|
331
|
+
justify-content: space-between;
|
|
332
|
+
}
|
|
333
|
+
.card-title {
|
|
334
|
+
font-family: 'Source Serif 4', Georgia, serif;
|
|
335
|
+
font-size: 16px;
|
|
336
|
+
font-weight: 600;
|
|
337
|
+
color: var(--text-heading);
|
|
338
|
+
letter-spacing: -0.2px;
|
|
339
|
+
}
|
|
340
|
+
.card-title-sub {
|
|
341
|
+
font-size: 11.5px;
|
|
342
|
+
color: var(--text-secondary);
|
|
343
|
+
margin-top: 2px;
|
|
344
|
+
}
|
|
345
|
+
.card-link {
|
|
346
|
+
font-size: 12px;
|
|
347
|
+
font-weight: 600;
|
|
348
|
+
color: var(--accent);
|
|
349
|
+
cursor: pointer;
|
|
350
|
+
white-space: nowrap;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.feed-list {}
|
|
354
|
+
.feed-item {
|
|
355
|
+
display: flex;
|
|
356
|
+
align-items: flex-start;
|
|
357
|
+
gap: 12px;
|
|
358
|
+
padding: 14px 22px;
|
|
359
|
+
border-bottom: 1px solid var(--border);
|
|
360
|
+
transition: background 0.12s;
|
|
361
|
+
}
|
|
362
|
+
.feed-item:last-child { border-bottom: none; }
|
|
363
|
+
.feed-item:hover { background: var(--bg); }
|
|
364
|
+
|
|
365
|
+
.feed-avatar {
|
|
366
|
+
width: 34px;
|
|
367
|
+
height: 34px;
|
|
368
|
+
border-radius: 50%;
|
|
369
|
+
display: flex;
|
|
370
|
+
align-items: center;
|
|
371
|
+
justify-content: center;
|
|
372
|
+
font-size: 12px;
|
|
373
|
+
font-weight: 600;
|
|
374
|
+
flex-shrink: 0;
|
|
375
|
+
}
|
|
376
|
+
.feed-body { flex: 1; min-width: 0; }
|
|
377
|
+
.feed-text {
|
|
378
|
+
font-size: 13px;
|
|
379
|
+
color: var(--text-body);
|
|
380
|
+
line-height: 1.5;
|
|
381
|
+
}
|
|
382
|
+
.feed-text strong { color: var(--text-heading); font-weight: 600; }
|
|
383
|
+
.feed-meta {
|
|
384
|
+
display: flex;
|
|
385
|
+
align-items: center;
|
|
386
|
+
gap: 8px;
|
|
387
|
+
margin-top: 4px;
|
|
388
|
+
}
|
|
389
|
+
.feed-time { font-size: 11px; color: var(--text-secondary); }
|
|
390
|
+
.feed-tag {
|
|
391
|
+
font-size: 10.5px;
|
|
392
|
+
font-weight: 600;
|
|
393
|
+
background: var(--accent-xlight);
|
|
394
|
+
color: var(--accent);
|
|
395
|
+
padding: 2px 8px;
|
|
396
|
+
border-radius: 20px;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/* โโ Settings card โโ */
|
|
400
|
+
.settings-card {}
|
|
401
|
+
.setting-row {
|
|
402
|
+
display: flex;
|
|
403
|
+
align-items: center;
|
|
404
|
+
justify-content: space-between;
|
|
405
|
+
padding: 14px 20px;
|
|
406
|
+
border-bottom: 1px solid var(--border);
|
|
407
|
+
}
|
|
408
|
+
.setting-row:last-child { border-bottom: none; }
|
|
409
|
+
.setting-label { font-size: 13px; font-weight: 500; color: var(--text-heading); }
|
|
410
|
+
.setting-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
|
|
411
|
+
|
|
412
|
+
/* Toggle */
|
|
413
|
+
.toggle {
|
|
414
|
+
width: 38px;
|
|
415
|
+
height: 22px;
|
|
416
|
+
border-radius: 11px;
|
|
417
|
+
position: relative;
|
|
418
|
+
cursor: pointer;
|
|
419
|
+
flex-shrink: 0;
|
|
420
|
+
}
|
|
421
|
+
.toggle.on { background: var(--accent); }
|
|
422
|
+
.toggle.off { background: #D1D5DB; }
|
|
423
|
+
.toggle::after {
|
|
424
|
+
content: '';
|
|
425
|
+
position: absolute;
|
|
426
|
+
top: 3px;
|
|
427
|
+
width: 16px;
|
|
428
|
+
height: 16px;
|
|
429
|
+
border-radius: 50%;
|
|
430
|
+
background: #fff;
|
|
431
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.20);
|
|
432
|
+
transition: left 0.15s;
|
|
433
|
+
}
|
|
434
|
+
.toggle.on::after { left: 19px; }
|
|
435
|
+
.toggle.off::after { left: 3px; }
|
|
436
|
+
|
|
437
|
+
/* Select-like chip */
|
|
438
|
+
.select-chip {
|
|
439
|
+
background: var(--bg);
|
|
440
|
+
border: 1px solid var(--border);
|
|
441
|
+
border-radius: 10px;
|
|
442
|
+
padding: 5px 12px;
|
|
443
|
+
font-size: 12px;
|
|
444
|
+
color: var(--text-body);
|
|
445
|
+
font-weight: 500;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* โโ Button โโ */
|
|
449
|
+
.btn-primary {
|
|
450
|
+
display: inline-flex;
|
|
451
|
+
align-items: center;
|
|
452
|
+
gap: 7px;
|
|
453
|
+
background: var(--accent);
|
|
454
|
+
color: #fff;
|
|
455
|
+
border: none;
|
|
456
|
+
border-radius: 12px;
|
|
457
|
+
padding: 10px 20px;
|
|
458
|
+
font-size: 13px;
|
|
459
|
+
font-weight: 600;
|
|
460
|
+
cursor: pointer;
|
|
461
|
+
font-family: 'Inter', sans-serif;
|
|
462
|
+
box-shadow: 0 2px 8px rgba(224,122,95,0.25);
|
|
463
|
+
}
|
|
464
|
+
.btn-secondary {
|
|
465
|
+
display: inline-flex;
|
|
466
|
+
align-items: center;
|
|
467
|
+
gap: 7px;
|
|
468
|
+
background: var(--bg);
|
|
469
|
+
color: var(--text-body);
|
|
470
|
+
border: 1px solid var(--border);
|
|
471
|
+
border-radius: 12px;
|
|
472
|
+
padding: 10px 20px;
|
|
473
|
+
font-size: 13px;
|
|
474
|
+
font-weight: 500;
|
|
475
|
+
cursor: pointer;
|
|
476
|
+
font-family: 'Inter', sans-serif;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.card-footer {
|
|
480
|
+
padding: 14px 20px;
|
|
481
|
+
border-top: 1px solid var(--border);
|
|
482
|
+
display: flex;
|
|
483
|
+
gap: 10px;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
/* โโ Watermark โโ */
|
|
487
|
+
.watermark {
|
|
488
|
+
position: fixed;
|
|
489
|
+
top: 14px;
|
|
490
|
+
right: 16px;
|
|
491
|
+
background: var(--accent-xlight);
|
|
492
|
+
border: 1px solid var(--accent-light);
|
|
493
|
+
border-radius: 20px;
|
|
494
|
+
padding: 4px 12px;
|
|
495
|
+
font-size: 10.5px;
|
|
496
|
+
font-weight: 600;
|
|
497
|
+
color: var(--accent);
|
|
498
|
+
z-index: 100;
|
|
499
|
+
letter-spacing: 0.02em;
|
|
500
|
+
}
|
|
501
|
+
</style>
|
|
502
|
+
</head>
|
|
503
|
+
<body>
|
|
504
|
+
|
|
505
|
+
<div class="watermark">AIOSON Design Skill Preview</div>
|
|
506
|
+
|
|
507
|
+
<div class="shell">
|
|
508
|
+
|
|
509
|
+
<!-- Sidebar -->
|
|
510
|
+
<aside class="sidebar">
|
|
511
|
+
<div class="sidebar-logo">
|
|
512
|
+
<div class="bloom-mark">
|
|
513
|
+
<div class="bloom-dot"></div>
|
|
514
|
+
<div class="bloom-name">Bloom</div>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="bloom-tagline">Your workspace,<br>warmly organized.</div>
|
|
517
|
+
</div>
|
|
518
|
+
|
|
519
|
+
<nav class="nav-section">
|
|
520
|
+
<div class="nav-label">Navigation</div>
|
|
521
|
+
|
|
522
|
+
<div class="nav-item active">
|
|
523
|
+
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor">
|
|
524
|
+
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 3a1 1 0 0 1 1 1v2.586l1.707 1.707a1 1 0 0 1-1.414 1.414l-2-2A1 1 0 0 1 7 9V6a1 1 0 0 1 1-1z"/>
|
|
525
|
+
</svg>
|
|
526
|
+
Overview
|
|
527
|
+
</div>
|
|
528
|
+
|
|
529
|
+
<div class="nav-item">
|
|
530
|
+
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor">
|
|
531
|
+
<path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm1 2h11v7h-11V4z"/>
|
|
532
|
+
</svg>
|
|
533
|
+
Projects
|
|
534
|
+
<span class="nav-count">5</span>
|
|
535
|
+
</div>
|
|
536
|
+
|
|
537
|
+
<div class="nav-item">
|
|
538
|
+
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor">
|
|
539
|
+
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
|
|
540
|
+
</svg>
|
|
541
|
+
Team
|
|
542
|
+
</div>
|
|
543
|
+
|
|
544
|
+
<div class="nav-item">
|
|
545
|
+
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor">
|
|
546
|
+
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
|
547
|
+
</svg>
|
|
548
|
+
Calendar
|
|
549
|
+
</div>
|
|
550
|
+
|
|
551
|
+
<div class="nav-item">
|
|
552
|
+
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor">
|
|
553
|
+
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
|
|
554
|
+
</svg>
|
|
555
|
+
Settings
|
|
556
|
+
</div>
|
|
557
|
+
</nav>
|
|
558
|
+
|
|
559
|
+
<div class="sidebar-footer">
|
|
560
|
+
<div class="user-card">
|
|
561
|
+
<div class="avatar av-terracotta">LM</div>
|
|
562
|
+
<div>
|
|
563
|
+
<div class="user-name">Lena Mรผller</div>
|
|
564
|
+
<div class="user-role">Design Lead</div>
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
</aside>
|
|
569
|
+
|
|
570
|
+
<!-- Main -->
|
|
571
|
+
<div class="main">
|
|
572
|
+
<header class="topbar">
|
|
573
|
+
<span class="topbar-title">Warm Craft UI โ AIOSON Design Skill Preview</span>
|
|
574
|
+
<span class="topbar-badge">Serif ยท Warmth ยท Rounded</span>
|
|
575
|
+
<div class="topbar-avatar">LM</div>
|
|
576
|
+
</header>
|
|
577
|
+
|
|
578
|
+
<div class="content">
|
|
579
|
+
|
|
580
|
+
<!-- Page header -->
|
|
581
|
+
<div class="page-header">
|
|
582
|
+
<h1 class="page-greeting">Good morning, <em>Lena.</em></h1>
|
|
583
|
+
<p class="page-subtitle">You have 7 tasks in progress and 3 items waiting for your review. It's a good day to ship.</p>
|
|
584
|
+
</div>
|
|
585
|
+
|
|
586
|
+
<!-- Stat cards -->
|
|
587
|
+
<div class="stats-grid">
|
|
588
|
+
|
|
589
|
+
<div class="card stat-card">
|
|
590
|
+
<div class="stat-icon-row">
|
|
591
|
+
<div class="stat-icon">โ
</div>
|
|
592
|
+
<div class="stat-trend">+6 this week</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="stat-number">24</div>
|
|
595
|
+
<div class="stat-label">Tasks Done</div>
|
|
596
|
+
<div class="stat-sub">Last completed: <strong>Landing page copy</strong> ยท 1h ago</div>
|
|
597
|
+
</div>
|
|
598
|
+
|
|
599
|
+
<div class="card stat-card">
|
|
600
|
+
<div class="stat-icon-row">
|
|
601
|
+
<div class="stat-icon">๐</div>
|
|
602
|
+
<div class="stat-trend warn">3 overdue</div>
|
|
603
|
+
</div>
|
|
604
|
+
<div class="stat-number">7</div>
|
|
605
|
+
<div class="stat-label">In Progress</div>
|
|
606
|
+
<div class="stat-sub">Oldest active: <strong>API integration</strong> ยท 4 days</div>
|
|
607
|
+
</div>
|
|
608
|
+
|
|
609
|
+
<div class="card stat-card">
|
|
610
|
+
<div class="stat-icon-row">
|
|
611
|
+
<div class="stat-icon">๐ฅ</div>
|
|
612
|
+
<div class="stat-trend">Full capacity</div>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="stat-number">12</div>
|
|
615
|
+
<div class="stat-label">Team Members</div>
|
|
616
|
+
<div class="stat-sub">Online now: <strong>5 active</strong> ยท 2 in meetings</div>
|
|
617
|
+
</div>
|
|
618
|
+
|
|
619
|
+
</div>
|
|
620
|
+
|
|
621
|
+
<!-- Content grid -->
|
|
622
|
+
<div class="content-grid">
|
|
623
|
+
|
|
624
|
+
<!-- Activity feed -->
|
|
625
|
+
<div class="card">
|
|
626
|
+
<div class="card-header">
|
|
627
|
+
<div>
|
|
628
|
+
<div class="card-title">Team Activity</div>
|
|
629
|
+
<div class="card-title-sub">Live updates from your workspace</div>
|
|
630
|
+
</div>
|
|
631
|
+
<span class="card-link">View all โ</span>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="feed-list">
|
|
634
|
+
<div class="feed-item">
|
|
635
|
+
<div class="feed-avatar av-sage">PK</div>
|
|
636
|
+
<div class="feed-body">
|
|
637
|
+
<div class="feed-text"><strong>Petra K.</strong> completed the onboarding flow redesign and marked it ready for dev handoff</div>
|
|
638
|
+
<div class="feed-meta">
|
|
639
|
+
<span class="feed-time">Just now</span>
|
|
640
|
+
<span class="feed-tag">Design</span>
|
|
641
|
+
</div>
|
|
642
|
+
</div>
|
|
643
|
+
</div>
|
|
644
|
+
<div class="feed-item">
|
|
645
|
+
<div class="feed-avatar av-mustard">TW</div>
|
|
646
|
+
<div class="feed-body">
|
|
647
|
+
<div class="feed-text"><strong>Tom W.</strong> added a comment on the Q2 roadmap โ requesting a timeline review by Friday</div>
|
|
648
|
+
<div class="feed-meta">
|
|
649
|
+
<span class="feed-time">14 min ago</span>
|
|
650
|
+
<span class="feed-tag">Planning</span>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
<div class="feed-item">
|
|
655
|
+
<div class="feed-avatar av-slate">AO</div>
|
|
656
|
+
<div class="feed-body">
|
|
657
|
+
<div class="feed-text"><strong>Aisha O.</strong> merged the billing module โ all 38 tests passing, deploy queued</div>
|
|
658
|
+
<div class="feed-meta">
|
|
659
|
+
<span class="feed-time">1 hour ago</span>
|
|
660
|
+
<span class="feed-tag">Engineering</span>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
<div class="feed-item">
|
|
665
|
+
<div class="feed-avatar av-terracotta">LM</div>
|
|
666
|
+
<div class="feed-body">
|
|
667
|
+
<div class="feed-text"><strong>You</strong> updated the brand guide with new typeface guidelines for mobile screens</div>
|
|
668
|
+
<div class="feed-meta">
|
|
669
|
+
<span class="feed-time">3 hours ago</span>
|
|
670
|
+
<span class="feed-tag">Brand</span>
|
|
671
|
+
</div>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
|
|
677
|
+
<!-- Settings card -->
|
|
678
|
+
<div class="card">
|
|
679
|
+
<div class="card-header">
|
|
680
|
+
<div>
|
|
681
|
+
<div class="card-title">Workspace</div>
|
|
682
|
+
<div class="card-title-sub">Preferences</div>
|
|
683
|
+
</div>
|
|
684
|
+
</div>
|
|
685
|
+
|
|
686
|
+
<div class="setting-row">
|
|
687
|
+
<div>
|
|
688
|
+
<div class="setting-label">Email Digests</div>
|
|
689
|
+
<div class="setting-desc">Daily summary at 08:00</div>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="toggle on"></div>
|
|
692
|
+
</div>
|
|
693
|
+
|
|
694
|
+
<div class="setting-row">
|
|
695
|
+
<div>
|
|
696
|
+
<div class="setting-label">Slack Notifications</div>
|
|
697
|
+
<div class="setting-desc">Task updates & mentions</div>
|
|
698
|
+
</div>
|
|
699
|
+
<div class="toggle on"></div>
|
|
700
|
+
</div>
|
|
701
|
+
|
|
702
|
+
<div class="setting-row">
|
|
703
|
+
<div>
|
|
704
|
+
<div class="setting-label">Auto-assign</div>
|
|
705
|
+
<div class="setting-desc">Round-robin assignment</div>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="toggle off"></div>
|
|
708
|
+
</div>
|
|
709
|
+
|
|
710
|
+
<div class="setting-row">
|
|
711
|
+
<div>
|
|
712
|
+
<div class="setting-label">Week starts on</div>
|
|
713
|
+
<div class="setting-desc">First day of calendar</div>
|
|
714
|
+
</div>
|
|
715
|
+
<div class="select-chip">Monday</div>
|
|
716
|
+
</div>
|
|
717
|
+
|
|
718
|
+
<div class="setting-row">
|
|
719
|
+
<div>
|
|
720
|
+
<div class="setting-label">Timezone</div>
|
|
721
|
+
<div class="setting-desc">Display time in</div>
|
|
722
|
+
</div>
|
|
723
|
+
<div class="select-chip">UTC+1</div>
|
|
724
|
+
</div>
|
|
725
|
+
|
|
726
|
+
<div class="card-footer">
|
|
727
|
+
<button class="btn-primary">Save changes</button>
|
|
728
|
+
<button class="btn-secondary">Cancel</button>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
|
|
736
|
+
</div>
|
|
737
|
+
|
|
738
|
+
</body>
|
|
739
|
+
</html>
|