PWA_FIREALARM

Пожарная сигнализация — интерактивный курс

Одностраничное локальное PWA (HTML + CSS + JS, без внешних библиотек и сети). Тематика: ТЗИ, п. 1.2 — принцип работы прибора, интерактивная модель (оптический дымовой и тепловые извещатели, ППКП).

Запуск

Service Worker и установка PWA работают только по http(s):// или localhost. В Chrome/Edge: значок «Установить» в адресной строке → приложение работает офлайн. Без сервера index.html тоже можно открыть двойным щелчком — курс будет работать, но без установки и офлайн-кэша.

Требования ТЗ и как они выполнены

Требование	Реализация
Красивый дизайн	Тёмная «glass»-тема, градиенты, анимации, адаптивная вёрстка (телефон/ПК)
Интерактивность, аудио, видео	Модели приборов (SVG-камера дымового извещателя, график теплового, пульт ППКП); Web Audio — сирена и сигналы; синтез речи «Внимание! Пожар!»; canvas-«видео» развития пожара
Объём ≥ 5 минут	8 сцен с обязательными заданиями + тест; ориентировочно 6–10 минут
Образовательность + итоговый тест	Кнопка «Итоговое Тестирование» на финальной сцене, 9 вопросов, оценка и разбор ошибок
Сценарий в отдельном файле	SCENARIO.md: сцены, элементы, действия, условия перехода

Структура

index.html            каркас страницы
style.css             оформление
app.js                движок сцен, модели приборов, тест, звук
manifest.webmanifest  манифест PWA
sw.js                 Service Worker (офлайн-кэш)
icons/                иконки приложения
SCENARIY.md           сценарий
CHANGELOG.md          отчёт об изменениях с датами
issues.md             известные проблемы и планы

Что показать при защите (содержание)

1. Стадии пожара и признаки: дым → тепло → пламя.
2. Оптический дымовой извещатель: светодиод, фотодиод вне луча, рассеяние на частицах дыма, порог и задержка срабатывания, причины ложных тревог.
3. Тепловые: максимальный (порог) и дифференциальный (скорость роста).
4. Выбор извещателя по помещению.
5. ППКП: зоны, оповещение, квитирование, сброс, ручной извещатель.
6. Алгоритм действий при тревоге.

Технические замечания

• Звук включается после первого клика (ограничение браузеров).
• Голосовое оповещение зависит от наличия русского голоса в системе.
• Лучший результат теста хранится в localStorage.

Управление

Кнопки в шапке: ☰ меню сцен, 💡 подсказка, ↺ сброс сцены, ⛶ полный экран, 🔊 звук. Клавиши: ←/→, M, H, R, F, Esc.