a.gruzdev
155 lines
8.8 KiB
HTML
155 lines
8.8 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">
|
||
<!-- Name Field -->
|
||
<div class="form-group">
|
||
<label for="name" class="form-label">Имя <span class="required-star">*</span></label>
|
||
<div class="input-wrapper">
|
||
<input type="text" id="name" name="name" required placeholder="Введите ваше имя"
|
||
class="form-input" aria-required="true">
|
||
<span class="input-icon">👤</span>
|
||
</div>
|
||
<div class="error-message" id="nameError" aria-live="polite">
|
||
<span>⚠️</span> Пожалуйста, введите ваше имя
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phone Field -->
|
||
<div class="form-group">
|
||
<label for="phone" class="form-label">Номер телефона <span
|
||
class="required-star">*</span></label>
|
||
<div class="input-wrapper">
|
||
<input type="tel" id="phone" name="phone" required placeholder="+7 (___) ___-__-__"
|
||
class="form-input" aria-required="true" inputmode="numeric">
|
||
<span class="input-icon">📞</span>
|
||
</div>
|
||
<div class="error-message" id="phoneError" aria-live="polite">
|
||
<span>⚠️</span> Введите корректный номер телефона: +7 (999) 999-99-99
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Email Field -->
|
||
<div class="form-group">
|
||
<label for="email" class="form-label">E-mail <span class="required-star">*</span></label>
|
||
<div class="input-wrapper">
|
||
<input type="email" id="email" name="email" required placeholder="name@domain.zone"
|
||
class="form-input" aria-required="true">
|
||
<span class="input-icon">✉️</span>
|
||
</div>
|
||
<div class="error-message" id="emailError" aria-live="polite">
|
||
<span>⚠️</span> Введите корректный e-mail (например, name@mail.ru)
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VK Link Field -->
|
||
<div class="form-group">
|
||
<label for="vk" class="form-label">Ссылка на профиль ВКонтакте <span
|
||
class="required-star">*</span></label>
|
||
<div class="input-wrapper">
|
||
<input type="url" id="vk" name="vk" required placeholder="vk.com/username"
|
||
class="form-input" aria-required="true">
|
||
<span class="input-icon">🌐</span>
|
||
</div>
|
||
<div class="error-message" id="vkError" aria-live="polite">
|
||
<span>⚠️</span> Ссылка должна вести на vk.com или vkontakte.ru
|
||
</div>
|
||
</div>
|
||
<!-- Checkbox Agreements -->
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-label" for="agreeOferta">
|
||
<input type="checkbox" id="agreeOferta" name="agreeOferta" required>
|
||
<span class="checkbox-custom"></span>
|
||
<span class="checkbox-text">Я согласен с <a href="#" class="consent-link">офертой</a> <span
|
||
class="required-star">*</span></span>
|
||
</label>
|
||
<div class="error-message" id="agreeOfertaError" aria-live="polite">
|
||
<span>⚠️</span> Вы должны согласиться с офертой
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-label" for="agreePolicy">
|
||
<input type="checkbox" id="agreePolicy" name="agreePolicy" required>
|
||
<span class="checkbox-custom"></span>
|
||
<span class="checkbox-text">Я согласен с <a href="#" class="consent-link">политикой
|
||
обработки и хранения личных данных</a> <span class="required-star">*</span></span>
|
||
</label>
|
||
<div class="error-message" id="agreePolicyError" aria-live="polite">
|
||
<span>⚠️</span> Вы должны согласиться с политикой обработки данных
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-label" for="agreeNewsletter">
|
||
<input type="checkbox" id="agreeNewsletter" name="agreeNewsletter">
|
||
<span class="checkbox-custom"></span>
|
||
<span class="checkbox-text">Я даю согласие на получение информации на E-mail</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Submit Button -->
|
||
<button type="submit" class="submit-btn" id="submitBtn">Оставить заявку</button>
|
||
|
||
<!-- Terms Consent -->
|
||
<p class="consent-text">
|
||
Отправляя форму, вы соглашаетесь с
|
||
<a href="#" class="consent-link">офертой</a>
|
||
и
|
||
<a href="#" class="consent-link">политикой обработки и хранения личных данных</a>.
|
||
</p>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 2. Success Message Container (Hidden by default) -->
|
||
<div id="successContainer" class="success-card" style="display: none;">
|
||
<div class="success-icon-wrapper">
|
||
<div class="success-icon">✓</div>
|
||
</div>
|
||
<h2 class="success-title">Заявка отправлена!</h2>
|
||
<p class="success-text">
|
||
Спасибо за ваше обращение!<br>
|
||
Наш киберспортивный координатор свяжется с вами в ближайшее время, чтобы открыть доступ к тестовым
|
||
материалам и записать на бесплатный урок.
|
||
</p>
|
||
<button id="resetBtn" class="reset-btn">Вернуться к форме</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Link to external JS script -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
|
||
</html> |