From 667054fa58f0e337ce0c13412f5da0ae5bca0b09 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Sun, 31 May 2026 11:11:20 +0300
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20hero-=D0=BA=D0=B0=D1=80?=
 =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=BA=D0=B8=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B9=20=E2=80=94=20=D1=87=D1=82=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?,=20=D0=BB=D0=B0=D0=B1=D0=BE=D1=80=D0=B0=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=B4=D0=BD=D1=8F,=20=D0=BF=D0=B8=D1=82=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=B5=D1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Пересборка верхней зоны дашборда по скриншоту (редизайн был утерян):
- 3 hero-карточки вместо action-cards: «Начать чтение» (продолжение
  курса через /api/courses/continue), «Лаборатория дня» (детерминир.
  выбор по дню + SVG-превью из lab-previews.js), «Питомец» (синхрон
  с модулем /pet через /api/pet + единый PetSprite.render).
- Подключены восстановленные ассеты pet-sprite.js и lab-previews.js.
- Убран weak-topics из hero; питомец показывает уровень/XP/стрик/
  цель дня/настроение, синхронно со страницей /pet.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/dashboard.html     | 135 ++++++++++-----
 frontend/js/lab-previews.js |  93 +++++++++++
 frontend/js/pet-sprite.js   | 318 ++++++++++++++++++++++++++++++++++++
 3 files changed, 504 insertions(+), 42 deletions(-)
 create mode 100644 frontend/js/lab-previews.js
 create mode 100644 frontend/js/pet-sprite.js

diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index e2f242c..21d2db7 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -1440,23 +1440,64 @@
     <div class="action-banner" id="action-banner" style="display:none">
       <!-- populated by JS -->
     </div>
-    <div class="action-cards" id="action-cards" style="display:none">
-      <a class="ac-card" id="ac-continue" style="display:none" href="#">
-        <span class="ac-emoji"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2V3zm20 0h-6a4 4 0 00-4 4v14a3 3 0 013-3h7V3z"/></svg></span>
-        <div class="ac-body">
-          <div class="ac-title" id="ac-cont-title">—</div>
-          <div class="ac-sub" id="ac-cont-sub">—</div>
+    <div class="hero-row" id="hero-row" style="display:none">
+
+      <!-- Card 1 — Continue / start reading -->
+      <a class="hero-card hc-read" id="hc-read" href="/textbooks">
+        <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>
+        </span>
+        <div class="hc-h" id="hc-read-title">Учебники</div>
+        <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-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>
-        <span class="ac-badge" id="ac-cont-pct"></span>
       </a>
-      <a class="ac-card" id="ac-weak" style="display:none" href="#">
-        <span class="ac-emoji"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></span>
-        <div class="ac-body">
-          <div class="ac-title" id="ac-weak-title">—</div>
-          <div class="ac-sub" id="ac-weak-sub">—</div>
+
+      <!-- Card 2 — Lab of the day -->
+      <a class="hero-card hc-lab" id="hc-lab" href="/lab">
+        <div class="hc-bg" id="hc-lab-bg"></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="M9 3h6M10 3v6l-5.4 9.3A1.5 1.5 0 0 0 5.9 21h12.2a1.5 1.5 0 0 0 1.3-2.3L14 9V3"/><path d="M7.5 15h9"/></svg>
+          Лаборатория дня
+        </span>
+        <div class="hc-h" id="hc-lab-title">Газовые законы</div>
+        <div class="hc-p" id="hc-lab-sub">Давление, объём и температура газа.</div>
+        <div class="hc-chips" id="hc-lab-chips">
+          <span class="hc-chip subj" id="hc-lab-subj">Физика</span>
+          <span class="hc-chip" id="hc-lab-time">~10 мин</span>
+          <span class="hc-chip" id="hc-lab-level">средне</span>
+        </div>
+        <div class="hc-foot">
+          <span class="hc-meta" id="hc-lab-meta">Освой: уравнение состояния газа</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>
-        <span class="ac-badge" id="ac-weak-pct" style="color:#E0335E"></span>
       </a>
+
+      <!-- Card 3 — Pet (synced with /pet module) -->
+      <a class="hero-card hc-pet" id="hc-pet" href="/pet">
+        <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>
+          Питомец
+        </span>
+        <div class="hc-pet-top">
+          <div class="hc-pet-name" id="hc-pet-name">Квантик</div>
+          <div class="hc-pet-art" id="hc-pet-art"></div>
+        </div>
+        <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>
+        <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>
+
     </div>
   </div>
 
@@ -3177,41 +3218,49 @@
       }
     }
 
