feat: implement admin services management, Docker deployment, and YooKassa webhook IP security checks

.env.example

@@ -0,0 +1,45 @@
+# Настройки ВКонтакте (для отправки уведомлений оператору)
+# Токен сообщества ВКонтакте (с правами на сообщения)
+VK_TOKEN=your_vk_community_token_here
+# Идентификатор (ID) сообщества (только цифры)
+VK_GROUP_ID=0
+# ID оператора ВКонтакте для отправки лидов (только цифры)
+OPERATOR_PEER_ID=12345678
+# Список ID администраторов через запятую
+ADMIN_IDS=12345678
+
+# Настройки ЮKassa (YooKassa)
+# Идентификатор магазина (Shop ID) из личного кабинета
+YOOKASSA_SHOP_ID=
+# Секретный ключ (API Key) из личного кабинета
+YOOKASSA_SECRET_KEY=
+
+# Настройки почты по SMTP (для отправки писем о заказах)
+# Адрес SMTP-сервера (например: smtp.yandex.ru, smtp.gmail.com, smtp.mail.ru)
+SMTP_SERVER=smtp.yandex.ru
+# Порт SMTP (465 для SSL/TLS или 587 для STARTTLS)
+SMTP_PORT=465
+# Имя пользователя (ваш email полностью)
+SMTP_USER=
+# Пароль приложения (специальный пароль для сторонних приложений)
+SMTP_PASSWORD=
+# Email отправителя (обычно совпадает с SMTP_USER)
+SMTP_FROM=
+# Email получателя уведомлений (куда слать сообщения о заказах)
+SMTP_TO=
+
+# Пароль для входа в Личный Кабинет Администратора (на сайте /admin)
+ADMIN_PASSWORD=admin123
+
+# Настройки агентской схемы для 54-ФЗ (чеки ОФД)
+# Система налогообложения агента (1 - ОСНО, 2 - УСН доход, 3 - УСН доход-расход, 6 - Патент)
+TAX_SYSTEM_CODE=2
+# Данные реального продавца (поставщика услуг)
+SUPPLIER_NAME=ИП Груздев Артём Сергеевич
+SUPPLIER_INN=370306440114
+SUPPLIER_PHONE=+79611157051
+
+# Безопасность
+# Включение верификации IP отправителя для вебхуков ЮKassa (True/False)
+VERIFY_WEBHOOK_IP=True
+

.gitignore

@@ -10,3 +10,8 @@
 .idea/
 Thumbs.db
 Desktop.ini
+.env
+.DS_Store
+__pycache__/
+*.db
+*.xlsx

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+# Установка рабочей директории
+WORKDIR /app
+
+# Отключение кэширования pip и буферизации вывода Python
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+# Копирование требований и установка
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Копирование остального исходного кода
+COPY . .
+
+# Открытие порта
+EXPOSE 8000
+
+# Запуск сервера
+CMD ["python", "server.py"]

config.py

@@ -0,0 +1,62 @@
+import os
+
+# Load environment variables from .env in the project root
+def _load_env():
+    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
+VK_TOKEN = os.getenv("VK_TOKEN", "your_vk_community_token_here")
+GROUP_ID = int(os.getenv("VK_GROUP_ID", "0"))
+
+# Operator / Admin configuration
+OPERATOR_PEER_ID = int(os.getenv("OPERATOR_PEER_ID", "0"))
+
+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] if OPERATOR_PEER_ID else []
+else:
+    ADMIN_IDS = [OPERATOR_PEER_ID] if OPERATOR_PEER_ID else []
+
+# YooKassa Configuration
+YOOKASSA_SHOP_ID = os.getenv("YOOKASSA_SHOP_ID", "")
+YOOKASSA_SECRET_KEY = os.getenv("YOOKASSA_SECRET_KEY", "")
+
+# SMTP configuration for email notifications
+SMTP_SERVER = os.getenv("SMTP_SERVER", "smtp.yandex.ru")
+SMTP_PORT = int(os.getenv("SMTP_PORT", "465"))
+SMTP_USER = os.getenv("SMTP_USER", "")
+SMTP_PASSWORD = os.getenv("SMTP_PASSWORD", "")
+SMTP_FROM = os.getenv("SMTP_FROM", "")
+SMTP_TO = os.getenv("SMTP_TO", "")
+
+# Admin Dashboard Password
+ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD", "admin123")
+
+# Supplier / Agent Configuration for 54-FZ receipts (Agent Scheme)
+SUPPLIER_NAME = os.getenv("SUPPLIER_NAME", "ИП Груздев Артём Сергеевич")
+SUPPLIER_INN = os.getenv("SUPPLIER_INN", "370306440114")
+SUPPLIER_PHONE = os.getenv("SUPPLIER_PHONE", "+79611157051")
+TAX_SYSTEM_CODE = int(os.getenv("TAX_SYSTEM_CODE", "2")) # Default: 2 (УСН Доход ООО "АЙТИГРУПП")
+
+# Security Configurations
+VERIFY_WEBHOOK_IP = os.getenv("VERIFY_WEBHOOK_IP", "True").lower() == "true"
+

