From 18fadcba9f71a99355acf99e42b679ecafec6aac Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 29 May 2026 11:25:03 +0300 Subject: [PATCH] =?UTF-8?q?fix(alg10=20ch1):=20=D1=84=D0=BE=D1=80=D0=BC?= =?UTF-8?q?=D1=83=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=BF=D0=BB=D0=B0=D0=BA?= =?UTF-8?q?=D0=B0=D1=82=D1=8B=20=C2=A710-=C2=A712=20=E2=80=94=20KaTeX=20?= =?UTF-8?q?=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE=20=D0=BC=D0=BE=D0=BD=D0=BE?= =?UTF-8?q?=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=BD=D0=BE=D0=B3=D0=BE=20SVG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Заменены 3 SVG-плакаты (формул сложения, двойного аргумента, сумма→произведение) на HTML-карточки с настоящим KaTeX-рендерингом. Добавлен CSS-компонент .formula-plate с подкомпонентами: - .formula-plate-head + цветовые варианты (teal/cyan/violet/green/amber) → плашка-заголовок с градиентом - .formula-plate-title + .formula-plate-sub → крупный заголовок + курсивный подзаголовок - .formula-plate-body + .formula-row + альтернативные цвета → строки формул с подсветкой - .formula-section (янтарная вставка для tg) - .formula-mnem (фиолетовая плашка с мнемоникой) §10: 8 формул в HTML-плакате с teal-плашкой + янтарный блок 'Тангенсы' §11: 3 формулы двойного аргумента отдельным плакатом ПЕРЕД SVG с окружностью (которая теперь короче — без встроенного формульного блока) §12: 4 формулы в violet-плакате + фиолетовая плашка 'Мнемоника' со списком правил Все формулы теперь рендерятся настоящим KaTeX с дробями \dfrac, правильными операторами \tg \sin \cos, греческими буквами \alpha \beta, и индексами/степенями. --- frontend/textbooks/algebra_10_ch1.html | 124 +++++++++++++++++-------- 1 file changed, 83 insertions(+), 41 deletions(-) diff --git a/frontend/textbooks/algebra_10_ch1.html b/frontend/textbooks/algebra_10_ch1.html index 4c8e295..2fa340b 100644 --- a/frontend/textbooks/algebra_10_ch1.html +++ b/frontend/textbooks/algebra_10_ch1.html @@ -174,6 +174,35 @@ a{color:inherit;text-decoration:none} .stub-soon{padding:30px 22px;text-align:center;background:linear-gradient(135deg,var(--pri-soft),var(--acc-soft));border:1.5px dashed var(--pri);border-radius:14px;color:var(--text)} .stub-soon h3{font-family:'Unbounded',sans-serif;font-size:1.15rem;color:var(--pri2);margin-bottom:8px} .stub-soon p{font-size:.92rem;color:var(--muted);max-width:520px;margin:0 auto} + +/* Formula plates — стильные плакаты с формулами + KaTeX внутри */ +.formula-plate{margin:16px 0;border-radius:14px;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.04);background:var(--card)} +.formula-plate-head{padding:14px 18px;text-align:center;border-bottom:1px solid var(--border)} +.formula-plate-head.teal {background:linear-gradient(180deg,rgba(13,148,136,.12),rgba(13,148,136,.06))} +.formula-plate-head.cyan {background:linear-gradient(180deg,rgba(8,145,178,.12),rgba(8,145,178,.06))} +.formula-plate-head.violet {background:linear-gradient(180deg,rgba(124,58,237,.12),rgba(124,58,237,.06))} +.formula-plate-head.green {background:linear-gradient(180deg,rgba(22,163,74,.12),rgba(22,163,74,.06))} +.formula-plate-head.amber {background:linear-gradient(180deg,rgba(245,158,11,.14),rgba(245,158,11,.06))} +.formula-plate-title{font-family:'Unbounded',sans-serif;font-size:1.02rem;font-weight:800;letter-spacing:.04em;margin-bottom:4px;text-transform:uppercase} +.formula-plate-head.teal .formula-plate-title{color:#0f766e} +.formula-plate-head.cyan .formula-plate-title{color:#0e7490} +.formula-plate-head.violet .formula-plate-title{color:#6d28d9} +.formula-plate-head.green .formula-plate-title{color:#15803d} +.formula-plate-head.amber .formula-plate-title{color:#92400e} +.formula-plate-sub{font-size:.84rem;font-style:italic;color:var(--muted);line-height:1.4} +.formula-plate-body{padding:14px 22px} +.formula-row{padding:9px 4px;font-size:1.08rem;text-align:center;line-height:1.5;border-bottom:1px dashed rgba(0,0,0,.05)} +.formula-row:last-child{border-bottom:0} +.formula-row.alt{color:#7c3aed} +.formula-row.alt2{color:#0891b2} +.formula-row.danger{color:#dc2626} +.formula-section{margin:0 16px 16px;padding:12px 16px;border-radius:10px;background:rgba(245,158,11,.10);border:1.5px solid rgba(245,158,11,.6)} +.formula-section-title{font-family:'Unbounded',sans-serif;font-size:.74rem;font-weight:800;text-align:center;letter-spacing:.08em;color:#92400e;margin-bottom:8px;text-transform:uppercase} +.formula-section .formula-row{color:#92400e;border-bottom:1px dashed rgba(146,64,14,.18)} +.formula-mnem{margin:0 16px 16px;padding:12px 18px;border-radius:10px;background:rgba(124,58,237,.08);border:1.5px solid rgba(124,58,237,.4)} +.formula-mnem-title{font-family:'Unbounded',sans-serif;font-size:.74rem;font-weight:800;text-align:center;letter-spacing:.08em;color:#6d28d9;margin-bottom:8px;text-transform:uppercase} +.formula-mnem ul{margin:0;padding-left:18px;line-height:1.75;font-size:.93rem;color:var(--text)} +.formula-mnem li{margin-bottom:4px} @@ -2460,23 +2489,24 @@ function buildP10(){ const box = document.getElementById('p10-body'); let html = ''; - /* === SVG: красивая плашка с 8 формулами === */ - const svgFormulas = - '' - + '' - + '8 ФОРМУЛ СЛОЖЕНИЯ И ВЫЧИТАНИЯ УГЛОВ' - + 'учат наизусть — это база для всей старшей тригонометрии' - /* Колонка 1: sin/cos */ - + 'sin(α + β) = sinα·cosβ + cosα·sinβ' - + 'sin(α − β) = sinα·cosβ − cosα·sinβ' - + 'cos(α + β) = cosα·cosβ − sinα·sinβ' - + 'cos(α − β) = cosα·cosβ + sinα·sinβ' - /* tg отдельно */ - + '' - + 'ТАНГЕНСЫ' - + 'tg(α + β) = (tgα + tgβ) / (1 − tgα·tgβ)' - + 'tg(α − β) = (tgα − tgβ) / (1 + tgα·tgβ)' - + ''; + /* === Плакат: 8 формул сложения и вычитания (HTML + KaTeX) === */ + const svgFormulas = '
' + + '
' + + '
8 формул сложения и вычитания углов
' + + '
учат наизусть — это база для всей старшей тригонометрии
' + + '
' + + '
' + + '
$\\sin(\\alpha + \\beta) = \\sin\\alpha\\cos\\beta + \\cos\\alpha\\sin\\beta$
' + + '
$\\sin(\\alpha - \\beta) = \\sin\\alpha\\cos\\beta - \\cos\\alpha\\sin\\beta$
' + + '
$\\cos(\\alpha + \\beta) = \\cos\\alpha\\cos\\beta - \\sin\\alpha\\sin\\beta$
' + + '
$\\cos(\\alpha - \\beta) = \\cos\\alpha\\cos\\beta + \\sin\\alpha\\sin\\beta$
' + + '
' + + '
' + + '
Тангенсы
' + + '
$\\tg(\\alpha + \\beta) = \\dfrac{\\tg\\alpha + \\tg\\beta}{1 - \\tg\\alpha \\, \\tg\\beta}$
' + + '
$\\tg(\\alpha - \\beta) = \\dfrac{\\tg\\alpha - \\tg\\beta}{1 + \\tg\\alpha \\, \\tg\\beta}$
' + + '
' + + '
'; html += makeCard('rule', 'Формулы синуса и косинуса суммы/разности', '10.1', `

Сложение углов в тригонометрии — это четыре формулы. Их нужно знать наизусть.

@@ -2587,10 +2617,10 @@ function buildP11(){ const A = window.ALG10; let html = ''; - /* === SVG: α и 2α на единичной окружности === */ + /* === SVG: α и 2α на единичной окружности (только геометрия) === */ let svgDouble = ''; if(A){ - const c = A.tri.canvas({id:'p11-d', W:360, H:380, R:120}); + const c = A.tri.canvas({id:'p11-d', W:360, H:340, R:120}); const ang = 35 * Math.PI / 180; /* α = 35° */ const ang2 = 2 * ang; /* 2α = 70° */ let s = c.open @@ -2609,20 +2639,27 @@ function buildP11(){ + c.radius(ang2, {color:'#7c3aed', width:2.5}) + c.point(ang, {color:'#0d9488', label:'P_α', labelOffset:20, fontSize:12, labelColor:'#0f766e'}) + c.point(ang2, {color:'#7c3aed', label:'P_{2α}', labelOffset:20, fontSize:12, labelColor:'#6d28d9'}) - + '' - + 'sin 2α = 2 sin α · cos α' - + 'cos 2α = cos²α − sin²α = 1 − 2sin²α = 2cos²α − 1' + c.close; svgDouble = s; } + /* === Плакат: 3 формулы двойного аргумента (HTML + KaTeX) === */ + const plateDouble = '
' + + '
' + + '
3 формулы двойного аргумента
' + + '
это частный случай формул сложения при $\\beta = \\alpha$
' + + '
' + + '
' + + '
$\\sin 2\\alpha = 2\\sin\\alpha \\cos\\alpha$
' + + '
$\\cos 2\\alpha = \\cos^2\\alpha - \\sin^2\\alpha = 1 - 2\\sin^2\\alpha = 2\\cos^2\\alpha - 1$
' + + '
$\\tg 2\\alpha = \\dfrac{2\\tg\\alpha}{1 - \\tg^2\\alpha}$
' + + '
' + + '
'; + html += makeCard('rule', 'Формулы двойного аргумента', '11.1', ` -

Это частный случай формул сложения при $\\beta = \\alpha$:

-

$\\sin 2\\alpha = 2\\sin\\alpha\\cos\\alpha$

-

$\\cos 2\\alpha = \\cos^2\\alpha - \\sin^2\\alpha$

-

$\\tg 2\\alpha = \\dfrac{2\\tg\\alpha}{1 - \\tg^2\\alpha}$

+ ${plateDouble}
${svgDouble}
-

Вывод. $\\sin 2\\alpha = \\sin(\\alpha + \\alpha) = \\sin\\alpha\\cos\\alpha + \\cos\\alpha\\sin\\alpha = 2\\sin\\alpha\\cos\\alpha$.

`); +

Вывод. $\\sin 2\\alpha = \\sin(\\alpha + \\alpha) = \\sin\\alpha\\cos\\alpha + \\cos\\alpha\\sin\\alpha = 2\\sin\\alpha\\cos\\alpha$. Аналогично для $\\cos 2\\alpha$ и $\\tg 2\\alpha$.

`); html += makeCard('rule', 'Три формы для cos 2α', '11.2', `

Используя $\\sin^2\\alpha + \\cos^2\\alpha = 1$, переписываем по-разному:

@@ -2720,20 +2757,25 @@ function buildP12(){ const box = document.getElementById('p12-body'); let html = ''; - const svgFormulas = - '' - + '' - + '4 ФОРМУЛЫ: СУММА → ПРОИЗВЕДЕНИЕ' - + 'структура: 2 · функция полусуммы · функция полуразности' - + 'sin α + sin β = 2 · sin((α+β)/2) · cos((α−β)/2)' - + 'sin α − sin β = 2 · sin((α−β)/2) · cos((α+β)/2)' - + 'cos α + cos β = 2 · cos((α+β)/2) · cos((α−β)/2)' - + 'cos α − cos β = −2 · sin((α+β)/2) · sin((α−β)/2)' - + '' - + 'МНЕМОНИКА' - + '• sin±sin → sin·cos (порядок «полусуммы / полуразности» зависит от знака)' - + '• cos+cos → cos·cos, cos−cos → −sin·sin (минус снаружи!)' - + ''; + const svgFormulas = '
' + + '
' + + '
4 формулы: сумма → произведение
' + + '
структура: 2 · функция полусуммы · функция полуразности
' + + '
' + + '
' + + '
$\\sin\\alpha + \\sin\\beta = 2 \\sin\\dfrac{\\alpha+\\beta}{2} \\cos\\dfrac{\\alpha-\\beta}{2}$
' + + '
$\\sin\\alpha - \\sin\\beta = 2 \\sin\\dfrac{\\alpha-\\beta}{2} \\cos\\dfrac{\\alpha+\\beta}{2}$
' + + '
$\\cos\\alpha + \\cos\\beta = 2 \\cos\\dfrac{\\alpha+\\beta}{2} \\cos\\dfrac{\\alpha-\\beta}{2}$
' + + '
$\\cos\\alpha - \\cos\\beta = -2 \\sin\\dfrac{\\alpha+\\beta}{2} \\sin\\dfrac{\\alpha-\\beta}{2}$
' + + '
' + + '
' + + '
Мнемоника
' + + '
    ' + + '
  • $\\sin \\pm \\sin \\to \\sin \\cdot \\cos$ (порядок «полусуммы/полуразности» зависит от знака)
    • ' + + '
  • $\\cos + \\cos \\to \\cos \\cdot \\cos$,   $\\cos - \\cos \\to -\\sin \\cdot \\sin$ (минус снаружи!)
    • ' + + '
' + + '
' + + '
'; html += makeCard('rule', '4 формулы преобразования', '12.1', `

Эти формулы превращают сумму (или разность) тригонометрических функций в произведение.