zamok

/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
└── ... (другие изображения)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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