Доработка VK-бота ИКП: контент, новые функции, защита и визуал
Контент и брендинг: - Реальные данные ИКP (infocyber.pro): услуги CS2/Dota 2/WoT, цены, FAQ, контакты, площадки - Приветствие и тексты приведены к бренду ИКП Новые функции: - Раздельные согласия (152-ФЗ): маркетинговая рассылка — отдельный необязательный шаг - Шаг «удобное время звонка» в форме заявки - Раздел «Карьера в ИКП»: набор игроков и сотрудников (таблица applications) - Админ-команды: статистика (стата) и рассылка по подписчикам с троттлингом и отпиской - Журнал заявок leads, «бот помнит клиента», международные телефоны, валидация имени - Email-уведомления о заявках и откликах (mailer.py); HR-адрес через HR_MAIL_TO Защита: - Анти-флуд по пользователю и кулдаун уведомлений оператору (анти-DDoS) - Веб-форма: серверная валидация, honeypot, рейт-лимит, CORS по ALLOWED_ORIGIN, SQLite-first Визуал: - Убрана Markdown-разметка (VK её не рендерит) - Логотип в приветствии, карусели услуг и «Карьеры» (фото 13:8), предзагрузка медиа - Кнопки-ссылки на соцсети - Веб-форма: анимации, конфетти на успехе Промокоды добавлены, но пока ВЫКЛЮЧЕНЫ флагом PROMO_ENABLED (по умолчанию false). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Kenik
@@ -33,6 +33,12 @@
|
||||
<p class="form-subtitle">Оставить заявку на бесплатный урок и доступ к тестовым материалам ИКП</p>
|
||||
|
||||
<form id="ikpForm" novalidate autocomplete="on">
|
||||
<!-- Honeypot: скрытое поле-ловушка для ботов. Реальные пользователи его не видят и не заполняют. -->
|
||||
<div class="hp-field" aria-hidden="true" style="position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;">
|
||||
<label for="website">Не заполняйте это поле</label>
|
||||
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="name" class="form-label">Имя <span class="required-star">*</span></label>
|
||||
@@ -143,6 +149,11 @@
|
||||
Наш киберспортивный координатор свяжется с вами в ближайшее время, чтобы открыть доступ к тестовым
|
||||
материалам и записать на бесплатный урок.
|
||||
</p>
|
||||
<div class="promo-box" id="promoBox">
|
||||
<span class="promo-label">🎁 Ваш промокод на скидку 10%</span>
|
||||
<span class="promo-code" id="promoCode">—</span>
|
||||
<span class="promo-hint">Назовите его менеджеру при записи</span>
|
||||
</div>
|
||||
<button id="resetBtn" class="reset-btn">Вернуться к форме</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+41
-3
@@ -173,6 +173,28 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Confetti (салют при успешной отправке)
|
||||
==================================================== */
|
||||
function launchConfetti() {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
const colors = ['#ff7a00', '#00d2ff', '#ffffff', '#ff9233', '#ffd166'];
|
||||
const count = 90;
|
||||
for (let i = 0; i < count; i++) {
|
||||
const piece = document.createElement('div');
|
||||
piece.className = 'confetti-piece';
|
||||
piece.style.left = Math.random() * 100 + 'vw';
|
||||
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
|
||||
piece.style.animationDelay = (Math.random() * 0.5) + 's';
|
||||
piece.style.animationDuration = (2.2 + Math.random() * 1.6) + 's';
|
||||
const size = 6 + Math.random() * 8;
|
||||
piece.style.width = size + 'px';
|
||||
piece.style.height = (size * 0.5) + 'px';
|
||||
document.body.appendChild(piece);
|
||||
setTimeout(() => piece.remove(), 4200);
|
||||
}
|
||||
}
|
||||
|
||||
/* ====================================================
|
||||
Form Submission
|
||||
==================================================== */
|
||||
@@ -194,6 +216,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
if (isNameValid && isPhoneValid && isEmailValid && isVKValid && isOfertaValid && isPolicyValid) {
|
||||
// Gather form data
|
||||
const websiteInput = document.getElementById('website'); // honeypot
|
||||
const formData = {
|
||||
name: nameInput.value.trim(),
|
||||
phone: phoneInput.value,
|
||||
@@ -201,17 +224,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
vk: vkInput.value.trim(),
|
||||
agreeOferta: agreeOfertaInput.checked,
|
||||
agreePolicy: agreePolicyInput.checked,
|
||||
agreeNewsletter: agreeNewsletterInput.checked
|
||||
agreeNewsletter: agreeNewsletterInput.checked,
|
||||
website: websiteInput ? websiteInput.value : '' // должно быть пустым у людей
|
||||
};
|
||||
|
||||
// Disable submit button during request
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const originalBtnText = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.classList.add('loading');
|
||||
submitBtn.textContent = 'Отправка...';
|
||||
|
||||
// Send to our backend server (supports running on localhost:8000)
|
||||
fetch('http://localhost:8000/submit', {
|
||||
// Отправка на тот же сервер, что отдаёт форму (относительный путь = тот же origin, без CORS)
|
||||
fetch('/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -232,6 +257,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
})
|
||||
.then(data => {
|
||||
// Показываем персональный промокод, если сервер его вернул
|
||||
if (data && data.promo) {
|
||||
const promoCode = document.getElementById('promoCode');
|
||||
const promoBox = document.getElementById('promoBox');
|
||||
if (promoCode && promoBox) {
|
||||
promoCode.textContent = data.promo;
|
||||
promoBox.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
// Салют 🎉
|
||||
launchConfetti();
|
||||
|
||||
// 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';
|
||||
@@ -263,6 +300,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
})
|
||||
.finally(() => {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.classList.remove('loading');
|
||||
submitBtn.textContent = originalBtnText;
|
||||
});
|
||||
} else {
|
||||
|
||||
+207
-62
@@ -1,5 +1,11 @@
|
||||
import os
|
||||
import re
|
||||
import json
|
||||
import time
|
||||
import random
|
||||
import string
|
||||
import threading
|
||||
from collections import defaultdict
|
||||
from http.server import HTTPServer, SimpleHTTPRequestHandler
|
||||
from datetime import datetime
|
||||
import sys
|
||||
@@ -36,6 +42,12 @@ except Exception as e:
|
||||
db = None
|
||||
config = None
|
||||
|
||||
try:
|
||||
import mailer
|
||||
except Exception as e:
|
||||
print(f"Предупреждение: Не удалось загрузить модуль mailer: {e}")
|
||||
mailer = None
|
||||
|
||||
try:
|
||||
import vk_api
|
||||
from vk_api.utils import get_random_id
|
||||
@@ -46,6 +58,60 @@ except ImportError:
|
||||
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
FILE_NAME = os.path.join(SCRIPT_DIR, "registration_for_training.xlsx")
|
||||
|
||||
# Разрешённый источник для CORS (берётся из config, '*' только для локальной отладки)
|
||||
ALLOWED_ORIGIN = getattr(config, "ALLOWED_ORIGIN", "*") if config else "*"
|
||||
|
||||
# ---------------------------------------------------------------
|
||||
# Защита формы: валидация, рейт-лимит и honeypot
|
||||
# ---------------------------------------------------------------
|
||||
NAME_RE = re.compile(r"^[A-Za-zА-Яа-яЁё][A-Za-zА-Яа-яЁё \-']{1,49}$")
|
||||
EMAIL_RE = re.compile(r"^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$")
|
||||
|
||||
# Простой in-memory рейт-лимит по IP: не более N заявок за окно
|
||||
RATE_LIMIT_MAX = 5
|
||||
RATE_LIMIT_WINDOW = 600 # секунд (10 минут)
|
||||
_rate_lock = threading.Lock()
|
||||
_rate_hits = defaultdict(list)
|
||||
|
||||
|
||||
def is_rate_limited(ip: str) -> bool:
|
||||
"""True, если с этого IP было слишком много заявок за окно времени."""
|
||||
now = time.time()
|
||||
with _rate_lock:
|
||||
hits = [t for t in _rate_hits[ip] if now - t < RATE_LIMIT_WINDOW]
|
||||
if len(hits) >= RATE_LIMIT_MAX:
|
||||
_rate_hits[ip] = hits
|
||||
return True
|
||||
hits.append(now)
|
||||
_rate_hits[ip] = hits
|
||||
return False
|
||||
|
||||
|
||||
def validate_submission(data: dict):
|
||||
"""Серверная валидация заявки. Возвращает (ok: bool, error: str|None)."""
|
||||
name = (data.get("name") or "").strip()
|
||||
phone_digits = re.sub(r"\D", "", data.get("phone") or "")
|
||||
email = (data.get("email") or "").strip()
|
||||
vk = (data.get("vk") or "").strip().lower()
|
||||
|
||||
if not NAME_RE.match(name):
|
||||
return False, "Имя должно содержать только буквы (2–50 символов)."
|
||||
# Российский (11 цифр) или международный (10–15 цифр) номер
|
||||
if not (10 <= len(phone_digits) <= 15):
|
||||
return False, "Некорректный номер телефона."
|
||||
if not EMAIL_RE.match(email):
|
||||
return False, "Некорректный e-mail."
|
||||
if not (vk and ("vk.com" in vk or "vkontakte.ru" in vk)):
|
||||
return False, "Ссылка должна вести на vk.com или vkontakte.ru."
|
||||
if not data.get("agreeOferta") or not data.get("agreePolicy"):
|
||||
return False, "Необходимо согласие с офертой и политикой обработки данных."
|
||||
return True, None
|
||||
|
||||
|
||||
def is_spam(data: dict) -> bool:
|
||||
"""Honeypot: скрытое поле 'website' должно оставаться пустым у реальных пользователей."""
|
||||
return bool((data.get("website") or "").strip())
|
||||
|
||||
def init_excel():
|
||||
"""Create the Excel file with styled headers if it doesn't exist."""
|
||||
recreate = False
|
||||
@@ -124,10 +190,25 @@ def get_next_user_id(ws):
|
||||
except (IndexError, ValueError):
|
||||
return f"id_{max_row:03d}"
|
||||
|
||||
def add_registration(data):
|
||||
"""Append a new form submission row into the Excel sheet."""
|
||||
def generate_next_id():
|
||||
"""Генерирует следующий ID заявки. Источник правды — SQLite; Excel используется как запасной."""
|
||||
if db:
|
||||
try:
|
||||
return f"id_{db.count_web_registrations() + 1:03d}"
|
||||
except Exception as e:
|
||||
print(f"Не удалось получить счётчик из SQLite ({e}), используем Excel как запасной источник.")
|
||||
# Запасной вариант — по строкам Excel
|
||||
try:
|
||||
init_excel()
|
||||
wb = load_workbook(FILE_NAME)
|
||||
return get_next_user_id(wb.active)
|
||||
except Exception:
|
||||
return f"id_{int(time.time())}"
|
||||
|
||||
|
||||
def append_to_excel(next_id, data, current_time):
|
||||
"""Дописывает строку в Excel. Вынесено отдельно: ошибка здесь НЕ срывает приём заявки."""
|
||||
init_excel()
|
||||
|
||||
try:
|
||||
wb = load_workbook(FILE_NAME)
|
||||
ws = wb.active
|
||||
@@ -136,12 +217,7 @@ def add_registration(data):
|
||||
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(),
|
||||
@@ -153,39 +229,87 @@ def add_registration(data):
|
||||
"Да" 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 базу данных
|
||||
wb.save(FILE_NAME)
|
||||
print(f"[{current_time}] Добавлена запись в Excel: ID={row[0]}, Имя={row[1]}, Телефон={row[2]}")
|
||||
|
||||
|
||||
def gen_promo():
|
||||
"""Персональный промокод на скидку — выдаётся клиенту на экране 'Спасибо'."""
|
||||
return "ИКП-" + "".join(random.choices(string.ascii_uppercase + string.digits, k=6))
|
||||
|
||||
|
||||
def add_registration(data):
|
||||
"""Сохраняет заявку: SQLite (источник правды) → Excel (нестрого) → уведомления. Возвращает промокод."""
|
||||
current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||
next_id = generate_next_id()
|
||||
# Промокод пока выключен флагом config.PROMO_ENABLED
|
||||
promo = gen_promo() if (config and getattr(config, "PROMO_ENABLED", False)) else None
|
||||
|
||||
# 1. Запись в SQLite базу данных — основной приёмник, выполняется первым
|
||||
if db:
|
||||
db.add_web_registration(next_id, data)
|
||||
# Единый журнал заявок для статистики (source='web')
|
||||
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
|
||||
db.add_lead(
|
||||
user_id=None, source="web",
|
||||
name=data.get("name", "").strip(), phone=data.get("phone", "").strip(),
|
||||
service=None, call_time=None, promo=promo,
|
||||
marketing=bool(data.get("agreeNewsletter"))
|
||||
)
|
||||
except Exception as lead_err:
|
||||
print(f"[{current_time}] Не удалось записать лид в журнал: {lead_err}")
|
||||
print(f"[{current_time}] Заявка {next_id} сохранена в SQLite (web_registrations + leads).")
|
||||
|
||||
# 2. Дублирование в Excel — НЕ критично: если файл открыт/заблокирован, заявка всё равно принята
|
||||
try:
|
||||
append_to_excel(next_id, data, current_time)
|
||||
except PermissionError:
|
||||
print(f"[{current_time}] ⚠️ Excel заблокирован (открыт в программе). Заявка сохранена в SQLite, Excel пропущен.")
|
||||
except Exception as xl_err:
|
||||
print(f"[{current_time}] ⚠️ Ошибка записи в Excel (пропущено): {xl_err}")
|
||||
|
||||
# 3. Отправка уведомления оператору в VK
|
||||
try:
|
||||
send_vk_operator_notification(next_id, data)
|
||||
except Exception as vk_err:
|
||||
print(f"[{current_time}] Ошибка при отправке уведомления оператору: {vk_err}")
|
||||
|
||||
# 3. Отправка уведомления на корпоративную почту (group-zakaz@infocyber.pro)
|
||||
if mailer:
|
||||
try:
|
||||
email_body = (
|
||||
"Новая заявка с сайта.\n\n"
|
||||
f"ID заявки: {next_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"Промокод клиента: {promo}\n" if promo else "")
|
||||
+ f"Дата: {current_time}\n"
|
||||
)
|
||||
mailer.send_email(f"Новая заявка с сайта — {data.get('name', '').strip()}", email_body)
|
||||
except Exception as mail_err:
|
||||
print(f"[{current_time}] Ошибка при отправке email: {mail_err}")
|
||||
|
||||
return promo
|
||||
|
||||
|
||||
def send_vk_operator_notification(reg_id, data):
|
||||
"""Отправить уведомление о новой веб-заявке в VK-чат оператора."""
|
||||
@@ -238,50 +362,71 @@ class FormHandler(SimpleHTTPRequestHandler):
|
||||
rel_path = os.path.relpath(path, os.getcwd())
|
||||
return os.path.join(SCRIPT_DIR, rel_path)
|
||||
|
||||
def _client_ip(self) -> str:
|
||||
"""IP клиента с учётом обратного прокси (X-Forwarded-For)."""
|
||||
xff = self.headers.get("X-Forwarded-For")
|
||||
if xff:
|
||||
return xff.split(",")[0].strip()
|
||||
return self.client_address[0] if self.client_address else "unknown"
|
||||
|
||||
def _send_json(self, code: int, payload: dict):
|
||||
body = json.dumps(payload).encode("utf-8")
|
||||
self.send_response(code)
|
||||
self.send_header("Content-Type", "application/json")
|
||||
self.send_header("Access-Control-Allow-Origin", ALLOWED_ORIGIN)
|
||||
self.send_header("Content-Length", str(len(body)))
|
||||
self.end_headers()
|
||||
self.wfile.write(body)
|
||||
|
||||
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:
|
||||
if self.path != '/submit':
|
||||
self.send_response(404)
|
||||
self.end_headers()
|
||||
|
||||
return
|
||||
|
||||
# Защита от флуда по IP
|
||||
ip = self._client_ip()
|
||||
if is_rate_limited(ip):
|
||||
print(f"[RATE LIMIT] Слишком много заявок с IP {ip}.")
|
||||
self._send_json(429, {"status": "error", "message": "Слишком много заявок. Попробуйте позже."})
|
||||
return
|
||||
|
||||
try:
|
||||
content_length = int(self.headers.get('Content-Length', 0))
|
||||
# Ограничение размера тела запроса (защита от больших payload'ов)
|
||||
if content_length <= 0 or content_length > 10000:
|
||||
self._send_json(400, {"status": "error", "message": "Некорректный размер запроса."})
|
||||
return
|
||||
|
||||
post_data = self.rfile.read(content_length)
|
||||
data = json.loads(post_data.decode('utf-8'))
|
||||
|
||||
# Honeypot: если скрытое поле заполнено — это бот. Делаем вид, что всё ок, но не сохраняем.
|
||||
if is_spam(data):
|
||||
print(f"[SPAM] Honeypot сработал для IP {ip}, заявка отброшена.")
|
||||
self._send_json(200, {"status": "success", "message": "Заявка принята."})
|
||||
return
|
||||
|
||||
# Серверная валидация
|
||||
ok, error = validate_submission(data)
|
||||
if not ok:
|
||||
self._send_json(400, {"status": "error", "message": error})
|
||||
return
|
||||
|
||||
promo = add_registration(data)
|
||||
self._send_json(200, {"status": "success", "message": "Заявка успешно записана!", "promo": promo})
|
||||
|
||||
except json.JSONDecodeError:
|
||||
self._send_json(400, {"status": "error", "message": "Некорректный формат данных."})
|
||||
except Exception as e:
|
||||
print(f"[ERROR] Ошибка обработки заявки: {e}")
|
||||
self._send_json(500, {"status": "error", "message": "Внутренняя ошибка сервера. Попробуйте позже."})
|
||||
|
||||
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-Origin', ALLOWED_ORIGIN)
|
||||
self.send_header('Access-Control-Allow-Methods', 'POST, OPTIONS')
|
||||
self.send_header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
self.end_headers()
|
||||
|
||||
|
||||
+159
@@ -483,3 +483,162 @@ main {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
11. VISUAL POLISH (анимации и «живой» неон)
|
||||
---------------------------------------------------- */
|
||||
|
||||
/* Плавное появление карточки при загрузке */
|
||||
@keyframes cardIn {
|
||||
from { opacity: 0; transform: translateY(24px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
.card {
|
||||
animation: cardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
/* Бегущий градиент в верхней акцент-линии */
|
||||
@keyframes accentFlow {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
.card::before {
|
||||
background: linear-gradient(90deg,
|
||||
var(--cyan-accent) 0%, var(--primary-orange) 50%, var(--cyan-accent) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: accentFlow 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Каскадное появление полей формы */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
#formContainer .form-group,
|
||||
#formContainer .checkbox-group,
|
||||
#formContainer .submit-btn {
|
||||
animation: fadeUp 0.5s ease both;
|
||||
}
|
||||
#formContainer .form-group:nth-of-type(1) { animation-delay: 0.10s; }
|
||||
#formContainer .form-group:nth-of-type(2) { animation-delay: 0.16s; }
|
||||
#formContainer .form-group:nth-of-type(3) { animation-delay: 0.22s; }
|
||||
#formContainer .form-group:nth-of-type(4) { animation-delay: 0.28s; }
|
||||
#formContainer .checkbox-group { animation-delay: 0.34s; }
|
||||
#formContainer .submit-btn { animation-delay: 0.42s; }
|
||||
|
||||
/* Мягкое пульсирующее свечение логотипа */
|
||||
@keyframes logoGlow {
|
||||
0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
|
||||
50% { box-shadow: 0 8px 30px rgba(255, 122, 0, 0.35); }
|
||||
}
|
||||
.logo-img {
|
||||
animation: logoGlow 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Световой блик, пробегающий по кнопке при наведении */
|
||||
.submit-btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.submit-btn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -120%;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
|
||||
transform: skewX(-20deg);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
.submit-btn:hover::after {
|
||||
left: 130%;
|
||||
}
|
||||
|
||||
/* Спиннер в кнопке во время отправки (класс .loading добавляется из script.js) */
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.submit-btn.loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.submit-btn.loading::before {
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 10px;
|
||||
border: 2.5px solid rgba(10, 15, 31, 0.35);
|
||||
border-top-color: var(--text-dark);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
/* Уважаем системную настройку «уменьшить движение» */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card,
|
||||
.card::before,
|
||||
#formContainer .form-group,
|
||||
#formContainer .checkbox-group,
|
||||
#formContainer .submit-btn,
|
||||
.logo-img {
|
||||
animation: none !important;
|
||||
}
|
||||
.submit-btn::after { display: none; }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
12. ПРОМОКОД НА ЭКРАНЕ УСПЕХА
|
||||
---------------------------------------------------- */
|
||||
.promo-box {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
background: rgba(255, 122, 0, 0.08);
|
||||
border: 1.5px dashed var(--primary-orange);
|
||||
border-radius: 14px;
|
||||
padding: 16px 20px;
|
||||
margin: 0 0 24px;
|
||||
animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
.promo-label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-gray);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.promo-code {
|
||||
font-family: var(--font-headings);
|
||||
font-size: 1.55rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-orange);
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
.promo-hint {
|
||||
font-size: 0.76rem;
|
||||
color: var(--text-gray);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
13. КОНФЕТТИ (салют при успешной отправке)
|
||||
---------------------------------------------------- */
|
||||
.confetti-piece {
|
||||
position: fixed;
|
||||
top: -14px;
|
||||
z-index: 9999;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
animation-name: confetti-fall;
|
||||
animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes confetti-fall {
|
||||
0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
|
||||
100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.confetti-piece { display: none; }
|
||||
.promo-box { animation: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user