425 lines
16 KiB
PHP
425 lines
16 KiB
PHP
<?php
|
||
declare (strict_types = 1);
|
||
require_once __DIR__ . '/../includes/bootstrap_global.php';
|
||
|
||
if (session_status() !== PHP_SESSION_ACTIVE) {
|
||
session_start();
|
||
}
|
||
|
||
function h(?string $value): string
|
||
{
|
||
return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
|
||
}
|
||
|
||
$flashSuccess = $_SESSION['aprelik_success'] ?? '';
|
||
$flashErrors = $_SESSION['aprelik_errors'] ?? [];
|
||
$old = $_SESSION['aprelik_old'] ?? [];
|
||
|
||
unset($_SESSION['aprelik_success'], $_SESSION['aprelik_errors'], $_SESSION['aprelik_old']);
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Запись в Апрелик 2026-2027 — USLUGI.FR</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--navy: #1a2744;
|
||
--blue: #6b7fd4;
|
||
--blue-light: #eef0fb;
|
||
--red: #e03e3e;
|
||
--white: #ffffff;
|
||
--gray-bg: #f4f6fb;
|
||
--muted: #6b7a90;
|
||
--border: #dde2f0;
|
||
--success-bg: #eef9f0;
|
||
--success-border: #9dd8a6;
|
||
--success-text: #216a2f;
|
||
--error-bg: #fff1f1;
|
||
--error-border: #efb2b2;
|
||
--error-text: #a12c2c;
|
||
}
|
||
|
||
body { font-family: 'Montserrat', sans-serif; background: var(--white); color: var(--navy); font-size: 15px; line-height: 1.6; }
|
||
|
||
.hero { padding: 48px 24px 40px; text-align: center; max-width: 640px; margin: 0 auto; }
|
||
|
||
.school-block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.school-logo {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
object-fit: cover;
|
||
border: 2px solid var(--border);
|
||
}
|
||
|
||
.school-info { text-align: left; }
|
||
.school-info h2 { font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.3; }
|
||
.school-info p { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
||
|
||
.tag { display: inline-block; border: 1.5px solid var(--border); border-radius: 100px; padding: 5px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
|
||
|
||
.hero h1 { font-size: clamp(24px, 6vw, 32px); font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 12px; }
|
||
.hero p { font-size: 15px; color: var(--muted); max-width: 400px; margin: 0 auto; }
|
||
|
||
.form-section { background: var(--gray-bg); padding: 40px 24px; }
|
||
.form-inner { max-width: 640px; margin: 0 auto; }
|
||
|
||
.notice {
|
||
border-radius: 16px;
|
||
padding: 14px 16px;
|
||
margin-bottom: 16px;
|
||
border: 1px solid transparent;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.notice-success {
|
||
background: var(--success-bg);
|
||
border-color: var(--success-border);
|
||
color: var(--success-text);
|
||
}
|
||
|
||
.notice-error {
|
||
background: var(--error-bg);
|
||
border-color: var(--error-border);
|
||
color: var(--error-text);
|
||
}
|
||
|
||
.notice ul {
|
||
margin: 8px 0 0 18px;
|
||
padding: 0;
|
||
}
|
||
|
||
.form-block { background: var(--white); border-radius: 20px; padding: 28px 24px; margin-bottom: 16px; }
|
||
.form-block-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
|
||
|
||
.form-row { margin-bottom: 16px; }
|
||
.form-row:last-child { margin-bottom: 0; }
|
||
|
||
.form-row-2 { display: flex; gap: 12px; }
|
||
.form-row-2 .form-row { flex: 1; margin-bottom: 0; }
|
||
|
||
label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
|
||
label .req { color: var(--red); margin-left: 2px; }
|
||
|
||
input[type="text"],
|
||
input[type="email"],
|
||
input[type="date"],
|
||
input[type="tel"],
|
||
select,
|
||
textarea {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 12px;
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-size: 14px;
|
||
color: var(--navy);
|
||
background: var(--white);
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
appearance: none;
|
||
}
|
||
|
||
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
|
||
|
||
select {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a90' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 16px center;
|
||
padding-right: 40px;
|
||
}
|
||
|
||
textarea { resize: vertical; min-height: 80px; }
|
||
|
||
.checkbox-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
|
||
.checkbox-row:last-child { margin-bottom: 0; }
|
||
|
||
.checkbox-row input[type="checkbox"] {
|
||
width: 20px;
|
||
height: 20px;
|
||
min-width: 20px;
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 6px;
|
||
margin-top: 2px;
|
||
cursor: pointer;
|
||
accent-color: var(--navy);
|
||
}
|
||
|
||
.checkbox-row label {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--navy);
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
cursor: pointer;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.checkbox-row label .req { color: var(--red); }
|
||
|
||
.submit-section { padding: 32px 24px 48px; max-width: 640px; margin: 0 auto; text-align: center; }
|
||
|
||
.btn {
|
||
display: block;
|
||
background: var(--red);
|
||
color: var(--white);
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
padding: 16px 36px;
|
||
border-radius: 100px;
|
||
border: none;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
|
||
.submit-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
|
||
|
||
.footer { text-align: center; padding: 24px; border-top: 1px solid var(--border); }
|
||
.footer img { height: 32px; width: auto; }
|
||
|
||
.hidden-field {
|
||
position: absolute !important;
|
||
left: -9999px !important;
|
||
width: 1px !important;
|
||
height: 1px !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.hero { padding: 36px 18px 30px; }
|
||
.school-block { flex-direction: column; }
|
||
.school-info { text-align: center; }
|
||
.form-section { padding: 28px 16px; }
|
||
.form-block { padding: 22px 16px; }
|
||
.form-row-2 { flex-direction: column; gap: 16px; }
|
||
.submit-section { padding: 24px 16px 40px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="hero">
|
||
<div class="school-block">
|
||
<img class="school-logo" src="/public/uploads/img/aprelik.jpeg" alt="Апрелик">
|
||
<div class="school-info">
|
||
<h2>Студия-мастерская<br>«Апрелик»</h2>
|
||
<p>Русский язык и театр в Париже</p>
|
||
</div>
|
||
</div>
|
||
<div class="tag">Набор открыт</div>
|
||
<h1>Запись на 2026-2027<br>учебный год</h1>
|
||
<br>
|
||
<p>Заполните форму — заявка поступит напрямую в школу.</p>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="form-inner">
|
||
|
||
<?php if ($flashSuccess !== ''): ?>
|
||
<div class="notice notice-success"><?php echo h($flashSuccess); ?></div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (! empty($flashErrors)): ?>
|
||
<div class="notice notice-error">
|
||
<strong>Пожалуйста, проверьте форму:</strong>
|
||
<ul>
|
||
<?php foreach ($flashErrors as $error): ?>
|
||
<li><?php echo h((string) $error); ?></li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<form action="/aprelik_submit.php" method="post" accept-charset="UTF-8" novalidate>
|
||
<div class="hidden-field" aria-hidden="true">
|
||
<label for="website">Website</label>
|
||
<input type="text" name="website" id="website" value="">
|
||
</div>
|
||
|
||
<!-- Блок 1 — Ребёнок -->
|
||
<div class="form-block">
|
||
<div class="form-block-title">Данные ребёнка</div>
|
||
|
||
<div class="form-row-2">
|
||
<div class="form-row">
|
||
<label for="child_last_name">Фамилия ребёнка <span class="req">*</span></label>
|
||
<input type="text" id="child_last_name" name="child_last_name" placeholder="Иванов" value="<?php echo h($old['child_last_name'] ?? ''); ?>">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="child_first_name">Имя ребёнка <span class="req">*</span></label>
|
||
<input type="text" id="child_first_name" name="child_first_name" placeholder="Иван" value="<?php echo h($old['child_first_name'] ?? ''); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label for="child_birthdate">Дата рождения <span class="req">*</span></label>
|
||
<input type="date" id="child_birthdate" name="child_birthdate" value="<?php echo h($old['child_birthdate'] ?? ''); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок 2 — Родители -->
|
||
<div class="form-block">
|
||
<div class="form-block-title">Данные родителей</div>
|
||
|
||
<div class="form-row-2">
|
||
<div class="form-row">
|
||
<label for="parent1_last_name">Фамилия родителя 1 <span class="req">*</span></label>
|
||
<input type="text" id="parent1_last_name" name="parent1_last_name" placeholder="Иванова" value="<?php echo h($old['parent1_last_name'] ?? ''); ?>">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="parent1_first_name">Имя родителя 1 <span class="req">*</span></label>
|
||
<input type="text" id="parent1_first_name" name="parent1_first_name" placeholder="Мария" value="<?php echo h($old['parent1_first_name'] ?? ''); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label for="parent1_language">Родной язык родителя 1 <span class="req">*</span></label>
|
||
<input type="text" id="parent1_language" name="parent1_language" placeholder="Русский" value="<?php echo h($old['parent1_language'] ?? ''); ?>">
|
||
</div>
|
||
|
||
<div class="form-row-2">
|
||
<div class="form-row">
|
||
<label for="parent2_last_name">Фамилия родителя 2</label>
|
||
<input type="text" id="parent2_last_name" name="parent2_last_name" placeholder="Иванов" value="<?php echo h($old['parent2_last_name'] ?? ''); ?>">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="parent2_first_name">Имя родителя 2</label>
|
||
<input type="text" id="parent2_first_name" name="parent2_first_name" placeholder="Пётр" value="<?php echo h($old['parent2_first_name'] ?? ''); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label for="parent2_language">Родной язык родителя 2</label>
|
||
<input type="text" id="parent2_language" name="parent2_language" placeholder="Французский" value="<?php echo h($old['parent2_language'] ?? ''); ?>">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label for="street_address">Адрес <span class="req">*</span></label>
|
||
<input type="text" id="street_address" name="street_address" placeholder="10 rue de la Paix" value="<?php echo h($old['street_address'] ?? ''); ?>">
|
||
</div>
|
||
|
||
<div class="form-row-2">
|
||
<div class="form-row">
|
||
<label for="postal_code">Индекс <span class="req">*</span></label>
|
||
<input type="text" id="postal_code" name="postal_code" placeholder="75001" value="<?php echo h($old['postal_code'] ?? ''); ?>">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="city">Город <span class="req">*</span></label>
|
||
<input type="text" id="city" name="city" placeholder="Paris" value="<?php echo h($old['city'] ?? ''); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row-2">
|
||
<div class="form-row">
|
||
<label for="parent1_phone">Телефон родителя 1 <span class="req">*</span></label>
|
||
<input type="tel" id="parent1_phone" name="parent1_phone" placeholder="+33 6 00 00 00 00" value="<?php echo h($old['parent1_phone'] ?? ''); ?>">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="parent2_phone">Телефон родителя 2</label>
|
||
<input type="tel" id="parent2_phone" name="parent2_phone" placeholder="+33 6 00 00 00 00" value="<?php echo h($old['parent2_phone'] ?? ''); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-row">
|
||
<label for="email">Email <span class="req">*</span></label>
|
||
<input type="email" id="email" name="email" placeholder="votre@email.com" value="<?php echo h($old['email'] ?? ''); ?>">
|
||
</div>
|
||
|
||
<div class="form-block">
|
||
<div class="form-block-title">Выбор расписания</div>
|
||
|
||
<div class="form-row">
|
||
<label for="school_day_address">Адрес занятий <span class="req">*</span></label>
|
||
<select id="school_day_address" name="school_day_address">
|
||
<option value="">Выберите адрес</option>
|
||
<?php
|
||
$addressOptions = [
|
||
'Среда — 121 Av. Achille Peretti, 92200 Neuilly-sur-Seine',
|
||
'Суббота — 10, rue du Cygne, Paris 75001',
|
||
'Суббота — 60, rue de Greneta, Paris 75002',
|
||
'Суббота — 2, avenue Rapp, Paris 75007',
|
||
'Воскресенье — 2, avenue Rapp, Paris 75007',
|
||
];
|
||
$selectedAddress = (string) ($old['school_day_address'] ?? '');
|
||
foreach ($addressOptions as $option):
|
||
?>
|
||
<option value="<?php echo h($option); ?>" <?php echo $selectedAddress === $option ? 'selected' : ''; ?>>
|
||
<?php echo h($option); ?>
|
||
</option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label for="age_group">Возрастная группа <span class="req">*</span></label>
|
||
<select id="age_group" name="age_group">
|
||
<option value="">Выберите группу</option>
|
||
<?php
|
||
$ageOptions = [
|
||
'3–4 года',
|
||
'3-7 лет',
|
||
'5-7 лет',
|
||
'4-6 лет',
|
||
'7-12 лет',
|
||
'8-13 лет',
|
||
'11-13 лет',
|
||
'13-14 лет',
|
||
];
|
||
$selectedAge = (string) ($old['age_group'] ?? '');
|
||
foreach ($ageOptions as $option):
|
||
?>
|
||
<option value="<?php echo h($option); ?>" <?php echo $selectedAge === $option ? 'selected' : ''; ?>>
|
||
<?php echo h($option); ?>
|
||
</option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label for="notes">Комментарий</label>
|
||
<textarea id="notes" name="notes" placeholder="Если хотите, можете уточнить удобное время, возраст ребёнка или другие детали."><?php echo h($old['notes'] ?? ''); ?></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="cb-diffusion" name="consent_email_diffusion" value="1" <?php echo ! empty($old['consent_email_diffusion']) ? 'checked' : ''; ?>>
|
||
<label for="cb-diffusion">Согласен(а) на сохранение email и его использование для последующей информационной рассылки школы и платформы uslugi.fr <span class="req">*</span></label>
|
||
</div>
|
||
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="cb-rgpd" name="consent_rgpd" value="1" <?php echo ! empty($old['consent_rgpd']) ? 'checked' : ''; ?>>
|
||
<label for="cb-rgpd">Согласен(а) на обработку персональных данных в соответствии с законодательством Франции (RGPD) <span class="req">*</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="submit-section">
|
||
<button class="btn" type="submit">Отправить заявку</button>
|
||
<p class="submit-note">Форма используется для сохранения ваших контактных данных и последующей информационной рассылки с платформы uslugi.fr</p>
|
||
|
||
<div style="margin-top: 24px;">
|
||
<a href="https://uslugi.fr" target="_blank" rel="noopener noreferrer">
|
||
<img src="/public/uploads/img/logo.png" alt="USLUGI.FR" style="height: 42px; width: auto;">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|