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

style(flashcards): переработка стат-бара — большое цветное число, тихий градиент фона, иконка в подписи

Browse Source
This commit is contained in:
Maxim Dolgolyov
2026-06-01 10:07:31 +03:00
parent de205a598d
commit 8641bb6954
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/flashcards.html
+20 -21
View File
@@ -36,20 +36,20 @@
/* ── stats bar ── */
.fc-stats { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.fc-stat { background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px;
min-width: 112px; position: relative; overflow: hidden; }
.fc-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px;
height: 100%; background: var(--stat-color, var(--violet));
border-radius: 0 2px 2px 0; }
.fc-stat-icon { width: 28px; height: 28px; border-radius: 8px;
background: var(--stat-bg, rgba(155,93,229,.1));
display: flex; align-items: center; justify-content: center;
color: var(--stat-color, var(--violet)); margin-bottom: 4px; }
.fc-stat-icon .ic { width: 14px; height: 14px; }
.fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800;
color: var(--text); line-height: 1; }
.fc-stat-lbl { font-size: .7rem; font-weight: 600; color: var(--text-3);
text-transform: uppercase; letter-spacing: .04em; }
padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 4px;
min-width: 110px; position: relative; overflow: hidden;
transition: box-shadow .18s, transform .18s; }
.fc-stat::before { content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at 110% -10%,
var(--stat-color-a, rgba(155,93,229,.09)) 0%, transparent 65%);
pointer-events: none; }
.fc-stat:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.75rem; font-weight: 800;
color: var(--stat-color, var(--violet)); line-height: 1; position: relative; }
.fc-stat-lbl { font-size: .68rem; font-weight: 600; color: var(--text-3);
text-transform: uppercase; letter-spacing: .05em;
display: flex; align-items: center; gap: 5px; position: relative; }
.fc-stat-lbl .ic { width: 11px; height: 11px; color: var(--stat-color, var(--violet)); opacity: .7; flex-shrink: 0; }
/* ── deck grid ── */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
@@ -546,18 +546,17 @@ function renderStats(s) {
if (!s) return;
const bar = document.getElementById('fc-stats-bar');
bar.innerHTML = [
{ val: s.decks_count, lbl: 'Колод', col: '#9B5DE5', bg: 'rgba(155,93,229,.1)',
{ val: s.decks_count, lbl: 'Колод', col: '#9B5DE5',
icon: '<svg class="ic" viewBox="0 0 24 24"><rect x="3" y="5" width="13" height="15" rx="2"/><path d="M8 5V3.5A1.5 1.5 0 0 1 9.5 2h9A1.5 1.5 0 0 1 20 3.5V16a1.5 1.5 0 0 1-1.5 1.5H16"/></svg>' },
{ val: s.cards_count, lbl: 'Карточек', col: '#3B82F6', bg: 'rgba(59,130,246,.1)',
{ val: s.cards_count, lbl: 'Карточек', col: '#3B82F6',
icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' },
{ val: s.due_count, lbl: 'К повторению', col: '#D97706', bg: 'rgba(217,119,6,.1)',
{ val: s.due_count, lbl: 'К повторению', col: '#D97706',
icon: '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>' },
{ val: s.reviewed_today, lbl: 'Сегодня', col: '#16A34A', bg: 'rgba(22,163,74,.1)',
{ val: s.reviewed_today, lbl: 'Сегодня', col: '#16A34A',
icon: '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' },
].map(x => `<div class="fc-stat" style="--stat-color:${x.col};--stat-bg:${x.bg}">
<div class="fc-stat-icon">${x.icon}</div>
].map(x => `<div class="fc-stat" style="--stat-color:${x.col};--stat-color-a:${_hexAlpha(x.col,.09)}">
<span class="fc-stat-val">${x.val}</span>
<span class="fc-stat-lbl">${x.lbl}</span>
<span class="fc-stat-lbl">${x.icon}${x.lbl}</span>
</div>`).join('');
}