database.py

@@ -0,0 +1,265 @@
+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 (needed for VK bot sync)
+            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 (VK bot)
+            for col in ["consent_1", "consent_2", "consent_3"]:
+                try:
+                    cursor.execute(f"ALTER TABLE user_states ADD COLUMN {col} TEXT")
+                except sqlite3.OperationalError:
+                    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
+                )
+            """)
+            
+            # Migration check: add price_numeric to services table
+            try:
+                cursor.execute("ALTER TABLE services ADD COLUMN price_numeric REAL DEFAULT 0.0")
+            except sqlite3.OperationalError:
+                pass
+            
+            # Seed default bot services if empty (legacy)
+            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, price_numeric, description) VALUES (?, ?, ?, ?, ?)",
+                        (key, svc["name"], svc["price"], float(svc["price"].replace(" ", "").replace("₽/час", "").replace("₽", "")), svc["description"])
+                    )
+
+            # Seed default web services if they don't exist
+            web_services = {
+                "web_1": {"name": "Разовая тренировка", "price": "870 ₽", "price_numeric": 870.0, "description": "counter-strike, dota, tanks"},
+                "web_2": {"name": "Абонемент на 4 занятия (Групповой)", "price": "2 790 ₽", "price_numeric": 2790.0, "description": "counter-strike, dota, tanks"},
+                "web_3": {"name": "Абонемент на 8 занятий (Групповой)", "price": "4 990 ₽", "price_numeric": 4990.0, "description": "counter-strike, dota, tanks"},
+                "web_4": {"name": "Абонемент на 4 занятия (Индивидуальный)", "price": "3 290 ₽", "price_numeric": 3290.0, "description": "counter-strike, dota, tanks"},
+                "web_5": {"name": "Абонемент на 8 занятий (Индивидуальный)", "price": "5 990 ₽", "price_numeric": 5990.0, "description": "counter-strike, dota, tanks"}
+            }
+            for sid, svc in web_services.items():
+                cursor.execute("SELECT COUNT(*) FROM services WHERE id = ?", (sid,))
+                if cursor.fetchone()[0] == 0:
+                    cursor.execute(
+                        "INSERT INTO services (id, name, price, price_numeric, description) VALUES (?, ?, ?, ?, ?)",
+                        (sid, svc["name"], svc["price"], svc["price_numeric"], svc["description"])
+                    )
+
+            # Table for web registrations with payments support
+            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,
+                    service_name TEXT,
+                    amount REAL,
+                    payment_status TEXT DEFAULT 'pending',
+                    yookassa_payment_id TEXT,
+                    paid_at TIMESTAMP,
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+                )
+            """)
+            
+            # Run migration on web_registrations to add new columns if they don't exist
+            for col, col_type in [
+                ("service_name", "TEXT"),
+                ("amount", "REAL"),
+                ("payment_status", "TEXT DEFAULT 'pending'"),
+                ("yookassa_payment_id", "TEXT"),
+                ("paid_at", "TIMESTAMP")
+            ]:
+                try:
+                    cursor.execute(f"ALTER TABLE web_registrations ADD COLUMN {col} {col_type}")
+                except sqlite3.OperationalError:
+                    pass
+            
+            conn.commit()
+
+    def get_services(self) -> Dict[str, Dict[str, Any]]:
+        with self._get_connection() as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute("SELECT id, name, price, price_numeric, description FROM services WHERE is_active = 1")
+            rows = cursor.fetchall()
+            services = {}
+            for row in rows:
+                services[row["id"]] = {
+                    "name": row["name"],
+                    "price": row["price"],
+                    "price_numeric": row["price_numeric"] if "price_numeric" in row.keys() else 0.0,
+                    "description": row["description"]
+                }
+            return services
+
+    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,
+                    service_name, amount, payment_status, yookassa_payment_id
+                ) 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,
+                data.get("serviceName", "Разовая тренировка").strip(),
+                float(data.get("servicePrice", 870)),
+                data.get("paymentStatus", "pending"),
+                data.get("yookassaPaymentId", None)
+            ))
+            conn.commit()
+
+    def update_web_payment_status(self, reg_id: str, status: str, yookassa_payment_id: str = None, paid_at: str = None):
+        """Обновить статус оплаты и сопутствующие данные для заявки."""
+        with self._get_connection() as conn:
+            cursor = conn.cursor()
+            if yookassa_payment_id and paid_at:
+                cursor.execute("""
+                    UPDATE web_registrations 
+                    SET payment_status = ?, yookassa_payment_id = ?, paid_at = ? 
+                    WHERE id = ?
+                """, (status, yookassa_payment_id, paid_at, reg_id))
+            elif yookassa_payment_id:
+                cursor.execute("""
+                    UPDATE web_registrations 
+                    SET payment_status = ?, yookassa_payment_id = ? 
+                    WHERE id = ?
+                """, (status, yookassa_payment_id, reg_id))
+            else:
+                cursor.execute("""
+                    UPDATE web_registrations 
+                    SET payment_status = ? 
+                    WHERE id = ?
+                """, (status, reg_id))
+            conn.commit()
+
+    def get_web_registration(self, reg_id: str) -> Optional[Dict[str, Any]]:
+        """Получить детали одной веб-регистрации."""
+        with self._get_connection() as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute("SELECT * FROM web_registrations WHERE id = ?", (reg_id,))
+            row = cursor.fetchone()
+            return dict(row) if row else None
+
+    def get_all_web_registrations(self) -> list:
+        """Получить все веб-регистрации для админ-панели."""
+        with self._get_connection() as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute("SELECT * FROM web_registrations ORDER BY created_at DESC")
+            rows = cursor.fetchall()
+            return [dict(row) for row in rows]
+
+    def get_all_services_list(self) -> list:
+        """Получить полный список всех услуг (включая неактивные) для админ-панели."""
+        with self._get_connection() as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute("SELECT id, name, price, price_numeric, description, is_active FROM services")
+            rows = cursor.fetchall()
+            return [dict(row) for row in rows]
+
+    def add_service(self, service_id: str, name: str, price: str, price_numeric: float, description: str) -> bool:
+        """Добавить новую услугу в базу данных."""
+        with self._get_connection() as conn:
+            cursor = conn.cursor()
+            try:
+                cursor.execute("""
+                    INSERT INTO services (id, name, price, price_numeric, description, is_active) 
+                    VALUES (?, ?, ?, ?, ?, 1)
+                """, (service_id.strip(), name.strip(), price.strip(), float(price_numeric), description.strip()))
+                conn.commit()
+                return True
+            except sqlite3.IntegrityError:
+                return False
+
+    def update_service(self, service_id: str, name: str, price: str, price_numeric: float, description: str, is_active: int) -> bool:
+        """Обновить поля существующей услуги по её ID."""
+        with self._get_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("""
+                UPDATE services 
+                SET name = ?, price = ?, price_numeric = ?, description = ?, is_active = ? 
+                WHERE id = ?
+            """, (name.strip(), price.strip(), float(price_numeric), description.strip(), int(is_active), service_id.strip()))
+            conn.commit()
+            return cursor.rowcount > 0

