Files
Learn_System/frontend/textbooks/geometry_10_hub.html
T
Maxim Dolgolyov 22675fd48e chore: убраны упоминания авторов из всех учебников
Материал учебников теперь полностью наш (LearnSpace), оригинальные
авторы (Арефьева, Латотин, Казаков и др.) убраны из:
- поля textbooks.author в БД (миграция 029);
- footer'ов hub-файлов (9 файлов).

Содержание теории и интерактивов не затронуто.
2026-05-29 15:27:21 +03:00

371 lines
20 KiB
HTML
Raw 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 http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Геометрия 10 класс — учебник</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"></script>
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<script src="/js/stereo3d.js?v=1" defer></script>
<style>
:root{
--bg:#eff6ff; --card:#fff;
--text:#0b1d33; --muted:#475569;
--border:#dbeafe;
--pri:#2563eb; --pri-d:#1d4ed8;
--pri-soft:#dbeafe;
--r1:#2563eb; --r1-d:#1d4ed8;
--r2:#059669; --r2-d:#047857;
--r3:#e11d48; --r3-d:#be123c;
--r4:#d97706; --r4-d:#b45309;
--sh:0 4px 16px rgba(37,99,235,.10);
--sh-h:0 12px 36px rgba(37,99,235,.18);
}
html.dark{
--bg:#020617; --card:#0a1929;
--text:#dbeafe; --muted:#94a3b8;
--border:#1e293b;
--pri-soft:rgba(37,99,235,.18);
}
*{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,#1e3a8a 0%,#2563eb 55%,#93c5fd 100%);color:#fff;padding:32px 24px 28px;overflow:hidden;border-bottom:2px solid rgba(219,234,254,.15)}
.hdr::before{content:'СТЕРЕОМЕТРИЯ';position:absolute;right:-14px;top:-18%;font-family:'Outfit',sans-serif;font-size:clamp(4rem,12vw,11rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(219,234,254,.10);line-height:1;pointer-events:none;user-select:none}
.hdr-inner{position:relative;z-index:1;max-width:1100px;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:.85;margin-top:4px}
.hdr-side{margin-left:auto;display:flex;gap:8px}
.hdr-btn{padding:8px 12px;background:rgba(255,255,255,.14);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,.24)}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main{max-width:1100px;margin:0 auto;padding:32px 24px 60px}
.prog-overall{background:linear-gradient(135deg,var(--pri-soft),rgba(225,29,72,.10));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,#2563eb,#93c5fd);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(37,99,235,.12);border-radius:5px;overflow:hidden;margin-top:6px}
.po-fill{height:100%;background:linear-gradient(90deg,var(--pri),#e11d48);border-radius:5px;transition:width .5s}
.po-xp{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:linear-gradient(135deg,#f59e0b,#dc2626);color:#fff;border-radius:99px;font-size:.8rem;font-weight:800;font-family:'Unbounded',sans-serif;letter-spacing:.02em;box-shadow:0 4px 12px rgba(220,38,38,.22)}
.ch-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:30px}
@media(min-width:600px){.ch-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ch-grid{grid-template-columns:repeat(2,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:6rem;font-weight:900;font-family:'Outfit',sans-serif;line-height:1;color:rgba(255,255,255,.18);pointer-events:none}
.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.1rem;font-weight:800;letter-spacing:-.01em;position:relative;z-index:1;line-height:1.3}
.ch-range{font-size:.84rem;opacity:.88;margin-top:4px;position:relative;z-index:1;font-weight:500}
.ch-cover.r1{background:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#93c5fd)}
.ch-cover.r2{background:linear-gradient(135deg,#064e3b,#059669 60%,#86efac)}
.ch-cover.r3{background:linear-gradient(135deg,#7f1d1d,#e11d48 60%,#fda4af)}
.ch-cover.r4{background:linear-gradient(135deg,#78350f,#d97706 60%,#fcd34d)}
.ch-body{padding:16px 20px 18px;display:flex;flex-direction:column;flex:1}
.ch-desc{font-size:.88rem;color:var(--text);opacity:.82;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;transition:width .5s}
.ch-card.r1-card .ch-prog-fill{background:linear-gradient(90deg,var(--r1),var(--r1-d))}
.ch-card.r2-card .ch-prog-fill{background:linear-gradient(90deg,var(--r2),var(--r2-d))}
.ch-card.r3-card .ch-prog-fill{background:linear-gradient(90deg,var(--r3),var(--r3-d))}
.ch-card.r4-card .ch-prog-fill{background:linear-gradient(90deg,var(--r4),var(--r4-d))}
.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;transition:filter .15s}
.ch-action:hover{filter:brightness(1.08)}
.ch-card.r1-card .ch-action{background:linear-gradient(135deg,var(--r1),#93c5fd)}
.ch-card.r2-card .ch-action{background:linear-gradient(135deg,var(--r2),#86efac)}
.ch-card.r3-card .ch-action{background:linear-gradient(135deg,var(--r3),#fda4af)}
.ch-card.r4-card .ch-action{background:linear-gradient(135deg,var(--r4),#fcd34d)}
.ach-strip{background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:18px 22px;margin-bottom:28px;display:flex;align-items:center;gap:16px;transition:border-color .4s,box-shadow .4s}
.ach-strip.lit{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.ach-icon{width:52px;height:52px;border-radius:14px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .4s}
.ach-strip.lit .ach-icon{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.ach-icon svg{width:28px;height:28px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ach-strip.lit .ach-icon svg{stroke:#fff}
.ach-text{flex:1}
.ach-title{font-weight:800;font-size:1.02rem;color:var(--text)}
.ach-sub{font-size:.85rem;color:var(--muted);margin-top:2px}
.ach-strip.lit .ach-title{color:#92400e}
.preview-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:30px}
.preview-cell{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.preview-cell-label{font-size:.78rem;color:var(--muted);font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.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>Геометрия — 10 класс</h1>
<div class="hdr-sub">Стереометрия · 3D-фигуры · Координаты и векторы</div>
</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="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>
<div id="hero-xp-badge" class="po-xp" style="display:none">0 XP</div>
</section>
<div class="preview-row" id="preview-row">
<div class="preview-cell"><div id="pv-cube"></div><div class="preview-cell-label">Куб</div></div>
<div class="preview-cell"><div id="pv-pyr"></div><div class="preview-cell-label">Пирамида</div></div>
<div class="preview-cell"><div id="pv-prism"></div><div class="preview-cell-label">Призма</div></div>
<div class="preview-cell"><div id="pv-tetra"></div><div class="preview-cell-label">Тетраэдр</div></div>
</div>
<div class="ch-grid">
<a href="/textbook/geometry-10-r1" class="ch-card r1-card" id="r-1">
<div class="ch-cover r1">
<div class="ch-cover-wm"></div>
<div class="ch-num">Раздел 1</div>
<div class="ch-title">Введение в стереометрию</div>
<div class="ch-range">§1–§3 + Финал</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/geometry-10-r2" class="ch-card r2-card" id="r-2">
<div class="ch-cover r2">
<div class="ch-cover-wm"></div>
<div class="ch-num">Раздел 2</div>
<div class="ch-title">Параллельность</div>
<div class="ch-range">§4–§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-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/geometry-10-r3" class="ch-card r3-card" id="r-3">
<div class="ch-cover r3">
<div class="ch-cover-wm"></div>
<div class="ch-num">Раздел 3</div>
<div class="ch-title">Перпендикулярность</div>
<div class="ch-range">§7–§10 + Финал</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/geometry-10-r4" class="ch-card r4-card" id="r-4">
<div class="ch-cover r4">
<div class="ch-cover-wm"></div>
<div class="ch-num">Раздел 4</div>
<div class="ch-title">Координаты и векторы</div>
<div class="ch-range">§11–§14 + Финал</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-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>
</div>
<div class="ach-strip" id="ach-strip">
<div class="ach-icon">
<svg viewBox="0 0 24 24">
<path d="M6 9H4l-1-3h18l-1 3h-2M6 9l1 6h10l1-6M6 9h12"/><path d="M9 21h6M12 15v6"/>
</svg>
</div>
<div class="ach-text">
<div class="ach-title">Магистр геометрии 10</div>
<div class="ach-sub" id="ach-sub">Прочитайте все 14 параграфов четырёх разделов, чтобы получить достижение</div>
</div>
</div>
</main>
<footer class="foot">
Интерактивный учебник «Геометрия — 10 класс» · LearnSpace
</footer>
<script>
'use strict';
(function(){
var saved = localStorage.getItem('geometry10_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('geometry10_theme', dark ? 'dark' : 'light');
localStorage.setItem('theme', dark ? 'dark' : 'light');
if (lab) lab.textContent = dark ? 'Светлая' : 'Тёмная';
});
})();
var TOTAL = 14;
var CH_PARA = { 'geometry-10-r1': 3, 'geometry-10-r2': 3, 'geometry-10-r3': 4, 'geometry-10-r4': 4 };
var CH_IDX = { 'geometry-10-r1': 1, 'geometry-10-r2': 2, 'geometry-10-r3': 3, 'geometry-10-r4': 4 };
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 = 'Открыть раздел';
}
return pct;
}
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 + '%';
var xpBadge = document.getElementById('hero-xp-badge');
var xp = parseInt(localStorage.getItem('geometry10_xp') || '0', 10) || 0;
if (xpBadge && xp > 0) { xpBadge.style.display = ''; xpBadge.textContent = xp + ' XP'; }
if (totalRead >= TOTAL) {
var strip = document.getElementById('ach-strip');
var sub = document.getElementById('ach-sub');
if (strip) strip.classList.add('lit');
if (sub) sub.textContent = 'Выполнено! Вы прочитали весь курс геометрии 10 класса.';
}
}
function loadProgress() {
if (typeof window.LS === 'undefined' || typeof window.LS.api !== 'function') {
renderProgress([]);
return;
}
window.LS.api('/api/textbooks/geometry-10/children')
.then(function(data) {
if (data && data.children) renderProgress(data.children);
else renderProgress([]);
})
.catch(function() { renderProgress([]); });
}
function renderPreviews(){
if (typeof window.STEREO3D === 'undefined') return;
var S = window.STEREO3D;
var pairs = [
{id:'pv-cube', fn:function(sc){sc.addCube({center:[0,0,0],size:1.8,labels:false,color:'#dbeafe'});}},
{id:'pv-pyr', fn:function(sc){sc.addPyramid({n:4,baseRadius:1.3,height:2,color:'#fee2e2'});}},
{id:'pv-prism', fn:function(sc){sc.addPrism({n:6,baseRadius:1.2,height:2,color:'#d1fae5'});}},
{id:'pv-tetra', fn:function(sc){sc.addTetrahedron({size:1.4,color:'#fef3c7'});}}
];
for (var i = 0; i < pairs.length; i++){
var el = document.getElementById(pairs[i].id);
if (!el) continue;
var sc = new S.Scene(180, 150, {view:'CABINET', scale:32, bg:'transparent', border:'none'});
pairs[i].fn(sc);
el.innerHTML = sc.render();
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function(){ loadProgress(); renderPreviews(); });
} else {
loadProgress();
renderPreviews();
}
window.addEventListener('focus', loadProgress);
// stereo3d loads with defer — повторная попытка после загрузки
window.addEventListener('load', renderPreviews);
</script>
</body>
</html>