feat: implement admin services management, Docker deployment, and YooKassa webhook IP security checks
This commit is contained in:
Binary file not shown.
@@ -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()
|
||||
+169
@@ -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>
|
||||
+384
@@ -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);
|
||||
});
|
||||
});
|
||||
+538
@@ -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);
|
||||
}
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user