Kenik
79cc1ba38d
Контент и брендинг: - Реальные данные ИК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>
166 lines
9.7 KiB
HTML
166 lines
9.7 KiB
HTML
<!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">
|
||
<!-- 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>
|
||
<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>
|
||
<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>
|
||
</main>
|
||
|
||
<!-- Link to external JS script -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
|
||
</html> |