27192dd69f
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.
44 lines
1.8 KiB
HTML
44 lines
1.8 KiB
HTML
<!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>
|