|
|
@@ -0,0 +1,108 @@
|
|
|
+/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.
|
|
|
+
|
|
|
+💡 Дополнительные идеи
|
|
|
+
|
|
|
+ Видео: Можно встроить короткое видео работы реального замка для наглядности.
|
|
|
+
|
|
|
+ Схема в высоком разрешении: При клике на элементы схемы можно показывать их увеличенное изображение и краткое описание.
|
|
|
+
|
|
|
+ Режим обучения: Пошаговый режим, который проведёт пользователя по всем этапам работы замка с комментариями.
|
ypv