Hannibal Smith
0d1d75a22f
- templates/index.html — landing/hero page with feature cards - templates/docs.html — docs layout with sidebar nav, content, and TOC - templates/article.html — long-form prose with code blocks and blockquotes - templates/dashboard.html — stats grid with system status panels - templates/tasks.html — vault-style task tracker with data-task attributes All templates use semantic HTML only, data-layout attributes for structure, zero class= for layout, and link to dist/asw.css.
124 lines
5.2 KiB
HTML
124 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard — ASW</title>
|
|
<meta name="description" content="ASW project dashboard showing key metrics, recent activity, and system status.">
|
|
<link rel="stylesheet" href="../dist/asw.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Site navigation bar -->
|
|
<nav data-layout="spread">
|
|
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
|
|
<span data-layout="row">
|
|
<a href="docs.html">Docs</a>
|
|
<a href="article.html">Blog</a>
|
|
<a href="dashboard.html" aria-current="page">Dashboard</a>
|
|
<a href="tasks.html">Tasks</a>
|
|
</span>
|
|
</nav>
|
|
|
|
<!-- Dashboard header -->
|
|
<header data-layout="spread">
|
|
<h1>Dashboard</h1>
|
|
<p>Project overview for <strong>ASW v0.1</strong></p>
|
|
</header>
|
|
|
|
<!-- Stats grid -->
|
|
<section data-layout="stack">
|
|
<h2>Key Metrics</h2>
|
|
<div data-layout="stats">
|
|
<article>
|
|
<span data-stat="value" style="color: var(--ok);">24</span>
|
|
<span data-stat="label">Commits</span>
|
|
</article>
|
|
<article>
|
|
<span data-stat="value">5</span>
|
|
<span data-stat="label">Templates</span>
|
|
</article>
|
|
<article>
|
|
<span data-stat="value" style="color: var(--info);">143</span>
|
|
<span data-stat="label">Stars</span>
|
|
</article>
|
|
<article>
|
|
<span data-stat="value" style="color: var(--warn);">12</span>
|
|
<span data-stat="label">Open Issues</span>
|
|
</article>
|
|
<article>
|
|
<span data-stat="value" style="color: var(--ok);">97%</span>
|
|
<span data-stat="label">Uptime</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Two-column section: status + recent activity -->
|
|
<div data-layout="row">
|
|
|
|
<!-- System status panel -->
|
|
<section data-layout="col" style="flex: 1;">
|
|
<h2>System Status</h2>
|
|
|
|
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
|
|
<span data-layout="spread">
|
|
<span>Build Pipeline</span>
|
|
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Operational</mark>
|
|
</span>
|
|
</article>
|
|
|
|
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
|
|
<span data-layout="spread">
|
|
<span>CDN Distribution</span>
|
|
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Operational</mark>
|
|
</span>
|
|
</article>
|
|
|
|
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
|
|
<span data-layout="spread">
|
|
<span>Documentation</span>
|
|
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Operational</mark>
|
|
</span>
|
|
</article>
|
|
|
|
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
|
|
<span data-layout="spread">
|
|
<span>Package Registry</span>
|
|
<mark style="background: var(--warn); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Degraded</mark>
|
|
</span>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- Recent activity section -->
|
|
<section data-layout="col" style="flex: 1;">
|
|
<h2>Recent Activity</h2>
|
|
|
|
<article style="border-left: 3px solid var(--ok); padding-left: var(--space-4);">
|
|
<p><strong>Token system</strong> <span style="color: var(--text-3); font-size: var(--text-sm);">— 2h ago</span></p>
|
|
<p style="font-size: var(--text-sm); color: var(--text-2);">Replaced OpenProps with native oklch custom properties.</p>
|
|
</article>
|
|
|
|
<article style="border-left: 3px solid var(--info); padding-left: var(--space-4);">
|
|
<p><strong>Flexbox layouts</strong> <span style="color: var(--text-3); font-size: var(--text-sm);">— 1h ago</span></p>
|
|
<p style="font-size: var(--text-sm); color: var(--text-2);">Added data-layout flexbox primitives with responsive breakpoints.</p>
|
|
</article>
|
|
|
|
<article style="border-left: 3px solid var(--warn); padding-left: var(--space-4);">
|
|
<p><strong>Reference templates</strong> <span style="color: var(--text-3); font-size: var(--text-sm);">— now</span></p>
|
|
<p style="font-size: var(--text-sm); color: var(--text-2);">Building 5 template pages demonstrating the framework.</p>
|
|
</article>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<!-- Quick actions -->
|
|
<footer data-layout="spread">
|
|
<small>© 2026 Agentic Semantic Web</small>
|
|
<nav data-layout="row">
|
|
<a href="index.html">Home</a>
|
|
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
|
|
</nav>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|