wave-spectr

wave-spectr

Механические волны. Звук. Среды распространения.

Гуркин В.

Проект PWA: HarmoniX (Волновой Спектр)

📝 Описание

Интерактивное веб-приложение для изучения механических волн, реализующее 5 функциональных блоков (одиночная волна, сумма Фурье, панель управления, спектрограмма, итоговое тестирование) с интегрированным модулем ТЗИ (Техническая защита информации) и умным образовательным интерфейсом.

🚀 Основной функционал (v.1 - v2.6):

• Сайтовая структура: Интегрирована боковая панель (Sidebar) с удобной навигацией, ссылками и настройками интерфейса. Внедрен "Подвал" (Footer) приложения.
• Идеальная адаптивная сетка: Свойства Flexbox и Grid настроены так, что графики динамически заполняют всю доступную площадь экрана без скроллов, пустых зон и съезжающих элементов, даже при переходе в полноэкранный режим. Умная кнопка "На весь экран" отслеживает состояние браузера.
• Расширенное тестирование: База содержит 30 вопросов. Добавлен выбор уровня сложности (Легкий - 5, Средний - 15, Сложный - 30). Выводится процент успешности и кнопки выхода/рестарта.
• Кастомизация UI: Светлая, Темная, Неон темы, загрузка пользовательского фона с графическими фильтрами, кнопка мгновенного удаления загруженных обоев. Убраны нерабочие ссылки на внешние картинки.
• Звуковой движок (Web Audio API): Генерация физического звука частот и отдельные UI-звуки при взаимодействии с интерфейсом.

⚙️ Основной функционал (База Версии 2.6)

• Сайтовая структура: Интегрирована боковая панель (Sidebar) с удобной навигацией, ссылками и настройками интерфейса. Внедрен "Подвал" (Footer) приложения.
• Идеальная адаптивная сетка: Свойства Flexbox и Grid настроены так, что графики динамически заполняют всю доступную площадь экрана без скроллов, пустых зон и съезжающих элементов, даже при переходе в полноэкранный режим. Умная кнопка "На весь экран" отслеживает состояние браузера.
• Расширенное тестирование: База содержит 30 вопросов. Добавлен выбор уровня сложности (Легкий - 5, Средний - 15, Сложный - 30). Выводится процент успешности и кнопки выхода/рестарта.
• Кастомизация UI: Светлая, Темная, Неон темы, загрузка пользовательского фона с графическими фильтрами, кнопка мгновенного удаления загруженных обоев. Убраны нерабочие ссылки на внешние картинки.
• Звуковой движок (Web Audio API): Генерация физического звука частот и отдельные UI-звуки при взаимодействии с интерфейсом.
  

---

🚀 Эволюция платформы (Версии 8.0 — 19.0 Enterprise Grand Master)

🎨 Векторный анализ и UI-дизайн (v8.0 - v12.0)

• Фигуры Лиссажу: Внедрена математическая логика построения двумерных замкнутых траекторий (X-Y осциллограф) для анализа фазовых сдвигов и кратных частот.
• Архитектура Glassmorphism: Все интерактивные панели переведены на эффект полупрозрачного матового стекла (backdrop-filter: blur), что позволило создать современный "парящий" дизайн, сквозь который видны пользовательские обои.
• Палитра тем: База стилей расширена до 10 уникальных тем оформления (Киберпанк, Океан, Лес, Закат, Сакура, Кофе, Глубокий космос и др.).

🌍 Глобализация (v15.0 - v16.0 Ultimate)

• Мультиязычность (i18n): Написан собственный модуль локализации. 100% элементов интерфейса (подписи осей, телеметрия графиков, калькуляторы, ТЗИ, кнопки и динамические всплывающие подсказки) переводятся на английский (EN) и русский (RU) языки в один клик без перезагрузки DOM-дерева.
• Оптимизация рендера (Emoji-fix): Полный отказ от загрузки внешних иконок (.svg/.png). Внедрен класс .emoji-fix, использующий системные шрифты устройства, что полностью убрало фризы и микростаттеры графического интерфейса.

🛡️ Информационная безопасность и Смарт-функции (v17.0 - v18.5)

• Виброакустическая защита (ТЗИ): Разработан модуль защиты информации. Используя узел AudioBufferSourceNode, система генерирует аппаратный "белый шум", который подмешивается в основной звуковой канал. Это визуально (на спектре и осциллограмме) и аудиально демонстрирует принципы акустической маскировки речевых каналов от подслушивающих устройств.
• Умный детектор сред (Smart Calc): Старая громоздкая сетка из 30 кнопок для выбора сред удалена. Внедрен умный <select> с алгоритмом двусторонней синхронизации: при ручном вводе скорости (например, 1480 м/с) система сама сканирует массив и переключает селектор на "Пресная вода", выводя правильные текстовые оповещения.
• Волновая геометрия: Обычные кнопки заменены на асимметричные, повторяющие форму волны (border-radius: 18px 6px 18px 6px). Добавлена система глубоких теней (text-shadow, box-shadow) для предотвращения "сливания" белого текста с яркими темами.

🏆 Геймификация и Интерактив (v19.0 Enterprise)

• Пошаговое тестирование (Test Slider): Полностью ликвидирован вертикальный скролл в модальном окне тестов. Вопросы появляются строго по одному в центре экрана с плавной анимацией (fadeInUp). Добавлены элементы управления "Назад"/"Вперед".
• Анимированный SVG-результат: Экран итогов фундаментально переработан. Внедрено SVG-кольцо (stroke-dashoffset), которое закрашивается (от зеленого до красного) пропорционально набранным баллам. Реализована функция Count-up (цифры быстро "бегут" от 0 до финального результата) с синхронизированным звуковым сопровождением (тиканье часов и победный аккорд).
• Умная лента таймера: Текстовый обратный отсчет заменен на убывающую градиентную неоновую полосу. На последних 10 секундах полоса краснеет, а счетчик начинает тревожно пульсировать.
• Интеграция с Wikipedia: Модуль разбора ошибок подключен к энциклопедической базе. Теперь под каждым неправильным ответом генерируется гиперссылка на детальную статью в Википедии (про клиппинг, ряд Фурье, интерференцию и т.д.).
• Живой логотип: В верхней навигационной панели убрана статичная квадратная рамка. Логотип HarmoniX превратился в живой круглый градиентный пульсар (эффект morphRing — перетекающая капля).
• Расширенная база знаний: В раздел "О проекте" встроен подробный интерактивный Changelog (таймлайн разработки). Справочник формул дополнен сложными вычислениями (Эффект Доплера, Акустический импеданс, фундаментальные константы) и прямой ссылкой на международную базу HyperPhysics.

💎 v21.0 Stable (Финальная полировка)

• Волновая геометрия кнопок: Восстановлены и улучшены кнопки меню и тестов с асимметричным скруглением (border-radius: 18px 6px).
• Контрастность данных: Для значений фазы и скорости волны задана жесткая черная обводка (text-shadow), исключающая слияние с белыми обоями.
• Интеграция YouTube: В блок интерактивной теории добавлен iframe-контейнер для встраивания пользовательских лекций.
• Стабилизация макета: Вернулись секции FAQ, "О проекте" с историей версий, кнопки фуллскрина и сетка полезных ресурсов.
• ---

Вся техническая документация вынесена в отдельные файлы:

• tz.md — Подробное техническое задание и архитектура.
• czenario.md — Описание логики работы сцен (включая проработку полного пути пользователя: от базовой акустики до модуля безопасности).
• issues.md — Список багов, отчет по тестированию и полная история запросов к ИИ-ассистенту при разработке.