Doc sync:
2026-02-24Full technical audit references:
Интерактивный справочник по химии с расширенными данными об элементах, аллотропах, таблицей растворимости, уравнивателем реакций, LaTeX-экспортом и умным поиском. Полностью адаптирован для мобильных устройств и больших экранов. Работает оффлайн как PWA, есть десктопные сборки для Windows и Linux (режим обоев — только Windows).
🔗 GitHub: https://github.com/layfhaker/mendeleevtable
🌐 Демо: https://layfhaker.github.io/mendeleevtable/
mendeleevtable/
├── index.html # Основная HTML-разметка
├── manifest.json # PWA манифест
├── sw.js # Service Worker для оффлайн-режима
│
├── electron-app/ # 🖥️ Electron приложение (отдельная папка)
│ ├── electron/ # Код Electron
│ │ ├── main.js # Главный процесс
│ │ ├── preload.js # Безопасный API
│ │ └── wallpaper-api.js # Windows API для обоев
│ ├── package.json # NPM конфигурация
│ ├── node_modules/ # Зависимости (после npm install)
│ ├── dist/ # Готовые сборки (.exe/.AppImage/.deb/.snap)
│ └── README.md # Инструкция по Electron
│
├── latex/ # 📄 LaTeX шаблоны экспорта
│ ├── element-template.tex
│ └── preamble.tex
│
├── css/ # Стили (модульная система)
│ ├── style.css # Главный файл (импорты)
│ ├── base.css # Базовые стили и canvas
│ ├── table.css # Периодическая таблица Менделеева
│ ├── modal.css # Модальное окно элемента
│ ├── theme.css # Тёмная тема + волновая анимация
│ ├── fab.css # FAB-меню (плавающая кнопка)
│ ├── calculator.css # Калькулятор молярной массы
│ ├── filters.css # Панель фильтров и поиска
│ ├── solubility.css # Таблица растворимости
│ ├── advanced-modal.css # Продвинутая модалка веществ
│ ├── nodemap.css # NodeMap (визуализация архитектуры)
│ └── scroll-collapse.css # Scroll-collapse система (NEW!)
│
├── js/ # JavaScript (модульная система)
│ ├── scrypt.js # 🚀 Модульный загрузчик (entry point)
│ ├── icons.js # SVG-спрайт иконок
│ ├── elements.js # База данных 118 элементов
│ ├── particles.js # Canvas: анимация фона + 3D атомы
│ ├── scroll-collapse.js # Виртуальный скролл и сжатие (NEW!)
│ ├── wallpaper-handler.js # Обработчик установки обоев (NEW!)
│ │
│ ├── modules/ # 📦 Основные модули
│ │ ├── modal.js # Модальное окно элемента
│ │ ├── theme.js # Тёмная тема
│ │ ├── calculator.js # Калькулятор молярной массы
│ │ ├── balancer.js # Уравниватель реакций
│ │ ├── latex-export.js # Экспорт в LaTeX
│ │ ├── search-filters.js # Поиск и фильтры
│ │ ├── ui.js # FAB-меню и UI
│ │ └── mobile-layout.js # Мобильная адаптация
│ │
│ ├── solubility/ # 🧪 Таблица растворимости
│ │ ├── data.js # Данные: катионы, анионы, матрица
│ │ ├── colors.js # 100+ цветов веществ
│ │ ├── solubility-table.js # Рендеринг таблицы
│ │ ├── filters.js # Фильтрация и выделение
│ │ ├── search.js # Поиск веществ
│ │ ├── modal.js # Открытие/закрытие основной модалки
│ │ ├── advanced-modal.js # Продвинутая модалка с детальной информацией
│ │
│ └── nodemap/ # 🗺️ Визуализация архитектуры
│ ├── nodemap-init.js # Инициализация
│ ├── nodemap-parser.js # Парсер функций
│ ├── nodemap-layout.js # Алгоритм размещения
│ ├── nodemap-canvas.js # Canvas рендеринг
│ ├── nodemap-modal.js # Интерфейс модального окна
│ ├── nodemap-flow-data.js # Анализ потока данных
│ ├── nodemap-flow-layout.js # Layout для flow-диаграмм
│ └── nodemap-flow-canvas.js # Рендеринг flow-диаграмм
│
└── img/
├── favicon.png # Фавикон
├── png1.png # PWA иконка 192x192
└── png2.png # PWA иконка 512x512
- ✅ Scroll-Collapse система — таблица плавно сжимается при скролле
- ✅ Виртуальный скролл — до порога 300px страница не прокручивается
- ✅ Установка обоев — кнопка в FAB-меню (только Windows)
- ✅ Windows API — автоматическая установка через PowerShell
- ✅ Portable версия — не требует установки
- ✅ Инсталлятор NSIS — профессиональная установка
- ✅ Linux сборки — AppImage / deb / snap
- ✅ Интерактивная таблица Менделеева (118 элементов)
- ✅ Цветовая кодировка по 10 категориям
- ✅ Лантаноиды и актиноиды вынесены отдельно
- ✅ FAB-меню для быстрого доступа к функциям
- ✅ SVG иконки с автоматической сменой цвета
- ✅ Полная мобильная адаптация (PWA-готово)
- ✅ Анимация открытия из точки клика
- ✅ Эффект "разлёта" элементов таблицы
- ✅ Полупрозрачный фон (видны 3D атомы)
- ✅ 4 информационные секции:
- Базовая информация (номер, масса, период, группа, блок)
- Физические свойства (плотность, температуры, цвет, структура)
- История и практика (открытие, происхождение, применение)
- Интересные факты
- ✅ Табы для переключения между формами
- ✅ Кнопка "+ Ещё" для редких аллотропов
- ✅ Индивидуальные данные для каждой формы
- ✅ Умный поиск по названию, символу, фактам, применению
- ✅ Панель фильтров по 10 категориям элементов
- ✅ Химический парсер — распознаёт формулы:
- "BaSO4" → открывает таблицу растворимости
- "хлорид натрия" → NaCl → таблица растворимости
- Подсветка найденного вещества крестовиной
- ✅ Полноэкранная модалка 24×16 (384 соединения)
- ✅ Sticky Headers — фиксированные заголовки
- ✅ Подсветка крестовиной — выделение строки + столбца
- ✅ Toggle-логика — повторный клик снимает выделение
- ✅ 🎨 Режим "Реальные цвета":
- Чёрные осадки (сульфиды Ag, Pb, Cu, Fe, Ni, Co, Hg)
- Жёлтые осадки (AgI, PbI₂, хроматы)
- Голубые растворы (Cu²⁺)
- Розовые растворы (Co²⁺, Mn²⁺)
- Зелёные растворы (Ni²⁺, Fe²⁺, Cr³⁺)
- Фиолетовые растворы (KMnO₄)
- Белые осадки с градиентом
- Бесцветные растворы с "водяным" оттенком
- ✅ Drag & Drop элементов из таблицы
- ✅ Тап для добавления (мобильные)
- ✅ Редактирование индексов
- ✅ Адаптивное позиционирование
- ✅ Ввод уравнения и автоматическая балансировка
- ✅ Встроенные примеры для быстрого старта
- ✅ Адаптивное позиционирование на больших экранах
- ✅ Экспорт данных элемента в
.tex - ✅ Форматирование формул через
mhchem - ✅ Таблицы свойств и соединений из таблицы растворимости
- ✅ 3D модель атома — вращающиеся электроны
- ✅ Тёмная тема с волновой анимацией
- ✅ Частицы на фоне — летающие точки с соединениями
- ✅ Плавные переходы и анимации
- ✅ manifest.json — установка на устройство
- ✅ Service Worker — работа без интернета
- ✅ Иконки 192×192 и 512×512
- ✅ iOS-совместимость (apple-touch-icon)
- ✅ Splash screen для Android
- ✅ Автоматический анализ кода — сканирование всех функций
- ✅ Интерактивный граф — визуализация зависимостей
- ✅ Тепловая карта — частота вызовов (Cold/Normal/Warm/Hot)
- ✅ Типизация функций (Entry/Hub/Leaf/Island)
- ✅ Метрики сложности — Lines, Complexity, Parameters
- ✅ Поиск и фильтры — быстрое нахождение функций
- ✅ Панель предупреждений — Dead Code, Circular Dependencies, High Complexity
- ✅ Открытие по клавише
.(точка)
- ✅ Полноэкранный режим таблицы растворимости
- ✅ Safe-area — учёт "челки" и кнопки Home
- ✅ Скрытые скроллбары — чистый интерфейс
- ✅ Вертикальная шапка — заголовок сверху, кнопки снизу
- ✅ Bounce эффекты — естественное поведение скролла
- ✅ 0px bottom padding в PWA-режиме
- ✅ Правильные рамки выделенных ячеек
- ✅ Адаптивные размеры модальных окон и таблиц
- ✅ Корректная геометрия панелей (калькулятор/уравниватель)
| Категория | Светлая тема | Тёмная тема |
|---|---|---|
| Щелочные металлы | 🔴 #ff9999 | 🔴 #8b3a3a |
| Щёлочноземельные | 🟠 #ffcc99 | 🟠 #8b6914 |
| Переходные металлы | 🟡 #ffff99 | 🟡 #7a7a2e |
| Постпереходные металлы | 🟢 #ccff99 | 🟢 #4a7a2e |
| Металлоиды | 🩵 #99ffcc | 🩵 #2e7a5c |
| Неметаллы | 🔵 #99ffff | 🔵 #2e6a7a |
| Галогены | 💙 #99ccff | 💙 #2e4a7a |
| Благородные газы | 🟣 #cc99ff | 🟣 #5c2e7a |
| Лантаноиды | 💗 #ff99cc | 💗 #7a2e5c |
| Актиноиды | 💜 #ff99ff | 💜 #7a2e7a |
- HTML5 — семантическая разметка
- CSS3 — Grid, Flexbox, CSS Variables, анимации, sticky positioning
- JavaScript (ES6+) — Drag & Drop API, модульная загрузка
- Canvas API — анимация частиц, 3D атомы, NodeMap визуализация
- SVG — векторные иконки
- PWA — Service Worker, Web App Manifest
- Electron — десктопное приложение с нативными API
- Node.js — PowerShell интеграция, установка обоев
- Без фреймворков — чистый код, максимальная производительность
| Параметр | Значение |
|---|---|
| Элементов в базе | 118 / 118 |
| Аллотропов | 40+ |
| Полей на элемент | 20+ |
| Соединений в таблице растворимости | 384 (24×16) |
| Веществ с реальными цветами | 100+ |
| Веществ с детальной информацией | 118 / 118 |
| JavaScript-функций | 200+ |
| Строк кода | ~40k |
| Размер проекта | ~150 КБ |
| CSS файлов | 11 |
| JS модулей | 24 |
- 🖥️ Electron приложение — полноценное десктопное приложение
- ✨ Scroll-Collapse система — таблица сжимается при виртуальном скролле
- 🖼️ Установка обоев Windows — интеграция с Windows API
- 📦 Portable версия — запуск без установки
- 🪟 NSIS инсталлятор — профессиональная установка
- 🐧 Linux сборки — AppImage / deb / snap
- 📄 LaTeX экспорт — генерация
.texфайлов для элемента - 🧪 118 элементов — полностью заполненные данные по таблице
- 🖥️ Оптимизация больших экранов — масштаб и отступы UI
- 🗺️ NodeMap — визуализация архитектуры проекта
- 📱 Мобильная оптимизация — полноэкранный режим таблицы растворимости
- 🔧 Safe-area — поддержка "челок" и кнопок Home
- 🎨 Bounce эффекты — естественное поведение скролла
- 📦 Продвинутая модалка — детальная информация о веществах
- 🗃️ substances-data.js — база данных о веществах
- 📱 Улучшения для iPhone — оптимизированы размеры иконок и кнопок
- 📱 Улучшения для Android — уменьшены размеры иконок FAB меню
- 🎨 Единообразие цветов — синие кнопки на всех устройствах
- Поиск и фильтрация — панель фильтров, умный поиск
- Таблица растворимости — 24×16, sticky headers, крестовина
- 🎨 Режим реальных цветов — 100+ веществ
- PWA — полный оффлайн-режим
- SVG иконки, FAB-меню
- Калькулятор массы (Drag & Drop)
- Тёмная тема с волновой анимацией
- 3D атомы, полупрозрачные модалки
- FAB-меню, калькулятор
- Элементы 11-40 в базе
- Система аллотропов
- Модальное окно с 4 секциями
- Базовая таблица Менделеева
- 📈 Графики растворимости — зависимость от температуры
- 📊 Режим сравнения — сопоставление двух веществ
- 🔬 Изотопы — информация о периодах полураспада
- ⚗️ Симулятор реакций — визуализация химических процессов
- ⚖️ Уравниватель реакций — автоматическая балансировка
- 🧪 База реакций — типичные реакции с анимацией
- 💾 Экспорт данных — PNG, PDF, JSON
- 🔗 Поделиться — ссылки на вещества и элементы
- 📋 Копирование — формул, данных, графиков
- 📝 Тесты по элементам — проверка знаний
- 🃏 Flashcards — карточки для запоминания
- 🏆 Режим викторины — соревновательный элемент
- 📊 Достижения — прогресс обучения
- 🌍 Мультиязычность (EN/RU/KZ)
- 🎨 Режим для дальтоников
- 🔌 Интеграция с PubChem API
- 🥽 AR-режим (WebXR)
# 1. Клонировать репозиторий
git clone https://github.com/layfhaker/mendeleevtable.git
# 2. Перейти в папку
cd mendeleevtable
# 3. Открыть в браузере
# Просто откройте index.html двойным кликом
# или используйте Live Server в VS CodeПроект можно запустить как десктопное приложение с функцией установки обоев!
📖 Подробная инструкция: см. electron-app/README.md
# 1. Перейти в папку Electron
cd electron-app
# 2. Установить зависимости
npm install
# 3. Запустить приложение
npm start
# 4. Собрать .exe файл (опционально)
npm run build- 🖼️ Установка обоев Windows — текущий вид таблицы как обои рабочего стола
- ✨ Scroll-Collapse система — таблица плавно сжимается при скролле
- 📦 Portable версия — не требует установки
- 🪟 NSIS инсталлятор — профессиональная установка
- Откройте сайт в Chrome/Safari: https://layfhaker.github.io/mendeleevtable/
- Нажмите "Установить" / "Добавить на главный экран"
- Приложение будет работать оффлайн
Проект автоматически деплоится на GitHub Pages при каждом пуше в ветку main.
- ✅ Chrome/Edge (рекомендуется) — полная поддержка
- ✅ Firefox — полная поддержка
- ✅ Safari (iOS/macOS) — полная поддержка
- ✅ Mobile browsers — оптимизировано
- ✅ PWA — работает на Android и iOS
⚠️ Internet Explorer — не поддерживается
- ECMAScript 6+ (ES2015)
- Canvas API
- CSS Grid/Flexbox
- Service Workers (для PWA)
md/AI_CONTEXT.md— технические ограничения и структураmd/TODO.md— список задач и багиmd/NODEMAP_GUIDE.md— руководство по NodeMapjs/nodemap/README.md— техническая документация NodeMapjs/solubility/README.md— описание модуля растворимостиjs/solubility/MODULES_STRUCTURE.md— структура модулейlatex/README.md— экспорт в LaTeXelectron-app/README.md— десктопная версия
- ✅ Модульная система — файлы загружаются динамически через
scrypt.js - ✅ Нет import/export — совместимость с
file://протоколом - ✅ Чистый JavaScript — без фреймворков и сборщиков
- ✅ CSS Variables — легкая кастомизация
- ✅ Адаптивный дизайн — mobile-first подход
// В файле js/elements.js
"Nn": {
atomicNumber: "119",
name: "Новый элемент",
atomicMass: "300",
// ... остальные поля
}// В файле js/solubility/substances-data.js
"Ba2+-SO42-": {
name: "Сульфат бария",
formula: "BaSO₄",
molarMass: 233.43,
// ... остальные поля (см. README.md в папке)
}Мы приветствуем любой вклад в развитие проекта! Вот как вы можете помочь:
- 🐛 Сообщить о баге — создайте Issue
- 💡 Предложить идею — опишите в Issues
- 📝 Добавить данные — элементы, вещества, реакции
- 🎨 Улучшить дизайн — UI/UX предложения
- 🌍 Перевод — добавить новый язык
- 📖 Документация — улучшить README, комментарии
- Четкое описание изменений
- Соблюдение структуры кода
- Тестирование на десктопе и мобильных
- Проверка в обеих темах (светлая/темная)
MIT License — можно использовать в любых целях с указанием авторства.
Авари (layfhaker)
GitHub: @layfhaker
Если проект вам помог — поставьте ⭐ на GitHub!
Проект создан для школьной олимпиады по химии/информатике
Последнее обновление: январь 2026