docker-compose.yml

@@ -0,0 +1,16 @@
+version: '3.8'
+
+services:
+  ikp-web:
+    build: .
+    container_name: ikp-site-container
+    restart: unless-stopped
+    ports:
+      - "8000:8000"
+    env_file:
+      - .env
+    volumes:
+      # Постоянное сохранение БД SQLite на хосте
+      - ./bot_database.db:/app/bot_database.db
+      # Постоянное сохранение Excel-файла с заявками
+      - ./form/registration_for_training.xlsx:/app/form/registration_for_training.xlsx

form/fix_excel.py

@@ -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()

form/index.html

@@ -0,0 +1,169 @@
+<!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="../Images/Logo.jpg" alt="ИКП Киберспорт" class="logo-img">
+                </div>
+
+                <h1 class="form-title">ИКП. Онлайн тренировки по киберспорту</h1>
+                <p class="form-subtitle">Оставить заявку на бесплатный урок и доступ к тестовым материалам ИКП</p>
+
+                <form id="ikpForm" novalidate autocomplete="on">
+                    <!-- Selected Service Badge -->
+                    <div id="serviceDisplay" class="service-display-badge" style="display: none; margin-bottom: 22px;">
+                        <div class="service-badge-content">
+                            <span class="service-icon">🏆</span>
+                            <div class="service-details">
+                                <p class="service-label">Выбранная услуга:</p>
+                                <p class="service-value"><span id="serviceNameDisplay"></span> — <span id="servicePriceDisplay"></span></p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Hidden input for service id -->
+                    <input type="hidden" id="serviceId" name="serviceId" value="">
+
+                    <!-- 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="Dogovor_oferty_kibersport_versia_izmenennaya.pdf" target="_blank" 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="Политика ПД.pdf" target="_blank" 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="Dogovor_oferty_kibersport_versia_izmenennaya.pdf" target="_blank" class="consent-link">офертой</a>
+                        и
+                        <a href="Политика ПД.pdf" target="_blank" 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>

