---

Тема: сайт с опросом по тому насколько человек хорошо выявляет фишинг

ТЗ: Квиз «Фишинг или реальность?»

1. Общее

Один файл index.html (HTML, CSS и JS внутри). Без библиотек и сервера. Рядом лежат 2 картинки: header.jpg (фон шапки) и logo.png (логотип). Язык русский, комментариев в коде нет.

2. Структура страницы

Шапка сверху. Основной блок по центру (меняется: старт, вопросы, результат). Подвал снизу.

3. Шапка

Высота 220 px, на телефоне 160 px. Фон header.jpg, затемнение. Логотип 90 на 90 px, на телефоне 60 на 60 px. Название рядом с лого, цвет e932ec, размер 42 px, на телефоне 26 px.

4. Подвал

Фон 3d0f5c, текст светлый. Заголовок «Чек-лист безопасности». Три пункта:

1. Проверяй буквы в адресной строке.
2. Не переходи по ссылкам с угрозами или обещаниями денег.
3. Включи двухфакторную аутентификацию.

5. Стартовый экран

Заголовок «Фишинг или реальность?». Подзаголовок «Проверь, сможешь ли ты распознать интернет-мошенников.» Описание: квиз из 12 случайных вопросов, в базе 20. Кнопка «Начать тест».

6. Экран вопроса

Счётчик «Вопрос N из 12». Полоса прогресса. Заголовок «Ситуация» и текст. Две кнопки: «Реальность» и «Фишинг». После ответа кнопки блокируются, показывается окно.

7. Всплывающее окно

Затемнение, карточка по центру. Метка верно или неверно. Текст правильного ответа. Объяснение. Кнопка «Далее» или «Показать результат». За верный ответ плюс один балл.

8. Экран результата

Считается процент правильных:
40 и меньше — «Ты в зоне риска».
от 40 до 100 — «Хороший результат».
100 — «Магистр кибербезопасности».

Показывается эмодзи, заголовок, «Правильных ответов X из Y», кнопка «Пройти ещё раз».

9. Логика

База из 20 вопросов, у каждого три поля: ситуация, ответ, объяснение. За раунд берутся 12 случайных. Перемешивание случайное. Состояние: список вопросов раунда, текущий индекс, счёт, флаг ответа. Цикл: старт, вопросы, результат, заново.

10. База вопросов

1. Письмо о блокировке карты со странной ссылкой. Фишинг.
2. Ссылка на бесплатный Premium с кодом из SMS. Фишинг.
3. Ссылка avito.ru с замочком. Реальность.
4. Голосование на konkurs-deti-vsedoma.ru. Фишинг.
5. Письмо о штрафе с gosuslugi.ru. Реальность.
6. СМС о задержке посылки со ссылкой pochta-dostavka.top. Фишинг.
7. Звонок из банка с просьбой назвать код из СМС. Фишинг.
8. Письмо от Сбербанка с online-sberbank.ru. Фишинг.
9. Вакансия 5000 рублей в день в Telegram. Фишинг.
10. Письмо Госуслуг о входе с нового устройства. Реальность.
11. СМС о списании с номером 8-800. Фишинг.
12. Ссылка ozon.ru от продавца. Реальность.
13. Сообщение от мамы с просьбой денег. Фишинг.
14. Вручную набран sberbank.ru. Реальность.
15. Письмо о выигрыше iPhone с оплатой доставки. Фишинг.
16. Пуш в приложении банка о подтверждённой операции. Реальность.
17. Просьба перейти в Telegram и вложить в крипту. Фишинг.
18. Ссылка cdek-info.ru от курьера. Фишинг.
19. Вручную набран mos.ru. Реальность.
20. Просьба написать логин и пароль в личку. Фишинг.

11. Стили

Шрифт системный. Кнопки скруглённые, при наведении чуть приподнимаются. Карточка блока белая со скруглением и тенью. Контейнер максимум 700 px по центру. Отдельная версия для телефона от 520 px.

12. Хостинг

GitHub, публичный репозиторий, файлы в корне. Render, тип Static Site, ветка main, команда сборки пустая, папка публикации точка. Адрес сайта вида имя.onrender.com.

13. Критерии приёмки

1. Открывается по ссылке без ошибок.
2. 12 вопросов за раунд, каждый раз новые из 20.
3. После ответа всплывает окно с вердиктом и объяснением.
4. Прогресс и счёт считаются верно.
5. После последнего вопроса показывается результат по проценту.
6. Кнопка «Пройти ещё раз» даёт новый набор.
7. Чек-лист виден внизу на всех экранах.
8. Сайт корректно смотрится на телефоне.