/zke-4-10-pwa/
├── index.html          # Основной HTML-файл
├── manifest.json       # Манифест PWA
├── sw.js               # Service Worker для офлайн-работы
├── /css/
│   └── style.css       # Все стили
├── /js/
│   ├── app.js          # Основная логика приложения
│   ├── circuit.js      # Логика интерактивной схемы
│   ├── keyboard.js     # Логика клавиатуры
│   ├── audio.js        # Генерация звуков (Web Audio API)
│   └── quiz.js         # Логика итогового тестирования
└── /images/
    ├── lock-icon.png
    └── ... (другие изображения)


2. Образовательный контент (2D)

Основные сведения о замке ЗКЭ-4-10:

    Название: Замок кодовый электронный ЗКЭ-4-10.

    Производитель: СССР, 1980-е годы.

    Назначение: Устанавливался на дверях помещений в НИИ, лабораториях, университетах, административных зданиях.

    Принцип работы: Электронный, построен на тиристорах (полупроводниковых приборах). В отличие от более ранних моделей на реле, не имеет щелкающих механических контактов.

    Количество цифр в коде: 4.

    Элементы управления: Клавиатура с кнопками ВМ-16.

    Индикация: Сигнальная лампа открытия замка.

    Питание: От сети 220В через встроенный трансформатор.

Устройство и составные части:

    Блок управления: Металлическая коробка с трансформатором и платой управления. Внутри находятся два диодных моста: один для питания электроники, другой — для питания замка.

    Клавиатура: Пластиковая панель с 10 кнопками (цифры 0-9) и сигнальной лампой. Кнопка «.» не задействована.

    Электромеханический замок: Нормально закрытая защёлка, которая открывается при подаче на неё питания. Имеет ключи резервного открытия на случай отключения электричества.

Как работает замок:

    Установка кода: Код задаётся перемычками на плате управления. К контактам «1», «2», «3», «4» подключаются провода от кнопок, соответствующих первой, второй, третьей и четвёртой цифре кода.

    Набор кода: При нажатии кнопок в правильной последовательности открываются соответствующие тиристоры. После набора всех четырёх цифр срабатывает реле времени (около 1.5 секунд), которое подаёт питание на электромагнит замка.

    Неверный код: Если хотя бы одна цифра набрана неверно, все тиристоры закрываются, и набранный код сбрасывается.

3. Дизайн и вёрстка

    Общий стиль: Ретро-футуризм в духе советского промышленного дизайна. Приглушённые цвета, металлические текстуры, шрифты с засечками (например, «Roboto Slab» или «PT Serif»).

    Левая часть (защёлка): Стилизованное изображение электромеханической защёлки с электромагнитом. При открытии замка защёлка должна визуально сдвигаться (CSS-анимация).

    Правая верхняя часть (схема): Интерактивная принципиальная схема. Элементы схемы (тиристоры, диодные мосты, реле времени, электромагнит) должны подсвечиваться в зависимости от состояния системы.

    Правая нижняя часть (клавиатура): Стилизованная под реальную клавиатура замка. При нажатии кнопки должны быть тактильные и звуковые отклики.

4. Интерактивность и аудио

    Звуки: С помощью Web Audio API можно генерировать звуки щелчков кнопок, срабатывания реле и открытия замка. Это добавит погружения и не потребует внешних аудиофайлов.

    Визуальная обратная связь: При нажатии кнопок на клавиатуре они должны визуально «нажиматься». На схеме должны загораться соответствующие цепи.

    Анимация защёлки: При правильном коде защёлка должна сдвинуться, а на клавиатуре загореться сигнальная лампа.

5. Итоговое тестирование

В конце страницы необходимо разместить кнопку «Итоговое тестирование», которая запускает викторину из 5-10 вопросов. Примеры вопросов:

    Как называется самый массовый советский кодовый замок?

    Сколько цифр содержит код замка ЗКЭ-4-10?

    На каких элементах построена схема замка ЗКЭ-4-10?

    Что происходит при наборе неправильного кода?

    Какой элемент открывает защёлку замка?

    Для чего в замке предусмотрены ключи резервного открытия?

    Какая кнопка на клавиатуре не задействована?

    Как устанавливается код на замке?

6. Реализация PWA

Для того чтобы страница работала офлайн и могла быть установлена на устройство, необходимо:

    Создать manifest.json: Файл с метаданными приложения (название, иконки, цвета).

    Написать sw.js (Service Worker): Скрипт, который кэширует все необходимые файлы (HTML, CSS, JS, изображения) для офлайн-доступа.

    Зарегистрировать Service Worker: В основном скрипте app.js добавить код для регистрации Service Worker.

💡 Дополнительные идеи

    Видео: Можно встроить короткое видео работы реального замка для наглядности.

    Схема в высоком разрешении: При клике на элементы схемы можно показывать их увеличенное изображение и краткое описание.

    Режим обучения: Пошаговый режим, который проведёт пользователя по всем этапам работы замка с комментариями.