diff --git a/frontend/pet.html b/frontend/pet.html index b54c0ed..a9f2dc0 100644 --- a/frontend/pet.html +++ b/frontend/pet.html @@ -319,43 +319,73 @@ /* B3 — Rainbow collar keyframe */ @keyframes rbRot { to { transform:rotate(360deg); } } - /* ── Customize panel (аксессуары / цвет / фон) ── */ - .pet-customize { margin-bottom:18px; } - .pc-tabs { display:flex; gap:6px; margin:4px 0 14px; flex-wrap:wrap; } - .pc-tab { padding:7px 16px; border-radius:99px; border:1.5px solid var(--border-h); background:transparent; - color:var(--text-2); font:700 .78rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; } - .pc-tab:hover { border-color:var(--violet); color:var(--text); } - .pc-tab.active { background:var(--violet); border-color:var(--violet); color:#fff; } - .pc-hint { font-size:.72rem; color:var(--text-3); margin-bottom:11px; line-height:1.5; } - .pc-panel .pet-color-picker { display:flex; gap:9px; flex-wrap:wrap; } - .pc-panel .pet-color-dot { width:30px; height:30px; } - .pc-bg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; } + /* ── Customize panel (полностью переработанный вид) ── */ + .pet-customize { background:linear-gradient(165deg,rgba(155,93,229,.10),rgba(6,214,224,.045)),var(--surface); + border:1.5px solid rgba(155,93,229,.2); border-radius:20px; padding:16px 18px 20px; margin-bottom:18px; } + .pc-head { display:flex; align-items:center; gap:11px; margin-bottom:15px; } + .pc-head-ico { width:34px; height:34px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; + background:linear-gradient(135deg,rgba(155,93,229,.3),rgba(6,214,224,.2)); color:#c9a6ff; } + .pc-head-ico svg { width:17px; height:17px; } + .pc-head-title { font-family:'Unbounded',sans-serif; font-size:.92rem; font-weight:800; line-height:1.1; } + .pc-head-sub { font-size:.68rem; color:var(--text-3); margin-top:2px; } + .pc-tabs { display:flex; gap:4px; padding:4px; background:rgba(0,0,0,.2); border-radius:13px; margin-bottom:16px; } + .pc-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 6px; border:none; + 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-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)} } .pet-evo-legend { font-size:.6rem; color:var(--text-3); margin-top:7px; line-height:1.45; text-align:center; cursor:help; max-width:230px; } - /* Гардероб: панель действий + зоны */ - .wr-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; flex-wrap:wrap; } + + /* Гардероб по зонам */ + .wr-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; flex-wrap:wrap; } .wr-count { font-size:.74rem; color:var(--text-2); font-weight:700; } - .wr-count b { color:var(--violet); } + .wr-count b { color:#c9a6ff; } .wr-actions { display:flex; gap:7px; flex-wrap:wrap; } - .wr-btn { padding:5px 12px; border-radius:99px; border:1.5px solid var(--border-h); background:transparent; - color:var(--text-2); font:700 .72rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; } + .wr-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:99px; border:1.5px solid var(--border-h); + background:rgba(255,255,255,.03); color:var(--text-2); font:700 .72rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; } .wr-btn:hover { border-color:var(--violet); color:var(--text); } - .wr-zone { margin-bottom:11px; } - .wr-zone-lbl { font-size:.6rem; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; } - .wr-chips { display:flex; flex-wrap:wrap; gap:7px; } - /* Узор: свотчи */ - .pc-pattern-grid { display:flex; flex-wrap:wrap; gap:8px; } - .pc-swatch { display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 6px; border-radius:99px; - border:1.5px solid var(--border-h); background:transparent; color:var(--text-2); - font:700 .76rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; } - .pc-swatch:hover { border-color:var(--violet); color:var(--text); } - .pc-swatch.active { border-color:var(--violet); background:rgba(155,93,229,.18); color:#fff; } - .pc-swatch-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(255,255,255,.18); } + .wr-zone { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); } + .wr-zone:last-child { border-bottom:none; } + .wr-zone-lbl { width:60px; flex-shrink:0; padding-top:8px; font-size:.62rem; font-weight:800; color:var(--text-3); + text-transform:uppercase; letter-spacing:.05em; } + .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 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 .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-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-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.pat-none { background:#9B5DE5; } - .pc-swatch-dot.pat-spots { background:radial-gradient(circle at 32% 32%,#5a2da0 2.2px,transparent 2.4px),radial-gradient(circle at 70% 66%,#5a2da0 2.2px,transparent 2.4px),#9B5DE5; } - .pc-swatch-dot.pat-stripes { background:repeating-linear-gradient(45deg,#9B5DE5 0 4px,#5a2da0 4px 7px); } - .pc-swatch-dot.pat-gradient{ background:linear-gradient(180deg,#c9a6ec,#5a2da0); } - .pc-swatch-dot.pat-galaxy { background:radial-gradient(circle at 62% 40%,#1a0a3a 55%,#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); } + .pc-swatch-dot.pat-gradient{ background:linear-gradient(180deg,#c9a6ec,#4a2398); } + .pc-swatch-dot.pat-galaxy { background:radial-gradient(circle at 62% 38%,#1a0a3a 50%,#9B5DE5); } + + /* Фон — превью-карточки крупнее */ + .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; } @media(max-width:768px) { .pet-hero { grid-template-columns:1fr; } @@ -508,13 +538,19 @@ -
-
Кастомизация
+
+
+
+
+
Кастомизация
+
Наряди питомца: аксессуары, цвет, узор и фон
+
+
- - - - + + + +
Нажми, чтобы надеть или снять. Заблокированные открываются за достижения. По одному предмету на зону (голова / лицо / шея / уши / акцент).
@@ -1257,18 +1293,13 @@ async function selectColor(colorKey) { } /* ── Гардероб (выбор аксессуаров, по зонам) ── */ -const LOCK_ICO = ''; +const LOCK_ICO = ''; +const CHECK_ICO = ''; const ZONE_LABELS = { head:'Голова', face:'Лицо', neck:'Шея', ears:'Уши', accent:'Акцент' }; function wearChip(it) { - const base = 'display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:99px;font:600 .74rem Manrope,sans-serif;border:1.5px solid;transition:all .15s;user-select:none;'; - const style = it.locked - ? base + 'border-color:rgba(255,255,255,.1);color:var(--text-3);background:transparent;cursor:not-allowed;opacity:.6' - : it.equipped - ? base + 'border-color:var(--violet);color:#fff;background:rgba(155,93,229,.22);cursor:pointer' - : base + 'border-color:var(--border-h);color:var(--text-2);background:transparent;cursor:pointer'; - const title = it.locked ? `Откроется: ${it.hint}` : (it.equipped ? 'Снять' : 'Надеть'); - const tail = it.locked && it.hint ? ` · ${it.hint}` : ''; - return `${it.locked?LOCK_ICO:''}${escHtml(it.name)}${tail}`; + if (it.locked) + return `${LOCK_ICO}${escHtml(it.name)}${it.hint ? ` ${escHtml(it.hint)}` : ''}`; + return `${it.equipped ? CHECK_ICO : ''}${escHtml(it.name)}`; } function renderWardrobe(items) { const el = document.getElementById('pet-accessories'); @@ -1287,7 +1318,7 @@ function renderWardrobe(items) { html += `
${ZONE_LABELS[z]||z}
${zi.map(wearChip).join('')}
`; }); el.innerHTML = html; - el.querySelectorAll('.pet-wear.tgl').forEach(ch => ch.addEventListener('click', () => toggleEquip(ch.dataset.id))); + el.querySelectorAll('.wr-tile.tgl').forEach(ch => ch.addEventListener('click', () => toggleEquip(ch.dataset.id))); document.getElementById('wr-clear')?.addEventListener('click', () => setEquipped([])); document.getElementById('wr-random')?.addEventListener('click', randomLook); } @@ -1327,7 +1358,7 @@ function renderPatternPicker(list, current) { if (!el) return; el.innerHTML = (list || []).map(p => { const on = p.id === current; - return ``; + return ``; }).join(''); el.querySelectorAll('.pc-swatch').forEach(b => b.addEventListener('click', () => applyPattern(b.dataset.pat))); }