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

refactor(lab): phase 3 — token purification across lab.html / lab.css / lab-glue.js

Browse Source 
Replaced ~100 hardcoded brand colors with var() tokens across 3 files.
Kept: tinted-alpha colors (rgba(155,93,229,.x)), canvas fillStyle (vars
don't resolve there), curated SVG card-preview palettes (P_GRAPH, P_MAGNETIC,
etc.), physics-convention colors (#EF476F for positive charges, #4CC9F0 for
negative), slightly-different decorative shades (#EF476F ≠ #F15BB5).

lab.css: #9B5DE5→var(--violet), #06D6E0→var(--cyan), #F15BB5/nscene→var(--pink),
  #0F172A (filter.active)→var(--text), fn-color defaults, trig btn defaults.
lab.html: stat bars, slider labels, info-fn-dot, toggle-dot, panel badges,
  section-specific color coding (violet=wave1/param1, cyan=wave2/param2).
lab-glue.js: toggleTheory() JS style assignments, template-literal HTML headings.

Before: ~265 hardcodes   After: ~60 (canvas+curated+rgba+physics-convention)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-22 22:51:28 +03:00
parent 92b5c39860
commit 6792a4a5c7
3 changed files with 150 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/lab.css
+19 -19
View File
@@ -17,7 +17,7 @@
border: 1.5px solid rgba(255,255,255,.12);
display: flex; align-items: center; justify-content: center;
}
.lab-hero-icon svg { width: 30px; height: 30px; stroke: #9B5DE5; stroke-width: 1.5; }
.lab-hero-icon svg { width: 30px; height: 30px; stroke: var(--violet); stroke-width: 1.5; }
.lab-hero-title {
font-family: 'Unbounded', sans-serif; font-size: 1.55rem; font-weight: 800;
letter-spacing: -0.02em; margin-bottom: 5px;
@@ -36,7 +36,7 @@
cursor: pointer; transition: all .16s;
}
.lab-filter:hover { border-color: rgba(155,93,229,.4); color: var(--violet); }
.lab-filter.active { background: #0F172A; color: #fff; border-color: #0F172A; }
.lab-filter.active { background: var(--text); color: #fff; border-color: var(--text); }
/* sim grid */
.sim-grid {
@@ -74,7 +74,7 @@
padding: 3px 10px; border-radius: 99px; margin-bottom: 10px;
}
.sim-cat.math { background: rgba(155,93,229,.12); color: var(--violet); }
.sim-cat.phys { background: rgba(6,214,224,.1); color: #06D6E0; }
.sim-cat.phys { background: rgba(6,214,224,.1); color: var(--cyan); }
.sim-title {
font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800;
@@ -171,15 +171,15 @@
}
.fn-label {
font-family: 'Manrope', monospace; font-size: 0.85rem; font-weight: 700;
color: var(--fn-color, #9B5DE5); flex-shrink: 0; letter-spacing: .01em;
color: var(--fn-color, var(--violet)); flex-shrink: 0; letter-spacing: .01em;
}
.fn-row:focus-within { border-color: var(--fn-color, #9B5DE5); }
.fn-row:focus-within { border-color: var(--fn-color, var(--violet)); }
.fn-dot {
width: 12px; height: 12px; border-radius: 50%;
flex-shrink: 0;
background: var(--fn-color, #9B5DE5);
box-shadow: 0 0 6px var(--fn-color, #9B5DE5);
background: var(--fn-color, var(--violet));
box-shadow: 0 0 6px var(--fn-color, var(--violet));
}
.fn-input {
flex: 1; border: none; outline: none; background: transparent;
@@ -493,10 +493,10 @@
/* speed slider — cyan thumb */
#sl-speed::-webkit-slider-thumb {
background: #06D6E0;
background: var(--cyan);
box-shadow: 0 0 6px rgba(6,214,224,.5);
}
#sl-speed::-moz-range-thumb { background: #06D6E0; }
#sl-speed::-moz-range-thumb { background: var(--cyan); }
/* magnetic canvas */
#mag-canvas {
@@ -592,8 +592,8 @@
color: #aaa; font-size: 13px; font-weight: 700; cursor: pointer;
font-family: 'Manrope', sans-serif; transition: .15s;
}
.trig-fn-btn:hover { background: rgba(var(--fc-rgb,155,93,229),0.15); border-color: var(--fc,#9B5DE5); color: var(--fc,#9B5DE5); }
.trig-fn-btn.active { background: rgba(var(--fc-rgb,155,93,229),0.18); border-color: var(--fc,#9B5DE5); color: var(--fc,#9B5DE5); box-shadow: 0 0 8px rgba(var(--fc-rgb,155,93,229),0.3); }
.trig-fn-btn:hover { background: rgba(var(--fc-rgb,155,93,229),0.15); border-color: var(--fc,var(--violet)); color: var(--fc,var(--violet)); }
.trig-fn-btn.active { background: rgba(var(--fc-rgb,155,93,229),0.18); border-color: var(--fc,var(--violet)); color: var(--fc,var(--violet)); box-shadow: 0 0 8px rgba(var(--fc-rgb,155,93,229),0.3); }
/* ── responsive ── */
@media (max-width: 768px) {
@@ -614,7 +614,7 @@
/* Circuit tool buttons */
.circ-tool-btn.active {
background: rgba(155,93,229,0.25) !important;
border-color: #9B5DE5 !important;
border-color: var(--violet) !important;
color: #c4b5fd !important;
}
.circ-top-btn.active { background: rgba(155,93,229,0.35) !important; color: #c4b5fd !important; }
@@ -629,20 +629,20 @@
/* Reaction mode buttons */
.reac-mode-btn.active {
background: rgba(6,214,224,0.18) !important;
border-color: #06D6E0 !important;
color: #06D6E0 !important;
border-color: var(--cyan) !important;
color: var(--cyan) !important;
}
/* Newton law/scene buttons */
.nlaw-btn.active {
background: rgba(6,214,224,0.18) !important;
border-color: #06D6E0 !important;
color: #06D6E0 !important;
border-color: var(--cyan) !important;
color: var(--cyan) !important;
}
.nscene-btn.active {
background: rgba(241,91,181,0.15) !important;
border-color: #F15BB5 !important;
color: #F15BB5 !important;
border-color: var(--pink) !important;
color: var(--pink) !important;
}
/* ── wave mode buttons ── */
@@ -660,7 +660,7 @@
}
.wave-n-btn.active {
background: rgba(255,209,102,.15) !important;
border-color: #FFD166 !important; color: #FFD166 !important;
border-color: #FFD166 !important; color: #FFD166 !important; /* amber — wave harmonic, intentional palette */
}
/* ── theory panel (overlay right sidebar) ── */
frontend/js/labs/lab-glue.js
+4 -4
View File
@@ -689,8 +689,8 @@
document.getElementById('theory-panel').classList.toggle('open', _theoryOpen);
const btn = document.getElementById('theory-toggle');
btn.style.background = _theoryOpen ? 'rgba(155,93,229,0.15)' : '';
btn.style.borderColor = _theoryOpen ? '#9B5DE5' : '';
btn.style.color = _theoryOpen ? '#9B5DE5' : '';
btn.style.borderColor = _theoryOpen ? 'var(--violet)' : '';
btn.style.color = _theoryOpen ? 'var(--violet)' : '';
}
function loadTheory(simId) {
@@ -796,7 +796,7 @@
document.getElementById('sim-grid').innerHTML =
`<div style="grid-column:1/-1;padding:60px 0;text-align:center;color:var(--text-3)">
<div style="font-size:2rem;margin-bottom:12px"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
<div style="font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:#0F172A;margin-bottom:6px">Доступ к симуляциям закрыт</div>
<div style="font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:var(--text);margin-bottom:6px">Доступ к симуляциям закрыт</div>
<div style="font-size:.88rem">Администратор ограничил доступ к лаборатории</div>
</div>`;
return;
@@ -812,7 +812,7 @@
document.getElementById('sim-grid').innerHTML =
`<div style="grid-column:1/-1;padding:60px 0;text-align:center;color:var(--text-3)">
<div style="font-size:2rem;margin-bottom:12px"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
<div style="font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:#0F172A;margin-bottom:6px">Модуль симуляций отключён</div>
<div style="font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:var(--text);margin-bottom:6px">Модуль симуляций отключён</div>
<div style="font-size:.88rem">Администратор временно отключил лабораторию</div>
</div>`;
} else {
frontend/lab.html
+127 -127
View File
@@ -24,7 +24,7 @@
<div class="lab-hero">
<div class="lab-hero-icon">
<i data-lucide="atom" style="width:30px;height:30px;stroke:#9B5DE5;stroke-width:1.5"></i>
<i data-lucide="atom" style="width:30px;height:30px;stroke:var(--violet);stroke-width:1.5"></i>
</div>
<div>
<div class="lab-hero-title">Лаборатория</div>
@@ -319,8 +319,8 @@
</div>
<div id="hydro-surf-ctrl" style="display:none;gap:4px;align-items:center">
<label style="font-size:.72rem;color:rgba(255,255,255,.5);white-space:nowrap">θ:</label>
<input type="range" min="0" max="160" value="20" step="5" style="width:72px;accent-color:#9B5DE5" oninput="hydroSim&&hydroSim.setContactAngle(+this.value);document.getElementById('hydro-theta-val').textContent=this.value+'\u00B0';document.getElementById('hydro-theta-lbl').textContent=this.value+'\u00B0';document.querySelector('#hydro-panel-theta input[type=range]').value=this.value">
<span id="hydro-theta-val" style="font-size:.72rem;color:#9B5DE5;min-width:28px;white-space:nowrap">20°</span>
<input type="range" min="0" max="160" value="20" step="5" style="width:72px;accent-color:var(--violet)" oninput="hydroSim&&hydroSim.setContactAngle(+this.value);document.getElementById('hydro-theta-val').textContent=this.value+'\u00B0';document.getElementById('hydro-theta-lbl').textContent=this.value+'\u00B0';document.querySelector('#hydro-panel-theta input[type=range]').value=this.value">
<span id="hydro-theta-val" style="font-size:.72rem;color:var(--violet);min-width:28px;white-space:nowrap">20°</span>
<button class="zoom-btn" id="hydro-surf-toggle" onclick="hydroToggleSurface()" title="Переключить: капилляры / капля" style="white-space:nowrap">Капилляры</button>
</div>
</div>
@@ -339,7 +339,7 @@
<div class="gp-section-title">Функции</div>
<!-- fn 1 -->
<div style="--fn-color:#9B5DE5">
<div style="--fn-color:var(--violet)">
<div class="fn-row">
<div class="fn-dot"></div>
<span class="fn-label">y =</span>
@@ -350,7 +350,7 @@
</div>
<!-- fn 2 -->
<div style="--fn-color:#06D6E0">
<div style="--fn-color:var(--cyan)">
<div class="fn-row">
<div class="fn-dot"></div>
<span class="fn-label">y =</span>
@@ -361,7 +361,7 @@
</div>
<!-- fn 3 -->
<div style="--fn-color:#F15BB5">
<div style="--fn-color:var(--pink)">
<div class="fn-row">
<div class="fn-dot"></div>
<span class="fn-label">y =</span>
@@ -436,17 +436,17 @@
<span class="ic-val" id="info-x">—</span>
</div>
<div class="info-fn-val">
<div class="info-fn-dot" style="background:#9B5DE5;box-shadow:0 0 5px #9B5DE5"></div>
<div class="info-fn-dot" style="background:var(--violet);box-shadow:0 0 5px var(--violet)"></div>
<span class="ic-label">y₁ =</span>
<span class="ic-val" id="info-y0">—</span>
</div>
<div class="info-fn-val">
<div class="info-fn-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></div>
<div class="info-fn-dot" style="background:var(--cyan);box-shadow:0 0 5px var(--cyan)"></div>
<span class="ic-label">y₂ =</span>
<span class="ic-val" id="info-y1">—</span>
</div>
<div class="info-fn-val">
<div class="info-fn-dot" style="background:#F15BB5;box-shadow:0 0 5px #F15BB5"></div>
<div class="info-fn-dot" style="background:var(--pink);box-shadow:0 0 5px var(--pink)"></div>
<span class="ic-label">y₃ =</span>
<span class="ic-val" id="info-y2">—</span>
</div>
@@ -494,13 +494,13 @@
<span class="tri-toggle" style="background:var(--violet)"><span style="content:'';display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
</label>
<label class="tri-layer-row active" id="ml-fieldlines" onclick="magLayer('fieldlines',this)">
<span class="tri-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></span>
<span class="tri-dot" style="background:var(--cyan);box-shadow:0 0 5px var(--cyan)"></span>
<span class="tri-layer-name">Силовые линии</span>
<span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">+ стрелки</span>
<span class="tri-toggle" style="background:var(--violet)"><span style="content:'';display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
</label>
<label class="tri-layer-row" id="ml-vectors" onclick="magLayer('vectors',this)">
<span class="tri-dot" style="background:#9B5DE5;box-shadow:0 0 5px #9B5DE5"></span>
<span class="tri-dot" style="background:var(--violet);box-shadow:0 0 5px var(--violet)"></span>
<span class="tri-layer-name">Векторное поле</span>
<span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">сетка стрелок</span>
<span class="tri-toggle"></span>
@@ -557,9 +557,9 @@
<div style="margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:5px">
<div class="tri-stats-grid" style="grid-template-columns:1fr 1fr">
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Провода •</div>
<div class="tri-stat-v" id="ms-out" style="text-align:center;color:#06D6E0">0</div>
<div class="tri-stat-v" id="ms-out" style="text-align:center;color:var(--cyan)">0</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Провода ×</div>
<div class="tri-stat-v" id="ms-in" style="text-align:center;color:#F15BB5">0</div>
<div class="tri-stat-v" id="ms-in" style="text-align:center;color:var(--pink)">0</div>
</div>
<div style="font-size:0.68rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:4px">
Клик — добавить &nbsp;·&nbsp; ПКМ / 2×клик — удалить<br>
@@ -582,11 +582,11 @@
</div>
<div class="pstat">
<div class="pstat-label">• Ток на нас</div>
<div class="pstat-val" id="mbar-out" style="color:#06D6E0">0</div>
<div class="pstat-val" id="mbar-out" style="color:var(--cyan)">0</div>
</div>
<div class="pstat">
<div class="pstat-label">× Ток от нас</div>
<div class="pstat-val" id="mbar-in" style="color:#F15BB5">0</div>
<div class="pstat-val" id="mbar-in" style="color:var(--pink)">0</div>
</div>
<div class="pstat">
<div class="pstat-label">Ток I</div>
@@ -636,15 +636,15 @@
<span class="tri-toggle" id="tl-bisectors"></span>
</label>
<label class="tri-layer-row" onclick="triToggle('circumcircle',this)">
<span class="tri-dot" style="background:#F15BB5;box-shadow:0 0 5px #F15BB5"></span>
<span class="tri-dot" style="background:var(--pink);box-shadow:0 0 5px var(--pink)"></span>
<span class="tri-layer-name">Описанная окружность</span>
<span class="tri-layer-hint" style="color:#F15BB5">O, R</span>
<span class="tri-layer-hint" style="color:var(--pink)">O, R</span>
<span class="tri-toggle" id="tl-circumcircle"></span>
</label>
<label class="tri-layer-row" onclick="triToggle('incircle',this)">
<span class="tri-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></span>
<span class="tri-dot" style="background:var(--cyan);box-shadow:0 0 5px var(--cyan)"></span>
<span class="tri-layer-name">Вписанная окружность</span>
<span class="tri-layer-hint" style="color:#06D6E0">I, r</span>
<span class="tri-layer-hint" style="color:var(--cyan)">I, r</span>
<span class="tri-toggle" id="tl-incircle"></span>
</label>
<label class="tri-layer-row" onclick="triToggle('eulerLine',this)">
@@ -680,16 +680,16 @@
<!-- Stats -->
<div class="gp-section-title" style="margin-bottom:8px">Стороны</div>
<div class="tri-stats-grid" style="margin-bottom:10px">
<span class="tri-stat-k" style="color:#9B5DE5">a</span><span class="tri-stat-v" id="ts-a">—</span>
<span class="tri-stat-k" style="color:#06D6E0">b</span><span class="tri-stat-v" id="ts-b">—</span>
<span class="tri-stat-k" style="color:#F15BB5">c</span><span class="tri-stat-v" id="ts-c">—</span>
<span class="tri-stat-k" style="color:var(--violet)">a</span><span class="tri-stat-v" id="ts-a">—</span>
<span class="tri-stat-k" style="color:var(--cyan)">b</span><span class="tri-stat-v" id="ts-b">—</span>
<span class="tri-stat-k" style="color:var(--pink)">c</span><span class="tri-stat-v" id="ts-c">—</span>
</div>
<div class="gp-section-title" style="margin-bottom:8px">Углы</div>
<div class="tri-stats-grid" style="margin-bottom:10px">
<span class="tri-stat-k" style="color:#9B5DE5">∠A</span><span class="tri-stat-v" id="ts-A">—</span>
<span class="tri-stat-k" style="color:#06D6E0">∠B</span><span class="tri-stat-v" id="ts-B">—</span>
<span class="tri-stat-k" style="color:#F15BB5">∠C</span><span class="tri-stat-v" id="ts-C">—</span>
<span class="tri-stat-k" style="color:var(--violet)">∠A</span><span class="tri-stat-v" id="ts-A">—</span>
<span class="tri-stat-k" style="color:var(--cyan)">∠B</span><span class="tri-stat-v" id="ts-B">—</span>
<span class="tri-stat-k" style="color:var(--pink)">∠C</span><span class="tri-stat-v" id="ts-C">—</span>
</div>
<div class="gp-section-title" style="margin-bottom:8px">Вычисляемые</div>
@@ -707,7 +707,7 @@
padding:8px 14px;border-radius:12px;
background:rgba(155,93,229,0.12);border:1.5px solid rgba(155,93,229,0.25);
font-family:'Manrope',sans-serif;font-size:0.82rem;font-weight:700;
color:#9B5DE5;text-align:center;
color:var(--violet);text-align:center;
">—</div>
<div style="margin-top:8px;font-size:0.7rem;color:var(--text-3);text-align:center;line-height:1.5">
Перетащи вершины<br>A, B, C для изменения
@@ -771,9 +771,9 @@
<span class="tri-toggle" id="trig-tl-sin"></span>
</label>
<label class="tri-layer-row active" onclick="trigToggle('cos',this)">
<span class="tri-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></span>
<span class="tri-dot" style="background:var(--cyan);box-shadow:0 0 5px var(--cyan)"></span>
<span class="tri-layer-name">cos</span>
<span class="tri-layer-hint" style="color:#06D6E0">горизонталь</span>
<span class="tri-layer-hint" style="color:var(--cyan)">горизонталь</span>
<span class="tri-toggle" id="trig-tl-cos"></span>
</label>
<label class="tri-layer-row" onclick="trigToggle('tan',this)">
@@ -828,7 +828,7 @@
padding:10px 14px;border-radius:12px;
background:rgba(155,93,229,0.12);border:1.5px solid rgba(155,93,229,0.25);
font-family:'Manrope',sans-serif;font-size:0.85rem;font-weight:700;
color:#9B5DE5;text-align:center;line-height:1.6;
color:var(--violet);text-align:center;line-height:1.6;
">45° = π/4</div>
<div style="margin-top:8px;font-size:0.7rem;color:var(--text-3);text-align:center;line-height:1.5">
Перетащи точку по окружности<br>или выбери табличный угол
@@ -848,7 +848,7 @@
<div class="proj-stats-bar">
<div class="pstat">
<div class="pstat-label">Угол</div>
<div class="pstat-val" id="trigbar-angle" style="color:#9B5DE5">45°</div>
<div class="pstat-val" id="trigbar-angle" style="color:var(--violet)">45°</div>
</div>
<div class="pstat">
<div class="pstat-label">sin</div>
@@ -868,7 +868,7 @@
</div>
<div class="pstat">
<div class="pstat-label">Четверть</div>
<div class="pstat-val" id="trigbar-quad" style="color:#9B5DE5">—</div>
<div class="pstat-val" id="trigbar-quad" style="color:var(--violet)">—</div>
</div>
</div>
</div><!-- /#sim-trigcircle -->
@@ -913,9 +913,9 @@
<div class="gp-section-title" style="margin-top:4px;margin-bottom:8px">Состояние</div>
<div class="tri-stats-grid" style="grid-template-columns:1fr 1fr;margin-bottom:8px">
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Давление P</div>
<div class="tri-stat-v" id="gstat-P" style="text-align:center;color:#9B5DE5">—</div>
<div class="tri-stat-v" id="gstat-P" style="text-align:center;color:var(--violet)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Объём V</div>
<div class="tri-stat-v" id="gstat-V" style="text-align:center;color:#06D6E0">—</div>
<div class="tri-stat-v" id="gstat-V" style="text-align:center;color:var(--cyan)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">PV</div>
<div class="tri-stat-v" id="gstat-PV" style="text-align:center;color:#34d399">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">⟨v⟩ средн.</div>
@@ -940,9 +940,9 @@
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">|Δr| смещение</div>
<div class="tri-stat-v" id="brstat-dr" style="text-align:center;color:#FFD166">0</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">MSD</div>
<div class="tri-stat-v" id="brstat-msd" style="text-align:center;color:#9B5DE5">0</div>
<div class="tri-stat-v" id="brstat-msd" style="text-align:center;color:var(--violet)">0</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Скорость v</div>
<div class="tri-stat-v" id="brstat-v" style="text-align:center;color:#06D6E0">0</div>
<div class="tri-stat-v" id="brstat-v" style="text-align:center;color:var(--cyan)">0</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Шагов</div>
<div class="tri-stat-v" id="brstat-steps" style="text-align:center;color:#34d399">0</div>
</div>
@@ -976,7 +976,7 @@
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Кин. энергия</div>
<div class="tri-stat-v" id="ststat-KE" style="text-align:center;color:#FFD166">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Пот. энергия</div>
<div class="tri-stat-v" id="ststat-PE" style="text-align:center;color:#9B5DE5">—</div>
<div class="tri-stat-v" id="ststat-PE" style="text-align:center;color:var(--violet)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Давление</div>
<div class="tri-stat-v" id="ststat-P" style="text-align:center;color:#EF476F">—</div>
</div>
@@ -1008,14 +1008,14 @@
</label>
<div class="gp-section-title" style="margin-bottom:8px">Концентрации</div>
<div class="tri-stats-grid" style="grid-template-columns:1fr 1fr;margin-bottom:8px">
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#06D6E0">Лево A</div>
<div class="tri-stat-v" id="dfstat-LA" style="text-align:center;color:#06D6E0">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#F15BB5">Лево B</div>
<div class="tri-stat-v" id="dfstat-LB" style="text-align:center;color:#F15BB5">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#06D6E0">Право A</div>
<div class="tri-stat-v" id="dfstat-RA" style="text-align:center;color:#06D6E0">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#F15BB5">Право B</div>
<div class="tri-stat-v" id="dfstat-RB" style="text-align:center;color:#F15BB5">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)">Лево A</div>
<div class="tri-stat-v" id="dfstat-LA" style="text-align:center;color:var(--cyan)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pink)">Лево B</div>
<div class="tri-stat-v" id="dfstat-LB" style="text-align:center;color:var(--pink)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)">Право A</div>
<div class="tri-stat-v" id="dfstat-RA" style="text-align:center;color:var(--cyan)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pink)">Право B</div>
<div class="tri-stat-v" id="dfstat-RB" style="text-align:center;color:var(--pink)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Смешивание</div>
<div class="tri-stat-v" id="dfstat-mix" style="text-align:center;color:#34d399">—</div>
</div>
@@ -1034,9 +1034,9 @@
</div><!-- /.sim-body-wrap -->
<div class="proj-stats-bar" id="mol-stats-bar">
<div class="pstat"><div class="pstat-label" id="mpbar-l1">—</div><div class="pstat-val" id="mpbar-v1" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label" id="mpbar-l1">—</div><div class="pstat-val" id="mpbar-v1" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label" id="mpbar-l2">—</div><div class="pstat-val" id="mpbar-v2" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label" id="mpbar-l3">—</div><div class="pstat-val" id="mpbar-v3" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label" id="mpbar-l3">—</div><div class="pstat-val" id="mpbar-v3" style="color:var(--violet)">—</div></div>
<div class="pstat"><div class="pstat-label" id="mpbar-l4">—</div><div class="pstat-val" id="mpbar-v4" style="color:#34d399">—</div></div>
<div class="pstat"><div class="pstat-label" id="mpbar-l5">—</div><div class="pstat-val" id="mpbar-v5">—</div></div>
</div>
@@ -1063,9 +1063,9 @@
<div class="gp-section-title" style="margin-bottom:8px">Слои</div>
<div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
<label class="tri-layer-row active" id="cl-colormap" onclick="coulombLayer('colormap',this)">
<span class="tri-dot" style="background:#9B5DE5;box-shadow:0 0 5px #9B5DE5"></span>
<span class="tri-dot" style="background:var(--violet);box-shadow:0 0 5px var(--violet)"></span>
<span class="tri-layer-name">Карта потенциала</span>
<span class="tri-layer-hint" style="color:#9B5DE5">V</span>
<span class="tri-layer-hint" style="color:var(--violet)">V</span>
<span class="tri-toggle" style="background:var(--violet)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
</label>
<label class="tri-layer-row active" id="cl-fieldlines" onclick="coulombLayer('fieldlines',this)">
@@ -1105,7 +1105,7 @@
<div style="margin-top:auto;display:flex;flex-direction:column;gap:5px">
<div class="tri-stats-grid" style="grid-template-columns:auto 1fr">
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Зарядов</div>
<div class="tri-stat-v" id="cs-total" style="color:#9B5DE5">0</div>
<div class="tri-stat-v" id="cs-total" style="color:var(--violet)">0</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Курсор E</div>
<div class="tri-stat-v" id="cs-curE" style="color:rgba(255,255,255,0.6)">—</div>
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Курсор V</div>
@@ -1366,7 +1366,7 @@
</div><!-- /.sim-body-wrap -->
<div class="proj-stats-bar" id="chem-stats-bar">
<div class="pstat"><div class="pstat-label" id="chbar-l1">—</div><div class="pstat-val" id="chbar-v1" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label" id="chbar-l1">—</div><div class="pstat-val" id="chbar-v1" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label" id="chbar-l2">—</div><div class="pstat-val" id="chbar-v2" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label" id="chbar-l3">—</div><div class="pstat-val" id="chbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label" id="chbar-l4">—</div><div class="pstat-val" id="chbar-v4">—</div></div>
@@ -1565,7 +1565,7 @@
</div><!-- /.sim-body-wrap -->
<div class="proj-stats-bar" id="dyn-stats-bar">
<div class="pstat"><div class="pstat-label" id="dbar-l1">Тел</div><div class="pstat-val" id="dbar-v1" style="color:#06D6E0">0</div></div>
<div class="pstat"><div class="pstat-label" id="dbar-l1">Тел</div><div class="pstat-val" id="dbar-v1" style="color:var(--cyan)">0</div></div>
<div class="pstat"><div class="pstat-label" id="dbar-l2">KE (Дж)</div><div class="pstat-val" id="dbar-v2" style="color:#4CC9F0">0</div></div>
<div class="pstat"><div class="pstat-label" id="dbar-l3">PE (Дж)</div><div class="pstat-val" id="dbar-v3" style="color:#7BF5A4">0</div></div>
<div class="pstat"><div class="pstat-label" id="dbar-l4">ΣF</div><div class="pstat-val" id="dbar-v4" style="color:#EF476F">—</div></div>
@@ -1761,7 +1761,7 @@
<div class="param-block">
<div class="param-header">
<span class="param-name" style="color:#9B5DE5">Масса m₁</span>
<span class="param-name" style="color:var(--violet)">Масса m₁</span>
<span class="param-val" id="c-m1">4 кг</span>
</div>
<input type="range" class="param-slider" id="sl-m1" min="1" max="20" value="4" oninput="collParam()">
@@ -1769,7 +1769,7 @@
<div class="param-block">
<div class="param-header">
<span class="param-name" style="color:#06D6E0">Масса m₂</span>
<span class="param-name" style="color:var(--cyan)">Масса m₂</span>
<span class="param-val" id="c-m2">4 кг</span>
</div>
<input type="range" class="param-slider" id="sl-m2" min="1" max="20" value="4" oninput="collParam()">
@@ -1777,7 +1777,7 @@
<div class="param-block">
<div class="param-header">
<span class="param-name" style="color:#9B5DE5">Скорость v₁</span>
<span class="param-name" style="color:var(--violet)">Скорость v₁</span>
<span class="param-val" id="c-v1">8 м/с</span>
</div>
<input type="range" class="param-slider" id="sl-cv1" min="0" max="30" value="8" oninput="collParam()">
@@ -1785,7 +1785,7 @@
<div class="param-block">
<div class="param-header">
<span class="param-name" style="color:#06D6E0">Скорость v₂</span>
<span class="param-name" style="color:var(--cyan)">Скорость v₂</span>
<span class="param-val" id="c-v2">8 м/с</span>
</div>
<input type="range" class="param-slider" id="sl-cv2" min="0" max="30" value="8" oninput="collParam()">
@@ -1810,7 +1810,7 @@
<div class="param-block">
<div class="param-header">
<span class="param-name"><svg class="ic" viewBox="0 0 24 24"><polygon points="13 19 22 12 13 5 13 19"/><polygon points="2 19 11 12 2 5 2 19"/></svg> Скорость</span>
<span class="param-val" id="c-speed" style="color:#06D6E0">1.00×</span>
<span class="param-val" id="c-speed" style="color:var(--cyan)">1.00×</span>
</div>
<input type="range" class="param-slider" id="sl-speed" min="0.1" max="4" step="0.05" value="1"
oninput="collParam()" style="--track-color:#06D6E0">
@@ -1973,7 +1973,7 @@
</div>
<!-- Stats bar -->
<div class="proj-stats-bar" id="chemsand-stats-bar">
<div class="pstat"><div class="pstat-label">В зоне</div><div class="pstat-val" id="csbar-v1" style="color:#06D6E0">0</div></div>
<div class="pstat"><div class="pstat-label">В зоне</div><div class="pstat-val" id="csbar-v1" style="color:var(--cyan)">0</div></div>
<div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="csbar-v3" style="color:#7BF5A4">—</div></div>
<div class="pstat"><div class="pstat-label">Уравнение</div><div class="pstat-val" id="csbar-v4" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">Сокр. ионное</div><div class="pstat-val" id="csbar-v6" style="color:#9BD4FF">—</div></div>
@@ -2005,10 +2005,10 @@
</div>
<div class="proj-stats-bar" id="cdbar">
<div class="pstat"><div class="pstat-label">Фаза</div><div class="pstat-val" id="cdbar-v1" style="color:#7BF5A4">—</div></div>
<div class="pstat"><div class="pstat-label">Хромосомы</div><div class="pstat-val" id="cdbar-v2" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">Хромосомы</div><div class="pstat-val" id="cdbar-v2" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">ДНК</div><div class="pstat-val" id="cdbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Шаг</div><div class="pstat-val" id="cdbar-v4" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="cdbar-v5" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="cdbar-v5" style="color:var(--violet)">—</div></div>
</div>
</div>
@@ -2041,9 +2041,9 @@
<div class="proj-stats-bar" id="psbar">
<div class="pstat"><div class="pstat-label">АТФ/с</div><div class="pstat-val" id="psbar-v1" style="color:#FFD166">0</div></div>
<div class="pstat"><div class="pstat-label">O₂ выд.</div><div class="pstat-val" id="psbar-v2" style="color:#7BF5A4">0</div></div>
<div class="pstat"><div class="pstat-label">CO₂ усв.</div><div class="pstat-val" id="psbar-v3" style="color:#06D6E0">0</div></div>
<div class="pstat"><div class="pstat-label">CO₂ усв.</div><div class="pstat-val" id="psbar-v3" style="color:var(--cyan)">0</div></div>
<div class="pstat"><div class="pstat-label">КПД</div><div class="pstat-val" id="psbar-v4" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="psbar-v5" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="psbar-v5" style="color:var(--violet)">—</div></div>
</div>
</div>
@@ -2064,16 +2064,16 @@
<div class="gp-section-title" style="margin-bottom:6px">Планеты</div>
<div style="display:flex;flex-direction:column;gap:5px;margin-bottom:14px">
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> Земля</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">9.81 м/с²</span>
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> Земля</span><span style="font-size:.72rem;color:var(--cyan);font-weight:700">9.81 м/с²</span>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Луна</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">1.62 м/с²</span>
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Луна</span><span style="font-size:.72rem;color:var(--cyan);font-weight:700">1.62 м/с²</span>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Марс</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">3.71 м/с²</span>
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Марс</span><span style="font-size:.72rem;color:var(--cyan);font-weight:700">3.71 м/с²</span>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Юпитер</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">24.8 м/с²</span>
<span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Юпитер</span><span style="font-size:.72rem;color:var(--cyan);font-weight:700">24.8 м/с²</span>
</div>
</div>
<div class="gp-section-title" style="margin-bottom:6px">Птицы</div>
@@ -2098,11 +2098,11 @@
</div>
</div>
<div class="proj-stats-bar" id="abbar">
<div class="pstat"><div class="pstat-label">Уровень</div><div class="pstat-val" id="abbar-v1" style="color:#06D6E0">1</div></div>
<div class="pstat"><div class="pstat-label">Уровень</div><div class="pstat-val" id="abbar-v1" style="color:var(--cyan)">1</div></div>
<div class="pstat"><div class="pstat-label">Птиц</div><div class="pstat-val" id="abbar-v2" style="color:#ffd166">3</div></div>
<div class="pstat"><div class="pstat-label">Свиней</div><div class="pstat-val" id="abbar-v3" style="color:#7bf5a4">1</div></div>
<div class="pstat"><div class="pstat-label">Очки</div><div class="pstat-val" id="abbar-v4" style="color:#ef476f">0</div></div>
<div class="pstat"><div class="pstat-label">Планета</div><div class="pstat-val" id="abbar-v5" style="color:#9b5de5">Земля <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div></div>
<div class="pstat"><div class="pstat-label">Планета</div><div class="pstat-val" id="abbar-v5" style="color:var(--violet)">Земля <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div></div>
</div>
</div>
@@ -2112,15 +2112,15 @@
<div class="proj-panel" style="width:220px;gap:0">
<div class="gp-section-title" style="margin-bottom:8px">Коэффициенты</div>
<div class="proj-slider-row" style="margin-bottom:10px">
<label style="font-size:.78rem;color:#ccc;width:60px">a = <span id="quad-a-val" style="color:#9B5DE5;font-weight:700">1</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">a = <span id="quad-a-val" style="color:var(--violet);font-weight:700">1</span></label>
<input type="range" id="sl-quad-a" min="-5" max="5" step="0.1" value="1" oninput="quadParam('a',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:10px">
<label style="font-size:.78rem;color:#ccc;width:60px">b = <span id="quad-b-val" style="color:#06D6E0;font-weight:700">0</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">b = <span id="quad-b-val" style="color:var(--cyan);font-weight:700">0</span></label>
<input type="range" id="sl-quad-b" min="-10" max="10" step="0.1" value="0" oninput="quadParam('b',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:10px">
<label style="font-size:.78rem;color:#ccc;width:60px">c = <span id="quad-c-val" style="color:#F15BB5;font-weight:700">-1</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">c = <span id="quad-c-val" style="color:var(--pink);font-weight:700">-1</span></label>
<input type="range" id="sl-quad-c" min="-10" max="10" step="0.1" value="-1" oninput="quadParam('c',this.value)" style="flex:1">
</div>
<div style="margin-top:8px"></div>
@@ -2142,8 +2142,8 @@
<div class="proj-stats-bar" id="quadbar">
<div class="pstat"><div class="pstat-label">Дискриминант</div><div class="pstat-val" id="qbar-v1" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Корни</div><div class="pstat-val" id="qbar-v2" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">Вершина</div><div class="pstat-val" id="qbar-v3" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">Уравнение</div><div class="pstat-val" id="qbar-v4" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Вершина</div><div class="pstat-val" id="qbar-v3" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">Уравнение</div><div class="pstat-val" id="qbar-v4" style="color:var(--violet)">—</div></div>
</div>
</div>
@@ -2153,11 +2153,11 @@
<div class="proj-panel" style="width:220px;gap:0">
<div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
<div class="proj-slider-row" style="margin-bottom:10px">
<label style="font-size:.78rem;color:#ccc;width:60px">μ = <span id="nd-mu-val" style="color:#06D6E0;font-weight:700">0</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">μ = <span id="nd-mu-val" style="color:var(--cyan);font-weight:700">0</span></label>
<input type="range" id="sl-nd-mu" min="-5" max="5" step="0.1" value="0" oninput="ndParam('mu',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:10px">
<label style="font-size:.78rem;color:#ccc;width:60px">σ = <span id="nd-sigma-val" style="color:#9B5DE5;font-weight:700">1</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">σ = <span id="nd-sigma-val" style="color:var(--violet);font-weight:700">1</span></label>
<input type="range" id="sl-nd-sigma" min="0.2" max="4" step="0.1" value="1" oninput="ndParam('sigma',this.value)" style="flex:1">
</div>
<div style="margin-top:8px"></div>
@@ -2183,8 +2183,8 @@
</div>
</div>
<div class="proj-stats-bar" id="ndbar">
<div class="pstat"><div class="pstat-label">μ</div><div class="pstat-val" id="ndbar-v1" style="color:#06D6E0">0</div></div>
<div class="pstat"><div class="pstat-label">σ</div><div class="pstat-val" id="ndbar-v2" style="color:#9B5DE5">1</div></div>
<div class="pstat"><div class="pstat-label">μ</div><div class="pstat-val" id="ndbar-v1" style="color:var(--cyan)">0</div></div>
<div class="pstat"><div class="pstat-label">σ</div><div class="pstat-val" id="ndbar-v2" style="color:var(--violet)">1</div></div>
<div class="pstat"><div class="pstat-label">Пик f(μ)</div><div class="pstat-val" id="ndbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Область</div><div class="pstat-val" id="ndbar-v4" style="color:#7BF5A4">—</div></div>
</div>
@@ -2206,11 +2206,11 @@
</div>
<div class="gp-section-title" style="margin-bottom:6px">y = a · f(k·x + b) + c</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">a = <span id="gt-a-val" style="color:#9B5DE5;font-weight:700">1</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">a = <span id="gt-a-val" style="color:var(--violet);font-weight:700">1</span></label>
<input type="range" id="sl-gt-a" min="-3" max="3" step="0.1" value="1" oninput="gtParam('a',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">k = <span id="gt-k-val" style="color:#06D6E0;font-weight:700">1</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">k = <span id="gt-k-val" style="color:var(--cyan);font-weight:700">1</span></label>
<input type="range" id="sl-gt-k" min="-3" max="3" step="0.1" value="1" oninput="gtParam('k',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
@@ -2239,9 +2239,9 @@
</div>
</div>
<div class="proj-stats-bar" id="gtbar">
<div class="pstat"><div class="pstat-label">f(x)</div><div class="pstat-val" id="gtbar-v1" style="color:#06D6E0">sin(x)</div></div>
<div class="pstat"><div class="pstat-label">a</div><div class="pstat-val" id="gtbar-v2" style="color:#9B5DE5">1</div></div>
<div class="pstat"><div class="pstat-label">k</div><div class="pstat-val" id="gtbar-v3" style="color:#06D6E0">1</div></div>
<div class="pstat"><div class="pstat-label">f(x)</div><div class="pstat-val" id="gtbar-v1" style="color:var(--cyan)">sin(x)</div></div>
<div class="pstat"><div class="pstat-label">a</div><div class="pstat-val" id="gtbar-v2" style="color:var(--violet)">1</div></div>
<div class="pstat"><div class="pstat-label">k</div><div class="pstat-val" id="gtbar-v3" style="color:var(--cyan)">1</div></div>
<div class="pstat"><div class="pstat-label">b</div><div class="pstat-val" id="gtbar-v4" style="color:#FFD166">0</div></div>
<div class="pstat"><div class="pstat-label">c</div><div class="pstat-val" id="gtbar-v5" style="color:#EF476F">0</div></div>
</div>
@@ -2253,11 +2253,11 @@
<div class="proj-panel" style="width:220px;gap:0">
<div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">θ = <span id="pend-theta-val" style="color:#9B5DE5;font-weight:700">45</span>°</label>
<label style="font-size:.78rem;color:#ccc;width:55px">θ = <span id="pend-theta-val" style="color:var(--violet);font-weight:700">45</span>°</label>
<input type="range" id="sl-pend-theta" min="5" max="170" step="1" value="45" oninput="pendParam('theta',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">L = <span id="pend-L-val" style="color:#06D6E0;font-weight:700">200</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">L = <span id="pend-L-val" style="color:var(--cyan);font-weight:700">200</span></label>
<input type="range" id="sl-pend-L" min="60" max="300" step="5" value="200" oninput="pendParam('L',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
@@ -2283,8 +2283,8 @@
</div>
</div>
<div class="proj-stats-bar" id="pendbar">
<div class="pstat"><div class="pstat-label">Угол</div><div class="pstat-val" id="pendbar-v1" style="color:#9B5DE5">45°</div></div>
<div class="pstat"><div class="pstat-label">ω</div><div class="pstat-val" id="pendbar-v2" style="color:#06D6E0">0</div></div>
<div class="pstat"><div class="pstat-label">Угол</div><div class="pstat-val" id="pendbar-v1" style="color:var(--violet)">45°</div></div>
<div class="pstat"><div class="pstat-label">ω</div><div class="pstat-val" id="pendbar-v2" style="color:var(--cyan)">0</div></div>
<div class="pstat"><div class="pstat-label">Период T</div><div class="pstat-val" id="pendbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Энергия</div><div class="pstat-val" id="pendbar-v4" style="color:#EF476F">—</div></div>
</div>
@@ -2324,8 +2324,8 @@
<div class="proj-stats-bar" id="eqbar">
<div class="pstat"><div class="pstat-label">Keq</div><div class="pstat-val" id="eqbar-v1" style="color:#7BF5A4">—</div></div>
<div class="pstat"><div class="pstat-label">Q</div><div class="pstat-val" id="eqbar-v2" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Направление</div><div class="pstat-val" id="eqbar-v3" style="color:#06D6E0">⇌</div></div>
<div class="pstat"><div class="pstat-label">A|B|C|D</div><div class="pstat-val" id="eqbar-v4" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Направление</div><div class="pstat-val" id="eqbar-v3" style="color:var(--cyan)">⇌</div></div>
<div class="pstat"><div class="pstat-label">A|B|C|D</div><div class="pstat-val" id="eqbar-v4" style="color:var(--violet)">—</div></div>
</div>
</div>
@@ -2335,11 +2335,11 @@
<div class="proj-panel" style="width:220px;gap:0">
<div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">f = <span id="lens-f-val" style="color:#06D6E0;font-weight:700">100</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">f = <span id="lens-f-val" style="color:var(--cyan);font-weight:700">100</span></label>
<input type="range" id="sl-lens-f" min="-200" max="200" step="5" value="100" oninput="lensParam('f',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">d = <span id="lens-d-val" style="color:#9B5DE5;font-weight:700">200</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">d = <span id="lens-d-val" style="color:var(--violet);font-weight:700">200</span></label>
<input type="range" id="sl-lens-d" min="30" max="400" step="5" value="200" oninput="lensParam('d',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
@@ -2361,10 +2361,10 @@
</div>
</div>
<div class="proj-stats-bar" id="lensbar">
<div class="pstat"><div class="pstat-label">f</div><div class="pstat-val" id="lensbar-v1" style="color:#06D6E0">100</div></div>
<div class="pstat"><div class="pstat-label">f</div><div class="pstat-val" id="lensbar-v1" style="color:var(--cyan)">100</div></div>
<div class="pstat"><div class="pstat-label">d'</div><div class="pstat-val" id="lensbar-v2" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">M</div><div class="pstat-val" id="lensbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="lensbar-v4" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="lensbar-v4" style="color:var(--violet)">—</div></div>
</div>
</div>
@@ -2380,11 +2380,11 @@
</div>
<div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
<div class="proj-slider-row" style="margin-bottom:8px" id="mirror-f-row">
<label style="font-size:.78rem;color:#ccc;width:60px">f = <span id="mirror-f-val" style="color:#06D6E0;font-weight:700">120</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">f = <span id="mirror-f-val" style="color:var(--cyan);font-weight:700">120</span></label>
<input type="range" id="sl-mirror-f" min="30" max="300" step="5" value="120" oninput="mirrorParam('f',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:60px">d = <span id="mirror-d-val" style="color:#9B5DE5;font-weight:700">240</span></label>
<label style="font-size:.78rem;color:#ccc;width:60px">d = <span id="mirror-d-val" style="color:var(--violet);font-weight:700">240</span></label>
<input type="range" id="sl-mirror-d" min="30" max="500" step="5" value="240" oninput="mirrorParam('d',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
@@ -2392,7 +2392,7 @@
<input type="range" id="sl-mirror-h" min="20" max="80" step="2" value="60" oninput="mirrorParam('h',this.value)" style="flex:1">
</div>
<div style="display:flex;gap:6px;margin-top:8px;margin-bottom:8px;align-items:center">
<button id="mirror-play-btn" onclick="mirrorTogglePlay(this)" style="flex:1;padding:6px 0;border-radius:8px;border:none;background:linear-gradient(135deg,#06D6E0,#9B5DE5);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer">▶ Анимация</button>
<button id="mirror-play-btn" onclick="mirrorTogglePlay(this)" style="flex:1;padding:6px 0;border-radius:8px;border:none;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#fff;font-size:.78rem;font-weight:700;cursor:pointer">▶ Анимация</button>
<div style="display:flex;flex-direction:column;align-items:center;gap:2px">
<span style="font-size:.62rem;color:#888">скорость</span>
<select id="mirror-speed-sel" onchange="mirrorSetSpeed(this.value)" style="background:#1a1a2e;color:#ccc;border:1px solid #333;border-radius:4px;font-size:.7rem;padding:2px 4px">
@@ -2432,11 +2432,11 @@
</div>
</div>
<div class="proj-stats-bar" id="mirrorbar">
<div class="pstat"><div class="pstat-label">f</div><div class="pstat-val" id="mirrorbar-v1" style="color:#06D6E0">120</div></div>
<div class="pstat"><div class="pstat-label">d</div><div class="pstat-val" id="mirrorbar-v5" style="color:#9B5DE5">240</div></div>
<div class="pstat"><div class="pstat-label">f</div><div class="pstat-val" id="mirrorbar-v1" style="color:var(--cyan)">120</div></div>
<div class="pstat"><div class="pstat-label">d</div><div class="pstat-val" id="mirrorbar-v5" style="color:var(--violet)">240</div></div>
<div class="pstat"><div class="pstat-label">d'</div><div class="pstat-val" id="mirrorbar-v2" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">M</div><div class="pstat-val" id="mirrorbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Тип изобр.</div><div class="pstat-val" id="mirrorbar-v4" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Тип изобр.</div><div class="pstat-val" id="mirrorbar-v4" style="color:var(--violet)">—</div></div>
</div>
</div>
@@ -2458,11 +2458,11 @@
</div>
<div class="gp-section-title" style="margin-bottom:8px">Начальное состояние</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:70px">P₁ = <span id="iso-p1-val" style="color:#9B5DE5;font-weight:700">3.0</span></label>
<label style="font-size:.78rem;color:#ccc;width:70px">P₁ = <span id="iso-p1-val" style="color:var(--violet);font-weight:700">3.0</span></label>
<input type="range" id="sl-iso-p1" min="0.5" max="8" step="0.1" value="3.0" oninput="isoParam('P1',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:70px">V₁ = <span id="iso-v1-val" style="color:#9B5DE5;font-weight:700">10</span></label>
<label style="font-size:.78rem;color:#ccc;width:70px">V₁ = <span id="iso-v1-val" style="color:var(--violet);font-weight:700">10</span></label>
<input type="range" id="sl-iso-v1" min="2" max="28" step="1" value="10" oninput="isoParam('V1',this.value)" style="flex:1">
</div>
<div class="gp-section-title" style="margin-bottom:8px">Конечное состояние</div>
@@ -2485,8 +2485,8 @@
</div>
</div>
<div class="proj-stats-bar" id="isobar">
<div class="pstat"><div class="pstat-label">T₁, K</div><div class="pstat-val" id="isobar-t1" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">T₂, K</div><div class="pstat-val" id="isobar-t2" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">T₁, K</div><div class="pstat-val" id="isobar-t1" style="color:var(--violet)">—</div></div>
<div class="pstat"><div class="pstat-label">T₂, K</div><div class="pstat-val" id="isobar-t2" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">W, Дж</div><div class="pstat-val" id="isobar-w" style="color:#7BF5A4">—</div></div>
<div class="pstat"><div class="pstat-label">Q, Дж</div><div class="pstat-val" id="isobar-q" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">ΔU, Дж</div><div class="pstat-val" id="isobar-du" style="color:#EF476F">—</div></div>
@@ -2503,11 +2503,11 @@
<input type="range" id="sl-titr-ac" min="0.05" max="1" step="0.05" value="0.1" oninput="titrParam('acidConc',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:75px">C(осн) <span id="titr-bc-val" style="color:#9B5DE5;font-weight:700">0.10</span> М</label>
<label style="font-size:.78rem;color:#ccc;width:75px">C(осн) <span id="titr-bc-val" style="color:var(--violet);font-weight:700">0.10</span> М</label>
<input type="range" id="sl-titr-bc" min="0.05" max="1" step="0.05" value="0.1" oninput="titrParam('baseConc',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:75px">V(кисл) <span id="titr-vol-val" style="color:#06D6E0;font-weight:700">50</span> мл</label>
<label style="font-size:.78rem;color:#ccc;width:75px">V(кисл) <span id="titr-vol-val" style="color:var(--cyan);font-weight:700">50</span> мл</label>
<input type="range" id="sl-titr-vol" min="25" max="100" step="5" value="50" oninput="titrParam('acidVol',this.value)" style="flex:1">
</div>
<div style="margin-top:4px;margin-bottom:8px">
@@ -2532,8 +2532,8 @@
</div>
<div class="proj-stats-bar" id="titrbar">
<div class="pstat"><div class="pstat-label">pH</div><div class="pstat-val" id="titrbar-v1" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">Добавлено</div><div class="pstat-val" id="titrbar-v2" style="color:#9B5DE5">0.0 мл</div></div>
<div class="pstat"><div class="pstat-label">Точка экв.</div><div class="pstat-val" id="titrbar-v3" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">Добавлено</div><div class="pstat-val" id="titrbar-v2" style="color:var(--violet)">0.0 мл</div></div>
<div class="pstat"><div class="pstat-label">Точка экв.</div><div class="pstat-val" id="titrbar-v3" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="titrbar-v4" style="color:#FFD166">—</div></div>
</div>
</div>
@@ -2544,11 +2544,11 @@
<div class="proj-panel" style="width:220px;gap:0">
<div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">n₁ = <span id="refr-n1-val" style="color:#9B5DE5;font-weight:700">1.00</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">n₁ = <span id="refr-n1-val" style="color:var(--violet);font-weight:700">1.00</span></label>
<input type="range" id="sl-refr-n1" min="1" max="2.5" step="0.01" value="1" oninput="refrParam('n1',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
<label style="font-size:.78rem;color:#ccc;width:55px">n₂ = <span id="refr-n2-val" style="color:#06D6E0;font-weight:700">1.50</span></label>
<label style="font-size:.78rem;color:#ccc;width:55px">n₂ = <span id="refr-n2-val" style="color:var(--cyan);font-weight:700">1.50</span></label>
<input type="range" id="sl-refr-n2" min="1" max="2.5" step="0.01" value="1.5" oninput="refrParam('n2',this.value)" style="flex:1">
</div>
<div class="proj-slider-row" style="margin-bottom:8px">
@@ -2570,8 +2570,8 @@
</div>
</div>
<div class="proj-stats-bar" id="refrbar">
<div class="pstat"><div class="pstat-label">θ₁</div><div class="pstat-val" id="refrbar-v1" style="color:#9B5DE5">30°</div></div>
<div class="pstat"><div class="pstat-label">θ₂</div><div class="pstat-val" id="refrbar-v2" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">θ₁</div><div class="pstat-val" id="refrbar-v1" style="color:var(--violet)">30°</div></div>
<div class="pstat"><div class="pstat-label">θ₂</div><div class="pstat-val" id="refrbar-v2" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">Крит. угол</div><div class="pstat-val" id="refrbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">ПВО</div><div class="pstat-val" id="refrbar-v4" style="color:#EF476F">Нет</div></div>
</div>
@@ -2601,9 +2601,9 @@
</div>
</div>
<div class="proj-stats-bar" id="probbar">
<div class="pstat"><div class="pstat-label">Бросков</div><div class="pstat-val" id="probbar-v1" style="color:#9B5DE5">0</div></div>
<div class="pstat"><div class="pstat-label">Бросков</div><div class="pstat-val" id="probbar-v1" style="color:var(--violet)">0</div></div>
<div class="pstat"><div class="pstat-label">Макс. отклон.</div><div class="pstat-val" id="probbar-v2" style="color:#EF476F">—</div></div>
<div class="pstat"><div class="pstat-label">χ²</div><div class="pstat-val" id="probbar-v3" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">χ²</div><div class="pstat-val" id="probbar-v3" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="probbar-v4" style="color:#FFD166">Монета</div></div>
</div>
</div>
@@ -2636,8 +2636,8 @@
</div>
</div>
<div class="proj-stats-bar" id="bohrbar">
<div class="pstat"><div class="pstat-label">Уровень n</div><div class="pstat-val" id="bohrbar-v1" style="color:#9B5DE5">1</div></div>
<div class="pstat"><div class="pstat-label">E (эВ)</div><div class="pstat-val" id="bohrbar-v2" style="color:#06D6E0">-13.6</div></div>
<div class="pstat"><div class="pstat-label">Уровень n</div><div class="pstat-val" id="bohrbar-v1" style="color:var(--violet)">1</div></div>
<div class="pstat"><div class="pstat-label">E (эВ)</div><div class="pstat-val" id="bohrbar-v2" style="color:var(--cyan)">-13.6</div></div>
<div class="pstat"><div class="pstat-label">λ (нм)</div><div class="pstat-val" id="bohrbar-v3" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Серия</div><div class="pstat-val" id="bohrbar-v4" style="color:#EF476F">—</div></div>
</div>
@@ -2668,8 +2668,8 @@
</div>
<div class="proj-stats-bar" id="elecbar">
<div class="pstat"><div class="pstat-label">I (А)</div><div class="pstat-val" id="elecbar-v1" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">Масса</div><div class="pstat-val" id="elecbar-v2" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">Газ (мл)</div><div class="pstat-val" id="elecbar-v3" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">Масса</div><div class="pstat-val" id="elecbar-v2" style="color:var(--violet)">—</div></div>
<div class="pstat"><div class="pstat-label">Газ (мл)</div><div class="pstat-val" id="elecbar-v3" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">Время</div><div class="pstat-val" id="elecbar-v4" style="color:#EF476F">0 с</div></div>
</div>
</div>
@@ -2693,21 +2693,21 @@
<div class="param-block">
<div class="param-header">
<span class="param-name">Амплитуда A₁</span>
<span class="param-val" id="waves-A1-val" style="color:#9B5DE5">50</span>
<span class="param-val" id="waves-A1-val" style="color:var(--violet)">50</span>
</div>
<input type="range" id="sl-waves-A1" class="param-slider" min="10" max="90" step="2" value="50" oninput="wavesParam('A1',this.value)">
</div>
<div class="param-block">
<div class="param-header">
<span class="param-name">Частота f₁</span>
<span class="param-val" id="waves-f1-val" style="color:#9B5DE5">1.0 Гц</span>
<span class="param-val" id="waves-f1-val" style="color:var(--violet)">1.0 Гц</span>
</div>
<input type="range" id="sl-waves-f1" class="param-slider" min="0.3" max="4" step="0.1" value="1.0" oninput="wavesParam('f1',this.value)">
</div>
<div class="param-block">
<div class="param-header">
<span class="param-name">Фаза φ₁</span>
<span class="param-val" id="waves-phi1-val" style="color:#9B5DE5">0</span>
<span class="param-val" id="waves-phi1-val" style="color:var(--violet)">0</span>
</div>
<input type="range" id="sl-waves-phi1" class="param-slider" min="0" max="6.28" step="0.1" value="0" oninput="wavesParam('phi1',this.value)">
</div>
@@ -2718,21 +2718,21 @@
<div class="param-block">
<div class="param-header">
<span class="param-name">Амплитуда A₂</span>
<span class="param-val" id="waves-A2-val" style="color:#06D6E0">40</span>
<span class="param-val" id="waves-A2-val" style="color:var(--cyan)">40</span>
</div>
<input type="range" id="sl-waves-A2" class="param-slider" min="10" max="90" step="2" value="40" oninput="wavesParam('A2',this.value)">
</div>
<div class="param-block">
<div class="param-header">
<span class="param-name">Частота f₂</span>
<span class="param-val" id="waves-f2-val" style="color:#06D6E0">1.5 Гц</span>
<span class="param-val" id="waves-f2-val" style="color:var(--cyan)">1.5 Гц</span>
</div>
<input type="range" id="sl-waves-f2" class="param-slider" min="0.3" max="4" step="0.1" value="1.5" oninput="wavesParam('f2',this.value)">
</div>
<div class="param-block">
<div class="param-header">
<span class="param-name">Фаза φ₂</span>
<span class="param-val" id="waves-phi2-val" style="color:#06D6E0">0</span>
<span class="param-val" id="waves-phi2-val" style="color:var(--cyan)">0</span>
</div>
<input type="range" id="sl-waves-phi2" class="param-slider" min="0" max="6.28" step="0.1" value="0" oninput="wavesParam('phi2',this.value)">
</div>
@@ -2775,10 +2775,10 @@
</div>
</div>
<div class="proj-stats-bar" id="wavesbar">
<div class="pstat"><div class="pstat-label">T (с)</div><div class="pstat-val" id="wavesbar-T" style="color:#9B5DE5">—</div></div>
<div class="pstat"><div class="pstat-label">λ (px)</div><div class="pstat-val" id="wavesbar-lam" style="color:#06D6E0">—</div></div>
<div class="pstat"><div class="pstat-label">T (с)</div><div class="pstat-val" id="wavesbar-T" style="color:var(--violet)">—</div></div>
<div class="pstat"><div class="pstat-label">λ (px)</div><div class="pstat-val" id="wavesbar-lam" style="color:var(--cyan)">—</div></div>
<div class="pstat"><div class="pstat-label">v (px/с)</div><div class="pstat-val" id="wavesbar-v" style="color:#FFD166">—</div></div>
<div class="pstat"><div class="pstat-label">f (Гц)</div><div class="pstat-val" id="wavesbar-f" style="color:#F15BB5">—</div></div>
<div class="pstat"><div class="pstat-label">f (Гц)</div><div class="pstat-val" id="wavesbar-f" style="color:var(--pink)">—</div></div>
</div>
</div>
@@ -2934,7 +2934,7 @@
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="9" x2="4" y2="15"/><line x1="20" y1="9" x2="20" y2="15"/></svg>Длины рёбер</span>
<div class="st-toggle" id="stg-edgelengths"></div>
</div>
<div id="sect-area-display" style="font-size:0.7rem;color:#06D6E0;margin-top:2px;display:none"></div>
<div id="sect-area-display" style="font-size:0.7rem;color:var(--cyan);margin-top:2px;display:none"></div>
<div id="sphere-radius-info" style="font-size:0.7rem;color:#F59E0B;margin-top:2px;display:none"></div>
<!-- ── Сечение ── -->
@@ -3110,9 +3110,9 @@
<div id="hydro-panel-theta" style="margin-bottom:10px;display:none">
<div style="display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:4px">
<span>Краевой угол θ</span>
<span id="hydro-theta-lbl" style="color:#9B5DE5">20°</span>
<span id="hydro-theta-lbl" style="color:var(--violet)">20°</span>
</div>
<input type="range" min="0" max="160" value="20" step="5" style="width:100%;accent-color:#9B5DE5" oninput="hydroSim&&hydroSim.setContactAngle(+this.value);document.getElementById('hydro-theta-lbl').textContent=this.value+'\u00B0';document.getElementById('hydro-theta-val').textContent=this.value+'\u00B0';document.querySelector('#hydro-surf-ctrl input[type=range]').value=this.value">
<input type="range" min="0" max="160" value="20" step="5" style="width:100%;accent-color:var(--violet)" oninput="hydroSim&&hydroSim.setContactAngle(+this.value);document.getElementById('hydro-theta-lbl').textContent=this.value+'\u00B0';document.getElementById('hydro-theta-val').textContent=this.value+'\u00B0';document.querySelector('#hydro-surf-ctrl input[type=range]').value=this.value">
<div style="display:flex;justify-content:space-between;font-size:.65rem;color:rgba(255,255,255,.25);margin-top:2px">
<span>Смачивание</span><span>Несмачивание</span>
</div>