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

style(pet): премиальный визуал гардеробной

Browse Source 
Освещённая ниша превью (верхний свет + фиолетовый пьедестал-glow снизу,
краевая виньетка, объёмная тень), имя градиентом, чип баланса монет в шапке.
Контролы: вкладки с градиентной активной, аксессуар-тайлы с подъёмом и
glow (надетое — градиент-заливка), крупные цветовые кружки с кольцом,
узор-плитки и фон-карточки с подсветкой/подъёмом и активным кольцом.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-05 14:24:56 +03:00
parent 3760238e05
commit c99731a6b2
1 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pet.html
+40 -24
View File
@@ -331,18 +331,25 @@
cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.wr-modal-close svg { width:17px; height:17px; }
.wr-modal-close:hover { background:rgba(255,255,255,.12); color:var(--text); }
.wr-coins { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:99px; flex-shrink:0;
background:rgba(249,199,79,.12); border:1px solid rgba(249,199,79,.3); color:#F9C74F; font:800 .82rem 'Manrope',sans-serif; }
.wr-coins svg { width:14px; height:14px; }
.wr-modal-body { display:grid; grid-template-columns:252px 1fr; gap:24px; align-items:start; }
.wr-modal-preview { display:flex; flex-direction:column; align-items:center; gap:11px; position:sticky; top:0; }
.wr-prev-scene { width:100%; aspect-ratio:1; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
border:1.5px solid rgba(155,93,229,.18); background:linear-gradient(155deg,#0d0d1f,#1a1040);
box-shadow:inset 0 -34px 58px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04); }
.wr-prev-scene::after { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 50% 94%, rgba(0,0,0,.4), transparent 58%); }
.wr-prev-scene { width:100%; aspect-ratio:1; border-radius:22px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
border:1.5px solid rgba(155,93,229,.22); background:linear-gradient(155deg,#0d0d1f,#1a1040);
box-shadow:inset 0 -34px 58px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 40px rgba(0,0,0,.4); }
.wr-prev-scene::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:radial-gradient(ellipse at 50% 14%, rgba(255,255,255,.08), transparent 46%),
radial-gradient(ellipse at 50% 90%, rgba(155,93,229,.28), transparent 56%); }
.wr-prev-scene::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
background:radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,.4)); }
#wr-preview-svg { width:82%; position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
animation:wrFloat 3.6s ease-in-out infinite; }
#wr-preview-svg svg { width:100%; height:auto; display:block; filter:drop-shadow(0 9px 15px rgba(0,0,0,.4)); }
#wr-preview-svg svg { width:100%; height:auto; display:block; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
@keyframes wrFloat { 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
.wr-prev-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.02rem; }
.wr-prev-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.05rem;
background:linear-gradient(90deg,#c9a6ff,#7fe9f0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wr-prev-evo { font-size:.68rem; font-weight:700; color:var(--text-2); background:rgba(155,93,229,.14);
border:1px solid rgba(155,93,229,.25); padding:3px 12px; border-radius:99px; }
@media (max-width:640px) {
@@ -365,7 +372,7 @@
border-radius:9px; background:transparent; color:var(--text-2); font:700 .76rem 'Manrope',sans-serif; cursor:pointer; transition:all .18s; }
.pc-tab svg { width:14px; height:14px; }
.pc-tab:hover { color:var(--text); background:rgba(255,255,255,.05); }
.pc-tab.active { background:var(--violet); color:#fff; box-shadow:0 5px 16px rgba(155,93,229,.45); }
.pc-tab.active { background:linear-gradient(135deg,#9B5DE5,#7b4fd0); color:#fff; box-shadow:0 5px 16px rgba(155,93,229,.45); }
.pc-hint { font-size:.72rem; color:var(--text-3); margin-bottom:13px; line-height:1.5; }
.pc-panel { animation:pcFade .25s ease; }
@keyframes pcFade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@@ -388,29 +395,30 @@
.wr-zone-lbl { width:62px; flex-shrink:0; text-align:right; font-size:.6rem; font-weight:800; color:var(--text-3);
text-transform:uppercase; letter-spacing:.06em; }
.wr-chips { display:flex; flex-wrap:wrap; gap:7px; flex:1; }
.wr-tile { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:12px; border:1.5px solid var(--border-h);
background:rgba(255,255,255,.03); color:var(--text-2); font:600 .76rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; }
.wr-tile { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:12px; border:1.5px solid var(--border-h);
background:rgba(255,255,255,.04); color:var(--text-2); font:600 .77rem 'Manrope',sans-serif; cursor:pointer; transition:all .16s; }
.wr-tile svg { width:12px; height:12px; flex-shrink:0; }
.wr-tile:hover:not(.locked) { border-color:var(--violet); color:var(--text); transform:translateY(-1px); }
.wr-tile.on { border-color:var(--violet); background:rgba(155,93,229,.22); color:#fff; }
.wr-tile.on svg { color:#c9a6ff; }
.wr-tile.locked { opacity:.5; cursor:not-allowed; }
.wr-tile:hover:not(.locked) { border-color:var(--violet); color:var(--text); transform:translateY(-1px); box-shadow:0 4px 14px rgba(155,93,229,.2); }
.wr-tile.on { border-color:var(--violet); background:linear-gradient(135deg,rgba(155,93,229,.38),rgba(155,93,229,.16)); color:#fff; box-shadow:0 3px 12px rgba(155,93,229,.28); }
.wr-tile.on svg { color:#fff; }
.wr-tile.locked { opacity:.45; cursor:not-allowed; }
.wr-tile .wr-hint { font-size:.62rem; color:var(--text-3); }
/* Цвет */
.pc-panel .pet-color-picker { display:flex; gap:13px; flex-wrap:wrap; }
.pc-panel .pet-color-dot { width:36px; height:36px; border-width:3px; }
.pc-panel .pet-color-dot.active { box-shadow:0 0 0 3px rgba(155,93,229,.5); }
.pc-panel .pet-color-picker { display:flex; gap:14px; flex-wrap:wrap; }
.pc-panel .pet-color-dot { width:40px; height:40px; border-width:3px; box-shadow:0 3px 10px rgba(0,0,0,.3); }
.pc-panel .pet-color-dot.active { transform:scale(1.12); box-shadow:0 0 0 3px var(--violet), 0 4px 14px rgba(155,93,229,.5); }
/* Узор — превью-плитки */
.pc-pattern-grid { display:flex; flex-wrap:wrap; gap:10px; }
.pc-swatch { display:flex; flex-direction:column; align-items:center; gap:7px; width:80px; padding:9px 6px; border-radius:14px;
border:1.5px solid var(--border-h); background:rgba(255,255,255,.03); color:var(--text-2); cursor:pointer; transition:all .15s; }
.pc-swatch:hover { border-color:var(--violet); transform:translateY(-2px); }
.pc-swatch.active { border-color:var(--violet); background:rgba(155,93,229,.18); }
.pc-swatch { display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; padding:10px 6px; border-radius:15px;
border:1.5px solid var(--border-h); background:rgba(255,255,255,.04); color:var(--text-2); cursor:pointer; transition:all .16s; }
.pc-swatch:hover { border-color:var(--violet); transform:translateY(-2px); box-shadow:0 6px 18px rgba(155,93,229,.2); }
.pc-swatch.active { border-color:var(--violet); background:rgba(155,93,229,.18); box-shadow:0 4px 14px rgba(155,93,229,.28); }
.pc-swatch-name { font:700 .68rem 'Manrope',sans-serif; }
.pc-swatch.active .pc-swatch-name { color:#fff; }
.pc-swatch-dot { width:48px; height:48px; border-radius:13px; flex-shrink:0; border:1.5px solid rgba(255,255,255,.18); }
.pc-swatch-dot { width:52px; height:52px; border-radius:14px; flex-shrink:0; border:1.5px solid rgba(255,255,255,.18);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.3); }
.pc-swatch-dot.pat-none { background:#9B5DE5; }
.pc-swatch-dot.pat-spots { background:radial-gradient(circle at 32% 32%,#5a2da0 3px,transparent 3.2px),radial-gradient(circle at 70% 66%,#5a2da0 3px,transparent 3.2px),radial-gradient(circle at 45% 80%,#5a2da0 2.6px,transparent 2.8px),#9B5DE5; }
.pc-swatch-dot.pat-stripes { background:repeating-linear-gradient(45deg,#9B5DE5 0 5px,#5a2da0 5px 9px); }
@@ -419,8 +427,10 @@
/* Фон — превью-карточки крупнее */
.pc-bg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:11px; }
.pc-bg-grid .pet-bg-card { border-radius:14px; }
.pc-bg-grid .pet-bg-preview { height:76px; }
.pc-bg-grid .pet-bg-card { border-radius:14px; transition:transform .16s, box-shadow .16s, border-color .16s; }
.pc-bg-grid .pet-bg-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.4); }
.pc-bg-grid .pet-bg-card.active { box-shadow:0 0 0 2px var(--violet), 0 8px 22px rgba(155,93,229,.4); }
.pc-bg-grid .pet-bg-preview { height:78px; }
@media(max-width:768px) {
.pet-hero { grid-template-columns:1fr; }
@@ -634,6 +644,10 @@
<div class="pc-head-title">Гардеробная</div>
<div class="pc-head-sub">Наряди питомца — изменения видно сразу</div>
</div>
<div class="wr-coins" id="wr-coins" title="Монеты">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></svg>
<span id="wr-coins-val">—</span>
</div>
<button class="wr-modal-close" onclick="closeWardrobe()" title="Закрыть">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
@@ -1104,6 +1118,7 @@ async function selectBgInline(id, price, owned) {
updatePreviewScene();
if (res.coins !== undefined) {
document.getElementById('stat-coins').textContent = res.coins;
const cv = document.getElementById('wr-coins-val'); if (cv) cv.textContent = res.coins;
if (_petData) _petData.coins = res.coins;
}
renderBgPicker();
@@ -1374,6 +1389,7 @@ function openWardrobe() {
document.getElementById('wr-preview-name').textContent = _petData.petName || 'Квантик';
const evoEl = document.getElementById('wr-preview-evo');
if (evoEl) evoEl.textContent = (EVO_STAGES[_petData.petLevel] || '') + ' · ур. ' + _petData.petLevel;
const cv = document.getElementById('wr-coins-val'); if (cv) cv.textContent = _petData.coins ?? 0;
renderWardrobe(_petData.wardrobe || []);
renderColorPicker(_petData.petColor || 'purple');
renderPatternPicker(_petData.patterns || [], _petData.petPattern || 'none');