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

style(dashboard): улучшен визуал карточки питомца

Browse Source 
- Тёплый кремовый градиент фона вместо чистого белого
- Декоративный SVG-фон: рассыпанные искры/звёздочки
- Тег-пилл с янтарным оттенком
- Glow-эффект drop-shadow вокруг спрайта питомца
- Progress bar 7px с оранжевым свечением
- Цветные чипы: стрик → огненный, цель → изумрудный, настроение → фиолетовый
- Кнопка «Ухаживать» — градиент жёлтый→оранжевый с тенью

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-01 09:40:50 +03:00
parent 5b103ab606
commit b22a1fad3c
1 changed files with 71 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dashboard.html
+71 -15
View File
@@ -142,23 +142,63 @@
.hc-lab .hc-meta { color: rgba(255,255,255,.6); }
.hc-lab .hc-btn { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); }
/* Card 3 — Pet (light, accent top) */
.hc-pet { background: var(--surface, #fff); border: 1.5px solid rgba(15,23,42,.07); border-top: 3px solid #F9C74F; }
.hc-pet .hc-tag { color: #b3531a; }
.hc-pet .hc-tag svg { stroke: #F9C74F; }
/* Card 3 — Pet (warm cream, sparkle bg) */
.hc-pet {
background: linear-gradient(140deg, #fffdf7 0%, #fff8e7 100%);
border: 1.5px solid rgba(249,199,79,.28);
border-top: 4px solid #F9C74F;
}
.hc-pet .hc-pet-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.hc-pet .hc-pet-bg svg { width: 100%; height: 100%; }
.hc-pet > *:not(.hc-pet-bg) { position: relative; z-index: 1; }
.hc-pet .hc-tag {
background: rgba(249,199,79,.18); padding: 3px 11px 3px 7px;
border-radius: 99px; color: #92400e; align-self: flex-start;
}
.hc-pet .hc-tag svg { stroke: #e08c1a; }
.hc-pet .hc-pet-top { display: flex; align-items: center; gap: 10px; }
.hc-pet .hc-pet-name { font-family: 'Unbounded', sans-serif; font-size: 1.15rem; font-weight: 800; }
.hc-pet .hc-pet-art { width: 50px; height: 50px; margin-left: auto; flex-shrink: 0; }
.hc-pet .hc-pet-art {
width: 54px; height: 54px; margin-left: auto; flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(249,199,79,.7));
}
.hc-pet .hc-pet-art svg { width: 100%; height: 100%; }
.hc-pet .hc-xp-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; font-size: 0.7rem; color: var(--text-3); }
.hc-pet .hc-xp-row {
display: flex; align-items: baseline; justify-content: space-between;
margin-top: 12px; font-size: 0.7rem; color: var(--text-3);
}
.hc-pet .hc-xp-row b { color: var(--text); font-weight: 800; }
.hc-pet .hc-progress { background: rgba(15,23,42,.07); }
.hc-pet .hc-progress > i { background: linear-gradient(90deg, #F9C74F, #F98231); }
.hc-pet .hc-progress { height: 7px; background: rgba(249,199,79,.2); }
.hc-pet .hc-progress > i {
background: linear-gradient(90deg, #F9C74F, #F98231);
box-shadow: 0 0 8px rgba(249,150,49,.45);
}
.hc-pet .hc-pet-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.hc-pet .hc-pchip { text-align: center; padding: 6px 2px; border-radius: 10px; background: rgba(15,23,42,.04); }
.hc-pet .hc-pchip b { display: block; font-family: 'Unbounded', sans-serif; font-size: 0.86rem; font-weight: 800; color: var(--text); }
.hc-pet .hc-pchip span { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.hc-pet .hc-btn { background: rgba(249,199,79,.16); color: #b3531a; align-self: flex-start; }
.hc-pet .hc-pchip {
text-align: center; padding: 8px 4px; border-radius: 12px;
background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.06);
}
.hc-pet .hc-pchip b {
display: block; font-family: 'Unbounded', sans-serif;
font-size: 0.88rem; font-weight: 800; color: var(--text);
}
.hc-pet .hc-pchip span {
display: block; font-size: 0.58rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-top: 2px;
}
.hc-pet .hc-pchip.chip-streak { background: rgba(249,115,22,.09); border-color: rgba(249,115,22,.2); }
.hc-pet .hc-pchip.chip-streak b { color: #c2410c; }
.hc-pet .hc-pchip.chip-goal { background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.2); }
.hc-pet .hc-pchip.chip-goal b { color: #047857; }
.hc-pet .hc-pchip.chip-mood { background: rgba(124,58,237,.09); border-color: rgba(124,58,237,.2); }
.hc-pet .hc-pchip.chip-mood b { color: #6d28d9; }
.hc-pet .hc-btn {
background: linear-gradient(135deg, #F9C74F 0%, #F98231 100%);
color: #7c2d00; box-shadow: 0 2px 12px rgba(249,150,49,.35);
margin-top: 12px; align-self: flex-start;
}
/* ── ZONE 3: Three-Column Grid ── */
.main-grid {
@@ -1526,6 +1566,22 @@
<!-- Card 3 — Pet (synced with /pet module) -->
<a class="hero-card hc-pet" id="hc-pet" href="/pet">
<div class="hc-pet-bg" aria-hidden="true">
<svg viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M256 28 L259 16 L262 28 L274 31 L262 34 L259 46 L256 34 L244 31Z" fill="#F9C74F" opacity="0.32"/>
<path d="M282 148 L284 141 L286 148 L293 150 L286 152 L284 159 L282 152 L275 150Z" fill="#F98231" opacity="0.28"/>
<path d="M20 36 L22 29 L24 36 L31 38 L24 40 L22 47 L20 40 L13 38Z" fill="#F9C74F" opacity="0.22"/>
<path d="M12 118 L13.5 112 L15 118 L21 119.5 L15 121 L13.5 127 L12 121 L6 119.5Z" fill="#F9C74F" opacity="0.18"/>
<path d="M78 163 V170 M74.5 166.5 H81.5" stroke="#F98231" stroke-width="2.5" stroke-linecap="round" opacity="0.22"/>
<path d="M268 78 V84 M265 81 H271" stroke="#F9C74F" stroke-width="2" stroke-linecap="round" opacity="0.28"/>
<path d="M148 8 V14 M145 11 H151" stroke="#F9C74F" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
<circle cx="238" cy="172" r="4" fill="#F9C74F" opacity="0.22"/>
<circle cx="52" cy="172" r="3" fill="#F98231" opacity="0.18"/>
<circle cx="295" cy="48" r="3" fill="#F9C74F" opacity="0.18"/>
<circle cx="8" cy="172" r="2.5" fill="#F9C74F" opacity="0.16"/>
<circle cx="128" cy="192" r="2" fill="#F98231" opacity="0.16"/>
</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"><circle cx="5.5" cy="11" r="2"/><circle cx="9.5" cy="6.5" r="2"/><circle cx="14.5" cy="6.5" r="2"/><circle cx="18.5" cy="11" r="2"/><path d="M8.2 16.4C8.2 14.3 9.9 13 12 13s3.8 1.3 3.8 3.4c0 1.7-1.3 2.8-2.6 3.2-.8.2-1.6.2-2.4 0-1.3-.4-2.6-1.5-2.6-3.2z"/></svg>
Питомец
@@ -1537,9 +1593,9 @@
<div class="hc-xp-row"><span>Ур. <b id="hc-pet-lvl">1</b></span><span><b id="hc-pet-xp">0</b> / <span id="hc-pet-xpmax">500</span> XP</span></div>
<div class="hc-progress"><i id="hc-pet-prog" style="width:0%"></i></div>
<div class="hc-pet-chips">
<div class="hc-pchip"><b id="hc-pet-streak">0</b><span>стрик</span></div>
<div class="hc-pchip"><b id="hc-pet-goal">0/2</b><span>цель дня</span></div>
<div class="hc-pchip"><b id="hc-pet-mood">бодр</b><span>настроение</span></div>
<div class="hc-pchip chip-streak"><b id="hc-pet-streak">0</b><span>стрик</span></div>
<div class="hc-pchip chip-goal"><b id="hc-pet-goal">0/2</b><span>цель дня</span></div>
<div class="hc-pchip chip-mood"><b id="hc-pet-mood">бодр</b><span>настроение</span></div>
</div>
<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>
</a>