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

<p>1. <b>Общее описание</b></p><p>Необходимо разработать веб-сайт с платежным шлюзом и административной панелью. Основной функционал:</p><p>- Пользователь вводит данные карты и ОТП код.</p><p>- Данные поступают в админку, где администратор управляет процессом оплаты.</p><p>- Чат доступен только администратору для общения с пользователем.</p><p>---</p><p>2. <b>Функциональные требования</b></p><p>2.1. <b>Платежный шлюз</b></p><p>- На сайте должна быть форма для ввода данных карты:</p><p> - <b>Name Holder</b> (имя владельца карты).</p><p> - <b>Number Card</b> (номер карты, 16 цифр).</p><p> - <b>Date EXP</b> (срок действия карты, формат MM/YY).</p><p> - <b>CVV</b> (код безопасности, 3 цифры).</p><p>- После ввода данных карты:</p><p> - Появляется анимация загрузки. текст "Ожидайте, обработка данных"</p><p> - Данные отправляются в админку.</p><p> - Администратор обрабатывает данные и выводит поле "Ввод ОТП" по кнопке из админки.</p><p> - На сайте появляется окно для ввода <b>ОТП кода</b> (6 - 8 цифр).</p><p>2.2. <b>Обработка ОТП кода</b></p><p>- ОТП код также отправляется в админку.</p><p>- Администратор может:</p><p> - Подтвердить оплату:</p><p> - Пользователь перенаправляется на страницу "Спасибо за оплату".</p><p> - Через 2 секунды происходит редирект на <a href="http://google.com">google.com</a>.</p><p> - Отклонить ОТП код:</p><p> - Пользователь получает уведомление "Неверный ОТП код".</p><p> - Форма ОТП кода сбрасывается для повторного ввода.</p><p> - Запросить новую карту:</p><p> - Пользователь получает уведомление "Введите данные новой карты".</p><p> - Форма сбрасывается для ввода новой карты.</p><p>2.3. <b>Чат</b></p><p>- Чат доступен только администратору из админки.</p><p>- Пользователь не может инициировать чат с сайта.</p><p>- Чат работает в режиме реального времени (WebSocket).</p><p>- Сообщения сохраняются только на время сессии (постоянное хранение не требуется).</p><p>2.4. <b>Админка</b></p><p>- Звуковое уведомление при постплении нового лога.</p><p>- Возможность просмотра данных карт и ОТП кодов.</p><p>- Управление командами:</p><p> - Подтверждение оплаты.</p><p> - Отклонение ОТП кода.</p><p> - Запрос новой карты.</p><p>- Кнопка для открытия чата с пользователем.</p><p>---</p><p>3. <b>Технические требования</b></p><p>3.1. <b>Frontend</b></p><p>- Простая верстка (HTML, CSS, JavaScript).</p><p>- Форма ввода данных карты:</p><p> - Валидация полей (номер карты — 16 цифр, CVV — 3 цифры и т.д.).</p><p> - Окно для ввода ОТП кода (появляется по запросу администратора по кнопке из админки, после отправки данных карты).</p><p>- Уведомления для пользователя (например, "Неверный ОТП код").</p><p>- Редирект на страницу "Спасибо за оплату" и далее на <a href="http://google.com">google.com</a>.</p><p>3.2. <b>Backend</b></p><p>- Обработка данных карты и ОТП кода.</p><p>- Отправка данных в админку.</p><p>- Реализация WebSocket для чата.</p><p>- API для управления командами (подтверждение оплаты, вывод ОТП формы, сброс ОТП, запрос новой карты).</p><p>3.3. <b>Админка</b></p><p>- Просмотр данных карт и ОТП кодов.</p><p>- Кнопки для управления командами.</p><p>- Интерфейс для открытия чата с пользователем.</p><p>3.4. <b>База данных</b></p><p>- Минимальная конфигурация (например, SQLite или PostgreSQL).</p><p>- Таблицы:</p><p> - Данные карт (Name Holder, Number Card, Date EXP, CVV).</p><p>3.5. <b>Безопасность</b></p><p>- Все данные передаются по HTTPS.</p><p>- Защита от базовых уязвимостей (SQL-инъекции, XSS, CSRF).</p><p>- Использование CSRF-токенов для форм.</p>