form/script.js

@@ -0,0 +1,384 @@
+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');
+
+    // Service display elements
+    const serviceDisplay = document.getElementById('serviceDisplay');
+    const serviceNameDisplay = document.getElementById('serviceNameDisplay');
+    const servicePriceDisplay = document.getElementById('servicePriceDisplay');
+    const serviceIdInput = document.getElementById('serviceId');
+
+    // Parse URL query parameters
+    const urlParams = new URLSearchParams(window.location.search);
+    const serviceIdParam = urlParams.get('service_id');
+    const successParam = urlParams.get('success');
+
+    // If redirected back from payment successfully
+    if (successParam === 'true') {
+        formContainer.style.display = 'none';
+        successContainer.style.display = 'flex';
+        successContainer.style.opacity = '1';
+    }
+
+    let services = {};
+
+    const servicesUrl = window.location.protocol === 'file:' ? 'http://localhost:8000/api/services' : '/api/services';
+
+    fetch(servicesUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Не удалось загрузить список услуг');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.status === 'success') {
+                services = data.services;
+                initializeServiceDisplay();
+            } else {
+                console.error('Error loading services:', data.message);
+                fallbackServiceDisplay();
+            }
+        })
+        .catch(err => {
+            console.error('Error fetching services:', err);
+            fallbackServiceDisplay();
+        });
+
+    function initializeServiceDisplay() {
+        if (serviceIdParam && services[serviceIdParam]) {
+            const selectedService = services[serviceIdParam];
+            serviceNameDisplay.textContent = selectedService.name;
+            const price = selectedService.price_numeric || parseFloat(selectedService.price) || 0;
+            servicePriceDisplay.textContent = price.toLocaleString('ru-RU') + ' ₽';
+            serviceIdInput.value = serviceIdParam;
+            serviceDisplay.style.display = 'block';
+        } else {
+            // Default to web_1
+            serviceIdInput.value = "web_1";
+            if (services["web_1"]) {
+                const selectedService = services["web_1"];
+                serviceNameDisplay.textContent = selectedService.name;
+                const price = selectedService.price_numeric || parseFloat(selectedService.price) || 0;
+                servicePriceDisplay.textContent = price.toLocaleString('ru-RU') + ' ₽';
+                serviceDisplay.style.display = 'block';
+            }
+        }
+    }
+
+    function fallbackServiceDisplay() {
+        services = {
+            "web_1": { name: "Разовая тренировка", price_numeric: 870 },
+            "web_2": { name: "Абонемент на 4 занятия (Групповой)", price_numeric: 2790 },
+            "web_3": { name: "Абонемент на 8 занятий (Групповой)", price_numeric: 4990 },
+            "web_4": { name: "Абонемент на 4 занятия (Индивидуальный)", price_numeric: 3290 },
+            "web_5": { name: "Абонемент на 8 занятий (Индивидуальный)", price_numeric: 5990 }
+        };
+        initializeServiceDisplay();
+    }
+
+    // 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();
+        const isValid = val.length >= 2;
+        showError(nameInput, !isValid);
+        return isValid;
+    }
+
+    function checkPhone() {
+        const val = phoneInput.value;
+        const digits = val.replace(/\D/g, '');
+        const isValid = digits.length === 11 && val.startsWith('+7') && val.length === 18;
+        showError(phoneInput, !isValid);
+        return isValid;
+    }
+
+    function checkEmail() {
+        const val = emailInput.value.trim();
+        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();
+        const isValid = val.length > 0;
+        showError(vkInput, !isValid);
+        return isValid;
+    }
+
+    if (agreeOfertaInput) {
+        agreeOfertaInput.addEventListener('change', checkOferta);
+    }
+    if (agreePolicyInput) {
+        agreePolicyInput.addEventListener('change', checkPolicy);
+    }
+
+    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 => {
+        field.input.addEventListener('blur', () => {
+            field.dirty = true;
+            field.check();
+        });
+
+        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;
+        let digits = value.replace(/\D/g, '');
+        
+        if (digits.startsWith('7') || digits.startsWith('8')) {
+            digits = digits.substring(1);
+        }
+        
+        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;
+        
+        const phoneField = fields.find(item => item.input === phoneInput);
+        if (phoneField && phoneField.dirty) {
+            checkPhone();
+        }
+    });
+
+    phoneInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Backspace') {
+            const val = e.target.value;
+            if (val === '+7 ' || val === '+7' || val === '+') {
+                e.target.value = '';
+            }
+        }
+    });
+
+    phoneInput.addEventListener('focus', (e) => {
+        if (!e.target.value) {
+            e.target.value = '+7 ';
+        }
+    });
+
+    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();
+
+        fields.forEach(field => {
+            field.dirty = true;
+        });
+
+        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) {
+            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,
+                serviceId: serviceIdInput.value || "web_1"
+            };
+
+            const submitBtn = document.getElementById('submitBtn');
+            const originalBtnText = submitBtn.textContent;
+            submitBtn.disabled = true;
+            submitBtn.textContent = 'Отправка...';
+
+            const submitUrl = window.location.protocol === 'file:' ? 'http://localhost:8000/submit' : '/submit';
+
+            fetch(submitUrl, {
+                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 => {
+                if (data.payment_url) {
+                    // Redirect directly to YooKassa payment gateway
+                    window.location.href = data.payment_url;
+                    return;
+                }
+
+                // Fallback success UI container (if YooKassa keys not configured in server)
+                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)';
+
+                    successContainer.offsetHeight;
+
+                    successContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+                    successContainer.style.opacity = '1';
+                    successContainer.style.transform = 'translateY(0)';
+                }, 300);
+
+                form.reset();
+                fields.forEach(field => {
+                    field.dirty = false;
+                });
+                
+                serviceDisplay.style.display = 'none';
+            })
+            .catch(error => {
+                console.error('Error submitting form:', error);
+                alert('Произошла ошибка при отправке заявки: ' + error.message + '. Пожалуйста, убедитесь, что сервер server.py запущен.');
+            })
+            .finally(() => {
+                submitBtn.disabled = false;
+                submitBtn.textContent = originalBtnText;
+            });
+        } else {
+            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)';
+
+        // Remove parameters from URL to prevent showing success container on reload
+        const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?service_id=" + serviceIdInput.value;
+        window.history.replaceState({ path: newUrl }, '', newUrl);
+
+        setTimeout(() => {
+            successContainer.style.display = 'none';
+            formContainer.style.display = 'block';
+            formContainer.style.opacity = '0';
+            formContainer.style.transform = 'translateY(-10px)';
+
+            formContainer.offsetHeight;
+
+            formContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+            formContainer.style.opacity = '1';
+            formContainer.style.transform = 'translateY(0)';
+            
+            if (serviceIdInput.value && services[serviceIdInput.value]) {
+                serviceDisplay.style.display = 'block';
+            }
+        }, 300);
+    });
+});

