Files
Learn_System/frontend/textbooks/physics_11_hub.html
Maxim Dolgolyov 22b95ed072 feat(phys11 W0): инфра — миграция БД, phys-fx.js, hub + 8 stub-глав
Миграция 031_physics_11_hub.sql:
- hub textbook 'physics-11' (cyan, sort 12, para_count 45)
- 8 children по главам: ch1 cyan, ch2 violet, ch3 amber, ch4 blue,
  ch5 pink, ch6 green, ch7 rose, ch8 indigo

frontend/js/phys-fx.js (~360 строк):
- Глобальный requestAnimationFrame-цикл (Ticker) с подписками
- util.subscribe/unsubscribe + IntersectionObserver-пауза невидимых
- util.svgFrame, util.axes, util.slider — общие хелперы
- PHYS.Oscillogram: гарм. колебания с амплитудой/частотой/фазой/затуханием
- PHYS.SpringMass: пружинный маятник (T=2π√(m/k)) с зигзаг-пружиной
- PHYS.Pendulum: математический маятник (T=2π√(l/g)) с дугой

frontend/textbooks/physics_11_hub.html:
- Header cyan-gradient + watermark ФИЗИКА
- 4-кол grid карточек глав (8 шт., responsive)
- Прогресс-бар курса + API /api/textbooks/physics-11/children

frontend/textbooks/physics_11_ch1..ch8.html:
- Stub-страницы по образцу geometry_10_r1..r4 (W0)
- Список параграфов с ключевыми формулами + 'Будет добавлено в волне WN'
- Каждая глава со своей темой (gradient, watermark, цветами)
- phys-fx.js подключён сразу (ready для W1+)

backend/scripts/gen_phys11_stubs.js — генератор для повторных сборок.
2026-05-29 17:42:36 +03:00

