# Техническое задание и методические указания по разработке PWA-моделей (проект «Диводел»)

## 1. Общие требования к интерактиву

**PWA (Progressive Web App)** — это одностраничное локальное веб-приложение, которое работает прямо в браузере, может быть установлено на устройство и функционировать без доступа к интернету (офлайн).

Ваша задача — создать не просто красивую анимацию, а **интерактивный образовательный тренажер**.

1. **Визуальный стиль (Дизайн):** Приветствуется уникальная стилистика советских 50–70-х годов (пионерская, военная, комсомольская тематика). Оформление должно быть аккуратным, современным и адаптивным (корректно отображаться на смартфонах и ПК).
2. **Интерактивность:** Приложение должно реагировать на действия пользователя. Большим плюсом будет использование мультимедиа (Web Audio API для звука, видео, анимация Canvas/SVG, тактильная отдача).
3. **Объем и вовлеченность:** Время полного прохождения приложения — не менее 5 минут.
4. **Образовательный компонент (2D):** 
   - В конце сценария должна быть кнопка **«Итоговое тестирование»**, запускающая тест из 5–10 вопросов для проверки усвоения материала.
   - *Важно:* на устной защите вы демонстрируете понимание **содержания** темы (физика, принципы работы, алгоритмы), а не только техническую реализацию кода.

## 2. Выбор тематики

Вы можете выбрать тему из любого предложенного направления (в порядке убываний приоритетов):

1. **ТЗИ (Техническая защита информации):** УЗИ, тепловизоры, оптика глаза, трансформаторы, ПЭМИН.
2. **Принцип работы прибора:** «Интерактивная модель прибора» (пожарная/охранная сигнализация, видеокамеры и пр.).
3. **ЗИ (Защита информации):** Криптография, сетевые технологии, программная защита.
4. **Смежные дисциплины и хобби:** Любой другой учебный предмет, а также экология, краеведение, история, палеонтология, аквариумистика, ботаника (кактусы, фиалки, тюльпаны), умные скворечники и другие ваши увлечения.

## 3. Техническое задание (ТЗ)

1. **Сценарий:** Оформляется в отдельном разделе Листа спецификации. 
   - Сценарий состоит из **«Сцен»**. Одна «Сцена» — это один этап/экран приложения.
   - В каждой «Сцене» должны быть описаны:
     - элементы интерфейса, из которых она состоит;
     - действия, которые пользователь может выполнить;
     - условия, необходимые для перехода на следующую сцену.
   - **Минимум — 5 сцен.**
   - *Пример оформления ТЗ:* [http://213.155.192.79:3001/ypv/Maya-bee/ТЗ.md](http://213.155.192.79:3001/ypv/Maya-bee/ТЗ.md)
2. **Графические материалы:** Если в приложении используются изображения, вы должны предоставить их исходники (или подтвердить права на использование).

## 4. Методика работы с ИИ (Vibe-coding)

Разработка ведется итеративно, в несколько этапов:

- **Этап 1. Спецификация.** До начала промптинга вы пишете физическую/логическую основу (формулы, граничные значения, единицы измерения). Без этого листа к работе не приступаем.
- **Этап 2. Генерация.** Вы загружаете в нейросеть весь контекст (сценарий, спецификацию, требования к дизайну). ИИ выступает в роли «стажера» и выдает предварительный результат (код).
- **Этап 3. Верификация и итерации.** Вы тестируете полученный код. Ищете «галлюцинации» ИИ: неверные формулы, сломанные крайние случаи (например, деление на ноль при нулевом расстоянии). Исправляете недостатки, добавляете новые функции и повторяете цикл до полного соответствия спецификации.
- **Этап 4. Устная защита.** Вы показываете работающую модель и объясняете, какие ошибки допустил ИИ и как вы их нашли и исправили.