form/style.css

@@ -0,0 +1,538 @@
+/* ----------------------------------------------------
+   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;
+    }
+}
+
+/* ----------------------------------------------------
+   11. SELECTED SERVICE DISPLAY
+   ---------------------------------------------------- */
+.service-display-badge {
+    padding: 14px 16px;
+    background: rgba(0, 210, 255, 0.05);
+    border: 1.5px dashed rgba(0, 210, 255, 0.3);
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.05);
+    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.service-badge-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.service-icon {
+    font-size: 1.6rem;
+    line-height: 1;
+}
+
+.service-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.service-label {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-gray);
+}
+
+.service-value {
+    font-family: var(--font-headings);
+    font-weight: 800;
+    font-size: 0.95rem;
+    color: var(--text-white);
+}
+
+#serviceNameDisplay {
+    color: var(--cyan-accent);
+}
+
+#servicePriceDisplay {
+    color: var(--primary-orange);
+}
+

index.html

@@ -287,7 +287,7 @@
                                             class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
                                         <span class="text-3xl font-black text-white text-glow-blue">870 ₽</span>
                                     </div>
-                                    <a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
+                                    <a href="form/index.html?service_id=web_1"
                                         class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-blue flex items-center gap-2 group/btn">
                                         Записаться
                                         <svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