339 lines
19 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Физика 11 класс — учебник</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@400;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"
onload="renderMathInElement(document.body,{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<style>
:root{
--bg:#ecfeff; --card:#fff;
--text:#0f172a; --muted:#475569;
--border:#a5f3fc;
--pri:#0891b2; --pri-d:#0e7490;
--pri-soft:#cffafe;
--sh:0 4px 16px rgba(8,145,178,.10);
--sh-h:0 12px 36px rgba(8,145,178,.18);
}
html.dark{
--bg:#062326; --card:#0a2e35;
--text:#cffafe; --muted:#67e8f9;
--border:#0f4750;
}
*{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}
.hdr{position:relative;background:linear-gradient(110deg,#155e75 0%,#0891b2 55%,#67e8f9 100%);color:#fff;padding:32px 24px 28px;overflow:hidden;border-bottom:2px solid rgba(165,243,252,.18)}
.hdr::before{content:'ФИЗИКА';position:absolute;right:-14px;top:-18%;font-family:'Outfit',sans-serif;font-size:clamp(5rem,16vw,13rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(207,250,254,.12);line-height:1;pointer-events:none;user-select:none}
.hdr-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hdr-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.14);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,.24)}
.hdr h1{font-family:'Outfit',sans-serif;font-size:1.85rem;font-weight:900;letter-spacing:-.01em}
.hdr-sub{font-size:.92rem;opacity:.88;margin-top:4px}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main{max-width:1180px;margin:0 auto;padding:32px 24px 60px}
.prog-overall{background:linear-gradient(135deg,var(--pri-soft),rgba(103,232,249,.12));border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.po-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#0891b2,#67e8f9);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:900}
.po-text{flex:1;min-width:160px}
.po-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.po-bar{height:8px;background:rgba(8,145,178,.14);border-radius:5px;overflow:hidden;margin-top:6px}
.po-fill{height:100%;background:linear-gradient(90deg,var(--pri),#67e8f9);border-radius:5px;transition:width .5s}
.ch-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:30px}
@media(min-width:680px){.ch-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.ch-grid{grid-template-columns:repeat(4,1fr)}}
.ch-card{background:var(--card);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;text-decoration:none;color:inherit}
.ch-card:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.ch-cover{padding:22px 22px 18px;color:#fff;position:relative;overflow:hidden}
.ch-cover-wm{position:absolute;right:-8px;top:-22px;font-size:5.2rem;font-weight:900;font-family:'Outfit',sans-serif;line-height:1;color:rgba(255,255,255,.20);pointer-events:none;letter-spacing:-.04em}
.ch-num{display:inline-block;padding:4px 10px;background:rgba(255,255,255,.22);border-radius:99px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;position:relative;z-index:1}
.ch-title{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:-.01em;position:relative;z-index:1;line-height:1.3}
.ch-range{font-size:.82rem;opacity:.88;margin-top:4px;position:relative;z-index:1;font-weight:500}
.ch-body{padding:16px 20px 18px;display:flex;flex-direction:column;flex:1}
.ch-desc{font-size:.86rem;color:var(--text);opacity:.84;flex:1;margin-bottom:12px;line-height:1.55}
.ch-prog{margin-bottom:12px}
.ch-prog-label{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);font-weight:600;margin-bottom:4px}
.ch-prog-bar{height:6px;background:rgba(0,0,0,.07);border-radius:4px;overflow:hidden}
.ch-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ch),var(--ch-d));transition:width .5s}
.ch-action{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:11px;font-weight:700;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--ch),var(--ch-d));transition:filter .15s}
.ch-action:hover{filter:brightness(1.08)}
.banner-soon{margin-top:18px;text-align:center;padding:20px;background:linear-gradient(135deg,var(--pri-soft),transparent);border:1px dashed var(--pri);border-radius:14px;color:var(--pri-d);font-weight:700;font-size:.92rem}
.banner-soon b{font-family:'Outfit',sans-serif;display:block;margin-bottom:4px;font-size:1.05rem}
.foot{text-align:center;padding:24px 16px;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border)}
</style>
</head>
<body>
<header class="hdr">
<div class="hdr-inner">
<div>
<a href="/textbooks" class="hdr-back">
<svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
К каталогу
</a>
</div>
<div>
<h1>Физика — 11 класс</h1>
<div class="hdr-sub">Жилко · Маркович · Сокольский (2021) · 8 глав · 45 параграфов</div>
</div>
</div>
</header>
<main>
<section class="prog-overall">
<div class="po-icon"></div>
<div class="po-text">
<div class="po-label">Общий прогресс по курсу</div>
<div id="overall-text" style="font-size:1.05rem;font-weight:700">Загрузка...</div>
<div class="po-bar"><div id="overall-fill" class="po-fill" style="width:0%"></div></div>
</div>
</section>
<div class="ch-grid">
<a href="/textbook/physics-11-ch1" class="ch-card" style="--ch:#0891b2;--ch-d:#0e7490;--ch-soft:#cffafe">
<div class="ch-cover" style="background:linear-gradient(135deg,#155e75,#0891b2 60%,#a5f3fc)">
<div class="ch-cover-wm"></div>
<div class="ch-num">Глава 1</div>
<div class="ch-title">Механические колебания и волны</div>
<div class="ch-range">§1–§6 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Колебательное движение, гармонические колебания, маятники, превращения энергии, резонанс, продольные и поперечные волны, звук.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-1">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-1" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-1">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch2" class="ch-card" style="--ch:#7c3aed;--ch-d:#5b21b6;--ch-soft:#ede9fe">
<div class="ch-cover" style="background:linear-gradient(135deg,#5b21b6,#7c3aed 60%,#c4b5fd)">
<div class="ch-cover-wm"></div>
<div class="ch-num">Глава 2</div>
<div class="ch-title">Электромагнитные колебания и волны</div>
<div class="ch-range">§7–§13 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Колебательный контур, формула Томсона, переменный ток, трансформатор, передача электроэнергии, ЭМ волны.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-2">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-2" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-2">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch3" class="ch-card" style="--ch:#d97706;--ch-d:#b45309;--ch-soft:#fef3c7">
<div class="ch-cover" style="background:linear-gradient(135deg,#b45309,#d97706 60%,#fcd34d)">
<div class="ch-cover-wm"></div>
<div class="ch-num">Глава 3</div>
<div class="ch-title">Оптика</div>
<div class="ch-range">§14–§23 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Электромагнитная природа света, интерференция, дифракция, отражение, зеркала, преломление, тонкая линза, оптические приборы.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-3">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-3" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-3">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch4" class="ch-card" style="--ch:#2563eb;--ch-d:#1d4ed8;--ch-soft:#dbeafe">
<div class="ch-cover" style="background:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#93c5fd)">
<div class="ch-cover-wm">c</div>
<div class="ch-num">Глава 4</div>
<div class="ch-title">Основы СТО</div>
<div class="ch-range">§24–§26 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Принцип относительности Галилея, постулаты Эйнштейна, преобразования Лоренца, релятивистская динамика, E=mc².</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-4">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-4" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-4">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch5" class="ch-card" style="--ch:#db2777;--ch-d:#9d174d;--ch-soft:#fce7f3">
<div class="ch-cover" style="background:linear-gradient(135deg,#831843,#db2777 60%,#fbcfe8)">
<div class="ch-cover-wm">γ</div>
<div class="ch-num">Глава 5</div>
<div class="ch-title">Фотоны. Действия света</div>
<div class="ch-range">§27–§29 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Фотоэффект, квантовая гипотеза Планка, фотон, уравнение Эйнштейна, давление света, корпускулярно-волновой дуализм.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-5">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-5" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-5">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch6" class="ch-card" style="--ch:#10b981;--ch-d:#047857;--ch-soft:#d1fae5">
<div class="ch-cover" style="background:linear-gradient(135deg,#065f46,#10b981 60%,#a7f3d0)">
<div class="ch-cover-wm"></div>
<div class="ch-num">Глава 6</div>
<div class="ch-title">Физика атома</div>
<div class="ch-range">§30–§34 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Ядерная модель атома Резерфорда, квантовые постулаты Бора, спектры испускания и поглощения, лазеры.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-6">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-6" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-6">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch7" class="ch-card" style="--ch:#dc2626;--ch-d:#991b1b;--ch-soft:#fee2e2">
<div class="ch-cover" style="background:linear-gradient(135deg,#7f1d1d,#dc2626 60%,#fca5a5)">
<div class="ch-cover-wm"></div>
<div class="ch-num">Глава 7</div>
<div class="ch-title">Ядерная физика и элементарные частицы</div>
<div class="ch-range">§35–§44 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Протонно-нейтронная модель ядра, ядерные реакции, энергия связи, радиоактивность, ядерный реактор, термояд, элементарные частицы.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-7">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-7" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-7">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
<a href="/textbook/physics-11-ch8" class="ch-card" style="--ch:#6366f1;--ch-d:#4338ca;--ch-soft:#e0e7ff">
<div class="ch-cover" style="background:linear-gradient(135deg,#3730a3,#6366f1 60%,#c7d2fe)">
<div class="ch-cover-wm"></div>
<div class="ch-num">Глава 8</div>
<div class="ch-title">Основы единой физической картины мира</div>
<div class="ch-range">§45 + Финал</div>
</div>
<div class="ch-body">
<div class="ch-desc">Современная естественнонаучная картина мира, эволюция физических теорий, четыре фундаментальных взаимодействия.</div>
<div class="ch-prog">
<div class="ch-prog-label"><span>Прогресс</span><span id="prog-8">0%</span></div>
<div class="ch-prog-bar"><div class="ch-prog-fill" id="fill-8" style="width:0%"></div></div>
</div>
<div class="ch-action">
<span id="btn-8">Открыть главу</span>
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</a>
</div>
<div class="banner-soon">
<b>Курс в активной разработке (W0)</b>
Инфраструктура готова: миграция БД, библиотека phys-fx.js (Oscillogram, SpringMass, Pendulum) и 8 stub-страниц глав. Реализация по плану PLAN_FIZIKA_11.md — 15 волн (~26 сессий).
</div>
</main>
<footer class="foot">
Интерактивный учебник «Физика — 11 класс» · LearnSpace
</footer>
<script>
'use strict';
var TOTAL = 45;
var CH_PARA = {'physics-11-ch1': 6, 'physics-11-ch2': 7, 'physics-11-ch3': 10, 'physics-11-ch4': 3, 'physics-11-ch5': 3, 'physics-11-ch6': 5, 'physics-11-ch7': 10, 'physics-11-ch8': 1};
var CH_IDX = {'physics-11-ch1': 1, 'physics-11-ch2': 2, 'physics-11-ch3': 3, 'physics-11-ch4': 4, 'physics-11-ch5': 5, 'physics-11-ch6': 6, 'physics-11-ch7': 7, 'physics-11-ch8': 8};
function setChProg(idx, readCount, total){
var pct = total ? Math.round(readCount * 100 / total) : 0;
var labelEl = document.getElementById('prog-' + idx);
var fillEl = document.getElementById('fill-' + idx);
var btnEl = document.getElementById('btn-' + idx);
if (labelEl) labelEl.textContent = pct + '%';
if (fillEl) fillEl.style.width = pct + '%';
if (btnEl){
if (readCount > 0 && readCount < total) btnEl.textContent = 'Продолжить';
else if (readCount >= total) btnEl.textContent = 'Открыть снова';
else btnEl.textContent = 'Открыть главу';
}
}
function renderProgress(children){
var totalRead = 0;
for (var i = 0; i < children.length; i++){
var ch = children[i];
var idx = CH_IDX[ch.slug]; if (!idx) continue;
var read = ch.progress ? ch.progress.read.length : 0;
var total = ch.para_count || CH_PARA[ch.slug] || 1;
totalRead += read;
setChProg(idx, read, total);
}
var pct = Math.round(totalRead * 100 / TOTAL);
var overallEl = document.getElementById('overall-text');
var fillEl = document.getElementById('overall-fill');
if (overallEl) overallEl.textContent = totalRead + ' из ' + TOTAL + ' параграфов · ' + pct + '%';
if (fillEl) fillEl.style.width = pct + '%';
}
function loadProgress(){
if (typeof window.LS === 'undefined' || typeof window.LS.api !== 'function'){
renderProgress([]); return;
}
window.LS.api('/api/textbooks/physics-11/children')
.then(function(data){
if (data && data.children) renderProgress(data.children);
else renderProgress([]);
})
.catch(function(){ renderProgress([]); });
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadProgress);
else loadProgress();
window.addEventListener('focus', loadProgress);
</script>
</body>
</html>