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 ── */ /* ── stats bar ── */
.fc-stats { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; } .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; .fc-stat { background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px; padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 4px;
min-width: 112px; position: relative; overflow: hidden; } min-width: 110px; position: relative; overflow: hidden;
.fc-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; transition: box-shadow .18s, transform .18s; }
height: 100%; background: var(--stat-color, var(--violet)); .fc-stat::before { content: ''; position: absolute; inset: 0;
border-radius: 0 2px 2px 0; } background: radial-gradient(ellipse at 110% -10%,
.fc-stat-icon { width: 28px; height: 28px; border-radius: 8px; var(--stat-color-a, rgba(155,93,229,.09)) 0%, transparent 65%);
background: var(--stat-bg, rgba(155,93,229,.1)); pointer-events: none; }
display: flex; align-items: center; justify-content: center; .fc-stat:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
color: var(--stat-color, var(--violet)); margin-bottom: 4px; } .fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.75rem; font-weight: 800;
.fc-stat-icon .ic { width: 14px; height: 14px; } color: var(--stat-color, var(--violet)); line-height: 1; position: relative; }
.fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800; .fc-stat-lbl { font-size: .68rem; font-weight: 600; color: var(--text-3);
color: var(--text); line-height: 1; } text-transform: uppercase; letter-spacing: .05em;
.fc-stat-lbl { font-size: .7rem; font-weight: 600; color: var(--text-3); display: flex; align-items: center; gap: 5px; position: relative; }
text-transform: uppercase; letter-spacing: .04em; } .fc-stat-lbl .ic { width: 11px; height: 11px; color: var(--stat-color, var(--violet)); opacity: .7; flex-shrink: 0; }
/* ── deck grid ── */ /* ── deck grid ── */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .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; if (!s) return;
const bar = document.getElementById('fc-stats-bar'); const bar = document.getElementById('fc-stats-bar');
bar.innerHTML = [ 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>' }, 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>' }, 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>' }, 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>' }, 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}"> ].map(x => `<div class="fc-stat" style="--stat-color:${x.col};--stat-color-a:${_hexAlpha(x.col,.09)}">
<div class="fc-stat-icon">${x.icon}</div>
<span class="fc-stat-val">${x.val}</span> <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(''); </div>`).join('');
} }