Maxim Dolgolyov
67b95234d0
feat(chemistry-8): Phase 0 — каркас учебника «Химия 8» (hub + 7 глав) Архитектура hub + главы (как физика 7–11, алгебра, геометрия), не монолит. - chemistry_8_hub.html: хаб-каталог 7 разделов, amber-палитра, прогресс из /api/textbooks/chemistry-8/children, achievement «Химик 8 класса» - 7 каркасов глав (вводный + гл.1–6, §1–52) с оглавлением и баннером «в разработке» - /js/chem8_svg.js: неймспейс Chem8 (formula/ionLabel/chemEq готовы, 13 хелперов-заглушек) - миграция 041: родитель chemistry-8 + 7 детей (parent_slug), para_count сумма = 52 - gen_chem8_skeletons.js: генератор каркасов глав - tests/chemistry8.test.js: 9 тестов (примитивы + целостность каркаса), все зелёные - PLAN_CHEMISTRY_8.md обновлён под hub-архитектуру Источник: Шиманович, Красицкий, Сечко, Хвалюк. Химия 8, Народная асвета, 2018. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> @
141 lines
9.7 KiB
HTML
141 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||
<meta http-equiv="Pragma" content="no-cache">
|
||
<meta http-equiv="Expires" content="0">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
<title>Химия 8 · Вводный раздел · «Количественные понятия в химии»</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Unbounded:wght@700;800;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
|
||
<script src="/js/api.js" defer></script>
|
||
<script src="/js/xp.js" defer></script>
|
||
<script src="/js/biochem-core.js" defer></script>
|
||
<script src="/js/chem8_svg.js" defer></script>
|
||
<style>
|
||
:root{
|
||
--bg:#fffbeb; --card:#fff; --text:#1c1917; --muted:#78716c; --border:#e7e5e4;
|
||
--pri:#d97706; --pri-d:#b45309; --pri-l:#fbbf24; --pri-soft:#fef3c7;
|
||
--sh:0 4px 16px rgba(0,0,0,.06); --sh-h:0 12px 32px rgba(0,0,0,.12);
|
||
}
|
||
html.dark{ --bg:#1c1410; --card:#271c14; --text:#fef3c7; --muted:#a8a29e; --border:#3a3026; --pri-soft:rgba(0,0,0,.2); }
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html,body{min-height:100vh}
|
||
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;transition:background .25s,color .25s}
|
||
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
|
||
.hdr{position:relative;background:linear-gradient(110deg,#b45309 0%,#d97706 55%,#fbbf24 100%);color:#fff;padding:34px 24px 30px;overflow:hidden;border-bottom:2px solid rgba(255,255,255,.18)}
|
||
.hdr::before{content:'ВВОДНЫЙ РАЗДЕЛ';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-family:'Unbounded',sans-serif;font-size:clamp(4rem,13vw,10rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);line-height:1;pointer-events:none;user-select:none;z-index:0}
|
||
.hdr-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
|
||
.hdr-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.16);border-radius:9px;color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;transition:background .15s}
|
||
.hdr-back:hover{background:rgba(255,255,255,.26)}
|
||
.hdr-kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;opacity:.85}
|
||
.hdr h1{font-family:'Outfit',sans-serif;font-size:1.55rem;font-weight:900;letter-spacing:-.01em;line-height:1.25;margin-top:3px}
|
||
.hdr-side{margin-left:auto}
|
||
.hdr-btn{padding:8px 12px;background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:9px;cursor:pointer;font-weight:600;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}
|
||
.hdr-btn:hover{background:rgba(255,255,255,.26)}
|
||
|
||
main{max-width:1000px;margin:0 auto;padding:28px 24px 60px}
|
||
|
||
.wip{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--pri-soft),rgba(0,0,0,.02));border:1.5px dashed var(--pri);border-radius:16px;padding:18px 20px;margin-bottom:26px}
|
||
.wip-ic{width:42px;height:42px;border-radius:11px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.wip-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.wip h2{font-family:'Outfit',sans-serif;font-size:1.05rem;color:var(--pri-d);margin-bottom:4px}
|
||
html.dark .wip h2{color:var(--pri-l)}
|
||
.wip p{font-size:.9rem;color:var(--muted);line-height:1.55}
|
||
|
||
.ol-title{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:800;margin:6px 0 14px;display:flex;align-items:center;gap:9px}
|
||
.ol-title svg{width:20px;height:20px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.ol-list{list-style:none;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
|
||
.ol-para,.ol-note{display:flex;gap:12px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--border)}
|
||
.ol-list li:last-child{border-bottom:0}
|
||
.ol-num{flex-shrink:0;min-width:46px;font-weight:800;color:var(--pri);font-size:.92rem}
|
||
.ol-name{font-size:.94rem;color:var(--text)}
|
||
.ol-note{background:var(--pri-soft);align-items:center;gap:10px}
|
||
.ol-note-ic{display:inline-flex;color:var(--pri-d)}
|
||
html.dark .ol-note-ic{color:var(--pri-l)}
|
||
.ol-note-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.ol-note span:last-child{font-size:.88rem;font-weight:600;color:var(--pri-d)}
|
||
html.dark .ol-note span:last-child{color:var(--pri-l)}
|
||
|
||
.foot{text-align:center;padding:24px 16px;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border);margin-top:30px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hdr">
|
||
<div class="hdr-inner">
|
||
<a href="/textbook/chemistry-8" class="hdr-back">
|
||
<svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
|
||
К разделам
|
||
</a>
|
||
<div>
|
||
<div class="hdr-kicker">Вводный раздел · § 1–9</div>
|
||
<h1>Количественные понятия в химии</h1>
|
||
</div>
|
||
<div class="hdr-side">
|
||
<button id="theme-btn" class="hdr-btn" title="Сменить тему">
|
||
<svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
||
<span id="theme-lab">Тёмная</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="wip">
|
||
<div class="wip-ic">
|
||
<svg viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-6.3 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z"/></svg>
|
||
</div>
|
||
<div>
|
||
<h2>Раздел в разработке</h2>
|
||
<p>Интерактивное наглядное наполнение этого раздела (теория, модели, симуляторы, тренажёры и боссы) добавляется поэтапно. Ниже — план параграфов раздела согласно учебнику.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="ol-title">
|
||
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
|
||
Содержание раздела
|
||
</div>
|
||
<ul class="ol-list">
|
||
<li class="ol-para"><span class="ol-num">§ 1</span><span class="ol-name">Атомы. Химические элементы. Относительная атомная масса</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 2</span><span class="ol-name">Молекулы. Простые и сложные вещества. Химические формулы. Относительная молекулярная масса</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 3</span><span class="ol-name">Химическое количество вещества</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 4</span><span class="ol-name">Моль — единица химического количества вещества. Постоянная Авогадро</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 5</span><span class="ol-name">Молярная масса. Молярный объём газов</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 6</span><span class="ol-name">Вычисление химического количества вещества по его массе и массы вещества по его химическому количеству</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 7</span><span class="ol-name">Вычисление химического количества газа по его объёму и объёма газа по его химическому количеству</span></li>
|
||
<li class="ol-note"><span class="ol-note-ic"><svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span><span>Практическая работа 1. Химическое количество вещества</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 8</span><span class="ol-name">Химические реакции</span></li>
|
||
<li class="ol-para"><span class="ol-num">§ 9</span><span class="ol-name">Количественные расчёты по уравнениям химических реакций</span></li>
|
||
</ul>
|
||
</main>
|
||
|
||
<footer class="foot">
|
||
Интерактивный учебник «Химия — 8 класс» · Вводный раздел · LearnSpace
|
||
</footer>
|
||
|
||
<script>
|
||
'use strict';
|
||
const _TB_SLUG = 'chemistry-8-intro';
|
||
(function(){
|
||
var saved = localStorage.getItem('chemistry8_theme') || localStorage.getItem('theme') || 'light';
|
||
if (saved === 'dark') document.documentElement.classList.add('dark');
|
||
var lab = document.getElementById('theme-lab');
|
||
if (lab) lab.textContent = saved === 'dark' ? 'Светлая' : 'Тёмная';
|
||
document.getElementById('theme-btn').addEventListener('click', function(){
|
||
document.documentElement.classList.toggle('dark');
|
||
var dark = document.documentElement.classList.contains('dark');
|
||
localStorage.setItem('chemistry8_theme', dark ? 'dark' : 'light');
|
||
localStorage.setItem('theme', dark ? 'dark' : 'light');
|
||
if (lab) lab.textContent = dark ? 'Светлая' : 'Тёмная';
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|