refactor(labs): полная переработка симуляции Электролиз
electrolysis.js (556 → 1072 строк): - База электролитов с 3 до 6: NaCl/CuSO4/H2SO4 + KI/ZnSO4/AgNO3 - Стеклянный сосуд с бликами, волнующаяся поверхность раствора (sin-анимация) - Ионы со стробоскопным шлейфом (4 точки) и радиальным свечением - Пузырьки: растут при подъёме + pop-эффект на поверхности (LabFX) - Осадок: градиент по металлу (Cu медь / Zn серый / Ag серебро) + метка - Электроды с bevel и polarity badge (− / +) - Внешняя цепь: батарея + провода + анимированные жёлтые электроны - Закон Фарадея: панель с живой подстановкой U/I/t/Q/m/V в формулу - Графики m(t)/V(t): мини-холст 200×75 с двумя трендами - info() добавлены Q (Кл) и n_электронов lab.html (sim-electrolysis): - Панель 220 → 280px, класс elec-panel-modern - elec-quick-bar: Старт/Сброс всегда видны - 4 collapsible-секции elec-acc: Электролит / Скорость / Отображение / Уравнения - Stats bar 4 → 6: добавлены Q и e⁻ lab.css: стили .elec-panel-modern, .elec-quick-bar, .elec-acc по паттерну geo-acc/dyn-acc
This commit is contained in:
Maxim Dolgolyov
@@ -2206,3 +2206,90 @@ canvas[data-draggable]:active { cursor: grabbing; }
|
||||
border-color: #06D6E0 !important;
|
||||
box-shadow: 0 0 8px rgba(6,214,224,0.3);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
ELECTROLYSIS PANEL — modern layout
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.elec-panel-modern {
|
||||
font-size: .82rem;
|
||||
padding: 8px 10px 12px;
|
||||
}
|
||||
.elec-panel-modern .param-name { font-size: .82rem; }
|
||||
.elec-panel-modern .param-val { font-size: .85rem; }
|
||||
|
||||
/* Quick bar — play/reset row */
|
||||
.elec-quick-bar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.elec-quick-bar .mag-mode-btn {
|
||||
flex: 1;
|
||||
font-size: .82rem;
|
||||
padding: 8px 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Accordion sections */
|
||||
.elec-acc {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.elec-acc > summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 9px 12px 9px 30px;
|
||||
font-family: 'Unbounded', sans-serif;
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
transition: background .15s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.elec-acc[open] > summary { border-radius: 10px 10px 0 0; }
|
||||
.elec-acc > summary:hover { background: rgba(255,255,255,0.04); }
|
||||
.elec-acc > summary::-webkit-details-marker { display: none; }
|
||||
.elec-acc > summary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid currentColor;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
transform: translateY(-50%);
|
||||
transition: transform .18s;
|
||||
opacity: .65;
|
||||
}
|
||||
.elec-acc[open] > summary::before {
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
.elec-acc-body {
|
||||
padding: 10px 12px 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.elec-acc-body .mag-mode-btn {
|
||||
font-size: .80rem;
|
||||
padding: 7px 4px;
|
||||
}
|
||||
.elec-acc-body .mag-mode-btn.active {
|
||||
background: rgba(155,93,229,0.18);
|
||||
color: var(--violet);
|
||||
border: 1px solid rgba(155,93,229,0.45);
|
||||
}
|
||||
|
||||
/* Graph active button state */
|
||||
#btn-elec-graphs.active {
|
||||
background: rgba(6,214,224,0.22) !important;
|
||||
border-color: #06D6E0 !important;
|
||||
box-shadow: 0 0 8px rgba(6,214,224,0.3);
|
||||
}
|
||||
|
||||
+723
-281
File diff suppressed because it is too large
Load Diff
+84
-12
@@ -3557,21 +3557,91 @@
|
||||
<!-- ── ELECTROLYSIS sim body ── -->
|
||||
<div id="sim-electrolysis" class="sim-proj-wrap" style="display:none">
|
||||
<div class="sim-body-wrap">
|
||||
<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">U = <span id="elec-V-val" style="color:#FFD166;font-weight:700">6</span> В</label>
|
||||
<input type="range" id="sl-elec-V" min="1" max="12" step="0.5" value="6" oninput="elecParam('voltage',this.value)" style="flex:1">
|
||||
<div class="proj-panel elec-panel-modern" style="width:280px;gap:0;overflow-y:auto">
|
||||
|
||||
<!-- Квик-бар -->
|
||||
<div class="elec-quick-bar">
|
||||
<button class="mag-mode-btn" onclick="elecSim?.playing ? elecSim.pause() : elecSim?.play(); this.textContent=elecSim?.playing?'Пауза':'Старт'">Старт</button>
|
||||
<button class="mag-mode-btn" onclick="elecSim?.reset(); document.querySelector('.elec-quick-bar .mag-mode-btn').textContent='Старт'">Сброс</button>
|
||||
</div>
|
||||
<div style="margin-top:4px;margin-bottom:8px">
|
||||
<div class="gp-section-title" style="margin-bottom:4px">Электролит</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:4px">
|
||||
<button class="preset-btn elec-type-btn active" onclick="elecPreset('nacl',this)">NaCl</button>
|
||||
<button class="preset-btn elec-type-btn" onclick="elecPreset('cuso4',this)">CuSO₄</button>
|
||||
<button class="preset-btn elec-type-btn" onclick="elecPreset('h2so4',this)">H₂SO₄</button>
|
||||
|
||||
<!-- Напряжение — всегда видно -->
|
||||
<div class="param-block" style="margin:8px 0 4px">
|
||||
<div class="param-header">
|
||||
<span class="param-name">U (В)</span>
|
||||
<span class="param-val" id="elec-V-val" style="color:#FFD166;font-weight:700">6.0</span>
|
||||
</div>
|
||||
<input type="range" id="sl-elec-V" class="param-slider" min="1" max="12" step="0.5" value="6" oninput="elecParam('voltage',this.value)">
|
||||
</div>
|
||||
<div class="pp-hint">Ионы движутся к электродам, на электродах — газ и осадок</div>
|
||||
|
||||
<!-- Электролиты -->
|
||||
<details class="elec-acc" open>
|
||||
<summary>Электролит</summary>
|
||||
<div class="elec-acc-body">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px">
|
||||
<button class="mag-mode-btn elec-type-btn active" onclick="elecPreset('nacl',this)">NaCl</button>
|
||||
<button class="mag-mode-btn elec-type-btn" onclick="elecPreset('cuso4',this)">CuSO₄</button>
|
||||
<button class="mag-mode-btn elec-type-btn" onclick="elecPreset('h2so4',this)">H₂SO₄</button>
|
||||
<button class="mag-mode-btn elec-type-btn" onclick="elecPreset('ki',this)">KI</button>
|
||||
<button class="mag-mode-btn elec-type-btn" onclick="elecPreset('znso4',this)">ZnSO₄</button>
|
||||
<button class="mag-mode-btn elec-type-btn" onclick="elecPreset('agno3',this)">AgNO₃</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Скорость -->
|
||||
<details class="elec-acc">
|
||||
<summary>Скорость</summary>
|
||||
<div class="elec-acc-body">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px">
|
||||
<button class="mag-mode-btn elec-speed-btn" onclick="elecSpeed(0.5,this)">×0.5</button>
|
||||
<button class="mag-mode-btn elec-speed-btn active" onclick="elecSpeed(1,this)">×1</button>
|
||||
<button class="mag-mode-btn elec-speed-btn" onclick="elecSpeed(2,this)">×2</button>
|
||||
<button class="mag-mode-btn elec-speed-btn" onclick="elecSpeed(5,this)">×5</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Отображение -->
|
||||
<details class="elec-acc">
|
||||
<summary>Отображение</summary>
|
||||
<div class="elec-acc-body">
|
||||
<div class="dyn-checks">
|
||||
<label>
|
||||
<input type="checkbox" id="elec-chk-electrons" checked onchange="elecToggle('electrons',this.checked)">
|
||||
Электроны в цепи
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="elec-chk-ions" checked onchange="elecToggle('ions',this.checked)">
|
||||
Ионы
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="elec-chk-bubbles" checked onchange="elecToggle('bubbles',this.checked)">
|
||||
Пузыри
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="elec-chk-graphs" onchange="elecToggle('graphs',this.checked)">
|
||||
Графики m(t) / V(t)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Уравнения -->
|
||||
<details class="elec-acc" open>
|
||||
<summary>Уравнения</summary>
|
||||
<div class="elec-acc-body">
|
||||
<div style="margin-bottom:5px">
|
||||
<div style="font-size:.72rem;color:rgba(6,214,224,0.7);margin-bottom:3px">Катод (−):</div>
|
||||
<div id="elec-eq-cathode" style="font-size:.80rem;color:rgba(255,255,255,0.88);line-height:1.4">2H₂O + 2e⁻ → H₂ + 2OH⁻</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:.72rem;color:rgba(239,71,111,0.7);margin-bottom:3px">Анод (+):</div>
|
||||
<div id="elec-eq-anode" style="font-size:.80rem;color:rgba(255,255,255,0.88);line-height:1.4">2Cl⁻ − 2e⁻ → Cl₂</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
<div class="proj-canvas-outer">
|
||||
<canvas id="electrolysis-canvas"></canvas>
|
||||
@@ -3582,6 +3652,8 @@
|
||||
<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 class="pstat"><div class="pstat-label">Q (Кл)</div><div class="pstat-val" id="elecbar-v5" style="color:#9B5DE5">—</div></div>
|
||||
<div class="pstat"><div class="pstat-label">e⁻ (шт)</div><div class="pstat-val" id="elecbar-v6" style="color:rgba(200,220,255,0.8)">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user