Откуда это взялось
Разговаривали с Claude про химию — не «помоги с задачей», а «как объяснить строение атома школьнику 9 класса так, чтобы не забыл через неделю». Claude начал рассуждать про интерактивность: периодическая таблица в учебнике — мёртвый объект, а та же таблица с возможностью покрутить атом железа в 3D — это другая история.
Готовый инструмент такого уровня либо стоит денег, либо показывает рекламу, либо выглядит как 2009 год. Решили собрать свой.
Один вечер. Claude пишет код, я смотрю что получается, даю обратную связь, уточняю детали. Сын тестирует и говорит «а можно добавить вот это». Так и собралось.
Почему один HTML-файл, а не приложение
Первый вопрос: как деплоить? React, Next.js, Vite? Здесь намеренно выбрали ограничение: один автономный HTML-файл.
Причины:
- Работает везде — старый ноут, Android 8, школьный компьютер под Windows XP
- Не нужен хостинг с Node.js или Docker
- Можно скинуть в Telegram, открыть с диска двойным кликом, закинуть в папку на Битриксе
- Через 10 лет тоже будет работать
Две внешние зависимости: Three.js (3D-графика) и Chart.js (графики) подгружаются с CDN. После первой загрузки браузер их кеширует — работает и в метро.
Итоговый размер: 104 КБ чистого HTML + JS + CSS. Меньше, чем одна фотография с телефона.
Что внутри: 7 разделов
1. Периодическая таблица
Все 118 элементов в правильной раскладке (18 столбцов, лантаноиды и актиноиды отдельными строками снизу). Поиск по символу, названию или номеру — попробуйте «золото» или «26». Клик на элемент — карточка с атомной массой, электроотрицательностью, температурами плавления/кипения, электронной конфигурацией и годом открытия. Десять цветовых категорий.
2. 3D-модель атома (планетарная модель Бора)
Для любого из 118 элементов: ядро (для лёгких атомов видны отдельные протоны и нейтроны, для тяжёлых — единая сфера), электронные оболочки K–Q, электроны на орбитах.
Первый прототип использовал упрощённый алгоритм распределения электронов по правилу 2n². Проверили для переходных металлов — нашли ошибки для хрома, меди, платины, урана: реальная химия не укладывается в упрощённую формулу. Заменили на справочный массив всех 118 электронных конфигураций с учётом аномалий. Теперь всё точно.
Управление: вращение мышью или пальцем, зум колесом или щипком.
3. Атомные орбитали (квантовая модель)
8 типов орбиталей в 3D: 1s, 2s, 2p (три направления), 3d, 4f. Облака точек строятся методом rejection sampling — берём точки в сферу, проверяем плотность вероятности по формулам волновой функции |Ψ|², оставляем с нужной вероятностью. Точки разделены по знаку волновой функции на два цвета — видны узлы орбиталей. Рядом — теоретический блок: 4 квантовых числа, принцип Паули, правило Хунда, порядок заполнения по Клечковскому.
4. Таблица растворимости
Стандартная школьная: 18 катионов × 13 анионов, 234 значения (Р/М/Н/↑/—) с hover-подсказками. Правила запоминания исключений под таблицей. Этот раздел предложил добавить сын: говорит, именно его больше всего приходится гуглить.
5. Ряд электроотрицательности
Горизонтальная шкала от металлов (Cs) к неметаллам (F), правила определения типа химической связи по разности ЭО. Полный список 99 элементов, отсортированных по возрастанию. ΔЭО < 1.7 — ковалентная полярная, ≥ 1.7 — ионная: базовый материал ОГЭ/ЕГЭ, который регулярно путают.
6. Викторина
4 режима: символ → название, название → символ, позиция в таблице, электронная конфигурация → элемент. 4 уровня сложности: до 20-го элемента, до 36-го, до 56-го, все 118. Прогресс-бар, разбор после каждого вопроса, итоговая оценка.
Режим «угадать по электронной конфигурации» добавили по запросу — самая сложная тема для подготовки к ОГЭ.
7. Графики свойств по периодам
6 свойств в динамике: атомный радиус, электроотрицательность, энергия ионизации, сродство к электрону, температура плавления, плотность. Фильтр по периодам (1–6 или все). Точки раскрашены по периодам, видны зигзаги. Под каждым графиком — объяснение закономерности.
Итеративная работа, а не один промпт
Финальный файл — результат нескольких итераций:
- Периодическая таблица → смотрим, проверяем
- 3D-орбитали → ломается вёрстка → чиним
- Викторина → добавляем режимы
- Атомная модель → находим ошибки в конфигурациях → исправляем
- Таблица растворимости и ряд ЭО → по запросу тестировщика
- Собираем в один файл → проверяем на телефоне
Ключевой момент: упрощённые конфигурации электронов на первый взгляд выглядят правильно для натрия и кислорода, но ломаются на хроме. Это обычная разработка — код нужно тестировать на граничных случаях, независимо от того, кто его написал.
ФЗ-152 из коробки
Никаких персональных данных, cookies, трекеров. Никакой формы регистрации. Файл открывается и работает. Можно поставить на школьный сайт без бумажной волокиты с юристами.
Где попробовать
console10.ru/chemistry — открывается в браузере, работает с телефона.
Исходный файл (chemistry.html, 104 КБ) можно свободно использовать: в школе, в кружке, дома. Открыть в блокноте и добавить что-то своё — обычный HTML.
Что планируем добавить
- Сохранение прогресса викторины (localStorage — без серверов)
- Режим «работа над ошибками» — повторение только проваленных вопросов
- Переход из карточки элемента сразу к его 3D-атому
- 3D-модели простых молекул (H₂O, CO₂, CH₄) с углами связей
- Балансировщик химических уравнений
Если есть идеи что добавить или нашли ошибку — напишите нам.
Сделано в Петрозаводске с помощью Claude. Один файл, один вечер, ноль подписок.