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

style(dashboard): улучшен визуал карточки «Продолжить чтение»

Browse Source 
- Декоративный SVG-фон (открытая книга) поверх градиента
- Тег-пилл с frosted-glass эффектом
- Progress bar 7px с белым свечением
- Мета и процент сгруппированы слева, кнопка — справа с тенью
- Градиент обогащён третьим стопом (#8b3010)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-01 09:33:50 +03:00
parent 927b39b0d6
commit ed8323cbb9
1 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dashboard.html
+50 -11
View File
@@ -99,14 +99,34 @@
.hc-progress > i { display: block; height: 100%; border-radius: 99px; }
/* Card 1 — Reading (warm gradient) */
.hc-read { background: linear-gradient(135deg, #d9742a 0%, #b3531a 100%); color: #fff; }
.hc-read .hc-tag { color: rgba(255,255,255,.82); }
.hc-read .hc-p { color: rgba(255,255,255,.78); }
.hc-read .hc-meta { color: rgba(255,255,255,.7); }
.hc-read .hc-progress { background: rgba(255,255,255,.2); }
.hc-read .hc-progress > i { background: rgba(255,255,255,.92); }
.hc-read .hc-pct { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 0.82rem; color: #fff; }
.hc-read .hc-btn { background: #fff; color: #b3531a; }
.hc-read {
background: linear-gradient(140deg, #e8803a 0%, #c25020 55%, #8b3010 100%);
color: #fff;
}
.hc-read .hc-read-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
display: flex; align-items: center; justify-content: flex-end; overflow: hidden;
}
.hc-read .hc-read-bg svg { width: 200px; height: 200px; flex-shrink: 0; }
.hc-read > *:not(.hc-read-bg) { position: relative; z-index: 1; }
.hc-read .hc-tag {
background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
padding: 3px 11px 3px 7px; border-radius: 99px;
color: rgba(255,255,255,.95); align-self: flex-start;
}
.hc-read .hc-p { color: rgba(255,255,255,.8); }
.hc-read .hc-foot-left { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hc-read .hc-meta { color: rgba(255,255,255,.75); }
.hc-read .hc-pct {
font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 0.78rem;
color: #fff; opacity: .9;
}
.hc-read .hc-progress { height: 7px; background: rgba(255,255,255,.22); }
.hc-read .hc-progress > i {
background: rgba(255,255,255,.96);
box-shadow: 0 0 10px rgba(255,255,255,.45);
}
.hc-read .hc-btn { background: #fff; color: #b3531a; box-shadow: 0 2px 14px rgba(0,0,0,.2); }
/* Card 2 — Lab of day (dark) */
.hc-lab { background: linear-gradient(150deg, #16131f 0%, #1d1830 100%); color: #fff; border: 1px solid rgba(155,93,229,.18); }
@@ -1451,6 +1471,23 @@
<!-- Card 1 — Continue / start reading -->
<a class="hero-card hc-read" id="hc-read" href="/textbooks">
<div class="hc-read-bg" aria-hidden="true">
<svg viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 16 C82 12 44 16 20 26 L20 138 C44 128 82 124 100 128Z" fill="white" opacity="0.55"/>
<path d="M100 16 C118 12 156 16 180 26 L180 138 C156 128 118 124 100 128Z" fill="white" opacity="0.55"/>
<path d="M100 16 L100 128" stroke="rgba(0,0,0,0.08)" stroke-width="3"/>
<path d="M28 42 Q62 39 94 42" stroke="rgba(0,0,0,0.18)" stroke-width="2.5" stroke-linecap="round"/>
<path d="M28 55 Q62 52 94 55" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M28 67 Q62 64 94 67" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M28 79 Q62 76 94 79" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M28 91 Q52 88 80 91" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M106 42 Q140 39 172 42" stroke="rgba(0,0,0,0.18)" stroke-width="2.5" stroke-linecap="round"/>
<path d="M106 55 Q140 52 172 55" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M106 67 Q140 64 172 67" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M106 79 Q140 76 172 79" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
<path d="M120 91 Q140 88 172 91" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<span class="hc-tag">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h6v17H6a2 2 0 0 0-2 2z"/><path d="M20 5a2 2 0 0 0-2-2h-6v17h6a2 2 0 0 1 2 2z"/></svg>
<span id="hc-read-tag">Начать чтение</span>
@@ -1459,8 +1496,10 @@
<div class="hc-p" id="hc-read-sub">Открой учебник и продолжи курс с того места, где остановился.</div>
<div class="hc-progress" id="hc-read-prog-wrap" style="display:none"><i id="hc-read-prog" style="width:0%"></i></div>
<div class="hc-foot">
<span class="hc-meta" id="hc-read-meta">новый учебник</span>
<span class="hc-pct" id="hc-read-pct" style="display:none">0%</span>
<span class="hc-foot-left">
<span class="hc-meta" id="hc-read-meta">новый учебник</span>
<span class="hc-pct" id="hc-read-pct" style="display:none">0%</span>
</span>
<span class="hc-btn">Начать <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
@@ -3232,7 +3271,7 @@
const pe = document.getElementById('hc-read-pct');
if (o.showProg) {
if (pw) { pw.style.display = ''; document.getElementById('hc-read-prog').style.width = (o.pct || 0) + '%'; }
if (pe) { pe.style.display = ''; pe.textContent = (o.pct || 0) + '%'; }
if (pe) { pe.style.display = ''; pe.textContent = '· ' + (o.pct || 0) + '%'; }
} else {
if (pw) pw.style.display = 'none';
if (pe) pe.style.display = 'none';