-    /* ══ WIDGET: Continue reading (action card) ══════════════════════ */
+    /* ══ HERO: Reading card (continue or start) ══════════════════════ */
     async function loadContinueWidget() {
-      const card = document.getElementById('ac-continue');
-      const cardsWrap = document.getElementById('action-cards');
+      const card = document.getElementById('hc-read');
       if (!card) return;
       try {
         const data = await LS.api('/api/courses/continue');
-        if (!data || !data.courseId) { card.style.display = 'none'; return; }
+        if (!data || !data.courseId) return;  // оставляем дефолт «Начать чтение → Учебники»
         const pct = data.lessonCount > 0 ? Math.round((data.doneCount || 0) / data.lessonCount * 100) : 0;
-        const href = `/lesson?course=${data.courseId}&lesson=${data.lessonId}`;
-        card.href = href;
-        card.style.display = '';
-        if (cardsWrap) cardsWrap.style.display = '';
-        document.getElementById('ac-cont-title').textContent = data.courseTitle || 'Продолжить';
-        document.getElementById('ac-cont-sub').textContent = `${data.lessonTitle || ''} · ${data.doneCount || 0}/${data.lessonCount || 0} уроков`;
-        document.getElementById('ac-cont-pct').textContent = pct + '%';
-      } catch { card.style.display = 'none'; }
+        card.href = `/lesson?course=${data.courseId}&lesson=${data.lessonId}`;
+        document.getElementById('hc-read-tag').textContent = 'Продолжить чтение';
+        document.getElementById('hc-read-title').textContent = data.courseTitle || 'Продолжить';
+        document.getElementById('hc-read-sub').textContent = data.lessonTitle || '';
+        document.getElementById('hc-read-meta').textContent = `${data.doneCount || 0} / ${data.lessonCount || 0} уроков`;
+        const progWrap = document.getElementById('hc-read-prog-wrap');
+        if (progWrap) { progWrap.style.display = ''; document.getElementById('hc-read-prog').style.width = pct + '%'; }
+        const pctEl = document.getElementById('hc-read-pct');
+        if (pctEl) { pctEl.style.display = ''; pctEl.textContent = pct + '%'; }
+      } catch { /* нет курса в процессе — карточка остаётся в дефолте */ }
     }
 
-    /* ══ WIDGET: Weak topics (action card) ════════════════════════════ */
-    async function loadWeakWidget() {
-      const card = document.getElementById('ac-weak');
-      const cardsWrap = document.getElementById('action-cards');
+    /* ══ HERO: Lab of the day (deterministic daily pick) ═════════════ */
+    const LAB_OF_DAY = [
+      { key:'isoprocess',  href:'/lab?sim=molphys',     title:'Газовые законы',      sub:'Давление, объём и температура газа.',          subj:'Физика',  time:'~10 мин', level:'средне',  goal:'уравнение состояния газа' },
+      { key:'opticsbench', href:'/lab?sim=opticsbench', title:'Оптическая скамья',   sub:'Собери систему линз и проследи ход лучей.',     subj:'Физика',  time:'~12 мин', level:'средне',  goal:'построение изображения в линзе' },
+      { key:'circuit',     href:'/lab?sim=circuit',     title:'Электрическая цепь',  sub:'Закон Ома: ток, напряжение и сопротивление.',   subj:'Физика',  time:'~8 мин',  level:'легко',   goal:'расчёт цепи по закону Ома' },
+      { key:'pendulum',    href:'/lab?sim=pendulum',    title:'Математический маятник', sub:'Период колебаний и зависимость от длины.',    subj:'Физика',  time:'~9 мин',  level:'легко',   goal:'формула периода маятника' },
+      { key:'waves',       href:'/lab?sim=waves',       title:'Волны и колебания',   sub:'Длина волны, частота и стоячие волны.',         subj:'Физика',  time:'~11 мин', level:'средне',  goal:'связь v = λf' },
+      { key:'stereo',      href:'/lab?sim=stereo',      title:'Стереометрия 3D',     sub:'Сечения и объёмы пространственных фигур.',      subj:'Геометрия', time:'~10 мин', level:'сложно', goal:'построение сечений' },
+    ];
+    function loadLabOfDay() {
+      const card = document.getElementById('hc-lab');
       if (!card) return;
-      try {
-        const topics = await LS.getWeakTopics();
-        if (!topics.length) { card.style.display = 'none'; return; }
-        const t = topics[0];
-        card.href = `/test-run?subject=${t.subject_slug}&mode=exam&count=15&topic=${t.topic_id}`;
-        card.style.display = '';
-        if (cardsWrap) cardsWrap.style.display = '';
-        document.getElementById('ac-weak-title').textContent = t.topic;
-        document.getElementById('ac-weak-sub').textContent = `${t.subject_name} · ${t.wrong} из ${t.total} неверно`;
-        document.getElementById('ac-weak-pct').textContent = t.error_pct + '%';
-      } catch { card.style.display = 'none'; }
+      const dayIdx = Math.floor(Date.now() / 86400000) % LAB_OF_DAY.length;
+      const lab = LAB_OF_DAY[dayIdx];
+      card.href = lab.href;
+      const bg = document.getElementById('hc-lab-bg');
+      if (bg && window.LabPreviews && LabPreviews[lab.key]) bg.innerHTML = LabPreviews[lab.key];
+      document.getElementById('hc-lab-title').textContent = lab.title;
+      document.getElementById('hc-lab-sub').textContent   = lab.sub;
+      document.getElementById('hc-lab-subj').textContent  = lab.subj;
+      document.getElementById('hc-lab-time').textContent  = lab.time;
+      document.getElementById('hc-lab-level').textContent = lab.level;
+      document.getElementById('hc-lab-meta').textContent  = 'Освой: ' + lab.goal;
     }
 
     /* ══ ACTIVITY: data structure ══════════════════════════════════════ */
@@ -3999,9 +4048,11 @@
         loadSubjProgressWidget(rows);
         renderStreakCalendar(rows);
       } catch {}
