@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/glassmorphism-ui.html ADDED
@@ -0,0 +1,886 @@
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>Glassmorphism 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --accent: #7C3AED;
15
+ --accent-2: #3B82F6;
16
+ --accent-gradient: linear-gradient(135deg, #7C3AED, #3B82F6);
17
+ --text-heading: #1A1A2E;
18
+ --text-body: #2D2D44;
19
+ --text-secondary: #6B6B8A;
20
+ --shadow-violet: 0 8px 24px rgba(124, 58, 237, 0.08);
21
+ }
22
+
23
+ html, body {
24
+ height: 100%;
25
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
26
+ font-size: 14px;
27
+ color: var(--text-body);
28
+ overflow: hidden;
29
+ }
30
+
31
+ body {
32
+ background: linear-gradient(135deg, #F0EEF6 0%, #E0DFF0 30%, #D8E0F0 70%, #EDE8F0 100%);
33
+ background-attachment: fixed;
34
+ min-height: 100vh;
35
+ }
36
+
37
+ /* Decorative blobs */
38
+ body::before {
39
+ content: '';
40
+ position: fixed;
41
+ top: -120px;
42
+ right: -80px;
43
+ width: 480px;
44
+ height: 480px;
45
+ background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
46
+ border-radius: 50%;
47
+ pointer-events: none;
48
+ z-index: 0;
49
+ }
50
+ body::after {
51
+ content: '';
52
+ position: fixed;
53
+ bottom: -100px;
54
+ left: -60px;
55
+ width: 400px;
56
+ height: 400px;
57
+ background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
58
+ border-radius: 50%;
59
+ pointer-events: none;
60
+ z-index: 0;
61
+ }
62
+
63
+ /* ── Layout ── */
64
+ .shell {
65
+ display: flex;
66
+ height: 100vh;
67
+ position: relative;
68
+ z-index: 1;
69
+ }
70
+
71
+ /* ── Sidebar ── */
72
+ .sidebar {
73
+ width: 240px;
74
+ flex-shrink: 0;
75
+ background: rgba(255,255,255,0.55);
76
+ backdrop-filter: blur(16px);
77
+ -webkit-backdrop-filter: blur(16px);
78
+ border-right: 1px solid rgba(255,255,255,0.30);
79
+ display: flex;
80
+ flex-direction: column;
81
+ padding: 0;
82
+ overflow: hidden;
83
+ }
84
+
85
+ .sidebar-logo {
86
+ padding: 28px 24px 24px;
87
+ border-bottom: 1px solid rgba(255,255,255,0.30);
88
+ }
89
+ .sidebar-logo .logo-mark {
90
+ display: flex;
91
+ align-items: center;
92
+ gap: 10px;
93
+ }
94
+ .logo-icon {
95
+ width: 32px;
96
+ height: 32px;
97
+ background: var(--accent-gradient);
98
+ border-radius: 10px;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ }
103
+ .logo-icon svg { width: 16px; height: 16px; fill: #fff; }
104
+ .logo-text {
105
+ font-weight: 700;
106
+ font-size: 15px;
107
+ color: var(--text-heading);
108
+ letter-spacing: -0.3px;
109
+ }
110
+ .logo-sub {
111
+ font-size: 10px;
112
+ color: var(--text-secondary);
113
+ margin-top: 1px;
114
+ font-weight: 400;
115
+ }
116
+
117
+ .nav-section {
118
+ padding: 20px 12px;
119
+ flex: 1;
120
+ }
121
+ .nav-label {
122
+ font-size: 10px;
123
+ font-weight: 600;
124
+ color: var(--text-secondary);
125
+ letter-spacing: 0.08em;
126
+ text-transform: uppercase;
127
+ padding: 0 12px;
128
+ margin-bottom: 8px;
129
+ }
130
+
131
+ .nav-item {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 10px;
135
+ padding: 10px 12px;
136
+ border-radius: 12px;
137
+ cursor: pointer;
138
+ color: var(--text-secondary);
139
+ font-size: 13.5px;
140
+ font-weight: 500;
141
+ margin-bottom: 2px;
142
+ transition: all 0.15s ease;
143
+ border-left: 2px solid transparent;
144
+ position: relative;
145
+ }
146
+ .nav-item:hover {
147
+ background: rgba(124,58,237,0.06);
148
+ color: var(--text-body);
149
+ }
150
+ .nav-item.active {
151
+ background: rgba(124,58,237,0.12);
152
+ color: var(--accent);
153
+ border-left: 2px solid var(--accent);
154
+ }
155
+ .nav-item.active .nav-icon { color: var(--accent); }
156
+
157
+ .nav-icon {
158
+ width: 18px;
159
+ height: 18px;
160
+ flex-shrink: 0;
161
+ opacity: 0.7;
162
+ }
163
+ .nav-item.active .nav-icon { opacity: 1; }
164
+
165
+ .nav-badge {
166
+ margin-left: auto;
167
+ background: rgba(124,58,237,0.12);
168
+ color: var(--accent);
169
+ font-size: 10px;
170
+ font-weight: 600;
171
+ padding: 2px 7px;
172
+ border-radius: 20px;
173
+ }
174
+
175
+ .sidebar-footer {
176
+ padding: 16px 16px 20px;
177
+ border-top: 1px solid rgba(255,255,255,0.30);
178
+ }
179
+ .user-card {
180
+ display: flex;
181
+ align-items: center;
182
+ gap: 10px;
183
+ padding: 10px;
184
+ border-radius: 12px;
185
+ background: rgba(255,255,255,0.40);
186
+ cursor: pointer;
187
+ }
188
+ .avatar {
189
+ width: 32px;
190
+ height: 32px;
191
+ border-radius: 50%;
192
+ background: var(--accent-gradient);
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ font-size: 12px;
197
+ font-weight: 700;
198
+ color: #fff;
199
+ flex-shrink: 0;
200
+ }
201
+ .user-name { font-size: 12.5px; font-weight: 600; color: var(--text-heading); }
202
+ .user-role { font-size: 11px; color: var(--text-secondary); }
203
+
204
+ /* ── Main ── */
205
+ .main {
206
+ flex: 1;
207
+ display: flex;
208
+ flex-direction: column;
209
+ overflow: hidden;
210
+ }
211
+
212
+ /* ── Top bar ── */
213
+ .topbar {
214
+ height: 60px;
215
+ background: rgba(255,255,255,0.70);
216
+ backdrop-filter: blur(20px);
217
+ -webkit-backdrop-filter: blur(20px);
218
+ border-bottom: 1px solid rgba(255,255,255,0.40);
219
+ display: flex;
220
+ align-items: center;
221
+ padding: 0 28px;
222
+ gap: 16px;
223
+ flex-shrink: 0;
224
+ position: sticky;
225
+ top: 0;
226
+ z-index: 10;
227
+ }
228
+
229
+ .topbar-title {
230
+ font-size: 13.5px;
231
+ font-weight: 600;
232
+ color: var(--text-heading);
233
+ flex: 1;
234
+ white-space: nowrap;
235
+ overflow: hidden;
236
+ text-overflow: ellipsis;
237
+ }
238
+
239
+ .skill-badge {
240
+ background: var(--accent-gradient);
241
+ color: #fff;
242
+ font-size: 10.5px;
243
+ font-weight: 600;
244
+ padding: 4px 10px;
245
+ border-radius: 20px;
246
+ letter-spacing: 0.02em;
247
+ white-space: nowrap;
248
+ }
249
+
250
+ .topbar-actions {
251
+ display: flex;
252
+ align-items: center;
253
+ gap: 10px;
254
+ }
255
+ .topbar-btn {
256
+ width: 36px;
257
+ height: 36px;
258
+ border-radius: 10px;
259
+ background: rgba(255,255,255,0.60);
260
+ border: 1px solid rgba(255,255,255,0.50);
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ cursor: pointer;
265
+ color: var(--text-secondary);
266
+ }
267
+ .topbar-btn svg { width: 16px; height: 16px; }
268
+
269
+ .search-bar {
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 8px;
273
+ background: rgba(255,255,255,0.60);
274
+ border: 1px solid rgba(255,255,255,0.50);
275
+ border-radius: 10px;
276
+ padding: 0 12px;
277
+ height: 36px;
278
+ color: var(--text-secondary);
279
+ font-size: 13px;
280
+ }
281
+ .search-bar svg { width: 14px; height: 14px; flex-shrink: 0; }
282
+
283
+ /* ── Content ── */
284
+ .content {
285
+ flex: 1;
286
+ overflow-y: auto;
287
+ padding: 28px 32px 40px;
288
+ }
289
+ .content::-webkit-scrollbar { width: 6px; }
290
+ .content::-webkit-scrollbar-track { background: transparent; }
291
+ .content::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.2); border-radius: 3px; }
292
+
293
+ .page-header {
294
+ margin-bottom: 28px;
295
+ }
296
+ .page-eyebrow {
297
+ font-size: 11px;
298
+ font-weight: 600;
299
+ color: var(--accent);
300
+ text-transform: uppercase;
301
+ letter-spacing: 0.1em;
302
+ margin-bottom: 6px;
303
+ }
304
+ .page-title {
305
+ font-size: 26px;
306
+ font-weight: 700;
307
+ color: var(--text-heading);
308
+ letter-spacing: -0.5px;
309
+ line-height: 1.2;
310
+ }
311
+ .page-subtitle {
312
+ font-size: 13px;
313
+ color: var(--text-secondary);
314
+ margin-top: 6px;
315
+ line-height: 1.6;
316
+ }
317
+
318
+ /* ── Glass card ── */
319
+ .glass-card {
320
+ background: rgba(255,255,255,0.60);
321
+ backdrop-filter: blur(16px);
322
+ -webkit-backdrop-filter: blur(16px);
323
+ border: 1px solid rgba(255,255,255,0.40);
324
+ border-radius: 16px;
325
+ box-shadow: var(--shadow-violet);
326
+ position: relative;
327
+ overflow: hidden;
328
+ }
329
+ .glass-card::before {
330
+ content: '';
331
+ position: absolute;
332
+ top: 0; left: 0; right: 0;
333
+ height: 50%;
334
+ background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%);
335
+ pointer-events: none;
336
+ z-index: 0;
337
+ border-radius: 16px 16px 0 0;
338
+ }
339
+ .glass-card > * { position: relative; z-index: 1; }
340
+
341
+ /* ── Stat cards ── */
342
+ .stats-grid {
343
+ display: grid;
344
+ grid-template-columns: repeat(3, 1fr);
345
+ gap: 16px;
346
+ margin-bottom: 20px;
347
+ }
348
+
349
+ .stat-card {
350
+ padding: 22px 22px 20px;
351
+ }
352
+ .stat-header {
353
+ display: flex;
354
+ align-items: flex-start;
355
+ justify-content: space-between;
356
+ margin-bottom: 16px;
357
+ }
358
+ .stat-icon-wrap {
359
+ width: 40px;
360
+ height: 40px;
361
+ border-radius: 12px;
362
+ background: rgba(124,58,237,0.10);
363
+ display: flex;
364
+ align-items: center;
365
+ justify-content: center;
366
+ }
367
+ .stat-icon-wrap.blue { background: rgba(59,130,246,0.10); }
368
+ .stat-icon-wrap svg { width: 18px; height: 18px; }
369
+
370
+ .stat-delta {
371
+ display: flex;
372
+ align-items: center;
373
+ gap: 3px;
374
+ font-size: 11px;
375
+ font-weight: 600;
376
+ color: #10B981;
377
+ background: rgba(16,185,129,0.10);
378
+ padding: 3px 8px;
379
+ border-radius: 20px;
380
+ }
381
+ .stat-delta.down { color: #EF4444; background: rgba(239,68,68,0.10); }
382
+ .stat-delta svg { width: 11px; height: 11px; }
383
+
384
+ .stat-value {
385
+ font-size: 32px;
386
+ font-weight: 700;
387
+ letter-spacing: -1px;
388
+ line-height: 1;
389
+ background: var(--accent-gradient);
390
+ -webkit-background-clip: text;
391
+ -webkit-text-fill-color: transparent;
392
+ background-clip: text;
393
+ margin-bottom: 6px;
394
+ }
395
+ .stat-label {
396
+ font-size: 12.5px;
397
+ color: var(--text-secondary);
398
+ font-weight: 500;
399
+ }
400
+ .stat-sublabel {
401
+ font-size: 11px;
402
+ color: var(--text-secondary);
403
+ margin-top: 12px;
404
+ padding-top: 12px;
405
+ border-top: 1px solid rgba(255,255,255,0.50);
406
+ }
407
+ .stat-sublabel span { color: var(--text-body); font-weight: 600; }
408
+
409
+ /* Mini sparkline */
410
+ .sparkline { margin-top: 12px; }
411
+ .spark-bar-row {
412
+ display: flex;
413
+ align-items: flex-end;
414
+ gap: 3px;
415
+ height: 28px;
416
+ }
417
+ .spark-bar {
418
+ flex: 1;
419
+ background: rgba(124,58,237,0.15);
420
+ border-radius: 3px;
421
+ transition: background 0.15s;
422
+ }
423
+ .spark-bar.active { background: var(--accent-gradient); }
424
+
425
+ /* ── Content grid ── */
426
+ .content-grid {
427
+ display: grid;
428
+ grid-template-columns: 1fr 340px;
429
+ gap: 16px;
430
+ }
431
+
432
+ /* ── Table card ── */
433
+ .card-header {
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: space-between;
437
+ padding: 20px 22px 16px;
438
+ border-bottom: 1px solid rgba(255,255,255,0.40);
439
+ }
440
+ .card-title {
441
+ font-size: 14px;
442
+ font-weight: 700;
443
+ color: var(--text-heading);
444
+ letter-spacing: -0.2px;
445
+ }
446
+ .card-subtitle {
447
+ font-size: 11.5px;
448
+ color: var(--text-secondary);
449
+ margin-top: 2px;
450
+ }
451
+ .card-action {
452
+ font-size: 12px;
453
+ color: var(--accent);
454
+ font-weight: 600;
455
+ cursor: pointer;
456
+ white-space: nowrap;
457
+ }
458
+
459
+ table {
460
+ width: 100%;
461
+ border-collapse: collapse;
462
+ }
463
+ thead th {
464
+ padding: 10px 22px;
465
+ text-align: left;
466
+ font-size: 11px;
467
+ font-weight: 600;
468
+ color: var(--text-secondary);
469
+ text-transform: uppercase;
470
+ letter-spacing: 0.07em;
471
+ background: rgba(255,255,255,0.30);
472
+ }
473
+ tbody tr {
474
+ border-top: 1px solid rgba(255,255,255,0.35);
475
+ }
476
+ tbody tr:hover {
477
+ background: rgba(124,58,237,0.04);
478
+ }
479
+ tbody td {
480
+ padding: 13px 22px;
481
+ font-size: 13px;
482
+ color: var(--text-body);
483
+ vertical-align: middle;
484
+ }
485
+
486
+ .tx-name { font-weight: 600; color: var(--text-heading); }
487
+ .tx-sub { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
488
+
489
+ .tx-amount {
490
+ font-weight: 700;
491
+ font-size: 14px;
492
+ color: var(--text-heading);
493
+ }
494
+ .tx-amount.positive { color: #10B981; }
495
+
496
+ .status-badge {
497
+ display: inline-flex;
498
+ align-items: center;
499
+ gap: 4px;
500
+ padding: 3px 9px;
501
+ border-radius: 20px;
502
+ font-size: 11px;
503
+ font-weight: 600;
504
+ }
505
+ .status-badge::before {
506
+ content: '';
507
+ width: 6px;
508
+ height: 6px;
509
+ border-radius: 50%;
510
+ background: currentColor;
511
+ flex-shrink: 0;
512
+ }
513
+ .badge-success { background: rgba(16,185,129,0.12); color: #10B981; }
514
+ .badge-pending { background: rgba(245,158,11,0.12); color: #D97706; }
515
+ .badge-failed { background: rgba(239,68,68,0.12); color: #EF4444; }
516
+
517
+ .tx-date { font-size: 12px; color: var(--text-secondary); }
518
+
519
+ /* ── Activity card ── */
520
+ .activity-list { padding: 4px 0 8px; }
521
+ .activity-item {
522
+ display: flex;
523
+ align-items: flex-start;
524
+ gap: 12px;
525
+ padding: 14px 22px;
526
+ border-bottom: 1px solid rgba(255,255,255,0.35);
527
+ }
528
+ .activity-item:last-child { border-bottom: none; }
529
+
530
+ .act-avatar {
531
+ width: 34px;
532
+ height: 34px;
533
+ border-radius: 50%;
534
+ display: flex;
535
+ align-items: center;
536
+ justify-content: center;
537
+ font-size: 12px;
538
+ font-weight: 700;
539
+ color: #fff;
540
+ flex-shrink: 0;
541
+ }
542
+ .av-violet { background: linear-gradient(135deg, #7C3AED, #9F5FFF); }
543
+ .av-blue { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
544
+ .av-teal { background: linear-gradient(135deg, #14B8A6, #2DD4BF); }
545
+ .av-pink { background: linear-gradient(135deg, #EC4899, #F472B6); }
546
+
547
+ .act-body { flex: 1; min-width: 0; }
548
+ .act-text { font-size: 12.5px; color: var(--text-body); line-height: 1.5; }
549
+ .act-text strong { color: var(--text-heading); font-weight: 600; }
550
+ .act-time { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
551
+
552
+ /* ── CTA Button ── */
553
+ .btn-primary {
554
+ display: inline-flex;
555
+ align-items: center;
556
+ gap: 6px;
557
+ background: var(--accent-gradient);
558
+ color: #fff;
559
+ border: none;
560
+ border-radius: 10px;
561
+ padding: 9px 18px;
562
+ font-size: 13px;
563
+ font-weight: 600;
564
+ cursor: pointer;
565
+ font-family: inherit;
566
+ }
567
+ .btn-primary svg { width: 14px; height: 14px; }
568
+
569
+ /* ── Watermark ── */
570
+ .watermark {
571
+ position: fixed;
572
+ top: 14px;
573
+ right: 16px;
574
+ background: rgba(255,255,255,0.75);
575
+ backdrop-filter: blur(10px);
576
+ border: 1px solid rgba(255,255,255,0.50);
577
+ border-radius: 20px;
578
+ padding: 4px 12px;
579
+ font-size: 10.5px;
580
+ font-weight: 600;
581
+ color: var(--accent);
582
+ z-index: 100;
583
+ letter-spacing: 0.02em;
584
+ box-shadow: 0 2px 8px rgba(124,58,237,0.12);
585
+ }
586
+ </style>
587
+ </head>
588
+ <body>
589
+
590
+ <div class="watermark">AIOSON Design Skill Preview</div>
591
+
592
+ <div class="shell">
593
+ <!-- Sidebar -->
594
+ <aside class="sidebar">
595
+ <div class="sidebar-logo">
596
+ <div class="logo-mark">
597
+ <div class="logo-icon">
598
+ <svg viewBox="0 0 16 16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/><path d="M8 5a1 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"/></svg>
599
+ </div>
600
+ <div>
601
+ <div class="logo-text">Lumina</div>
602
+ <div class="logo-sub">Analytics Suite</div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <nav class="nav-section">
608
+ <div class="nav-label">Menu</div>
609
+
610
+ <div class="nav-item active">
611
+ <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
612
+ <path d="M10.707 2.293a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 1.414 1.414L4 10.414V17a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3h2v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-6.586l.293.293a1 1 0 0 0 1.414-1.414l-7-7z"/>
613
+ </svg>
614
+ Dashboard
615
+ <span class="nav-badge">3</span>
616
+ </div>
617
+
618
+ <div class="nav-item">
619
+ <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
620
+ <path d="M2 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5zm6-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V7zm6-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4z"/>
621
+ </svg>
622
+ Analytics
623
+ </div>
624
+
625
+ <div class="nav-item">
626
+ <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
627
+ <path fill-rule="evenodd" d="M6 2a1 1 0 0 0-1 1v1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1V3a1 1 0 1 0-2 0v1H7V3a1 1 0 0 0-1-1zM4 8h12v8H4V8z" clip-rule="evenodd"/>
628
+ </svg>
629
+ Portfolio
630
+ </div>
631
+
632
+ <div class="nav-item">
633
+ <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
634
+ <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 0 1-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 0 1 .947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 0 1 2.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 0 1 2.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 0 1 .947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 0 1-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 0 1-2.287-.947zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" clip-rule="evenodd"/>
635
+ </svg>
636
+ Settings
637
+ </div>
638
+
639
+ <div style="margin-top: 20px;" class="nav-label">Workspaces</div>
640
+
641
+ <div class="nav-item">
642
+ <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
643
+ <path d="M9 12h2m-1-1v2M8.5 6h3M7 3h6l2 3H5L7 3zm-3 4v10h12V7H4z"/>
644
+ </svg>
645
+ Projects
646
+ <span class="nav-badge">12</span>
647
+ </div>
648
+ </nav>
649
+
650
+ <div class="sidebar-footer">
651
+ <div class="user-card">
652
+ <div class="avatar">EL</div>
653
+ <div>
654
+ <div class="user-name">Elena López</div>
655
+ <div class="user-role">Admin · Pro plan</div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </aside>
660
+
661
+ <!-- Main -->
662
+ <div class="main">
663
+ <header class="topbar">
664
+ <span class="topbar-title">Glassmorphism UI — AIOSON Design Skill Preview</span>
665
+ <div class="skill-badge">Glass · Blur · Gradient</div>
666
+ <div class="topbar-actions">
667
+ <div class="search-bar">
668
+ <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2 8a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 2 8z" clip-rule="evenodd"/></svg>
669
+ Search...
670
+ </div>
671
+ <div class="topbar-btn">
672
+ <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a6 6 0 0 0-6 6v3.586l-.707.707A1 1 0 0 0 4 14h12a1 1 0 0 0 .707-1.707L16 11.586V8a6 6 0 0 0-6-6zm0 16a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 10 18z"/></svg>
673
+ </div>
674
+ </div>
675
+ </header>
676
+
677
+ <div class="content">
678
+ <!-- Page header -->
679
+ <div class="page-header">
680
+ <div class="page-eyebrow">Overview</div>
681
+ <h1 class="page-title">Good morning, Elena ✦</h1>
682
+ <p class="page-subtitle">Here's what's happening with your portfolio today, March 28 2026.</p>
683
+ </div>
684
+
685
+ <!-- Stat cards -->
686
+ <div class="stats-grid">
687
+
688
+ <!-- Revenue -->
689
+ <div class="glass-card stat-card">
690
+ <div class="stat-header">
691
+ <div class="stat-icon-wrap">
692
+ <svg viewBox="0 0 20 20" fill="#7C3AED"><path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 0 1-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zm1.567.267v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 0 1-.567.267zm0 3.048v-1.098c.22.054.413.127.567.227.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.29 2.29 0 0 1-.567.227zm-1.7-1.098v1.098a2.29 2.29 0 0 1-.567-.227C7.07 10.34 7 10.114 7 10c0-.114.07-.34.433-.582.154-.1.347-.173.567-.227zM10 2a8 8 0 1 0 0 16A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4zm-1 5V6h2v.293A3.2 3.2 0 0 1 11.433 6.5C12.39 7.122 13 7.992 13 9s-.61 1.878-1.567 2.5A3.2 3.2 0 0 1 11 11.707V12H9v-.293A3.2 3.2 0 0 1 8.567 11.5C7.61 10.878 7 10.008 7 9s.61-1.878 1.567-2.5A3.2 3.2 0 0 1 9 6.293V6h0V9z"/></svg>
693
+ </div>
694
+ <div class="stat-delta">
695
+ <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 4H7v4H5V6H2l4-4z"/></svg>
696
+ +12.4%
697
+ </div>
698
+ </div>
699
+ <div class="stat-value">$128,400</div>
700
+ <div class="stat-label">Total Revenue</div>
701
+ <div class="stat-sublabel">vs last month: <span>$114,200</span></div>
702
+ <div class="sparkline">
703
+ <div class="spark-bar-row">
704
+ <div class="spark-bar" style="height:40%"></div>
705
+ <div class="spark-bar" style="height:55%"></div>
706
+ <div class="spark-bar" style="height:45%"></div>
707
+ <div class="spark-bar" style="height:70%"></div>
708
+ <div class="spark-bar" style="height:60%"></div>
709
+ <div class="spark-bar" style="height:80%"></div>
710
+ <div class="spark-bar active" style="height:100%"></div>
711
+ </div>
712
+ </div>
713
+ </div>
714
+
715
+ <!-- Active Users -->
716
+ <div class="glass-card stat-card">
717
+ <div class="stat-header">
718
+ <div class="stat-icon-wrap blue">
719
+ <svg viewBox="0 0 20 20" fill="#3B82F6"><path d="M9 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm2 9.5c0-.83.177-1.615.49-2.322A5.01 5.01 0 0 0 7 17H5a1 1 0 0 1-1-1v-.5C4 13.015 6.686 11 10 11c.341 0 .678.02 1.008.058A6.002 6.002 0 0 0 11 13v2.5h-1zm6 .5h-3v-3h3v3zm1.5 0h-1v-3.5a.5.5 0 0 0-.5-.5H16v-1h-2a2 2 0 0 0-2 2V16h-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM1 9.5C1 7.015 3.686 5 7 5a5.99 5.99 0 0 1 1.994.343A4.967 4.967 0 0 0 8 7a4.99 4.99 0 0 0 2.24 4.195A7.03 7.03 0 0 0 7 11C3.686 11 1 13.015 1 15.5V16a1 1 0 0 0 1 1h3v-1H3v-.5a3.002 3.002 0 0 1 .834-2.08A6.988 6.988 0 0 1 1 9.5z"/></svg>
720
+ </div>
721
+ <div class="stat-delta">
722
+ <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 4H7v4H5V6H2l4-4z"/></svg>
723
+ +8.1%
724
+ </div>
725
+ </div>
726
+ <div class="stat-value">2,847</div>
727
+ <div class="stat-label">Active Users</div>
728
+ <div class="stat-sublabel">Daily active: <span>412 online now</span></div>
729
+ <div class="sparkline">
730
+ <div class="spark-bar-row">
731
+ <div class="spark-bar" style="height:60%"></div>
732
+ <div class="spark-bar" style="height:45%"></div>
733
+ <div class="spark-bar" style="height:75%"></div>
734
+ <div class="spark-bar" style="height:65%"></div>
735
+ <div class="spark-bar" style="height:85%"></div>
736
+ <div class="spark-bar" style="height:70%"></div>
737
+ <div class="spark-bar active" style="height:95%"></div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Conversion -->
743
+ <div class="glass-card stat-card">
744
+ <div class="stat-header">
745
+ <div class="stat-icon-wrap">
746
+ <svg viewBox="0 0 20 20" fill="#7C3AED"><path fill-rule="evenodd" d="M12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1 9a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 2A8 8 0 1 0 11 3a8 8 0 0 0 0 16zm1-11.5a.5.5 0 0 1 .5.5v1.382l.894.447A.5.5 0 0 1 13 9h-2a.5.5 0 0 1-.224-.947L12 7.618V6.5a.5.5 0 0 1 .5-.5z" clip-rule="evenodd"/></svg>
747
+ </div>
748
+ <div class="stat-delta down">
749
+ <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10L2 6h3V2h2v4h3l-4 4z"/></svg>
750
+ -0.3%
751
+ </div>
752
+ </div>
753
+ <div class="stat-value">3.24%</div>
754
+ <div class="stat-label">Conversion Rate</div>
755
+ <div class="stat-sublabel">Goal: <span>4.0%</span> · 81% attained</div>
756
+ <div class="sparkline">
757
+ <div class="spark-bar-row">
758
+ <div class="spark-bar" style="height:85%"></div>
759
+ <div class="spark-bar" style="height:90%"></div>
760
+ <div class="spark-bar" style="height:78%"></div>
761
+ <div class="spark-bar" style="height:95%"></div>
762
+ <div class="spark-bar" style="height:72%"></div>
763
+ <div class="spark-bar" style="height:80%"></div>
764
+ <div class="spark-bar active" style="height:70%"></div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+
769
+ </div>
770
+
771
+ <!-- Content grid -->
772
+ <div class="content-grid">
773
+
774
+ <!-- Transactions table -->
775
+ <div class="glass-card">
776
+ <div class="card-header">
777
+ <div>
778
+ <div class="card-title">Recent Transactions</div>
779
+ <div class="card-subtitle">Last 4 payments processed</div>
780
+ </div>
781
+ <button class="btn-primary">
782
+ <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 0 1 0-2h4V3a1 1 0 0 1 1-1z"/></svg>
783
+ New
784
+ </button>
785
+ </div>
786
+ <table>
787
+ <thead>
788
+ <tr>
789
+ <th>Recipient</th>
790
+ <th>Amount</th>
791
+ <th>Status</th>
792
+ <th>Date</th>
793
+ </tr>
794
+ </thead>
795
+ <tbody>
796
+ <tr>
797
+ <td>
798
+ <div class="tx-name">Acme Corp</div>
799
+ <div class="tx-sub">Invoice #4821</div>
800
+ </td>
801
+ <td><div class="tx-amount positive">+$12,500</div></td>
802
+ <td><span class="status-badge badge-success">Completed</span></td>
803
+ <td><div class="tx-date">Mar 28, 2026</div></td>
804
+ </tr>
805
+ <tr>
806
+ <td>
807
+ <div class="tx-name">Stripe Payout</div>
808
+ <div class="tx-sub">Auto disbursement</div>
809
+ </td>
810
+ <td><div class="tx-amount positive">+$8,200</div></td>
811
+ <td><span class="status-badge badge-success">Completed</span></td>
812
+ <td><div class="tx-date">Mar 27, 2026</div></td>
813
+ </tr>
814
+ <tr>
815
+ <td>
816
+ <div class="tx-name">AWS Services</div>
817
+ <div class="tx-sub">Cloud infrastructure</div>
818
+ </td>
819
+ <td><div class="tx-amount" style="color: var(--text-heading);">-$3,140</div></td>
820
+ <td><span class="status-badge badge-pending">Pending</span></td>
821
+ <td><div class="tx-date">Mar 26, 2026</div></td>
822
+ </tr>
823
+ <tr>
824
+ <td>
825
+ <div class="tx-name">Figma Pro</div>
826
+ <div class="tx-sub">Subscription renewal</div>
827
+ </td>
828
+ <td><div class="tx-amount" style="color: var(--text-heading);">-$180</div></td>
829
+ <td><span class="status-badge badge-failed">Failed</span></td>
830
+ <td><div class="tx-date">Mar 25, 2026</div></td>
831
+ </tr>
832
+ </tbody>
833
+ </table>
834
+ <div style="padding: 12px 22px;">
835
+ <span class="card-action">View all transactions →</span>
836
+ </div>
837
+ </div>
838
+
839
+ <!-- Activity feed -->
840
+ <div class="glass-card">
841
+ <div class="card-header">
842
+ <div>
843
+ <div class="card-title">Recent Activity</div>
844
+ <div class="card-subtitle">Team updates</div>
845
+ </div>
846
+ <span class="card-action">See all</span>
847
+ </div>
848
+ <div class="activity-list">
849
+ <div class="activity-item">
850
+ <div class="act-avatar av-violet">MK</div>
851
+ <div class="act-body">
852
+ <div class="act-text"><strong>Maria K.</strong> deployed a new release to production</div>
853
+ <div class="act-time">2 minutes ago</div>
854
+ </div>
855
+ </div>
856
+ <div class="activity-item">
857
+ <div class="act-avatar av-blue">JD</div>
858
+ <div class="act-body">
859
+ <div class="act-text"><strong>James D.</strong> approved the Q2 budget report</div>
860
+ <div class="act-time">18 minutes ago</div>
861
+ </div>
862
+ </div>
863
+ <div class="activity-item">
864
+ <div class="act-avatar av-teal">SR</div>
865
+ <div class="act-body">
866
+ <div class="act-text"><strong>Sara R.</strong> added 3 new clients to Portfolio</div>
867
+ <div class="act-time">1 hour ago</div>
868
+ </div>
869
+ </div>
870
+ <div class="activity-item">
871
+ <div class="act-avatar av-pink">AN</div>
872
+ <div class="act-body">
873
+ <div class="act-text"><strong>Alex N.</strong> updated pricing for Enterprise tier</div>
874
+ <div class="act-time">3 hours ago</div>
875
+ </div>
876
+ </div>
877
+ </div>
878
+ </div>
879
+
880
+ </div>
881
+ </div>
882
+ </div>
883
+ </div>
884
+
885
+ </body>
886
+ </html>