169 lines
9.7 KiB
HTML
169 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="../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> |