+      const heroRow = document.getElementById('hero-row');
+      if (heroRow) heroRow.style.display = '';
       loadContinueWidget();
-      loadWeakWidget();
-      loadTheoryWidget();
+      loadLabOfDay();
+      loadPetHero();
       loadFlashcardWidget();
     }
 
diff --git a/frontend/js/lab-previews.js b/frontend/js/lab-previews.js
new file mode 100644
index 0000000..6c5ae56
--- /dev/null
+++ b/frontend/js/lab-previews.js
@@ -0,0 +1,93 @@
+'use strict';
+/*
+ * LabPreviews — реальные SVG-превью симуляций (зеркало P_* из labs/lab-glue.js)
+ * для карточки «Лаборатория дня» на дашборде. Тёмные тайлы 270×140.
+ * Источник истины — lab-glue.js; здесь лёгкая копия, чтобы не грузить весь
+ * движок лаборатории на дашборде.
+ */
+(function () {
+  function _grid(fg='rgba(255,255,255,0.06)') {
+    return `<g stroke="${fg}" stroke-width="1">
+      <line x1="45" y1="0" x2="45" y2="140"/><line x1="90" y1="0" x2="90" y2="140"/>
+      <line x1="135" y1="0" x2="135" y2="140"/><line x1="180" y1="0" x2="180" y2="140"/>
+      <line x1="225" y1="0" x2="225" y2="140"/>
+      <line x1="0" y1="35" x2="270" y2="35"/><line x1="0" y1="70" x2="270" y2="70"/>
+      <line x1="0" y1="105" x2="270" y2="105"/>
+    </g>`;
+  }
+
+  function _svg(body) {
+    return `<svg class="sim-preview" viewBox="0 0 270 140" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
+      <rect width="270" height="140" fill="#0D0D1A"/>${body}</svg>`;
+  }
+
+  const P_LENS = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="10" y1="70" x2="260" y2="70" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
+    <path d="M 135,20 Q 155,70 135,120 Q 115,70 135,20" fill="rgba(6,214,224,0.12)" stroke="#06D6E0" stroke-width="2"/>
+    <line x1="30" y1="45" x2="135" y2="45" stroke="#9B5DE5" stroke-width="1.8"/>
+    <line x1="135" y1="45" x2="230" y2="90" stroke="#9B5DE5" stroke-width="1.8"/>
+    <line x1="30" y1="70" x2="230" y2="70" stroke="#06D6E0" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.5"/>
+    <line x1="30" y1="95" x2="135" y2="95" stroke="#F15BB5" stroke-width="1.8"/>
+    <line x1="135" y1="95" x2="230" y2="55" stroke="#F15BB5" stroke-width="1.8"/>
+    <circle cx="30" cy="70" r="5" fill="#9B5DE5" opacity="0.7"/>
+    <line x1="30" y1="40" x2="30" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>`);
+
+  const P_CIRCUIT = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <rect x="30" y="25" width="210" height="90" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1.5" rx="4"/>
+    <line x1="30" y1="70" x2="70" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <rect x="70" y="58" width="36" height="24" fill="rgba(6,214,224,0.15)" stroke="#06D6E0" stroke-width="1.8" rx="3"/>
+    <text x="88" y="74" font-size="10" fill="#06D6E0" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">R₁</text>
+    <line x1="106" y1="70" x2="130" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <rect x="130" y="58" width="36" height="24" fill="rgba(6,214,224,0.15)" stroke="#06D6E0" stroke-width="1.8" rx="3"/>
+    <text x="148" y="74" font-size="10" fill="#06D6E0" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">R₂</text>
+    <line x1="166" y1="70" x2="190" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <rect x="190" y="56" width="18" height="28" fill="rgba(241,91,181,0.15)" stroke="#F15BB5" stroke-width="1.8" rx="3"/>
+    <line x1="208" y1="70" x2="240" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">I = U/R</text>`);
+
+  const P_PENDULUM = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="135" y1="15" x2="165" y2="95" stroke="rgba(255,255,255,0.5)" stroke-width="2"/>
+    <circle cx="165" cy="100" r="12" fill="rgba(6,214,224,0.25)" stroke="#06D6E0" stroke-width="2"/>
+    <line x1="135" y1="15" x2="95" y2="95" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" stroke-dasharray="4,3"/>
+    <circle cx="95" cy="100" r="12" fill="none" stroke="rgba(6,214,224,0.3)" stroke-width="1.5" stroke-dasharray="3,3"/>
+    <path d="M 110,60 A 55,55 0 0 1 160,60" fill="none" stroke="rgba(6,214,224,0.4)" stroke-width="1.2" stroke-dasharray="3,3"/>
+    <circle cx="135" cy="15" r="4" fill="rgba(255,255,255,0.5)"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">T = 2π√(l/g)</text>`);
+
+  const P_WAVES = _svg(`${_grid()}
+    <line x1="0" y1="70" x2="270" y2="70" stroke="rgba(255,255,255,0.13)" stroke-width="1" stroke-dasharray="4,3"/>
+    <path d="M 0,70 C 17,26 33,26 67,70 C 101,114 117,114 135,70 C 153,26 169,26 202,70 C 236,114 252,114 270,70"
+          stroke="#9B5DE5" stroke-width="2" fill="none" opacity="0.7"/>
+    <path d="M 0,70 C 22,18 44,18 90,70 C 136,122 158,122 180,70 C 202,18 224,18 270,70"
+          stroke="#06D6E0" stroke-width="1.5" fill="none" opacity="0.5"/>
+    <path d="M 0,70 C 12,10 28,8 50,40 C 72,72 88,118 112,85 C 136,52 155,18 180,50 C 205,82 240,108 270,70"
+          stroke="#F15BB5" stroke-width="2.5" fill="none" opacity="0.9"/>
+    <text x="135" y="132" font-size="8" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">v = \u03bbf \u00b7 y = A sin(\u03c9t \u2212 kx) \u00b7 \u0441\u0442\u043e\u044f\u0447\u0438\u0435 \u0432\u043e\u043b\u043d\u044b</text>`);
+
+  const P_ISOPROCESS = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="30" y1="10" x2="30" y2="125" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
+    <line x1="30" y1="125" x2="265" y2="125" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
+    <path d="M 50,20 Q 140,60 240,110" fill="none" stroke="#EF476F" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <path d="M 50,20 Q 130,80 230,118" fill="none" stroke="#FFD166" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <line x1="50" y1="20" x2="50" y2="118" stroke="#06D6E0" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <line x1="50" y1="20" x2="230" y2="20" stroke="#7BF5A4" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <path d="M 50,20 Q 120,55 220,108" fill="none" stroke="#EF476F" stroke-width="2.5"/>
+    <circle cx="50" cy="20" r="5" fill="#9B5DE5"/>
+    <circle cx="220" cy="108" r="5" fill="#EF476F"/>
+    <text x="240" y="113" font-size="9" fill="#EF476F" font-family="Manrope,sans-serif">2</text>
+    <text x="40" y="16" font-size="9" fill="#9B5DE5" font-family="Manrope,sans-serif">1</text>
+    <text x="255" y="128" font-size="9" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif">V</text>
+    <text x="18" y="12" font-size="9" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif">P</text>`);
+
+  const P_3D = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <polygon points="135,20 210,58 210,115 135,77" fill="rgba(155,93,229,0.15)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <polygon points="135,20 60,58 60,115 135,77" fill="rgba(155,93,229,0.08)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <polygon points="60,58 135,20 210,58 135,96" fill="rgba(155,93,229,0.22)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <line x1="135" y1="77" x2="135" y2="96" stroke="#9B5DE5" stroke-width="1.8"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">V = a³</text>`);
+
+  window.LabPreviews = {
+    opticsbench: P_LENS, circuit: P_CIRCUIT, pendulum: P_PENDULUM,
+    waves: P_WAVES, isoprocess: P_ISOPROCESS, stereo: P_3D,
+  };
+})();
diff --git a/frontend/js/pet-sprite.js b/frontend/js/pet-sprite.js
new file mode 100644
index 0000000..344a15d
--- /dev/null
+++ b/frontend/js/pet-sprite.js
@@ -0,0 +1,318 @@
+'use strict';
+/*
+ * PetSprite — единый источник модели питомца для /pet и /dashboard.
+ * Канонические PET_PALETTES + shadeColor + renderPetSVG. pet.html и
+ * dashboard.html используют window.PetSprite.render(...) — без дублей.
+ */
+(function () {
+  const PET_PALETTES = {
+  purple:'#9B5DE5', cyan:'#06D6E0', gold:'#F9C74F',
+  red:'#F94144',    green:'#38D95A', blue:'#4A90D9',
+};
+
+  function shadeColor(hex, pct) {
+  const n = parseInt(hex.slice(1), 16);
+  const r = Math.min(255,Math.max(0,(n>>16)+pct));
+  const g = Math.min(255,Math.max(0,((n>>8)&0xff)+pct));
+  const b = Math.min(255,Math.max(0,(n&0xff)+pct));
+  return `rgb(${r},${g},${b})`;
+}
+
+  function renderPetSVG(level, mood, accessories = [], colorKey = 'purple', streak = 0) {
+  const col   = PET_PALETTES[colorKey] || '#9B5DE5';
+  const dark  = shadeColor(col, -45);
+  const light = shadeColor(col,  52);
+  const uid   = `pg${level}${mood[0]}${colorKey[0]}`;
+
+  const bodyPath = 'M55,22 C70,22 86,37 87,56 C89,75 78,94 55,97 C32,94 21,75 23,56 C24,37 40,22 55,22 Z';
+  const eyeY = 52, eyeX1 = 40, eyeX2 = 70;
+
+  /* ── Eyebrows ── */
+  let eyebrows = '';
+  if (mood !== 'sleeping') {
+    if (mood === 'ecstatic') {
+      eyebrows = `<path d="M33,46 C37,42 43,42 47,46" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                  <path d="M63,46 C67,42 73,42 77,46" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"/>`;
+    } else if (mood === 'sad' || mood === 'hungry') {
+      eyebrows = `<path d="M33,47 C37,51 43,51 47,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                  <path d="M63,47 C67,51 73,51 77,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>`;
+    } else {
+      eyebrows = `<path d="M33,47 Q40,45 47,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                  <path d="M63,47 Q70,45 77,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>`;
+    }
+  }
+
+  /* ── Eyes ── */
+  let eyeGroups = '', cheeks = '', extras = '';
+  if (mood === 'sleeping') {
+    eyeGroups = `<path d="M${eyeX1-8},${eyeY} Q${eyeX1},${eyeY-8} ${eyeX1+8},${eyeY}" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+                 <path d="M${eyeX2-8},${eyeY} Q${eyeX2},${eyeY-8} ${eyeX2+8},${eyeY}" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+  } else {
+    const ry1  = mood === 'ecstatic' ? 13 : mood === 'happy' ? 12 : 10.5;
+    const prx  = mood === 'ecstatic' ? 7  : mood === 'happy' ? 6.5 : 5.5;
+    const pry  = mood === 'ecstatic' ? 8  : mood === 'happy' ? 7.5 : 6.5;
+    const pOff = (mood === 'sad' || mood === 'hungry') ? 3 : 2;
+    eyeGroups = `
+      <g class="pet-eye-blink" style="transform-box:fill-box;transform-origin:center">
+        <ellipse cx="${eyeX1}" cy="${eyeY}" rx="10" ry="${ry1}" fill="white"/>
+        <ellipse class="pet-pupil" cx="${eyeX1+1}" cy="${eyeY+pOff}" rx="${prx}" ry="${pry}" fill="#111"/>
+        <circle cx="${eyeX1-3}" cy="${eyeY-3}" r="2" fill="white" opacity=".9"/>
+      </g>
+      <g class="pet-eye-blink2" style="transform-box:fill-box;transform-origin:center">
+        <ellipse cx="${eyeX2}" cy="${eyeY}" rx="10" ry="${ry1}" fill="white"/>
+        <ellipse class="pet-pupil" cx="${eyeX2+1}" cy="${eyeY+pOff}" rx="${prx}" ry="${pry}" fill="#111"/>
+        <circle cx="${eyeX2-3}" cy="${eyeY-3}" r="2" fill="white" opacity=".9"/>
+      </g>`;
+  }
+
+  /* ── Nose ── */
+  const nose = mood !== 'sleeping'
+    ? `<ellipse cx="55" cy="62" rx="3.5" ry="2.5" fill="${dark}" opacity=".45"/>` : '';
+
+  /* ── Mouth + cheeks ── */
+  let mouth = '';
+  if (mood === 'sleeping') {
+    mouth = `<path d="M47,68 Q55,72 63,68" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+  } else if (mood === 'ecstatic') {
+    mouth  = `<path d="M43,67 Q55,82 67,67" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+    cheeks = `<ellipse cx="24" cy="62" rx="9" ry="6" fill="${col}" opacity=".4"/>
+              <ellipse cx="86" cy="62" rx="9" ry="6" fill="${col}" opacity=".4"/>`;
+  } else if (mood === 'happy') {
+    mouth  = `<path d="M44,68 Q55,80 66,68" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+    cheeks = `<ellipse cx="25" cy="62" rx="8" ry="5.5" fill="${col}" opacity=".32"/>
+              <ellipse cx="85" cy="62" rx="8" ry="5.5" fill="${col}" opacity=".32"/>`;
+  } else if (mood === 'sad' || mood === 'hungry') {
+    mouth  = `<path d="M44,72 Q55,64 66,72" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+    if (mood === 'hungry')
+      extras = `<ellipse cx="78" cy="59" rx="2.5" ry="3.5" fill="rgba(130,195,255,.8)"/>`;
+  } else {
+    mouth = `<path d="M44,68 Q55,74 66,68" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+  }
+
+  /* ── Animated tail (all levels) ── */
+  const tail = `<g>
+    <path d="M68,91 C78,88 92,86 90,101 C88,110 76,110 72,103 C68,97 66,95 68,91 Z" fill="${col}" stroke="${dark}" stroke-width="1.2"/>
+    <animateTransform attributeName="transform" type="rotate" values="-7 68 91; 7 68 91; -7 68 91" dur="0.75s" repeatCount="indefinite"/>
+  </g>`;
+
+  /* ── Ears (level 2+) ── */
+  let ears = '';
+  if (level >= 2) {
+    ears = `<ellipse cx="32" cy="34" rx="9" ry="12" fill="${col}" transform="rotate(-15 32 34)"/>
+            <ellipse cx="32" cy="35" rx="6" ry="8"  fill="${light}" opacity=".4" transform="rotate(-15 32 35)"/>
+            <ellipse cx="78" cy="34" rx="9" ry="12" fill="${col}" transform="rotate(15 78 34)"/>
+            <ellipse cx="78" cy="35" rx="6" ry="8"  fill="${light}" opacity=".4" transform="rotate(15 78 35)"/>`;
+  }
+
+  /* ── Antennae (level 3+) ── */
+  let antennae = '';
+  if (level >= 3) {
+    antennae = `<line x1="44" y1="27" x2="34" y2="11" stroke="${col}" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="33" cy="9" r="5" fill="${col}"/>
+                <circle cx="31" cy="7" r="2" fill="white" opacity=".7"/>
+                <line x1="66" y1="27" x2="76" y2="11" stroke="${col}" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="77" cy="9" r="5" fill="${col}"/>
+                <circle cx="75" cy="7" r="2" fill="white" opacity=".7"/>`;
+  }
+
+  /* ── Wings with flutter (level 4+) ── */
+  let wings = '';
+  if (level >= 4) {
+    wings = `<g>
+      <path d="M14,62 C2,46 2,30 16,38 C26,44 22,59 18,65 Z" fill="${light}" opacity=".65"/>
+      <path d="M16,62 C6,50 8,38 18,42 C26,46 24,57 20,62 Z" fill="white" opacity=".15"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 14 62; -10 14 62; 0 14 62" dur="0.45s" repeatCount="indefinite"/>
+    </g>
+    <g>
+      <path d="M96,62 C108,46 108,30 94,38 C84,44 88,59 92,65 Z" fill="${light}" opacity=".65"/>
+      <path d="M94,62 C104,50 102,38 92,42 C84,46 86,57 90,62 Z" fill="white" opacity=".15"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 96 62; 10 96 62; 0 96 62" dur="0.45s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── Paws with fingers ── */
+  const paws = `
+    <ellipse cx="14" cy="76" rx="12" ry="8" fill="url(#${uid})" transform="rotate(-25 14 76)"/>
+    <circle cx="8"  cy="82" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="13" cy="84" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="18" cy="83" r="2.8" fill="${dark}" opacity=".45"/>
+    <ellipse cx="96" cy="76" rx="12" ry="8" fill="url(#${uid})" transform="rotate(25 96 76)"/>
+    <circle cx="102" cy="82" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="97"  cy="84" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="92"  cy="83" r="2.8" fill="${dark}" opacity=".45"/>`;
+
+  /* ── Accessories ── */
+  let accSvg = '';
+  if (accessories.includes('hat')) {
+    accSvg += `<rect x="36" y="22" width="38" height="6" rx="3" fill="#2a2a2a"/>
+               <rect x="42" y="6"  width="26" height="17" rx="4" fill="#1a1a1a"/>
+               <rect x="42" y="6"  width="26" height="5"  rx="2" fill="#333" opacity=".6"/>`;
+  }
+  if (accessories.includes('glasses')) {
+    accSvg += `<circle cx="${eyeX1}" cy="${eyeY}" r="14" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="2"/>
+               <circle cx="${eyeX2}" cy="${eyeY}" r="14" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="2"/>
+               <line x1="54" y1="${eyeY}" x2="56" y2="${eyeY}" stroke="rgba(255,255,255,.65)" stroke-width="2"/>
+               <line x1="19" y1="${eyeY-3}" x2="26" y2="${eyeY}" stroke="rgba(255,255,255,.45)" stroke-width="1.5"/>
+               <line x1="91" y1="${eyeY-3}" x2="84" y2="${eyeY}" stroke="rgba(255,255,255,.45)" stroke-width="1.5"/>`;
+  }
+  if (accessories.includes('crown') || level >= 5) {
+    accSvg += `<path d="M33,26 L41,10 L55,22 L69,10 L77,26 L78,32 L32,32 Z" fill="#F9C74F"/>
+               <rect x="32" y="28" width="46" height="6" rx="2" fill="#F9C74F"/>
+               <circle cx="41" cy="11" r="4" fill="#F94144"/>
+               <circle cx="55" cy="23" r="4" fill="#06D6E0"/>
+               <circle cx="69" cy="11" r="4" fill="#9B5DE5"/>`;
+  }
+  if (accessories.includes('star') && level < 5) {
+    accSvg += `<polygon points="98,18 100,24 106,24 101,28 103,34 98,30 93,34 95,28 90,24 96,24" fill="#F9C74F"/>`;
+  }
+
+  /* ── Aura ring (level 4+) ── */
+  let aura = '';
+  if (level >= 4) {
+    aura = `<g>
+      <circle cx="55" cy="60" r="47" fill="none" stroke="${col}" stroke-width="2.5" stroke-dasharray="9 6">
+        <animate attributeName="opacity" values=".35;.55;.35" dur="2.5s" repeatCount="indefinite"/>
+      </circle>
+      <animateTransform attributeName="transform" type="rotate" from="0 55 60" to="360 55 60" dur="9s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── B3 Rainbow collar (streak ≥ 7) ── */
+  let rainbowCollar = '';
+  if (streak >= 7) {
+    rainbowCollar = `<g style="animation:rbRot 3s linear infinite;transform-box:fill-box;transform-origin:55px 38px">
+      <defs>
+        <linearGradient id="${uid}rb" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%"   stop-color="#F94144"/>
+          <stop offset="20%"  stop-color="#F9C74F"/>
+          <stop offset="40%"  stop-color="#38D95A"/>
+          <stop offset="60%"  stop-color="#06D6E0"/>
+          <stop offset="80%"  stop-color="#9B5DE5"/>
+          <stop offset="100%" stop-color="#F94144"/>
+        </linearGradient>
+      </defs>
+      <ellipse cx="55" cy="38" rx="22" ry="8" fill="none" stroke="url(#${uid}rb)" stroke-width="3.5" opacity=".88"/>
+    </g>`;
+  }
+
+  /* ── Orbital particles (level 5+) ── */
+  let orbitals = '';
+  if (level >= 5) {
+    const oData = [
+      { start: 0,   dur: 2.8, r: 46, size: 4,   fill: col,    op: .85 },
+      { start: 120, dur: 3.6, r: 43, size: 3,   fill: light,  op: .7  },
+      { start: 240, dur: 2.2, r: 48, size: 3.5, fill: 'white', op: .6 },
+    ];
+    // Extra orbitals for level 6+
+    if (level >= 6) {
+      oData.push(
+        { start: 60,  dur: 1.9, r: 51, size: 2.5, fill: light, op: .65 },
+        { start: 180, dur: 4.1, r: 40, size: 2,   fill: col,   op: .55 },
+        { start: 300, dur: 3.0, r: 54, size: 3,   fill: 'white', op: .5 },
+      );
+    }
+    // Even more for level 8
+    if (level >= 8) {
+      oData.push(
+        { start: 45,  dur: 1.5, r: 56, size: 3.5, fill: '#FFD700', op: .9  },
+        { start: 225, dur: 2.4, r: 38, size: 2.5, fill: '#FFD700', op: .75 },
+      );
+    }
+    orbitals = oData.map(o => `<g>
+      <circle cx="55" cy="${60 - o.r}" r="${o.size}" fill="${o.fill}" opacity="${o.op}"/>
+      <animateTransform attributeName="transform" type="rotate"
+        from="${o.start} 55 60" to="${o.start + 360} 55 60" dur="${o.dur}s" repeatCount="indefinite"/>
+    </g>`).join('\n');
+  }
+
+  /* ── Second aura ring (level 6+) ── */
+  if (level >= 6) {
+    aura += `<g>
+      <circle cx="55" cy="60" r="53" fill="none" stroke="${col}" stroke-width="1.5" stroke-dasharray="5 9" opacity="0.4">
+        <animate attributeName="opacity" values=".25;.45;.25" dur="3.2s" repeatCount="indefinite"/>
+      </circle>
+      <animateTransform attributeName="transform" type="rotate" from="360 55 60" to="0 55 60" dur="14s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── Crystal halo (level 7+) ── */
+  let halo = '';
+  if (level >= 7) {
+    halo = `<g>
+      <ellipse cx="55" cy="18" rx="20" ry="5" fill="none" stroke="${col}" stroke-width="2.5" opacity=".75">
+        <animate attributeName="opacity" values=".55;.85;.55" dur="2s" repeatCount="indefinite"/>
+      </ellipse>
+      <ellipse cx="55" cy="18" rx="14" ry="3" fill="none" stroke="white" stroke-width="1" opacity=".4"/>
+    </g>`;
+  }
+
+  /* ── Second wing pair (level 7+) ── */
+  if (level >= 7) {
+    wings += `<g>
+      <path d="M18,55 C8,43 10,33 20,37 C27,40 25,50 22,55 Z" fill="${light}" opacity=".45"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 18 55; -12 18 55; 0 18 55" dur="0.35s" repeatCount="indefinite"/>
+    </g>
+    <g>
+      <path d="M92,55 C102,43 100,33 90,37 C83,40 85,50 88,55 Z" fill="${light}" opacity=".45"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 92 55; 12 92 55; 0 92 55" dur="0.35s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── Third aura + body shimmer (level 8) ── */
+  let shimmer = '';
+  if (level >= 8) {
+    aura += `<g>
+      <circle cx="55" cy="60" r="58" fill="none" stroke="#FFD700" stroke-width="1" stroke-dasharray="3 12" opacity="0.35">
+        <animate attributeName="opacity" values=".2;.5;.2" dur="4s" repeatCount="indefinite"/>
+      </circle>
+      <animateTransform attributeName="transform" type="rotate" from="0 55 60" to="360 55 60" dur="20s" repeatCount="indefinite"/>
+    </g>`;
+    shimmer = `<ellipse cx="55" cy="58" rx="30" ry="35" fill="url(#${uid}sh)" opacity="0.18"/>`;
+  }
+
+  return `<svg viewBox="0 0 110 115" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <radialGradient id="${uid}" cx="38%" cy="28%" r="70%">
+        <stop offset="0%"   stop-color="${light}"/>
+        <stop offset="55%"  stop-color="${col}"/>
+        <stop offset="100%" stop-color="${dark}"/>
+      </radialGradient>
+      <radialGradient id="${uid}b" cx="50%" cy="55%" r="50%">
+        <stop offset="0%"   stop-color="white" stop-opacity="0.22"/>
+        <stop offset="100%" stop-color="white" stop-opacity="0"/>
+      </radialGradient>
+      <radialGradient id="${uid}sh" cx="50%" cy="40%" r="60%">
+        <stop offset="0%"   stop-color="#FFD700" stop-opacity="1"/>
+        <stop offset="100%" stop-color="#FFD700" stop-opacity="0"/>
+      </radialGradient>
+    </defs>
+    <ellipse cx="55" cy="111" rx="28" ry="4" fill="rgba(0,0,0,.18)"/>
+    ${aura}
+    ${halo}
+    ${tail}
+    ${wings}
+    ${ears}
+    ${antennae}
+    ${paws}
+    <path d="${bodyPath}" fill="url(#${uid})"/>
+    ${shimmer}
+    <ellipse cx="55" cy="70" rx="18" ry="12" fill="url(#${uid}b)"/>
+    ${cheeks}${eyebrows}${eyeGroups}${nose}${mouth}${extras}
+    ${rainbowCollar}
+    ${accSvg}
+    ${orbitals}
+  </svg>`;
+}
+
+  var MOOD_RU = {
+    ecstatic: 'в восторге', happy: 'в духе', neutral: 'бодр',
+    sad: 'скучает', hungry: 'голоден', sleeping: 'спит',
+  };
+
+  window.PetSprite = {
+    PALETTES: PET_PALETTES,
+    shade: shadeColor,
+    render: renderPetSVG,
+    moodLabel: function (m) { return MOOD_RU[m] || 'бодр'; },
+  };
+})();