@jaimevalasek/aioson 1.5.1 โ†’ 1.7.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 (341) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +729 -226
  3. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  4. package/docs/design-previews/aurora-command-ui.html +682 -0
  5. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  6. package/docs/design-previews/bold-editorial-ui.html +717 -0
  7. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  8. package/docs/design-previews/clean-saas-ui.html +549 -0
  9. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  10. package/docs/design-previews/cognitive-core-ui.html +463 -0
  11. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  12. package/docs/design-previews/glassmorphism-ui.html +886 -0
  13. package/docs/design-previews/index.html +699 -0
  14. package/docs/design-previews/interface-design-website.html +1187 -0
  15. package/docs/design-previews/interface-design.html +513 -0
  16. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  17. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  18. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  19. package/docs/design-previews/premium-command-center-ui.html +552 -0
  20. package/docs/design-previews/pt.squarespace.com-homepage.html +889 -0
  21. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  22. package/docs/design-previews/warm-craft-ui.html +739 -0
  23. package/docs/en/cli-reference.md +20 -9
  24. package/docs/integrations/sdlc-genius-boundary.md +76 -0
  25. package/docs/integrations/sdlc-genius-eval-matrix.md +75 -0
  26. package/docs/integrations/sdlc-genius-install-checklist.md +93 -0
  27. package/docs/integrations/sdlc-genius-review-samples.md +86 -0
  28. package/docs/pt/README.md +10 -0
  29. package/docs/pt/agent-sharding.md +132 -0
  30. package/docs/pt/agentes.md +9 -2
  31. package/docs/pt/busca-de-contexto.md +129 -0
  32. package/docs/pt/cache-de-contexto.md +156 -0
  33. package/docs/pt/comandos-cli.md +915 -1
  34. package/docs/pt/design-hybrid-forge.md +356 -0
  35. package/docs/pt/devlog-pipeline.md +270 -0
  36. package/docs/pt/fluxo-artefatos.md +178 -0
  37. package/docs/pt/hooks-session-guard.md +454 -0
  38. package/docs/pt/inicio-rapido.md +54 -3
  39. package/docs/pt/inteligencia-adaptativa.md +324 -0
  40. package/docs/pt/monitor-de-contexto.md +158 -0
  41. package/docs/pt/recuperacao-de-sessao.md +125 -0
  42. package/docs/pt/sandbox.md +125 -0
  43. package/docs/pt/sdd-automation-scripts.md +557 -0
  44. package/docs/pt/site-forge.md +309 -0
  45. package/docs/pt/skills.md +98 -6
  46. package/docs/pt/spec-learnings-pipeline.md +265 -0
  47. package/package.json +1 -1
  48. package/src/a2a/client.js +165 -0
  49. package/src/a2a/server.js +223 -0
  50. package/src/agent-loader.js +280 -0
  51. package/src/cli.js +329 -1
  52. package/src/commands/agent-audit.js +397 -0
  53. package/src/commands/agent-export-skill.js +229 -0
  54. package/src/commands/agent-loader.js +85 -0
  55. package/src/commands/artifact-validate.js +189 -0
  56. package/src/commands/brief-gen.js +405 -0
  57. package/src/commands/brief-validate.js +65 -0
  58. package/src/commands/classify.js +256 -0
  59. package/src/commands/context-cache.js +90 -0
  60. package/src/commands/context-compact.js +49 -0
  61. package/src/commands/context-health.js +175 -0
  62. package/src/commands/context-monitor.js +163 -0
  63. package/src/commands/context-search.js +66 -0
  64. package/src/commands/context-trim.js +177 -0
  65. package/src/commands/design-hybrid-options.js +385 -0
  66. package/src/commands/detect-test-runner.js +55 -0
  67. package/src/commands/devlog-export-brains.js +27 -0
  68. package/src/commands/devlog-process.js +292 -0
  69. package/src/commands/devlog-watch.js +131 -0
  70. package/src/commands/feature-close.js +165 -0
  71. package/src/commands/gate-check.js +228 -0
  72. package/src/commands/health.js +214 -0
  73. package/src/commands/hooks-emit.js +253 -0
  74. package/src/commands/hooks-install.js +347 -0
  75. package/src/commands/init.js +54 -13
  76. package/src/commands/install.js +52 -13
  77. package/src/commands/learning-auto-promote.js +195 -0
  78. package/src/commands/learning-evolve.js +364 -0
  79. package/src/commands/learning-export.js +103 -0
  80. package/src/commands/learning-rollback.js +164 -0
  81. package/src/commands/live.js +59 -1
  82. package/src/commands/pattern-detect.js +33 -0
  83. package/src/commands/preflight-context.js +30 -0
  84. package/src/commands/preflight.js +208 -0
  85. package/src/commands/pulse-update.js +130 -0
  86. package/src/commands/recovery.js +43 -0
  87. package/src/commands/runner-daemon.js +274 -0
  88. package/src/commands/runner-plan.js +70 -0
  89. package/src/commands/runner-queue-from-plan.js +166 -0
  90. package/src/commands/runner-queue.js +189 -0
  91. package/src/commands/runner-run.js +129 -0
  92. package/src/commands/runtime.js +47 -1
  93. package/src/commands/sandbox.js +37 -0
  94. package/src/commands/self-implement-loop.js +256 -0
  95. package/src/commands/session-guard.js +218 -0
  96. package/src/commands/setup-context.js +22 -2
  97. package/src/commands/setup.js +178 -0
  98. package/src/commands/sizing.js +165 -0
  99. package/src/commands/skill.js +144 -32
  100. package/src/commands/spec-checkpoint.js +177 -0
  101. package/src/commands/spec-status.js +79 -0
  102. package/src/commands/spec-sync.js +190 -0
  103. package/src/commands/spec-tasks.js +288 -0
  104. package/src/commands/squad-autorun.js +1220 -0
  105. package/src/commands/squad-bus.js +217 -0
  106. package/src/commands/squad-card.js +149 -0
  107. package/src/commands/squad-daemon.js +134 -0
  108. package/src/commands/squad-dependency-graph.js +164 -0
  109. package/src/commands/squad-review.js +106 -0
  110. package/src/commands/squad-scaffold.js +55 -0
  111. package/src/commands/squad-tool-register.js +157 -0
  112. package/src/commands/state-save.js +122 -0
  113. package/src/commands/tool-registry-cmd.js +232 -0
  114. package/src/commands/update.js +9 -0
  115. package/src/commands/verify-gate.js +572 -0
  116. package/src/commands/workflow-execute.js +241 -0
  117. package/src/constants.js +18 -0
  118. package/src/context-cache.js +159 -0
  119. package/src/context-search.js +326 -0
  120. package/src/design-variation-catalog.js +503 -0
  121. package/src/i18n/messages/en.js +32 -2
  122. package/src/i18n/messages/es.js +30 -2
  123. package/src/i18n/messages/fr.js +30 -2
  124. package/src/i18n/messages/pt-BR.js +32 -2
  125. package/src/install-animation.js +260 -0
  126. package/src/install-profile.js +143 -0
  127. package/src/install-wizard.js +475 -0
  128. package/src/installer.js +44 -10
  129. package/src/lib/health-check.js +158 -0
  130. package/src/lib/hook-protocol.js +76 -0
  131. package/src/mcp/apps/squad-dashboard/app.js +163 -0
  132. package/src/mcp/apps/squad-dashboard/index.html +261 -0
  133. package/src/mcp/apps/squad-dashboard/mcp-manifest.json +23 -0
  134. package/src/mcp/resources/squad-state.js +130 -0
  135. package/src/parser.js +7 -1
  136. package/src/preflight-engine.js +443 -0
  137. package/src/recovery-context-session.js +154 -0
  138. package/src/runner/cascade.js +97 -0
  139. package/src/runner/cli-launcher.js +109 -0
  140. package/src/runner/plan-importer.js +63 -0
  141. package/src/runner/queue-store.js +159 -0
  142. package/src/runtime-store.js +158 -4
  143. package/src/sandbox.js +177 -0
  144. package/src/squad/agent-teams-adapter.js +264 -0
  145. package/src/squad/brief-validator.js +350 -0
  146. package/src/squad/bus-bridge.js +140 -0
  147. package/src/squad/context-compactor.js +265 -0
  148. package/src/squad/cross-ai-synthesizer.js +250 -0
  149. package/src/squad/hooks-generator.js +196 -0
  150. package/src/squad/inter-squad-events.js +175 -0
  151. package/src/squad/intra-bus.js +345 -0
  152. package/src/squad/learning-extractor.js +213 -0
  153. package/src/squad/pattern-detector.js +365 -0
  154. package/src/squad/preflight-context.js +296 -0
  155. package/src/squad/recovery-context.js +242 -71
  156. package/src/squad/reflection.js +365 -0
  157. package/src/squad/squad-scaffold.js +177 -0
  158. package/src/squad/state-manager.js +310 -0
  159. package/src/squad/task-decomposer.js +652 -0
  160. package/src/squad/verify-gate.js +303 -0
  161. package/src/tool-executor.js +94 -0
  162. package/src/updater.js +10 -3
  163. package/src/worker-runner.js +186 -1
  164. package/template/.aioson/agents/analyst.md +119 -3
  165. package/template/.aioson/agents/architect.md +98 -0
  166. package/template/.aioson/agents/design-hybrid-forge.md +141 -0
  167. package/template/.aioson/agents/dev.md +335 -14
  168. package/template/.aioson/agents/deyvin.md +117 -2
  169. package/template/.aioson/agents/discovery-design-doc.md +44 -0
  170. package/template/.aioson/agents/genome.md +14 -0
  171. package/template/.aioson/agents/neo.md +78 -1
  172. package/template/.aioson/agents/orache.md +50 -4
  173. package/template/.aioson/agents/orchestrator.md +197 -1
  174. package/template/.aioson/agents/pm.md +93 -0
  175. package/template/.aioson/agents/product.md +77 -4
  176. package/template/.aioson/agents/profiler-enricher.md +14 -0
  177. package/template/.aioson/agents/profiler-forge.md +14 -0
  178. package/template/.aioson/agents/profiler-researcher.md +14 -0
  179. package/template/.aioson/agents/qa.md +249 -19
  180. package/template/.aioson/agents/setup.md +144 -12
  181. package/template/.aioson/agents/sheldon.md +237 -11
  182. package/template/.aioson/agents/site-forge.md +1753 -0
  183. package/template/.aioson/agents/squad.md +162 -0
  184. package/template/.aioson/agents/tester.md +209 -0
  185. package/template/.aioson/agents/ux-ui.md +34 -1
  186. package/template/.aioson/brains/README.md +128 -0
  187. package/template/.aioson/brains/_index.json +16 -0
  188. package/template/.aioson/brains/scripts/query.js +103 -0
  189. package/template/.aioson/brains/site-forge/visual-patterns.brain.json +205 -0
  190. package/template/.aioson/config.md +158 -13
  191. package/template/.aioson/constitution.md +33 -0
  192. package/template/.aioson/context/forensics/.gitkeep +0 -0
  193. package/template/.aioson/context/project-pulse.md +34 -0
  194. package/template/.aioson/context/seeds/seed-example.md +27 -0
  195. package/template/.aioson/context/user-profile.md +42 -0
  196. package/template/.aioson/docs/LAYERS.md +79 -0
  197. package/template/.aioson/docs/README.md +76 -0
  198. package/template/.aioson/docs/example-external-api-context.md +72 -0
  199. package/template/.aioson/locales/en/agents/architect.md +17 -0
  200. package/template/.aioson/locales/en/agents/dev.md +79 -13
  201. package/template/.aioson/locales/en/agents/orache.md +6 -0
  202. package/template/.aioson/locales/en/agents/orchestrator.md +24 -0
  203. package/template/.aioson/locales/en/agents/product.md +50 -0
  204. package/template/.aioson/locales/en/agents/setup.md +33 -1
  205. package/template/.aioson/locales/en/agents/sheldon.md +115 -0
  206. package/template/.aioson/locales/en/agents/squad.md +14 -0
  207. package/template/.aioson/locales/en/agents/tester.md +6 -0
  208. package/template/.aioson/locales/es/agents/analyst.md +2 -0
  209. package/template/.aioson/locales/es/agents/architect.md +19 -0
  210. package/template/.aioson/locales/es/agents/dev.md +64 -4
  211. package/template/.aioson/locales/es/agents/deyvin.md +2 -0
  212. package/template/.aioson/locales/es/agents/discovery-design-doc.md +2 -0
  213. package/template/.aioson/locales/es/agents/genome.md +2 -0
  214. package/template/.aioson/locales/es/agents/neo.md +2 -0
  215. package/template/.aioson/locales/es/agents/orache.md +2 -0
  216. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  217. package/template/.aioson/locales/es/agents/pair.md +2 -0
  218. package/template/.aioson/locales/es/agents/pm.md +2 -0
  219. package/template/.aioson/locales/es/agents/product.md +52 -0
  220. package/template/.aioson/locales/es/agents/profiler-enricher.md +2 -0
  221. package/template/.aioson/locales/es/agents/profiler-forge.md +2 -0
  222. package/template/.aioson/locales/es/agents/profiler-researcher.md +2 -0
  223. package/template/.aioson/locales/es/agents/qa.md +2 -0
  224. package/template/.aioson/locales/es/agents/setup.md +35 -1
  225. package/template/.aioson/locales/es/agents/sheldon.md +117 -0
  226. package/template/.aioson/locales/es/agents/squad.md +16 -0
  227. package/template/.aioson/locales/es/agents/tester.md +9 -0
  228. package/template/.aioson/locales/es/agents/ux-ui.md +2 -0
  229. package/template/.aioson/locales/fr/agents/analyst.md +2 -0
  230. package/template/.aioson/locales/fr/agents/architect.md +19 -0
  231. package/template/.aioson/locales/fr/agents/dev.md +64 -4
  232. package/template/.aioson/locales/fr/agents/deyvin.md +2 -0
  233. package/template/.aioson/locales/fr/agents/discovery-design-doc.md +2 -0
  234. package/template/.aioson/locales/fr/agents/genome.md +2 -0
  235. package/template/.aioson/locales/fr/agents/neo.md +2 -0
  236. package/template/.aioson/locales/fr/agents/orache.md +2 -0
  237. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  238. package/template/.aioson/locales/fr/agents/pair.md +2 -0
  239. package/template/.aioson/locales/fr/agents/pm.md +2 -0
  240. package/template/.aioson/locales/fr/agents/product.md +52 -0
  241. package/template/.aioson/locales/fr/agents/profiler-enricher.md +2 -0
  242. package/template/.aioson/locales/fr/agents/profiler-forge.md +2 -0
  243. package/template/.aioson/locales/fr/agents/profiler-researcher.md +2 -0
  244. package/template/.aioson/locales/fr/agents/qa.md +2 -0
  245. package/template/.aioson/locales/fr/agents/setup.md +35 -1
  246. package/template/.aioson/locales/fr/agents/sheldon.md +117 -0
  247. package/template/.aioson/locales/fr/agents/squad.md +16 -0
  248. package/template/.aioson/locales/fr/agents/tester.md +9 -0
  249. package/template/.aioson/locales/fr/agents/ux-ui.md +2 -0
  250. package/template/.aioson/locales/pt-BR/agents/analyst.md +64 -3
  251. package/template/.aioson/locales/pt-BR/agents/architect.md +42 -0
  252. package/template/.aioson/locales/pt-BR/agents/dev.md +147 -14
  253. package/template/.aioson/locales/pt-BR/agents/deyvin.md +47 -0
  254. package/template/.aioson/locales/pt-BR/agents/neo.md +62 -1
  255. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +158 -2
  256. package/template/.aioson/locales/pt-BR/agents/pm.md +95 -1
  257. package/template/.aioson/locales/pt-BR/agents/product.md +145 -18
  258. package/template/.aioson/locales/pt-BR/agents/qa.md +16 -0
  259. package/template/.aioson/locales/pt-BR/agents/setup.md +134 -19
  260. package/template/.aioson/locales/pt-BR/agents/sheldon.md +132 -1
  261. package/template/.aioson/locales/pt-BR/agents/squad.md +14 -0
  262. package/template/.aioson/locales/pt-BR/agents/tester.md +449 -0
  263. package/template/.aioson/rules/README.md +69 -0
  264. package/template/.aioson/rules/data-format-convention.md +136 -0
  265. package/template/.aioson/rules/example-monetary-values.md +30 -0
  266. package/template/.aioson/schemas/squad-manifest.schema.json +124 -3
  267. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  268. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  269. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  270. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  271. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  272. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  273. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  274. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  275. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  276. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  277. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  278. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  279. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  280. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  281. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  282. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  283. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  284. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  285. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  286. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  287. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  288. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  289. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  290. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  291. package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json +31 -0
  292. package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md +66 -0
  293. package/template/.aioson/skills/design/pt.squarespace.com/references/components.md +368 -0
  294. package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md +150 -0
  295. package/template/.aioson/skills/design/pt.squarespace.com/references/motion.md +270 -0
  296. package/template/.aioson/skills/design/pt.squarespace.com/references/patterns.md +189 -0
  297. package/template/.aioson/skills/design/pt.squarespace.com/references/websites.md +165 -0
  298. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +46 -0
  299. package/template/.aioson/skills/process/aioson-spec-driven/references/analyst.md +30 -0
  300. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  301. package/template/.aioson/skills/process/aioson-spec-driven/references/architect.md +23 -0
  302. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  303. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  304. package/template/.aioson/skills/process/aioson-spec-driven/references/dev.md +47 -0
  305. package/template/.aioson/skills/process/aioson-spec-driven/references/deyvin.md +27 -0
  306. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  307. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +101 -0
  308. package/template/.aioson/skills/process/aioson-spec-driven/references/product.md +25 -0
  309. package/template/.aioson/skills/process/aioson-spec-driven/references/qa.md +30 -0
  310. package/template/.aioson/skills/process/aioson-spec-driven/references/sheldon.md +25 -0
  311. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  312. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +147 -0
  313. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  314. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  315. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +306 -0
  316. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +149 -0
  317. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +208 -0
  318. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  319. package/template/.aioson/skills/process/simplify/SKILL.md +173 -0
  320. package/template/.aioson/skills/static/context-budget-guide.md +46 -0
  321. package/template/.aioson/skills/static/harness-sensors.md +74 -0
  322. package/template/.aioson/skills/static/multi-agent-patterns.md +43 -0
  323. package/template/.aioson/skills/static/react-motion-patterns.md +22 -0
  324. package/template/.aioson/skills/static/static-html-patterns/checklists.md +43 -0
  325. package/template/.aioson/skills/static/static-html-patterns/css-tokens.md +609 -0
  326. package/template/.aioson/skills/static/static-html-patterns/motion.md +193 -0
  327. package/template/.aioson/skills/static/static-html-patterns/premium.md +711 -0
  328. package/template/.aioson/skills/static/static-html-patterns/structure.md +209 -0
  329. package/template/.aioson/skills/static/static-html-patterns/utilities.md +190 -0
  330. package/template/.aioson/skills/static/static-html-patterns.md +58 -1913
  331. package/template/.aioson/skills/static/threejs-patterns.md +929 -0
  332. package/template/.aioson/skills/static/web-research-cache.md +112 -0
  333. package/template/.aioson/tasks/implementation-plan.md +21 -1
  334. package/template/.claude/commands/aioson/agent/design-hybrid-forge.md +5 -0
  335. package/template/.claude/commands/aioson/agent/orache.md +5 -0
  336. package/template/.claude/commands/aioson/agent/sheldon.md +5 -0
  337. package/template/.claude/commands/aioson/agent/site-forge.md +5 -0
  338. package/template/AGENTS.md +75 -1
  339. package/template/CLAUDE.md +31 -0
  340. package/template/OPENCODE.md +4 -0
  341. package/template/researchs/.gitkeep +0 -0
package/docs/design-previews/warm-craft-ui.html ADDED
@@ -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>