Откуда это взялось
Эту историю мы рассказываем не про клиента, а про себя. У нашего основателя Павла сын учится в школе, и однажды вечером дома зашёл разговор с 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-орбитали → ломается вёрстка → чиним
- Викторина → добавляем режимы
- Атомная модель → находим ошибки в конфигурациях → исправляем
- Таблица растворимости и ряд ЭО → по запросу тестировщика
- Собираем в один файл → проверяем на телефоне
Ключевой момент: упрощённые конфигурации электронов на первый взгляд выглядят правильно для натрия и кислорода, но ломаются на хроме. Это обычная разработка — код нужно тестировать на граничных случаях, независимо от того, кто его написал.
Этот вечер — хорошая иллюстрация того, как мы вообще работаем. Умение быстро собрать рабочий инструмент в паре с AI, проверить его на реальных данных и довести до точности — то же самое, что мы делаем в клиентских проектах. Здесь заказчиком был сын.
ФЗ-152 из коробки
Никаких персональных данных, cookies, трекеров. Никакой формы регистрации. Файл открывается и работает. Можно поставить на школьный сайт без бумажной волокиты с юристами.
Где попробовать
console10.ru/chemistry — открывается в браузере, работает с телефона.
Исходный файл (chemistry.html, 104 КБ) можно свободно использовать: в школе, в кружке, дома. Открыть в блокноте и добавить что-то своё — обычный HTML.
Что планируем добавить
- Сохранение прогресса викторины (localStorage — без серверов)
- Режим «работа над ошибками» — повторение только проваленных вопросов
- Переход из карточки элемента сразу к его 3D-атому
- 3D-модели простых молекул (H₂O, CO₂, CH₄) с углами связей
- Балансировщик химических уравнений
Если есть идеи что добавить или нашли ошибку — напишите нам.
Сделано в Петрозаводске с помощью Claude. Один файл, один вечер, ноль подписок.