Пробую ещё раз залить, т.к. прошлый раз залилось с ошибкой
This commit is contained in:
a.gruzdev
@@ -0,0 +1,12 @@
|
||||
# VK API Configuration
|
||||
# Токен сообщества ВКонтакте (с правами на управление сообщениями)
|
||||
VK_TOKEN=your_vk_community_token_here
|
||||
|
||||
# Идентификатор (ID) сообщества ВКонтакте (только цифры)
|
||||
VK_GROUP_ID=0
|
||||
|
||||
# ID оператора / администратора ВКонтакте для отправки лидов и оповещений (только цифры)
|
||||
OPERATOR_PEER_ID=12345678
|
||||
|
||||
# Список ID администраторов (через запятую) для управления услугами через чат
|
||||
ADMIN_IDS=12345678
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
# Configuration files containing credentials
|
||||
.env
|
||||
|
||||
# Python byte-compiled files
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# Local Databases and dynamic data files
|
||||
*.db
|
||||
*.xlsx
|
||||
|
||||
# Environment/IDE configurations
|
||||
.idea/
|
||||
.vscode/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
Binary file not shown.
+193
@@ -0,0 +1,193 @@
|
||||
# 📖 Руководство пользователя чат-бота «Cyber Pro»
|
||||
|
||||
Добро пожаловать в официальное руководство пользователя и техническую документацию для умного чат-бота ВКонтакте киберспортивной школы **«Cyber Pro»**.
|
||||
|
||||
Этот бот спроектирован с учетом передовых практик UX/UI-дизайна, психологии продаж и оптимизации конверсии. Он помогает потенциальным клиентам быстро ознакомиться с услугами школы, получить привлекательный лид-магнит, заполнить безошибочную заявку на обучение и при необходимости мгновенно связаться с живым оператором.
|
||||
|
||||
Для владельцев бизнеса и администраторов бот предоставляет **защищенную панель управления**, позволяющую редактировать услуги и цены прямо из чата ВКонтакте в режиме реального времени.
|
||||
|
||||
---
|
||||
|
||||
## 🗺️ Содержание
|
||||
1. [🚀 Возможности для клиентов (Пользовательский интерфейс)](#-возможности-для-клиентов-пользовательский-интерфейс)
|
||||
* [Главное меню](#главное-меню)
|
||||
* [Интеллектуальная воронка заявок (FSM)](#интеллектуальная-воронка-заявок-fsm)
|
||||
* [Экран проверки данных и точечное редактирование](#экран-проверки-данных-и-точечное-редактирование)
|
||||
* [Упрощенное согласие и оферта](#упрощенное-согласие-и-оферта)
|
||||
* [Интерактивный раздел FAQ и лид-магнит](#интерактивный-раздел-faq-и-лид-магнит)
|
||||
* [Режим связи с живым оператором](#режим-связи-с-живым-оператором)
|
||||
2. [⚙️ Панель администратора и безопасность](#-панель-администратора-и-безопасность)
|
||||
* [Разграничение прав доступа](#разграничение-прав-доступа)
|
||||
* [Управление услугами в реальном времени (CRUD)](#управление-услугами-в-реальном-времени-crud)
|
||||
3. [🗄️ База данных и логирование](#%EF%B8%8F-база-данных-и-логирование)
|
||||
4. [🛠️ Установка, настройка и запуск](#%EF%B8%8F-установка-настройка-и-запуск)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Возможности для клиентов (Пользовательский интерфейс)
|
||||
|
||||
### Главное меню
|
||||
При старте (команда `начать` или приветствие `привет`) бот высылает красивое приветствие и открывает клавиатуру с тремя главными кнопками:
|
||||
* **Заполнить заявку 📝** — запуск интерактивной анкеты.
|
||||
* **Частые вопросы ❓** — переход в раздел FAQ.
|
||||
* **Позвать оператора 🧑💼** — мгновенное переключение на человека.
|
||||
|
||||
---
|
||||
|
||||
### Интеллектуальная воронка заявок (FSM)
|
||||
Процесс заполнения заявки оптимизирован для максимальной конверсии и состоит из 3 простых шагов:
|
||||
|
||||
1. **Ввод Имени (`FORM_NAME`)**:
|
||||
* Бот просит пользователя представиться.
|
||||
* *Валидация*: Имя проверяется на длину (от 2 до 50 символов) во избежание отправки пустых или некорректных строк.
|
||||
2. **Ввод Номера телефона (`FORM_PHONE`)**:
|
||||
* Бот принимает номер в любом формате.
|
||||
* *Умная нормализация*: Бот автоматически удаляет пробелы, скобки, дефисы и приводит номера, начинающиеся с `8` или `7`, к единому международному стандарту `+7XXXXXXXXXX`.
|
||||
* *Валидация*: Некорректный ввод (например, буквы или слишком короткий номер) блокируется с просьбой ввести верный телефон.
|
||||
3. **Выбор Услуги (`FORM_QUESTION`)**:
|
||||
* Бот высылает динамически сформированный из базы данных список услуг с актуальными ценами и описаниями.
|
||||
* *Нечеткий поиск и сленг*: Пользователю не обязательно кликать по кнопке — бот распознает текстовый ввод и сленговые синонимы. Например:
|
||||
* Ввод `"дота"`, `"дотка"`, `"dota"` $\rightarrow$ распознается как **Dota 2**.
|
||||
* Ввод `"кс"`, `"ксго"`, `"контра"`, `"cs"` $\rightarrow$ распознается как **CS2**.
|
||||
* Ввод `"пакет Pro"` $\rightarrow$ распознается по вхождению подстроки.
|
||||
|
||||
---
|
||||
|
||||
### Экран проверки данных и точечное редактирование
|
||||
Вместо мгновенной отправки заявки, бот перенаправляет пользователя на **Экран проверки данных (`FORM_REVIEW`)**:
|
||||
|
||||
* Бот выводит аккуратную сводную карточку с введенными Именем, Телефоном и Услугой.
|
||||
* Если пользователь заметил опечатку, ему **не нужно отменять всю заявку и заполнять её заново**.
|
||||
* При клике на кнопку **«Изменить данные 🔄»** открывается меню точечного редактирования (`FORM_EDIT_MENU`), где за один клик можно изменить конкретное поле:
|
||||
* *Изменить Имя 👤*
|
||||
* *Изменить Телефон 📞*
|
||||
* *Изменить Услугу 🎮*
|
||||
* После изменения поля бот мгновенно возвращает пользователя на экран проверки с обновленной карточкой.
|
||||
|
||||
---
|
||||
|
||||
### Упрощенное согласие и оферта
|
||||
При нажатии «Да, всё верно! ✅» бот переходит к этапу получения юридического согласия (`FORM_CONSENT_1`):
|
||||
* Вместо простыни юридического текста бот отправляет лаконичное и психологически комфортное сообщение с просьбой дать согласие на обработку персональных данных и условия оферты.
|
||||
* Бот **автоматически прикрепляет к сообщению файл оферты** `Dogovor_oferty_kibersport.docx` как нативное вложение ВКонтакте. Пользователь может скачать его в один клик прямо из чата.
|
||||
* При нажатии кнопки **«Согласен(а) и подтверждаю ✅»** заявка завершается, отправляется менеджеру, а сессия сбрасывается в главное меню.
|
||||
|
||||
---
|
||||
|
||||
### Интерактивный раздел FAQ и лид-магнит
|
||||
В меню частых вопросов пользователь может быстро ознакомиться со справочной информацией:
|
||||
* **Цены 💰**: Выводит тарифы на тренировки. Содержит **лид-магнит** — купон на скидку 10% на первое занятие при немедленном оформлении заявки.
|
||||
* **Услуги ⚙️**: Детальное описание тренировочного процесса, разбора реплеев и тактики.
|
||||
* **Контакты 📞**: Номер телефона, email, адрес киберарены Cyber Pro и график работы.
|
||||
* **О компании 🏢**: Информация о школе, MMR тренеров (7000+) и истории побед с 2022 года.
|
||||
|
||||
---
|
||||
|
||||
### Режим связи с живым оператором
|
||||
Если у клиента нестандартный вопрос, он может нажать кнопку **«Позвать оператора 🧑💼»**:
|
||||
1. Бот переходит в состояние `OPERATOR_CHAT` и полностью отключает автоматические ответы.
|
||||
2. Бот мгновенно отправляет оператору (на ID, указанный в `OPERATOR_PEER_ID`) уведомление о вызове с **историей последних 10 сообщений клиента для контекста**.
|
||||
3. Все последующие сообщения клиента пересылаются оператору напрямую.
|
||||
4. В любой момент клиент может нажать кнопку **«Завершить диалог 🚪»**, чтобы отключить оператора и вернуться к автоматическому боту.
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Панель администратора и безопасность
|
||||
|
||||
Бот оснащен полноценной административной консолью, встроенной прямо в чат ВКонтакте.
|
||||
|
||||
### Разграничение прав доступа
|
||||
* Безопасность бота базируется на списке уникальных идентификаторов ВКонтакте, хранящихся в переменной `ADMIN_IDS` файла `config.py`.
|
||||
* Если ID пользователя нет в этом списке, бот никогда не среагирует на управляющие команды, а воспримет их как обычные сообщения, защищая систему от взлома.
|
||||
|
||||
---
|
||||
|
||||
### Управление услугами в реальном времени (CRUD)
|
||||
Администраторы могут отправлять боту специальные команды. Бот распознает их, записывает изменения в базу данных SQLite и мгновенно сбрасывает кэш в оперативной памяти.
|
||||
|
||||
```
|
||||
Администратор База Данных SQLite Активные Клиенты
|
||||
[ ред 1 цена 1 800 ₽ ] ──> [ bot.py ] ──> [ Таблица services ] ──> [ Обновление в чате клиента ]
|
||||
```
|
||||
|
||||
#### Доступные команды:
|
||||
|
||||
| Команда | Описание | Пример использования |
|
||||
| :--- | :--- | :--- |
|
||||
| **`админка`** (или `/admin`, `услуги`) | Выводит список всех активных услуг (ID, Название, Цена, Описание) и справку по командам. | `админка` |
|
||||
| **`ред [ID] [поле] [значение]`** | Изменяет указанное поле у существующей услуги. Доступные поля: `имя`, `цена`, `описание`. | `ред 1 цена 1 800 ₽/час` <br> `ред 2 описание Новое описание` |
|
||||
| **`доб [Имя] | [Цена] | [Описание]`** | Добавляет новую услугу. Поля должны разделяться вертикальной чертой `|`. | `доб Тренировка по Valorant 🎯 | 1 200 ₽/час | Разбор aim.` |
|
||||
| **`удал [ID]`** | Мягко удаляет услугу (переключает статус `is_active = 0`). Она перестает отображаться в списке выбора у клиентов. | `удал 4` |
|
||||
|
||||
---
|
||||
|
||||
## 🗄️ База данных и логирование
|
||||
|
||||
Вся информация хранится в локальной базе данных SQLite в файле `bot_database.db`. Архитектура состоит из трех таблиц:
|
||||
|
||||
1. **`user_states`**:
|
||||
* Хранит текущие состояния диалога пользователей (FSM-схема) и временно сохраненные данные анкеты (имя, телефон, выбранная услуга, юридические согласия).
|
||||
2. **`dialogue_logs`**:
|
||||
* Ведет полный сквозной хронологический лог всех входящих и исходящих сообщений (`user` / `bot`).
|
||||
* Используется для передачи контекста оператору при переключении диалога.
|
||||
3. **`services`**:
|
||||
* Хранит динамический список услуг школы. Содержит поля `id`, `name`, `price`, `description`, `is_active`.
|
||||
* Автоматически заполняется базовыми услугами кибершколы при первом создании БД (авто-сидинг).
|
||||
4. **`web_registrations`**:
|
||||
* Хранит все заявки, заполненные клиентами через веб-форму на сайте (поля: `id`, `name`, `phone`, `email`, `vk_link`, `agree_oferta`, `agree_policy`, `agree_newsletter`, `created_at`). Это обеспечивает единое централизованное хранилище заявок из всех каналов в SQLite.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Установка, настройка и запуск
|
||||
|
||||
### Системные требования
|
||||
* Python 3.8 или выше.
|
||||
* Установленная библиотека `vk_api`.
|
||||
|
||||
---
|
||||
|
||||
### Настройка конфигурации
|
||||
### Настройка конфигурации (.env)
|
||||
Перед запуском создайте или отредактируйте файл `.env` в корневой директории проекта (вы можете скопировать настройки из шаблона `.env.example`). Заполните следующие переменные среды:
|
||||
|
||||
```env
|
||||
# Токен сообщества ВКонтакте
|
||||
VK_TOKEN=ваш_токен_сообщества_vk
|
||||
|
||||
# ID Вашей группы ВКонтакте (целое число)
|
||||
VK_GROUP_ID=123456789
|
||||
|
||||
# ID Вашей личной страницы VK (куда будут приходить лиды и вызовы оператора)
|
||||
OPERATOR_PEER_ID=987654321
|
||||
|
||||
# Список ID администраторов через запятую для доступа к админ-меню через чат
|
||||
ADMIN_IDS=987654321,111222333
|
||||
```
|
||||
|
||||
Файл `.gitignore` настроен на игнорирование локального файла `.env`, базы данных `bot_database.db` и таблиц Excel, чтобы защитить конфиденциальные данные от попадания в публичные репозитории.
|
||||
|
||||
---
|
||||
|
||||
### Запуск бота
|
||||
|
||||
#### 1. В режиме продакшена (LongPoll)
|
||||
Для работы в реальном сообществе ВКонтакте запустите файл `bot.py`:
|
||||
```bash
|
||||
python bot.py
|
||||
```
|
||||
Бот подключится к серверам VK API и начнет непрерывное прослушивание сообщений сообщества.
|
||||
|
||||
#### 2. В режиме локального тестирования (Консольная эмуляция)
|
||||
Если в `config.py` указаны стандартные заглушки, бот **автоматически запустится в безопасном режиме консольного эмулятора**:
|
||||
* Бот не будет обращаться к VK API.
|
||||
* В консоли запустится интерактивный чат: вы сможете писать боту сообщения с клавиатуры, тестировать воронку, проверять валидацию и точечное редактирование.
|
||||
* Для проверки админ-панели в консольном эмуляторе по умолчанию используется эмуляция ID администратора. Вы можете отправлять команды `админка`, `ред`, `доб` и `удал` и сразу видеть изменения.
|
||||
|
||||
---
|
||||
|
||||
### Запуск автоматических тестов
|
||||
Для проведения полной верификации кодовой базы и всех 13 сценариев (включая безопасность и CRUD) выполните команду:
|
||||
```bash
|
||||
python test_bot_suite.py
|
||||
```
|
||||
Результаты тестов и подробные транскрипты диалогов будут сохранены в файл [test_suite_output.log](file:///m:/bot_vk_ikp_prodagi/test_suite_output.log) в кодировке UTF-8.
|
||||
@@ -0,0 +1,74 @@
|
||||
import os
|
||||
|
||||
# Load environment variables from .env in the project root
|
||||
def _load_env():
|
||||
# Find the project root (the directory containing config.py)
|
||||
root_dir = os.path.dirname(os.path.abspath(__file__))
|
||||
dotenv_path = os.path.join(root_dir, ".env")
|
||||
if os.path.exists(dotenv_path):
|
||||
try:
|
||||
with open(dotenv_path, "r", encoding="utf-8") as f:
|
||||
for line in f:
|
||||
line = line.strip()
|
||||
if not line or line.startswith("#"):
|
||||
continue
|
||||
if "=" in line:
|
||||
key, val = line.split("=", 1)
|
||||
val = val.strip().strip('"').strip("'")
|
||||
os.environ[key.strip()] = val
|
||||
except Exception as e:
|
||||
print(f"Warning: Failed to load .env file: {e}")
|
||||
|
||||
_load_env()
|
||||
|
||||
# VK API Configuration
|
||||
# In production, these should be loaded from environment variables or a secure .env file.
|
||||
VK_TOKEN = os.getenv("VK_TOKEN", "your_vk_community_token_here")
|
||||
GROUP_ID = int(os.getenv("VK_GROUP_ID", "0")) # Community ID (must be integer)
|
||||
|
||||
# Operator / Admin configuration
|
||||
# ID of the user or chat where notifications about new leads and operator requests will be sent
|
||||
OPERATOR_PEER_ID = int(os.getenv("OPERATOR_PEER_ID", "12345678")) # Change to actual VK user ID of operator
|
||||
|
||||
# Parse ADMIN_IDS as a list of integers from comma-separated env values
|
||||
admin_ids_raw = os.getenv("ADMIN_IDS")
|
||||
if admin_ids_raw:
|
||||
try:
|
||||
ADMIN_IDS = [int(x.strip()) for x in admin_ids_raw.split(",") if x.strip().isdigit()]
|
||||
except Exception:
|
||||
ADMIN_IDS = [OPERATOR_PEER_ID]
|
||||
else:
|
||||
ADMIN_IDS = [OPERATOR_PEER_ID]
|
||||
|
||||
# Standard replies and patterns
|
||||
FAQ_ANSWERS = {
|
||||
"цены": "💰 Наши тарифы на киберспортивные тренировки:\n• Тренировка по Dota 2 🎮 — 1 500 ₽/час\n• Тренировка по CS2 🔫 — 1 500 ₽/час\n• Пакет 'Стандарт' 📦 (5 тренировок) — 7 500 ₽\n• Пакет 'Pro' 🌟 (10 тренировок + постоянная поддержка тренера) — 14 000 ₽\n\n🎁 ПОДАРОК: Всем новым ученикам дарим скидку 10% на первую индивидуальную тренировку! Заполните заявку через меню прямо сейчас!",
|
||||
"контакты": "📞 Связаться с нами:\n• Телефон: +7 (999) 123-45-67\n• Email: info@cyberpro.com\n• Адрес: г. Москва, Киберспортивная Арена 'Cyber Pro'\n• Режим работы: Ежедневно с 10:00 до 22:00",
|
||||
"услуги": "⚙️ Мы предлагаем профессиональное обучение по киберспортивным дисциплинам:\n1. Индивидуальные тренировки по Dota 2 с разбором реплеев и позиционки\n2. Персональные занятия по CS2 (aim, раскидки гранат, командная тактика)\n3. Выгодные абонементы на 5 и 10 занятий с постоянным сопровождением тренера",
|
||||
"о компании": "🏢 Мы — школа киберспорта 'Cyber Pro'. Помогаем игрокам любого уровня повышать свой MMR/Faceit Elo, развивать игровое мышление и побеждать на турнирах с 2022 года!\n\nНаши тренеры — действующие и экс-профессиональные игроки с 7000+ MMR и опытом игры на PRO-сцене."
|
||||
}
|
||||
|
||||
# Доступные услуги и тарифы для выбора в форме заявки
|
||||
SERVICES = {
|
||||
"1": {
|
||||
"name": "Тренировка по Dota 2 🎮",
|
||||
"price": "1 500 ₽/час",
|
||||
"description": "Индивидуальное занятие с опытным тренером, разбор реплеев, позиционка и микроконтроль."
|
||||
},
|
||||
"2": {
|
||||
"name": "Тренировка по CS2 🔫",
|
||||
"price": "1 500 ₽/час",
|
||||
"description": "Анализ ошибок, тренировка стрельбы (aim), раскидки гранат и командное взаимодействие."
|
||||
},
|
||||
"3": {
|
||||
"name": "Пакет услуг 'Стандарт' 📦",
|
||||
"price": "7 500 ₽",
|
||||
"description": "5 индивидуальных тренировок по выбранной дисциплине + базовый план развития."
|
||||
},
|
||||
"4": {
|
||||
"name": "Пакет услуг 'Pro' 🌟",
|
||||
"price": "14 000 ₽",
|
||||
"description": "10 индивидуальных тренировок + детальный разбор матчей + постоянная поддержка тренера."
|
||||
}
|
||||
}
|
||||
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
import sqlite3
|
||||
import os
|
||||
from typing import Optional, Dict, Any
|
||||
|
||||
class DatabaseManager:
|
||||
def __init__(self, db_path: str = "bot_database.db"):
|
||||
self.db_path = db_path
|
||||
self._init_db()
|
||||
|
||||
def _get_connection(self):
|
||||
return sqlite3.connect(self.db_path)
|
||||
|
||||
def _init_db(self):
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
# Table for user states and collected form data
|
||||
cursor.execute("""
|
||||
CREATE TABLE IF NOT EXISTS user_states (
|
||||
user_id INTEGER PRIMARY KEY,
|
||||
state TEXT NOT NULL DEFAULT 'FREE_CHAT',
|
||||
name TEXT,
|
||||
phone TEXT,
|
||||
question TEXT,
|
||||
consent_1 TEXT,
|
||||
consent_2 TEXT,
|
||||
consent_3 TEXT,
|
||||
last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
""")
|
||||
|
||||
# Migration checks for existing databases
|
||||
for col in ["consent_1", "consent_2", "consent_3"]:
|
||||
try:
|
||||
cursor.execute(f"ALTER TABLE user_states ADD COLUMN {col} TEXT")
|
||||
except sqlite3.OperationalError:
|
||||
# Column already exists
|
||||
pass
|
||||
|
||||
# Table for logs / dialogue history if needed
|
||||
cursor.execute("""
|
||||
CREATE TABLE IF NOT EXISTS dialogue_logs (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
user_id INTEGER,
|
||||
sender TEXT, -- 'user' or 'bot'
|
||||
message TEXT,
|
||||
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
""")
|
||||
|
||||
# Table for dynamic services
|
||||
cursor.execute("""
|
||||
CREATE TABLE IF NOT EXISTS services (
|
||||
id TEXT PRIMARY KEY,
|
||||
name TEXT NOT NULL,
|
||||
price TEXT NOT NULL,
|
||||
description TEXT NOT NULL,
|
||||
is_active INTEGER DEFAULT 1
|
||||
)
|
||||
""")
|
||||
|
||||
# Seed default services if empty
|
||||
cursor.execute("SELECT COUNT(*) FROM services")
|
||||
if cursor.fetchone()[0] == 0:
|
||||
default_services = {
|
||||
"1": {
|
||||
"name": "Тренировка по Dota 2 🎮",
|
||||
"price": "1 500 ₽/час",
|
||||
"description": "Индивидуальное занятие с опытным тренером, разбор реплеев, позиционка и микроконтроль."
|
||||
},
|
||||
"2": {
|
||||
"name": "Тренировка по CS2 🔫",
|
||||
"price": "1 500 ₽/час",
|
||||
"description": "Анализ ошибок, тренировка стрельбы (aim), раскидки гранат и командное взаимодействие."
|
||||
},
|
||||
"3": {
|
||||
"name": "Пакет услуг 'Стандарт' 📦",
|
||||
"price": "7 500 ₽",
|
||||
"description": "5 индивидуальных тренировок по выбранной дисциплине + базовый план развития."
|
||||
},
|
||||
"4": {
|
||||
"name": "Пакет услуг 'Pro' 🌟",
|
||||
"price": "14 000 ₽",
|
||||
"description": "10 индивидуальных тренировок + детальный разбор матчей + постоянная поддержка тренера."
|
||||
}
|
||||
}
|
||||
for key, svc in default_services.items():
|
||||
cursor.execute(
|
||||
"INSERT INTO services (id, name, price, description) VALUES (?, ?, ?, ?)",
|
||||
(key, svc["name"], svc["price"], svc["description"])
|
||||
)
|
||||
|
||||
# Table for web registrations
|
||||
cursor.execute("""
|
||||
CREATE TABLE IF NOT EXISTS web_registrations (
|
||||
id TEXT PRIMARY KEY,
|
||||
name TEXT,
|
||||
phone TEXT,
|
||||
email TEXT,
|
||||
vk_link TEXT,
|
||||
agree_oferta INTEGER,
|
||||
agree_policy INTEGER,
|
||||
agree_newsletter INTEGER,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
""")
|
||||
|
||||
conn.commit()
|
||||
|
||||
def get_user_data(self, user_id: int) -> Dict[str, Any]:
|
||||
"""Retrieve user state and collected data."""
|
||||
with self._get_connection() as conn:
|
||||
conn.row_factory = sqlite3.Row
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
"SELECT state, name, phone, question, consent_1, consent_2, consent_3 FROM user_states WHERE user_id = ?",
|
||||
(user_id,)
|
||||
)
|
||||
row = cursor.fetchone()
|
||||
if row:
|
||||
return dict(row)
|
||||
else:
|
||||
# Create default entry if not exists
|
||||
cursor.execute(
|
||||
"INSERT INTO user_states (user_id, state) VALUES (?, 'FREE_CHAT')",
|
||||
(user_id,)
|
||||
)
|
||||
conn.commit()
|
||||
return {
|
||||
"state": "FREE_CHAT",
|
||||
"name": None,
|
||||
"phone": None,
|
||||
"question": None,
|
||||
"consent_1": None,
|
||||
"consent_2": None,
|
||||
"consent_3": None
|
||||
}
|
||||
|
||||
def update_user_state(self, user_id: int, state: str):
|
||||
"""Update only the user state."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
"INSERT INTO user_states (user_id, state) VALUES (?, ?) "
|
||||
"ON CONFLICT(user_id) DO UPDATE SET state = excluded.state, last_updated = CURRENT_TIMESTAMP",
|
||||
(user_id, state)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
def update_user_field(self, user_id: int, field: str, value: Optional[str]):
|
||||
"""Update a specific field in the form."""
|
||||
allowed_fields = ["name", "phone", "question", "state", "consent_1", "consent_2", "consent_3"]
|
||||
if field not in allowed_fields:
|
||||
raise ValueError(f"Invalid field name: {field}")
|
||||
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
f"INSERT INTO user_states (user_id, {field}) VALUES (?, ?) "
|
||||
f"ON CONFLICT(user_id) DO UPDATE SET {field} = excluded.{field}, last_updated = CURRENT_TIMESTAMP",
|
||||
(user_id, value)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
def reset_form(self, user_id: int):
|
||||
"""Reset form fields and return to free chat state."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
"UPDATE user_states SET state = 'FREE_CHAT', "
|
||||
"name = NULL, phone = NULL, question = NULL, "
|
||||
"consent_1 = NULL, consent_2 = NULL, consent_3 = NULL "
|
||||
"WHERE user_id = ?",
|
||||
(user_id,)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
def log_message(self, user_id: int, sender: str, message: str):
|
||||
"""Log messages for dialogue context."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
"INSERT INTO dialogue_logs (user_id, sender, message) VALUES (?, ?, ?)",
|
||||
(user_id, sender, message)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
def get_dialogue_history(self, user_id: int, limit: int = 15) -> list:
|
||||
"""Get recent dialogue history to provide context to the operator."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
"SELECT sender, message, timestamp FROM dialogue_logs WHERE user_id = ? ORDER BY id DESC LIMIT ?",
|
||||
(user_id, limit)
|
||||
)
|
||||
rows = cursor.fetchall()
|
||||
return rows[::-1] # Return in chronological order
|
||||
|
||||
def get_services(self) -> Dict[str, Dict[str, str]]:
|
||||
"""Загрузить все активные услуги из базы данных."""
|
||||
with self._get_connection() as conn:
|
||||
conn.row_factory = sqlite3.Row
|
||||
cursor = conn.cursor()
|
||||
cursor.execute("SELECT id, name, price, description FROM services WHERE is_active = 1")
|
||||
rows = cursor.fetchall()
|
||||
services = {}
|
||||
for row in rows:
|
||||
services[row["id"]] = {
|
||||
"name": row["name"],
|
||||
"price": row["price"],
|
||||
"description": row["description"]
|
||||
}
|
||||
return services
|
||||
|
||||
def update_service(self, service_id: str, field: str, value: str):
|
||||
"""Обновить конкретное поле существующей услуги."""
|
||||
allowed_fields = ["name", "price", "description"]
|
||||
if field not in allowed_fields:
|
||||
raise ValueError(f"Invalid field for service: {field}")
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
f"UPDATE services SET {field} = ? WHERE id = ?",
|
||||
(value, service_id)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
def add_service(self, name: str, price: str, description: str) -> str:
|
||||
"""Добавить новую услугу и вернуть её новый ID."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute("SELECT id FROM services")
|
||||
ids = []
|
||||
for r in cursor.fetchall():
|
||||
try:
|
||||
ids.append(int(r[0]))
|
||||
except ValueError:
|
||||
pass
|
||||
next_id = str(max(ids) + 1) if ids else "1"
|
||||
|
||||
cursor.execute(
|
||||
"INSERT INTO services (id, name, price, description) VALUES (?, ?, ?, ?)",
|
||||
(next_id, name, price, description)
|
||||
)
|
||||
conn.commit()
|
||||
return next_id
|
||||
|
||||
def delete_service(self, service_id: str):
|
||||
"""Мягкое удаление (деактивация) услуги."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute(
|
||||
"UPDATE services SET is_active = 0 WHERE id = ?",
|
||||
(service_id,)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
def add_web_registration(self, reg_id: str, data: dict):
|
||||
"""Сохранить заявку с веб-формы в базу данных SQLite."""
|
||||
with self._get_connection() as conn:
|
||||
cursor = conn.cursor()
|
||||
cursor.execute("""
|
||||
INSERT INTO web_registrations (
|
||||
id, name, phone, email, vk_link,
|
||||
agree_oferta, agree_policy, agree_newsletter
|
||||
) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
|
||||
""", (
|
||||
reg_id,
|
||||
data.get("name", "").strip(),
|
||||
data.get("phone", "").strip(),
|
||||
data.get("email", "").strip(),
|
||||
data.get("vk", "").strip(),
|
||||
1 if data.get("agreeOferta") else 0,
|
||||
1 if data.get("agreePolicy") else 0,
|
||||
1 if data.get("agreeNewsletter") else 0
|
||||
))
|
||||
conn.commit()
|
||||
@@ -0,0 +1,73 @@
|
||||
import os
|
||||
import openpyxl
|
||||
from openpyxl.styles import Alignment
|
||||
|
||||
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
FILE_NAME = os.path.join(SCRIPT_DIR, "registration_for_training.xlsx")
|
||||
|
||||
def fix_shifted_rows():
|
||||
if not os.path.exists(FILE_NAME):
|
||||
print(f"Файл {FILE_NAME} не найден.")
|
||||
return
|
||||
|
||||
try:
|
||||
wb = openpyxl.load_workbook(FILE_NAME)
|
||||
ws = wb.active
|
||||
except PermissionError:
|
||||
print("\n[ОШИБКА] Доступ запрещен. Пожалуйста, ЗАКРОЙТЕ файл 'registration_for_training.xlsx' в Excel или других программах и запустите скрипт снова.\n")
|
||||
return
|
||||
except Exception as e:
|
||||
print(f"Ошибка при загрузке файла: {e}")
|
||||
return
|
||||
|
||||
rows = list(ws.iter_rows(values_only=False))
|
||||
if len(rows) <= 1:
|
||||
print("В таблице нет данных для исправления (только заголовки).")
|
||||
return
|
||||
|
||||
changed = False
|
||||
for i in range(1, len(rows)):
|
||||
row_num = i + 1
|
||||
id_val = ws.cell(row=row_num, column=1).value
|
||||
|
||||
# If the first cell doesn't start with 'id_', it means this row was written
|
||||
# by the old running server process and needs to be shifted to the right.
|
||||
if id_val and not str(id_val).startswith("id_"):
|
||||
print(f"Исправляем смещение в строке {row_num} для пользователя: '{id_val}'")
|
||||
|
||||
# Read the 8 fields that were written by the old server
|
||||
old_values = [ws.cell(row=row_num, column=c).value for c in range(1, 9)]
|
||||
|
||||
# Re-format this row: Column 1 is id_001, columns 2-9 are the shifted fields
|
||||
ws.cell(row=row_num, column=1, value="id_001")
|
||||
for col_idx, val in enumerate(old_values, 2):
|
||||
ws.cell(row=row_num, column=col_idx, value=val)
|
||||
|
||||
# Clear column 10 in case there is any residue
|
||||
ws.cell(row=row_num, column=10, value=None)
|
||||
|
||||
# Re-apply styles and alignments
|
||||
data_align_left = Alignment(horizontal="left", vertical="center")
|
||||
data_align_center = Alignment(horizontal="center", vertical="center")
|
||||
|
||||
for col_idx in range(1, 10):
|
||||
cell = ws.cell(row=row_num, column=col_idx)
|
||||
if col_idx in [2, 4, 5]:
|
||||
cell.alignment = data_align_left
|
||||
else:
|
||||
cell.alignment = data_align_center
|
||||
|
||||
changed = True
|
||||
|
||||
if changed:
|
||||
try:
|
||||
wb.save(FILE_NAME)
|
||||
print("\n[УСПЕХ] Все смещенные строки в Excel были автоматически исправлены!")
|
||||
print(f"Файл успешно сохранен: {FILE_NAME}\n")
|
||||
except PermissionError:
|
||||
print("\n[ОШИБКА] Не удалось сохранить файл. Пожалуйста, убедитесь, что файл закрыт в Excel, и попробуйте снова.\n")
|
||||
else:
|
||||
print("Смещенных строк не обнаружено. Все данные соответствуют формату.")
|
||||
|
||||
if __name__ == "__main__":
|
||||
fix_shifted_rows()
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description"
|
||||
content="Оставьте заявку на бесплатный урок в киберспортивной школе ИКП. Получите доступ к тестовым материалам по онлайн тренировкам.">
|
||||
<title>ИКП. Онлайн тренировки по киберспорту | Заявка на бесплатный урок</title>
|
||||
|
||||
<!-- Google Fonts: Montserrat for gaming headlines, Inter for readable inputs/texts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@700;800&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- Link to external stylesheet -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<div class="card" id="formCard">
|
||||
<!-- 1. Capture Form Container -->
|
||||
<div id="formContainer">
|
||||
<div class="logo-container">
|
||||
<img src="../help_img/Logo.jpg" alt="ИКП Киберспорт" class="logo-img">
|
||||
</div>
|
||||
|
||||
<h1 class="form-title">ИКП. Онлайн тренировки по киберспорту</h1>
|
||||
<p class="form-subtitle">Оставить заявку на бесплатный урок и доступ к тестовым материалам ИКП</p>
|
||||
|
||||
<form id="ikpForm" novalidate autocomplete="on">
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="name" class="form-label">Имя <span class="required-star">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="name" name="name" required placeholder="Введите ваше имя"
|
||||
class="form-input" aria-required="true">
|
||||
<span class="input-icon">👤</span>
|
||||
</div>
|
||||
<div class="error-message" id="nameError" aria-live="polite">
|
||||
<span>⚠️</span> Пожалуйста, введите ваше имя
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Field -->
|
||||
<div class="form-group">
|
||||
<label for="phone" class="form-label">Номер телефона <span
|
||||
class="required-star">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
<input type="tel" id="phone" name="phone" required placeholder="+7 (___) ___-__-__"
|
||||
class="form-input" aria-required="true" inputmode="numeric">
|
||||
<span class="input-icon">📞</span>
|
||||
</div>
|
||||
<div class="error-message" id="phoneError" aria-live="polite">
|
||||
<span>⚠️</span> Введите корректный номер телефона: +7 (999) 999-99-99
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Field -->
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">E-mail <span class="required-star">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
<input type="email" id="email" name="email" required placeholder="name@domain.zone"
|
||||
class="form-input" aria-required="true">
|
||||
<span class="input-icon">✉️</span>
|
||||
</div>
|
||||
<div class="error-message" id="emailError" aria-live="polite">
|
||||
<span>⚠️</span> Введите корректный e-mail (например, name@mail.ru)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VK Link Field -->
|
||||
<div class="form-group">
|
||||
<label for="vk" class="form-label">Ссылка на профиль ВКонтакте <span
|
||||
class="required-star">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
<input type="url" id="vk" name="vk" required placeholder="vk.com/username"
|
||||
class="form-input" aria-required="true">
|
||||
<span class="input-icon">🌐</span>
|
||||
</div>
|
||||
<div class="error-message" id="vkError" aria-live="polite">
|
||||
<span>⚠️</span> Ссылка должна вести на vk.com или vkontakte.ru
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checkbox Agreements -->
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label" for="agreeOferta">
|
||||
<input type="checkbox" id="agreeOferta" name="agreeOferta" required>
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-text">Я согласен с <a href="#" class="consent-link">офертой</a> <span
|
||||
class="required-star">*</span></span>
|
||||
</label>
|
||||
<div class="error-message" id="agreeOfertaError" aria-live="polite">
|
||||
<span>⚠️</span> Вы должны согласиться с офертой
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label" for="agreePolicy">
|
||||
<input type="checkbox" id="agreePolicy" name="agreePolicy" required>
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-text">Я согласен с <a href="#" class="consent-link">политикой
|
||||
обработки и хранения личных данных</a> <span class="required-star">*</span></span>
|
||||
</label>
|
||||
<div class="error-message" id="agreePolicyError" aria-live="polite">
|
||||
<span>⚠️</span> Вы должны согласиться с политикой обработки данных
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label" for="agreeNewsletter">
|
||||
<input type="checkbox" id="agreeNewsletter" name="agreeNewsletter">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-text">Я даю согласие на получение информации на E-mail</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="submit-btn" id="submitBtn">Оставить заявку</button>
|
||||
|
||||
<!-- Terms Consent -->
|
||||
<p class="consent-text">
|
||||
Отправляя форму, вы соглашаетесь с
|
||||
<a href="#" class="consent-link">офертой</a>
|
||||
и
|
||||
<a href="#" class="consent-link">политикой обработки и хранения личных данных</a>.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 2. Success Message Container (Hidden by default) -->
|
||||
<div id="successContainer" class="success-card" style="display: none;">
|
||||
<div class="success-icon-wrapper">
|
||||
<div class="success-icon">✓</div>
|
||||
</div>
|
||||
<h2 class="success-title">Заявка отправлена!</h2>
|
||||
<p class="success-text">
|
||||
Спасибо за ваше обращение!<br>
|
||||
Наш киберспортивный координатор свяжется с вами в ближайшее время, чтобы открыть доступ к тестовым
|
||||
материалам и записать на бесплатный урок.
|
||||
</p>
|
||||
<button id="resetBtn" class="reset-btn">Вернуться к форме</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Link to external JS script -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+308
@@ -0,0 +1,308 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const nameInput = document.getElementById('name');
|
||||
const phoneInput = document.getElementById('phone');
|
||||
const emailInput = document.getElementById('email');
|
||||
const vkInput = document.getElementById('vk');
|
||||
const agreeOfertaInput = document.getElementById('agreeOferta');
|
||||
const agreePolicyInput = document.getElementById('agreePolicy');
|
||||
const agreeNewsletterInput = document.getElementById('agreeNewsletter');
|
||||
|
||||
const form = document.getElementById('ikpForm');
|
||||
const formContainer = document.getElementById('formContainer');
|
||||
const successContainer = document.getElementById('successContainer');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
|
||||
// List of fields to manage focus and validation state
|
||||
const fields = [
|
||||
{ input: nameInput, check: checkName, dirty: false },
|
||||
{ input: phoneInput, check: checkPhone, dirty: false },
|
||||
{ input: emailInput, check: checkEmail, dirty: false },
|
||||
{ input: vkInput, check: checkVK, dirty: false },
|
||||
{ input: agreeOfertaInput, check: checkOferta, dirty: false },
|
||||
{ input: agreePolicyInput, check: checkPolicy, dirty: false }
|
||||
];
|
||||
|
||||
/* ====================================================
|
||||
Validation Functions
|
||||
==================================================== */
|
||||
function showError(input, show) {
|
||||
const group = input.closest('.form-group') || input.closest('.checkbox-group');
|
||||
if (show) {
|
||||
group.classList.add('has-error');
|
||||
} else {
|
||||
group.classList.remove('has-error');
|
||||
}
|
||||
}
|
||||
|
||||
function checkName() {
|
||||
const val = nameInput.value.trim();
|
||||
// Simple validation: Name should not be empty and should have at least 2 characters
|
||||
const isValid = val.length >= 2;
|
||||
showError(nameInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkPhone() {
|
||||
const val = phoneInput.value;
|
||||
const digits = val.replace(/\D/g, '');
|
||||
// Correctly formatted length is 18 (+7 (999) 999-99-99 has 18 characters)
|
||||
// Digits should be exactly 11
|
||||
const isValid = digits.length === 11 && val.startsWith('+7') && val.length === 18;
|
||||
showError(phoneInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkEmail() {
|
||||
const val = emailInput.value.trim();
|
||||
// Standard compliant email format check: name@domain.zone (with domain part >= 2 characters)
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
const isValid = emailRegex.test(val);
|
||||
showError(emailInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkVK() {
|
||||
const val = vkInput.value.trim().toLowerCase();
|
||||
// Check if URL includes vk.com or vkontakte.ru
|
||||
const isValid = val.length > 0 && (val.includes('vk.com') || val.includes('vkontakte.ru'));
|
||||
showError(vkInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkOferta() {
|
||||
const isValid = agreeOfertaInput.checked;
|
||||
showError(agreeOfertaInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkPolicy() {
|
||||
const isValid = agreePolicyInput.checked;
|
||||
showError(agreePolicyInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
/* ====================================================
|
||||
Interaction Listeners (UX enhancements)
|
||||
==================================================== */
|
||||
fields.forEach(field => {
|
||||
// When focus is lost, mark the field as dirty and run validation
|
||||
field.input.addEventListener('blur', () => {
|
||||
field.dirty = true;
|
||||
field.check();
|
||||
});
|
||||
|
||||
// When typing or checking, if the field was already flagged as containing an error, validate on the fly
|
||||
const eventType = field.input.type === 'checkbox' ? 'change' : 'input';
|
||||
field.input.addEventListener(eventType, () => {
|
||||
if (field.dirty) {
|
||||
field.check();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Phone Input Mask Implementation
|
||||
==================================================== */
|
||||
phoneInput.addEventListener('input', (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
// Keep only digits
|
||||
let digits = value.replace(/\D/g, '');
|
||||
|
||||
// If it starts with 7 or 8 (common in Russian mobile inputs), strip it to rebuild properly
|
||||
if (digits.startsWith('7') || digits.startsWith('8')) {
|
||||
digits = digits.substring(1);
|
||||
}
|
||||
|
||||
// Limit to 10 digits (excluding +7 prefix)
|
||||
digits = digits.substring(0, 10);
|
||||
|
||||
let formatted = '';
|
||||
if (digits.length > 0) {
|
||||
formatted = '+7 (' + digits.substring(0, 3);
|
||||
}
|
||||
if (digits.length >= 3) {
|
||||
formatted += ') ';
|
||||
}
|
||||
if (digits.length > 3) {
|
||||
formatted += digits.substring(3, 6);
|
||||
}
|
||||
if (digits.length > 6) {
|
||||
formatted += '-' + digits.substring(6, 8);
|
||||
}
|
||||
if (digits.length > 8) {
|
||||
formatted += '-' + digits.substring(8, 10);
|
||||
}
|
||||
|
||||
e.target.value = formatted;
|
||||
|
||||
// Check validation on the fly if marked dirty
|
||||
const phoneField = fields.find(item => item.input === phoneInput);
|
||||
if (phoneField && phoneField.dirty) {
|
||||
checkPhone();
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent cursor jumps or weird input state on backspace
|
||||
phoneInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Backspace') {
|
||||
const val = e.target.value;
|
||||
// Allow easy clearing of prefix
|
||||
if (val === '+7 ' || val === '+7' || val === '+') {
|
||||
e.target.value = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-complete +7 on focus if field is empty
|
||||
phoneInput.addEventListener('focus', (e) => {
|
||||
if (!e.target.value) {
|
||||
e.target.value = '+7 ';
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up field on blur if only the prefix remains
|
||||
phoneInput.addEventListener('blur', (e) => {
|
||||
if (e.target.value === '+7 ' || e.target.value === '+7') {
|
||||
e.target.value = '';
|
||||
}
|
||||
const phoneField = fields.find(item => item.input === phoneInput);
|
||||
if (phoneField) {
|
||||
phoneField.dirty = true;
|
||||
checkPhone();
|
||||
}
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Form Submission
|
||||
==================================================== */
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Flag all fields as dirty to trigger validation visual errors
|
||||
fields.forEach(field => {
|
||||
field.dirty = true;
|
||||
});
|
||||
|
||||
// Run validation checks
|
||||
const isNameValid = checkName();
|
||||
const isPhoneValid = checkPhone();
|
||||
const isEmailValid = checkEmail();
|
||||
const isVKValid = checkVK();
|
||||
const isOfertaValid = checkOferta();
|
||||
const isPolicyValid = checkPolicy();
|
||||
|
||||
if (isNameValid && isPhoneValid && isEmailValid && isVKValid && isOfertaValid && isPolicyValid) {
|
||||
// Gather form data
|
||||
const formData = {
|
||||
name: nameInput.value.trim(),
|
||||
phone: phoneInput.value,
|
||||
email: emailInput.value.trim(),
|
||||
vk: vkInput.value.trim(),
|
||||
agreeOferta: agreeOfertaInput.checked,
|
||||
agreePolicy: agreePolicyInput.checked,
|
||||
agreeNewsletter: agreeNewsletterInput.checked
|
||||
};
|
||||
|
||||
// Disable submit button during request
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const originalBtnText = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Отправка...';
|
||||
|
||||
// Send to our backend server (supports running on localhost:8000)
|
||||
fetch('http://localhost:8000/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
.then(response => {
|
||||
return response.json().then(data => {
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Ошибка сервера');
|
||||
}
|
||||
return data;
|
||||
}).catch(err => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Ошибка сети или сервера');
|
||||
}
|
||||
throw err;
|
||||
});
|
||||
})
|
||||
.then(data => {
|
||||
// Success State: Animate form fading out and success window fading in
|
||||
formContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
||||
formContainer.style.opacity = '0';
|
||||
formContainer.style.transform = 'translateY(-10px)';
|
||||
|
||||
setTimeout(() => {
|
||||
formContainer.style.display = 'none';
|
||||
successContainer.style.display = 'flex';
|
||||
successContainer.style.opacity = '0';
|
||||
successContainer.style.transform = 'translateY(10px)';
|
||||
|
||||
// Trigger browser reflow for CSS transition
|
||||
successContainer.offsetHeight;
|
||||
|
||||
successContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
successContainer.style.opacity = '1';
|
||||
successContainer.style.transform = 'translateY(0)';
|
||||
}, 300);
|
||||
|
||||
// Reset all inputs
|
||||
form.reset();
|
||||
fields.forEach(field => {
|
||||
field.dirty = false;
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error submitting form:', error);
|
||||
alert('Произошла ошибка при отправке заявки: ' + error.message + '. Пожалуйста, убедитесь, что сервер server.py запущен.');
|
||||
})
|
||||
.finally(() => {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalBtnText;
|
||||
});
|
||||
} else {
|
||||
// Focus on the first element that failed validation
|
||||
const firstInvalid = fields.find(field => {
|
||||
if (field.input === nameInput) return !isNameValid;
|
||||
if (field.input === phoneInput) return !isPhoneValid;
|
||||
if (field.input === emailInput) return !isEmailValid;
|
||||
if (field.input === vkInput) return !isVKValid;
|
||||
if (field.input === agreeOfertaInput) return !isOfertaValid;
|
||||
if (field.input === agreePolicyInput) return !isPolicyValid;
|
||||
return false;
|
||||
});
|
||||
|
||||
if (firstInvalid) {
|
||||
firstInvalid.input.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Reset / Back to Form Handler
|
||||
==================================================== */
|
||||
resetBtn.addEventListener('click', () => {
|
||||
successContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
||||
successContainer.style.opacity = '0';
|
||||
successContainer.style.transform = 'translateY(10px)';
|
||||
|
||||
setTimeout(() => {
|
||||
successContainer.style.display = 'none';
|
||||
formContainer.style.display = 'block';
|
||||
formContainer.style.opacity = '0';
|
||||
formContainer.style.transform = 'translateY(-10px)';
|
||||
|
||||
// Trigger browser reflow for CSS transition
|
||||
formContainer.offsetHeight;
|
||||
|
||||
formContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
formContainer.style.opacity = '1';
|
||||
formContainer.style.transform = 'translateY(0)';
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
+305
@@ -0,0 +1,305 @@
|
||||
import os
|
||||
import json
|
||||
from http.server import HTTPServer, SimpleHTTPRequestHandler
|
||||
from datetime import datetime
|
||||
import sys
|
||||
|
||||
# Automatically handle dependencies: install openpyxl if it's missing
|
||||
try:
|
||||
import openpyxl
|
||||
except ImportError:
|
||||
import subprocess
|
||||
print("Библиотека 'openpyxl' не найдена. Устанавливаем...")
|
||||
try:
|
||||
subprocess.check_call([sys.executable, "-m", "pip", "install", "openpyxl"])
|
||||
import openpyxl
|
||||
print("Библиотека 'openpyxl' успешно установлена!")
|
||||
except Exception as e:
|
||||
print(f"Ошибка при автоматической установке openpyxl: {e}")
|
||||
print("Пожалуйста, установите её вручную: pip install openpyxl")
|
||||
sys.exit(1)
|
||||
|
||||
from openpyxl import Workbook, load_workbook
|
||||
from openpyxl.styles import Font, Alignment, PatternFill
|
||||
|
||||
# Add parent directory to sys.path to load database.py and config.py
|
||||
PARENT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||||
if PARENT_DIR not in sys.path:
|
||||
sys.path.append(PARENT_DIR)
|
||||
|
||||
try:
|
||||
import config
|
||||
from database import DatabaseManager
|
||||
db = DatabaseManager(db_path=os.path.join(PARENT_DIR, "bot_database.db"))
|
||||
except Exception as e:
|
||||
print(f"Предупреждение: Не удалось загрузить модули базы данных/конфигурации: {e}")
|
||||
db = None
|
||||
config = None
|
||||
|
||||
try:
|
||||
import vk_api
|
||||
from vk_api.utils import get_random_id
|
||||
except ImportError:
|
||||
vk_api = None
|
||||
|
||||
# Path to the Excel spreadsheet in the same directory as server.py
|
||||
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
FILE_NAME = os.path.join(SCRIPT_DIR, "registration_for_training.xlsx")
|
||||
|
||||
def init_excel():
|
||||
"""Create the Excel file with styled headers if it doesn't exist."""
|
||||
recreate = False
|
||||
if os.path.exists(FILE_NAME):
|
||||
try:
|
||||
wb = load_workbook(FILE_NAME)
|
||||
ws = wb.active
|
||||
# Recreate if it does not have the 'id_user' column as the first header
|
||||
if ws.cell(row=1, column=1).value != "id_user":
|
||||
recreate = True
|
||||
except Exception:
|
||||
recreate = True
|
||||
|
||||
if recreate:
|
||||
try:
|
||||
os.remove(FILE_NAME)
|
||||
print("Обнаружена старая структура Excel файла. Пересоздаём с колонкой 'id_user'...")
|
||||
except Exception as e:
|
||||
print(f"Не удалось удалить старый Excel файл: {e}")
|
||||
|
||||
if not os.path.exists(FILE_NAME):
|
||||
wb = Workbook()
|
||||
ws = wb.active
|
||||
ws.title = "Заявки на обучение"
|
||||
|
||||
headers = [
|
||||
"id_user",
|
||||
"Имя",
|
||||
"Номер телефона",
|
||||
"E-mail",
|
||||
"Ссылка на профиль ВКонтакте",
|
||||
"Согласие с офертой",
|
||||
"Согласие с политикой",
|
||||
"Согласие на рассылку",
|
||||
"Дата регистрации"
|
||||
]
|
||||
|
||||
ws.append(headers)
|
||||
|
||||
# Style header cells (Bold white text, dark blue/gray background)
|
||||
header_font = Font(name="Calibri", size=11, bold=True, color="FFFFFF")
|
||||
header_fill = PatternFill(start_color="1F4E78", end_color="1F4E78", fill_type="solid")
|
||||
header_align = Alignment(horizontal="center", vertical="center")
|
||||
|
||||
for col_num, header in enumerate(headers, 1):
|
||||
cell = ws.cell(row=1, column=col_num)
|
||||
cell.font = header_font
|
||||
cell.fill = header_fill
|
||||
cell.alignment = header_align
|
||||
|
||||
# Adjust column widths
|
||||
column_widths = [15, 20, 25, 25, 30, 20, 22, 22, 22]
|
||||
for i, width in enumerate(column_widths, 1):
|
||||
ws.column_dimensions[openpyxl.utils.get_column_letter(i)].width = width
|
||||
|
||||
wb.save(FILE_NAME)
|
||||
print(f"Создан новый файл Excel с колонкой id_user: {FILE_NAME}")
|
||||
|
||||
def get_next_user_id(ws):
|
||||
"""Generate the next unique user ID in the format id_001, id_002..."""
|
||||
max_row = ws.max_row
|
||||
if max_row <= 1:
|
||||
return "id_001"
|
||||
|
||||
# Read the ID from the last row's first cell
|
||||
last_id_val = ws.cell(row=max_row, column=1).value
|
||||
if not last_id_val or not str(last_id_val).startswith("id_"):
|
||||
# Fallback to row counts if the last row ID is corrupted/not matching mask
|
||||
return f"id_{(max_row - 1):03d}"
|
||||
|
||||
try:
|
||||
# Extract the numeric suffix, increment, and format back
|
||||
numeric_part = int(str(last_id_val).split("_")[1])
|
||||
next_num = numeric_part + 1
|
||||
return f"id_{next_num:03d}"
|
||||
except (IndexError, ValueError):
|
||||
return f"id_{max_row:03d}"
|
||||
|
||||
def add_registration(data):
|
||||
"""Append a new form submission row into the Excel sheet."""
|
||||
init_excel()
|
||||
|
||||
try:
|
||||
wb = load_workbook(FILE_NAME)
|
||||
ws = wb.active
|
||||
except Exception as e:
|
||||
print(f"Ошибка загрузки Excel файла, пересоздаём: {e}")
|
||||
init_excel()
|
||||
wb = load_workbook(FILE_NAME)
|
||||
ws = wb.active
|
||||
|
||||
current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||
|
||||
# Auto-generate next user ID
|
||||
next_id = get_next_user_id(ws)
|
||||
|
||||
row = [
|
||||
next_id,
|
||||
data.get("name", "").strip(),
|
||||
data.get("phone", "").strip(),
|
||||
data.get("email", "").strip(),
|
||||
data.get("vk", "").strip(),
|
||||
"Да" if data.get("agreeOferta") else "Нет",
|
||||
"Да" if data.get("agreePolicy") else "Нет",
|
||||
"Да" if data.get("agreeNewsletter") else "Нет",
|
||||
current_time
|
||||
]
|
||||
|
||||
ws.append(row)
|
||||
|
||||
# Align data cells
|
||||
new_row_index = ws.max_row
|
||||
data_align_left = Alignment(horizontal="left", vertical="center")
|
||||
data_align_center = Alignment(horizontal="center", vertical="center")
|
||||
|
||||
for col_idx in range(1, len(row) + 1):
|
||||
cell = ws.cell(row=new_row_index, column=col_idx)
|
||||
# Left align Name (2), Email (4), VK Link (5). Center align others.
|
||||
if col_idx in [2, 4, 5]:
|
||||
cell.alignment = data_align_left
|
||||
else:
|
||||
cell.alignment = data_align_center
|
||||
|
||||
wb.save(FILE_NAME)
|
||||
print(f"[{current_time}] Добавлена новая запись в Excel: ID={row[0]}, Имя={row[1]}, Телефон={row[2]}")
|
||||
|
||||
# 1. Запись в SQLite базу данных
|
||||
if db:
|
||||
try:
|
||||
db.add_web_registration(next_id, data)
|
||||
print(f"[{current_time}] Заявка {next_id} успешно сохранена в SQLite (таблица web_registrations).")
|
||||
except Exception as db_err:
|
||||
print(f"[{current_time}] Ошибка записи заявки в SQLite: {db_err}")
|
||||
|
||||
# 2. Отправка уведомления оператору в VK
|
||||
try:
|
||||
send_vk_operator_notification(next_id, data)
|
||||
except Exception as vk_err:
|
||||
print(f"[{current_time}] Ошибка при отправке уведомления оператору: {vk_err}")
|
||||
|
||||
|
||||
def send_vk_operator_notification(reg_id, data):
|
||||
"""Отправить уведомление о новой веб-заявке в VK-чат оператора."""
|
||||
if not vk_api or not config:
|
||||
print("[VK NOTIFICATION] Пропущено: vk_api или конфигурация недоступны.")
|
||||
return
|
||||
|
||||
token = getattr(config, "VK_TOKEN", "your_vk_community_token_here")
|
||||
operator_id = getattr(config, "OPERATOR_PEER_ID", 0)
|
||||
|
||||
if not token or token == "your_vk_community_token_here" or not operator_id:
|
||||
print("[VK NOTIFICATION] Пропущено: Токен VK или ID оператора не настроены в .env.")
|
||||
return
|
||||
|
||||
try:
|
||||
vk_session = vk_api.VkApi(token=token)
|
||||
vk = vk_session.get_api()
|
||||
|
||||
# Формируем сообщение для оператора
|
||||
message = (
|
||||
f"🌐 **Новая заявка с сайта!**\n\n"
|
||||
f"🆔 ID заявки: {reg_id}\n"
|
||||
f"👤 Имя: {data.get('name', '').strip()}\n"
|
||||
f"📞 Телефон: {data.get('phone', '').strip()}\n"
|
||||
f"✉️ E-mail: {data.get('email', '').strip()}\n"
|
||||
f"🌐 Профиль VK: {data.get('vk', '').strip()}\n\n"
|
||||
f"⚖️ Согласия пользователя:\n"
|
||||
f"• Оферта: {'Да' if data.get('agreeOferta') else 'Нет'}\n"
|
||||
f"• Политика ПД: {'Да' if data.get('agreePolicy') else 'Нет'}\n"
|
||||
f"• Рассылка: {'Да' if data.get('agreeNewsletter') else 'Нет'}\n\n"
|
||||
f"Данные сохранены в Excel и базу данных SQLite."
|
||||
)
|
||||
|
||||
vk.messages.send(
|
||||
peer_id=operator_id,
|
||||
message=message,
|
||||
random_id=get_random_id()
|
||||
)
|
||||
print(f"[VK NOTIFICATION] Успешно отправлено уведомление оператору (ID: {operator_id}) для заявки {reg_id}.")
|
||||
except Exception as e:
|
||||
print(f"[VK NOTIFICATION] Ошибка при отправке уведомления в VK: {e}")
|
||||
|
||||
class FormHandler(SimpleHTTPRequestHandler):
|
||||
"""Custom HTTP handler serving form files and processing POST requests."""
|
||||
|
||||
def translate_path(self, path):
|
||||
# Override translate_path to serve static files from the 'form' directory
|
||||
# even if launched from the parent directory
|
||||
path = SimpleHTTPRequestHandler.translate_path(self, path)
|
||||
rel_path = os.path.relpath(path, os.getcwd())
|
||||
return os.path.join(SCRIPT_DIR, rel_path)
|
||||
|
||||
def do_POST(self):
|
||||
if self.path == '/submit':
|
||||
content_length = int(self.headers['Content-Length'])
|
||||
post_data = self.rfile.read(content_length)
|
||||
|
||||
try:
|
||||
data = json.loads(post_data.decode('utf-8'))
|
||||
add_registration(data)
|
||||
|
||||
self.send_response(200)
|
||||
self.send_header('Content-Type', 'application/json')
|
||||
self.send_header('Access-Control-Allow-Origin', '*') # Prevent CORS errors
|
||||
self.end_headers()
|
||||
|
||||
response = {"status": "success", "message": "Заявка успешно записана!"}
|
||||
self.wfile.write(json.dumps(response).encode('utf-8'))
|
||||
except PermissionError:
|
||||
self.send_response(500)
|
||||
self.send_header('Content-Type', 'application/json')
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
self.end_headers()
|
||||
|
||||
response = {
|
||||
"status": "error",
|
||||
"message": "Таблица Excel заблокирована. Пожалуйста, закройте файл 'registration_for_training.xlsx' в Excel и отправьте форму заново."
|
||||
}
|
||||
self.wfile.write(json.dumps(response).encode('utf-8'))
|
||||
except Exception as e:
|
||||
self.send_response(500)
|
||||
self.send_header('Content-Type', 'application/json')
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
self.end_headers()
|
||||
|
||||
response = {"status": "error", "message": str(e)}
|
||||
self.wfile.write(json.dumps(response).encode('utf-8'))
|
||||
else:
|
||||
self.send_response(404)
|
||||
self.end_headers()
|
||||
|
||||
def do_OPTIONS(self):
|
||||
# Respond to CORS preflight requests
|
||||
self.send_response(204)
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
self.send_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
|
||||
self.send_header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
self.end_headers()
|
||||
|
||||
def run_server(port=8000):
|
||||
init_excel() # Pre-create Excel on startup
|
||||
server_address = ('', port)
|
||||
httpd = HTTPServer(server_address, FormHandler)
|
||||
print(f"\n=======================================================")
|
||||
print(f"Сервер ИКП запущен на http://localhost:{port}/")
|
||||
print(f"Вы можете открыть форму по адресу: http://localhost:{port}/index.html")
|
||||
print(f"Данные будут записываться в: {FILE_NAME}")
|
||||
print(f"Нажмите Ctrl+C для остановки сервера.")
|
||||
print(f"=======================================================\n")
|
||||
try:
|
||||
httpd.serve_forever()
|
||||
except KeyboardInterrupt:
|
||||
print("\nСервер останавливается...")
|
||||
httpd.server_close()
|
||||
|
||||
if __name__ == '__main__':
|
||||
run_server()
|
||||
+485
@@ -0,0 +1,485 @@
|
||||
/* ----------------------------------------------------
|
||||
1. DESIGN SYSTEM & RESET
|
||||
---------------------------------------------------- */
|
||||
:root {
|
||||
--bg-color: #0A0F1F;
|
||||
--card-bg: rgba(16, 22, 42, 0.85);
|
||||
--primary-orange: #ff7a00;
|
||||
--primary-orange-hover: #ff9233;
|
||||
--cyan-accent: #00d2ff;
|
||||
--text-white: #ffffff;
|
||||
--text-gray: #8f9cae;
|
||||
--text-dark: #0A0F1F;
|
||||
--error-red: #ff4a4a;
|
||||
--input-border: rgba(255, 255, 255, 0.12);
|
||||
--font-headings: 'Montserrat', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
/* Dark gradient overlay + brand background image from help_img */
|
||||
background-image:
|
||||
radial-gradient(circle at center, rgba(13, 25, 47, 0.93) 0%, rgba(10, 15, 31, 0.99) 100%),
|
||||
url('../help_img/bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
color: var(--text-white);
|
||||
font-family: var(--font-body);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 16px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
2. LAYOUT & CARD CONTAINER
|
||||
---------------------------------------------------- */
|
||||
main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Premium Esports Accent Line at the top of the card */
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--cyan-accent) 0%, var(--primary-orange) 100%);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
3. BRANDING & HEADER
|
||||
---------------------------------------------------- */
|
||||
.logo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 110px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
border: 2px solid rgba(255, 122, 0, 0.25);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.logo-img:hover {
|
||||
transform: scale(1.04);
|
||||
border-color: var(--primary-orange);
|
||||
box-shadow: 0 8px 28px rgba(255, 122, 0, 0.4);
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-family: var(--font-headings);
|
||||
font-weight: 800;
|
||||
font-size: 1.6rem;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin: 0 0 10px 0;
|
||||
background: linear-gradient(90deg, #ffffff 50%, var(--text-gray) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-gray);
|
||||
text-align: center;
|
||||
margin: 0 0 32px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
4. FORM INPUTS & ELEMENTS
|
||||
---------------------------------------------------- */
|
||||
.form-group {
|
||||
margin-bottom: 22px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
color: var(--cyan-accent);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.required-star {
|
||||
color: var(--primary-orange);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 0 16px 0 44px;
|
||||
background: rgba(10, 15, 31, 0.7);
|
||||
border: 1.5px solid var(--input-border);
|
||||
border-radius: 12px;
|
||||
color: var(--text-white);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #4a5c73;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-orange);
|
||||
background: rgba(10, 15, 31, 0.85);
|
||||
box-shadow: 0 0 14px rgba(255, 122, 0, 0.2);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
font-size: 1.1rem;
|
||||
color: #4a5c73;
|
||||
pointer-events: none;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.form-input:focus + .input-icon {
|
||||
color: var(--primary-orange);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
5. ERROR HANDLING
|
||||
---------------------------------------------------- */
|
||||
.error-message {
|
||||
color: var(--error-red);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 6px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 500;
|
||||
animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Error States for Inputs */
|
||||
.form-group.has-error .form-input {
|
||||
border-color: var(--error-red);
|
||||
box-shadow: 0 0 8px rgba(255, 74, 74, 0.15);
|
||||
}
|
||||
|
||||
.form-group.has-error .input-icon {
|
||||
color: var(--error-red);
|
||||
}
|
||||
|
||||
.form-group.has-error .error-message {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
6. BUTTONS & ACTIONS
|
||||
---------------------------------------------------- */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
background: var(--primary-orange);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: var(--text-dark);
|
||||
font-family: var(--font-headings);
|
||||
font-weight: 800;
|
||||
font-size: 1.05rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(255, 122, 0, 0.2);
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: var(--primary-orange-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(255, 122, 0, 0.4);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 12px rgba(255, 122, 0, 0.2);
|
||||
}
|
||||
|
||||
.submit-btn:focus-visible {
|
||||
outline: 2px solid var(--text-white);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
7. LEGAL CONSENT
|
||||
---------------------------------------------------- */
|
||||
.consent-text {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-gray);
|
||||
text-align: center;
|
||||
margin-top: 22px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.consent-link {
|
||||
color: var(--cyan-accent);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed rgba(0, 210, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.consent-link:hover {
|
||||
color: var(--primary-orange);
|
||||
border-bottom-color: rgba(255, 122, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
8. SUCCESS STATE WINDOW
|
||||
---------------------------------------------------- */
|
||||
.success-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.success-icon-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border: 3px solid var(--cyan-accent);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--cyan-accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-family: var(--font-headings);
|
||||
font-size: 1.7rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-orange);
|
||||
margin: 0 0 16px 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 0.95rem;
|
||||
color: #b8c7db;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 12px;
|
||||
color: var(--text-white);
|
||||
font-family: var(--font-headings);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
border-color: var(--cyan-accent);
|
||||
color: var(--cyan-accent);
|
||||
background: rgba(0, 210, 255, 0.05);
|
||||
box-shadow: 0 0 12px rgba(0, 210, 255, 0.15);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
10. CUSTOM CHECKBOXES
|
||||
---------------------------------------------------- */
|
||||
.checkbox-group {
|
||||
margin-bottom: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-gray);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Hide default checkbox */
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Custom checkbox indicator */
|
||||
.checkbox-custom {
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: rgba(10, 15, 31, 0.7);
|
||||
border: 1.5px solid var(--input-border);
|
||||
border-radius: 6px;
|
||||
margin-right: 12px;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* On hover */
|
||||
.checkbox-label:hover .checkbox-custom {
|
||||
border-color: var(--cyan-accent);
|
||||
box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Checked state background */
|
||||
.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom {
|
||||
background: var(--primary-orange);
|
||||
border-color: var(--primary-orange);
|
||||
box-shadow: 0 0 10px rgba(255, 122, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Custom checkmark symbol */
|
||||
.checkbox-custom::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid var(--text-dark);
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Show checkmark when checked */
|
||||
.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Focus outline for accessibility */
|
||||
.checkbox-label input[type="checkbox"]:focus-visible ~ .checkbox-custom {
|
||||
outline: 2px solid var(--text-white);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Error States for Checkboxes */
|
||||
.checkbox-group.has-error .checkbox-custom {
|
||||
border-color: var(--error-red);
|
||||
box-shadow: 0 0 8px rgba(255, 74, 74, 0.2);
|
||||
}
|
||||
.checkbox-group.has-error .error-message {
|
||||
display: flex;
|
||||
margin-left: 32px; /* Aligns error text with checkbox text label */
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
9. RESPONSIVE DESIGN
|
||||
---------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
.card {
|
||||
padding: 30px 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.form-title {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
.form-subtitle {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.logo-img {
|
||||
height: 90px;
|
||||
}
|
||||
.form-input {
|
||||
height: 48px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.submit-btn {
|
||||
height: 50px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Reference in New Issue
Block a user