feat(chemistry7): Phase 1 Волна 2 — Глава 1, §§4–6

§4 Относительная атомная масса (весы атомов: во сколько раз тяжелее),
§5 Молекулы и простые вещества (галерея молекул O2/O3/H2/N2 шариками),
§6 Сложные вещества (классификатор простое/сложное + галерея H2O/CO2/CH4/NH3).
Теория, тренажёры задач. Тест: 8/8 pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/js/chem7_ch1_widgets.js

@@ -154,8 +154,90 @@
     }
   }
 
+  /* ── Волна 2 ── */
+
+  /* §4 — «весы атомов»: во сколько раз один атом тяжелее другого */
+  var ABEL = ['H','C','N','O','Na','Mg','Al','S','Cl','Ca','Fe','Cu','Zn','Ag'];
+  function mount_p4() {
+    var m = $('p4-bal'); if (!m || m._built) return; m._built = 1;
+    function opts(sel){ return ABEL.map(function(e){ var ar=C().arOf?C().arOf(e):''; return '<option value="'+e+'"'+(e===sel?' selected':'')+'>'+e+' (A_r='+ar+')</option>'; }).join(''); }
+    m.innerHTML = '<div class="fld"><label>Атом A</label><select id="p4-a">'+opts('S')+'</select>'
+      +'<label>Атом B</label><select id="p4-b">'+opts('O')+'</select></div><div class="out" id="p4-out"></div>';
+    function upd(){
+      var a=$('p4-a').value, b=$('p4-b').value, ara=+C().arOf(a), arb=+C().arOf(b);
+      var out=$('p4-out');
+      if(!ara||!arb){ out.textContent='—'; return; }
+      var big=Math.max(ara,arb), sm=Math.min(ara,arb), k=big/sm;
+      var heavier=ara>=arb?a:b, lighter=ara>=arb?b:a;
+      out.className='out ok';
+      out.innerHTML='<span class="bd">A_r('+a+')='+ara+', A_r('+b+')='+arb+'<br>'
+        +(ara===arb?('Атомы '+a+' и '+b+' имеют одинаковую массу.')
+          :('Атом <b>'+heavier+'</b> тяжелее атома '+lighter+' в <b>'+(Math.round(k*100)/100).toString().replace('.',',')+'</b> раз.'))+'</span>';
+    }
+    $('p4-a').addEventListener('change',upd); $('p4-b').addEventListener('change',upd); upd();
+  }
+
+  /* рисуем молекулу как набор шариков-атомов */
+  var COL = { H:'#cbd5e1', O:'#ef4444', N:'#3b82f6', C:'#334155', S:'#eab308', Cl:'#22c55e', Fe:'#b45309', Na:'#a78bfa' };
+  var RAD = { H:11, O:16, N:15, C:16, S:18, Cl:17, Fe:18, Na:17 };
+  function molBalls(atoms) {
+    // atoms: [[el,n],...]; рисуем в ряд
+    var balls = [], cx = 26;
+    atoms.forEach(function(pair){ for(var i=0;i<pair[1];i++){ balls.push(pair[0]); } });
+    var W0 = Math.max(120, cx*2 + balls.reduce(function(s,e){return s+(RAD[e]||14)*2+8;},0));
+    var x = cx, svg = '';
+    balls.forEach(function(el){
+      var r = RAD[el]||14; x += r;
+      svg += '<circle cx="'+x+'" cy="34" r="'+r+'" fill="'+(COL[el]||'#94a3b8')+'" stroke="rgba(0,0,0,.25)"/>'
+        + '<text x="'+x+'" y="39" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">'+el+'</text>';
+      x += r + 8;
+    });
+    return '<svg viewBox="0 0 '+W0+' 68" width="100%" style="max-width:'+W0+'px;height:auto">'+svg+'</svg>';
+  }
+  function molCard(name, formula, atoms, note) {
+    return '<div style="border:1.5px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--card)">'
+      +'<div style="font-weight:700;margin-bottom:2px">'+esc(name)+' &middot; '+(C().formula?C().formula(formula):formula)+'</div>'
+      + molBalls(atoms)
+      +'<div style="font-size:.82rem;color:var(--muted);margin-top:4px">'+esc(note)+'</div></div>';
+  }
+
+  /* §5 — галерея простых веществ */
+  function mount_p5() {
+    var m = $('p5-gal'); if (!m || m._built) return; m._built = 1;
+    m.innerHTML = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px">'
+      + molCard('Водород','H2',[['H',2]],'2 атома H — двухатомная молекула')
+      + molCard('Кислород','O2',[['O',2]],'2 атома O')
+      + molCard('Озон','O3',[['O',3]],'3 атома O — тоже простое вещество')
+      + molCard('Азот','N2',[['N',2]],'2 атома N')
+      + '</div><div style="font-size:.84rem;color:var(--muted);margin-top:8px">Во всех молекулах — атомы <b>одного</b> элемента → это <b>простые вещества</b>. Кислород $\\text{O}_2$ и озон $\\text{O}_3$ образованы одним элементом, но это разные простые вещества.</div>';
+    if (W.chem8RenderMath) try { W.chem8RenderMath(m); } catch(e){}
+  }
+
+  /* §6 — классификатор простое/сложное + галерея сложных веществ */
+  function mount_p6() {
+    var c = $('p6-cls');
+    if (c) classifier(c, {
+      buckets: ['Простое вещество', 'Сложное вещество'],
+      items: [
+        { t:'O₂', b:0 }, { t:'H₂O', b:1 }, { t:'Fe', b:0 }, { t:'CO₂', b:1 },
+        { t:'N₂', b:0 }, { t:'NH₃', b:1 }, { t:'S', b:0 }, { t:'CH₄', b:1 }
+      ]
+    });
+    var g = $('p6-gal');
+    if (g && !g._built) { g._built = 1;
+      g.innerHTML = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px">'
+        + molCard('Вода','H2O',[['O',1],['H',2]],'2 элемента: H и O')
+        + molCard('Углекислый газ','CO2',[['C',1],['O',2]],'2 элемента: C и O')
+        + molCard('Метан','CH4',[['C',1],['H',4]],'2 элемента: C и H')
+        + molCard('Аммиак','NH3',[['N',1],['H',3]],'2 элемента: N и H')
+        + '</div><div style="font-size:.84rem;color:var(--muted);margin-top:8px">В каждой молекуле — атомы <b>разных</b> элементов → это <b>сложные вещества</b>.</div>';
+      if (W.chem8RenderMath) try { W.chem8RenderMath(g); } catch(e){}
+    }
+  }
+
   W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
-    p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3
+    p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3,
+    p4: mount_p4, p5: mount_p5, p6: mount_p6
   });
   W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
 })(window);