v.0.1 [index] [2]

README.md

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

docs/issues.md

@@ -1,2 +1,5 @@
+создай файл index.html
+v.0.1 [index] [2]
+
 сделай ТЗ
 v.0.1 [tz] [1]