From 77e4dffb431db5747cbf7d0e6788e70afc719c17 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Sat, 30 May 2026 09:55:00 +0300 Subject: [PATCH] =?UTF-8?q?feat(phys8):=20Phase=200=20redesign=20foundatio?= =?UTF-8?q?n=20=E2=80=94=20CSS=20+=20JS=20infrastructure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Закладывает уникальный визуальный язык и engine'ы для редизайна Физики 8. CSS: - phys8-design-system.css (12 КБ): 3 темы (thermal/electric/spectrum), тематические hero-палитры, watermarks, animations (thermal-shift, electric-pulse, spectrum-drift, wm-breathe/flicker/rotate, noise overlay), staggered fade-in для виджетов, soft elevation на карточках, monospace для физ. величин, topic-aware progress bars, mobile responsive (≤768px), prefers-reduced-motion. - phys8-interactives.css (10 КБ): .p8-draggable + .p8-droptarget с hover-effects, .p8-palette (для circuit-builder), .p8-scrubber, .p8-readout табло, .p8-tooltip, .p8-sandbox canvas wrapper, .p8-thermometer + .p8-compass-needle SVG-композиции, glow-utility. JS: - phys8-anim.js (6 КБ): easing-функции (quad/cubic/expo/back/elastic/ bounce/spring), tween-engine с onUpdate/onComplete, raf-wrapper, oscillate, stagger, onVisible (IntersectionObserver). Экспорт P8Anim. - phys8-drag.js (12 КБ): универсальный drag-engine. P8Drag.attach() для DOM/SVG, P8Drag.attachCanvas() для логических объектов с hit-test, P8Drag.attachPalette() для drag-from-palette-to-drop, constraints (lockX/Y, bounds, snap-to-grid), touch + mouse + pointer. - phys8-helpers.js (18 КБ): тематические хелперы. P8Helpers.thermal (tempColor 0-1, heatFlowArrow, molecule, thermometerSVG, convectionCellParticles), .em (chargeSVG, circuitComponent для battery/resistor/lamp/ammeter/voltmeter/switch, fieldLineFrom), .optics (rayLine, lensSVG converging/diverging, mirrorPlane), .svg utils (el, create, linearGradient, radialGradient, gradientArrow, labeledText). Линковка (redesign_p8_phase0.cjs): - 2 CSS-link после katex CDN - 3 JS-link после phys.js/xp.js - body class p8-theme-thermal/electric/spectrum на ch1/ch2/ch3 - hub и lab — без темы (нейтральный пурпурный brand) --- backend/scripts/redesign_p8_phase0.cjs | 109 +++++++ frontend/css/phys8-design-system.css | 359 +++++++++++++++++++++ frontend/css/phys8-interactives.css | 372 +++++++++++++++++++++ frontend/js/phys8-anim.js | 167 ++++++++++ frontend/js/phys8-drag.js | 363 +++++++++++++++++++++ frontend/js/phys8-helpers.js | 429 +++++++++++++++++++++++++ frontend/textbooks/physics_8_ch1.html | 7 +- frontend/textbooks/physics_8_ch2.html | 7 +- frontend/textbooks/physics_8_ch3.html | 7 +- frontend/textbooks/physics_8_hub.html | 5 + frontend/textbooks/physics_8_lab.html | 5 + 11 files changed, 1827 insertions(+), 3 deletions(-) create mode 100644 backend/scripts/redesign_p8_phase0.cjs create mode 100644 frontend/css/phys8-design-system.css create mode 100644 frontend/css/phys8-interactives.css create mode 100644 frontend/js/phys8-anim.js create mode 100644 frontend/js/phys8-drag.js create mode 100644 frontend/js/phys8-helpers.js diff --git a/backend/scripts/redesign_p8_phase0.cjs b/backend/scripts/redesign_p8_phase0.cjs new file mode 100644 index 0000000..6fdf182 --- /dev/null +++ b/backend/scripts/redesign_p8_phase0.cjs @@ -0,0 +1,109 @@ +// Phase 0 — подключает design system + interactives CSS + новые JS-модули +// (phys8-anim.js, phys8-drag.js, phys8-helpers.js) во все 5 файлов учебника Физики 8: +// physics_8_hub.html, physics_8_ch1.html, physics_8_ch2.html, physics_8_ch3.html, physics_8_lab.html. +// Также добавляет body class (p8-theme-thermal/electric/spectrum) на каждой странице. +'use strict'; +const fs = require('fs'); +const path = require('path'); + +const TBOOKS = path.join(__dirname, '..', '..', 'frontend', 'textbooks'); + +const FILES = [ + { name: 'physics_8_hub.html', theme: null }, + { name: 'physics_8_ch1.html', theme: 'thermal' }, + { name: 'physics_8_ch2.html', theme: 'electric' }, + { name: 'physics_8_ch3.html', theme: 'spectrum' }, + { name: 'physics_8_lab.html', theme: null }, +]; + +const CSS_LINKS = [ + '', + '', +]; + +const JS_LINKS = [ + '', + '', + '', +]; + +// Anchor: после katex link мы добавляем design-system css +const CSS_ANCHOR = ''; + +// Anchor: после phys.js / xp.js мы добавляем новые JS +const JS_ANCHOR_OPTIONS = [ + '', + '', +]; + +let totalPatched = 0; + +for (const { name, theme } of FILES) { + const fp = path.join(TBOOKS, name); + if (!fs.existsSync(fp)) { console.warn('miss:', name); continue; } + let h = fs.readFileSync(fp, 'utf8'); + const before = h.length; + let changes = []; + + // 1. CSS links + for (const link of CSS_LINKS) { + if (h.includes(link)) continue; + if (h.includes(CSS_ANCHOR)) { + h = h.replace(CSS_ANCHOR, CSS_ANCHOR + '\n' + link); + changes.push('+css: ' + link.match(/href="([^"]+)"/)[1]); + } + } + + // 2. JS links — место подключения: после любого из якорей + for (const link of JS_LINKS) { + if (h.includes(link)) continue; + let placed = false; + for (const anchor of JS_ANCHOR_OPTIONS) { + if (h.includes(anchor)) { + h = h.replace(anchor, anchor + '\n' + link); + placed = true; + changes.push('+js: ' + link.match(/src="([^"]+)"/)[1]); + break; + } + } + if (!placed) { + // Fallback: перед + h = h.replace('', link + '\n'); + changes.push('+js (head): ' + link.match(/src="([^"]+)"/)[1]); + } + } + + // 3. Theme class на body + if (theme) { + const themeClass = 'p8-theme-' + theme; + if (!h.includes(themeClass)) { + // Найти и добавить класс + h = h.replace(/]*)>/, (match, attrs) => { + if (/class="([^"]*)"/.test(attrs)) { + return ' + `class="${cls} ${themeClass}"`) + '>'; + } + return ``; + }); + changes.push('+body class: ' + themeClass); + } + } + + fs.writeFileSync(fp, h); + if (changes.length) { + console.log(`${name}: ${before} → ${h.length} bytes`); + changes.forEach(c => console.log(' ' + c)); + totalPatched++; + } else { + console.log(`${name}: no changes (already patched)`); + } + + // Sanity parse inline scripts + const scripts = [...h.matchAll(/ + + + - +
diff --git a/frontend/textbooks/physics_8_ch2.html b/frontend/textbooks/physics_8_ch2.html index 79b84e0..aa40409 100644 --- a/frontend/textbooks/physics_8_ch2.html +++ b/frontend/textbooks/physics_8_ch2.html @@ -459,6 +459,8 @@ doctype html> Физика 8 · Глава 2 · «Электромагнитные явления» + + + + + - +
diff --git a/frontend/textbooks/physics_8_ch3.html b/frontend/textbooks/physics_8_ch3.html index 6bfb699..df3c3a8 100644 --- a/frontend/textbooks/physics_8_ch3.html +++ b/frontend/textbooks/physics_8_ch3.html @@ -90,6 +90,8 @@ doctype html> Физика 8 · Глава 3 · «Световые явления» + + + + + - +
diff --git a/frontend/textbooks/physics_8_hub.html b/frontend/textbooks/physics_8_hub.html index 69c1d8e..366a365 100644 --- a/frontend/textbooks/physics_8_hub.html +++ b/frontend/textbooks/physics_8_hub.html @@ -9,11 +9,16 @@ Физика 8 класс — учебник + + + + +