@@ -421,7 +421,7 @@
                                             class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
                                         <span class="text-3xl font-black text-white text-glow-purple">2 790 ₽</span>
                                     </div>
-                                    <a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
+                                    <a href="form/index.html?service_id=web_2"
                                         class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-purple flex items-center gap-2 group/btn">
                                         Записаться
                                         <svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
@@ -554,7 +554,7 @@
                                             class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
                                         <span class="text-3xl font-black text-white text-glow-pink">4 990 ₽</span>
                                     </div>
-                                    <a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
+                                    <a href="form/index.html?service_id=web_3"
                                         class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-pink flex items-center gap-2 group/btn">
                                         Записаться
                                         <svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
@@ -686,7 +686,7 @@
                                             class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
                                         <span class="text-3xl font-black text-white text-glow-blue">3 290 ₽</span>
                                     </div>
-                                    <a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
+                                    <a href="form/index.html?service_id=web_4"
                                         class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-blue flex items-center gap-2 group/btn">
                                         Записаться
                                         <svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"
@@ -819,7 +819,7 @@
                                             class="text-[9px] font-mono text-gray-500 block uppercase tracking-widest">Цена:</span>
                                         <span class="text-3xl font-black text-white text-glow-purple">5 990 ₽</span>
                                     </div>
-                                    <a href="https://vk.com/im/convo/-233127658?entrypoint=community_page&tab=all" target="_blank" rel="noopener noreferrer"
+                                    <a href="form/index.html?service_id=web_5"
                                         class="cyber-btn text-xs whitespace-nowrap !py-3 !px-6 border-cyber-purple flex items-center gap-2 group/btn">
                                         Записаться
                                         <svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"

requirements.txt

@@ -0,0 +1,3 @@
+flask>=3.0.0
+requests>=2.31.0
+openpyxl>=3.1.2