maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(dashboard): редизайн sticky-шапки

Browse Source 
- Аватар: 48px + violet glow shadow
- Шапка: высота 68px, blur 16px, border rgba(violet .1), box-shadow
- Статы: пилл-обёртка с фиолетовым тинтом и бордером; разделители между кольцами
- Stat rings: горизонтальный layout SVG(36px) + sr-val + sr-label; значение вынесено из SVG наружу — читается крупно цветным шрифтом

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-01 09:51:39 +03:00
parent 57ffbc8ae6
commit 7d478c1c1b
1 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dashboard.html
+32 -17
View File
@@ -16,17 +16,19 @@
/* ── ZONE 1: Compact Header (sticky) ── */
.dash-header {
display: flex; align-items: center; gap: 18px;
height: 64px; padding: 0 28px;
background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(15,23,42,0.08);
height: 68px; padding: 0 28px;
background: rgba(255,255,255,0.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(155,93,229,.1);
box-shadow: 0 2px 14px rgba(15,23,42,.05);
position: sticky; top: 0; z-index: 90;
}
.dh-avatar {
width: 44px; height: 44px; border-radius: 50%;
width: 48px; height: 48px; border-radius: 50%;
background: var(--grad-1);
display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff;
font-family: 'Unbounded', sans-serif; font-size: 0.92rem; font-weight: 800; color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(155,93,229,.4);
}
.dh-text { flex: 1; min-width: 0; }
.dh-greeting {
@@ -35,9 +37,20 @@
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-sub { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-top: 2px; }
.dh-stats { display: flex; gap: 14px; flex-shrink: 0; }
.stat-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-ring .sr-label { font-size: 0.62rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.dh-stats {
display: flex; gap: 0; flex-shrink: 0;
background: rgba(155,93,229,.05);
border: 1.5px solid rgba(155,93,229,.14);
border-radius: 16px; padding: 8px 4px;
}
.stat-ring {
display: flex; flex-direction: row; align-items: center; gap: 9px;
padding: 0 14px;
}
.stat-ring + .stat-ring { border-left: 1px solid rgba(155,93,229,.12); }
.stat-ring .sr-text { display: flex; flex-direction: column; gap: 1px; }
.stat-ring .sr-val { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; line-height: 1.1; }
.stat-ring .sr-label { font-size: 0.56rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
/* ── ZONE 2: Action Banner + Cards ── */
.action-zone { margin-bottom: 22px; }
@@ -1396,8 +1409,8 @@
.lb-widget { padding: 14px; }
/* Header stats */
.dh-stats { gap: 8px; }
.stat-ring { min-width: 60px; }
.dh-stats { gap: 0; flex-wrap: wrap; padding: 6px 4px; }
.stat-ring { padding: 4px 10px; gap: 7px; }
.dh-greeting { font-size: 0.82rem; }
/* Admin quick actions: narrow */
@@ -2120,16 +2133,18 @@
/* ══ STAT RING SVG HELPER ════════════════════════════════════════════ */
function statRingSvg(value, max, color, label) {
const pct = max > 0 ? Math.min(100, Math.round(value / max * 100)) : 0;
const r = 15, circ = 2 * Math.PI * r;
const r = 13, circ = 2 * Math.PI * r;
const dash = (pct / 100 * circ).toFixed(1);
return `<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="${r}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="4"/>
<circle cx="20" cy="20" r="${r}" fill="none" stroke="${color}" stroke-width="4"
return `<svg width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="${r}" fill="none" stroke="rgba(15,23,42,0.08)" stroke-width="4"/>
<circle cx="18" cy="18" r="${r}" fill="none" stroke="${color}" stroke-width="4"
stroke-dasharray="${dash} ${circ.toFixed(1)}" stroke-linecap="round"
transform="rotate(-90 20 20)"/>
<text x="20" y="24" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="9" font-weight="800" fill="${color}">${value}</text>
transform="rotate(-90 18 18)"/>
</svg>
<span class="sr-label">${label}</span>`;
<span class="sr-text">
<span class="sr-val" style="color:${color}">${value}</span>
<span class="sr-label">${label}</span>
</span>`;
}
/* ══ STATS STRIP ═════════════════════════════════════════════════════ */