WIP: Dashboard redesign — design system overhaul and component updates

Frontend redesign in progress: updated styles, layout, and components
across all pages to align with new design system. Includes Jira API
compliance specs, property tests, and load test script.
This commit is contained in:
root
2026-04-29 14:20:23 +00:00
parent 37119b9c8a
commit 27192dd69f
78 changed files with 9902 additions and 1368 deletions

View File

@@ -0,0 +1,43 @@
<!doctype html><html><head><meta charset="utf-8"><title>Stat cards</title><link rel="stylesheet" href="_card.css"><style>
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 100%);
border: 1.5px solid rgba(14,165,233,0.35);
border-radius: 8px; padding: 14px 16px;
position: relative; overflow: hidden;
box-shadow: var(--shadow-card);
}
.stat-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--intel-accent), transparent);
opacity: 0.8; box-shadow: 0 0 8px rgba(14,165,233,0.5);
}
.stat-label {
font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em;
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.stat-val { font: 700 24px/1 var(--font-mono); color: var(--text-primary); }
.stat-delta-up { color: var(--intel-success); font: 500 11px var(--font-mono); }
.stat-delta-down { color: var(--intel-danger); font: 500 11px var(--font-mono); }
</style></head><body>
<div class="card">
<div class="stat-grid">
<div class="stat-card">
<div class="stat-label">Open Findings</div>
<div class="stat-val">1,247</div>
<div class="stat-delta-up">↑ 12 vs last sync</div>
</div>
<div class="stat-card">
<div class="stat-label">FP Pending</div>
<div class="stat-val">38</div>
<div class="stat-delta-down">↓ 4 today</div>
</div>
<div class="stat-card">
<div class="stat-label">Compliance %</div>
<div class="stat-val">94.2</div>
<div class="stat-delta-up">↑ 0.8% wk</div>
</div>
</div>
<div class="t-meta">Top accent rail · gradient surface · sky inner highlight · 4-px lift on hover.</div>
</div>
</body></html>