Сайт + Админка

1. Общее описание

Необходимо разработать веб-сайт с платежным шлюзом и административной панелью. Основной функционал:

- Пользователь вводит данные карты и ОТП код.

- Данные поступают в админку, где администратор управляет процессом оплаты.

- Чат доступен только администратору для общения с пользователем.

---

2. Функциональные требования

2.1. Платежный шлюз

- На сайте должна быть форма для ввода данных карты:

- Name Holder (имя владельца карты).

- Number Card (номер карты, 16 цифр).

- Date EXP (срок действия карты, формат MM/YY).

- CVV (код безопасности, 3 цифры).

- После ввода данных карты:

- Появляется анимация загрузки. текст "Ожидайте, обработка данных"

- Данные отправляются в админку.

- Администратор обрабатывает данные и выводит поле "Ввод ОТП" по кнопке из админки.

- На сайте появляется окно для ввода ОТП кода (6 - 8 цифр).

2.2. Обработка ОТП кода

- ОТП код также отправляется в админку.

- Администратор может:

- Подтвердить оплату:

- Пользователь перенаправляется на страницу "Спасибо за оплату".

- Через 2 секунды происходит редирект на google.com.

- Отклонить ОТП код:

- Пользователь получает уведомление "Неверный ОТП код".

- Форма ОТП кода сбрасывается для повторного ввода.

- Запросить новую карту:

- Пользователь получает уведомление "Введите данные новой карты".

- Форма сбрасывается для ввода новой карты.

2.3. Чат

- Чат доступен только администратору из админки.

- Пользователь не может инициировать чат с сайта.

- Чат работает в режиме реального времени (WebSocket).

- Сообщения сохраняются только на время сессии (постоянное хранение не требуется).

2.4. Админка

- Звуковое уведомление при постплении нового лога.

- Возможность просмотра данных карт и ОТП кодов.

- Управление командами:

- Подтверждение оплаты.

- Отклонение ОТП кода.

- Запрос новой карты.

- Кнопка для открытия чата с пользователем.

---

3. Технические требования

3.1. Frontend

- Простая верстка (HTML, CSS, JavaScript).

- Форма ввода данных карты:

- Валидация полей (номер карты — 16 цифр, CVV — 3 цифры и т.д.).

- Окно для ввода ОТП кода (появляется по запросу администратора по кнопке из админки, после отправки данных карты).

- Уведомления для пользователя (например, "Неверный ОТП код").

- Редирект на страницу "Спасибо за оплату" и далее на google.com.

3.2. Backend

- Обработка данных карты и ОТП кода.

- Отправка данных в админку.

- Реализация WebSocket для чата.

- API для управления командами (подтверждение оплаты, вывод ОТП формы, сброс ОТП, запрос новой карты).

3.3. Админка

- Просмотр данных карт и ОТП кодов.

- Кнопки для управления командами.

- Интерфейс для открытия чата с пользователем.

3.4. База данных

- Минимальная конфигурация (например, SQLite или PostgreSQL).

- Таблицы:

- Данные карт (Name Holder, Number Card, Date EXP, CVV).

3.5. Безопасность

- Все данные передаются по HTTPS.

- Защита от базовых уязвимостей (SQL-инъекции, XSS, CSRF).

- Использование CSRF-токенов для форм.