Merge pull request 'style: add some style 5 (modal form)' (#23) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Reviewed-on: #23
This commit was merged in pull request #23.
This commit is contained in:
183
index.html
183
index.html
@@ -664,6 +664,189 @@
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Всплывающее окно бронирования -->
|
||||
<div class="modal" id="booking-popup" aria-hidden="true" role="dialog" aria-modal="true">
|
||||
<div class="modal__overlay" data-modal-close></div>
|
||||
<div class="modal__content modal__content--white">
|
||||
<button class="modal__close" data-modal-close aria-label="Закрыть">×</button>
|
||||
|
||||
<h2 class="modal__title">Забронировать время</h2>
|
||||
<p class="modal__subtitle">Оставьте заявку — перезвоним в течение 15 минут</p>
|
||||
|
||||
<form id="popup-booking-form" action="send-form.php" method="POST" class="modal__form">
|
||||
<div class="modal__field">
|
||||
<label>Имя <span class="required">*</span></label>
|
||||
<input type="text" name="name" required placeholder="Введите ваше имя">
|
||||
</div>
|
||||
|
||||
<div class="modal__field">
|
||||
<label>Телефон <span class="required">*</span></label>
|
||||
<input type="tel" name="phone" required placeholder="Ваш телефон">
|
||||
</div>
|
||||
|
||||
<div class="modal__field">
|
||||
<label>Email</label>
|
||||
<input type="email" name="email" placeholder="Ваша почта">
|
||||
</div>
|
||||
|
||||
<div class="modal__consents">
|
||||
<label class="consent-label">
|
||||
<input type="checkbox" name="consent_policy" required>
|
||||
<span>Согласен с <a href="#" target="_blank">политикой обработки персональных данных</a></span>
|
||||
</label>
|
||||
<label class="consent-label">
|
||||
<input type="checkbox" name="consent" required>
|
||||
<span>Даю согласие на обработку моих данных</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn--full">Отправить заявку</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Модальное окно */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.modal--active { display: flex; }
|
||||
|
||||
.modal__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 40px 30px;
|
||||
border-radius: 12px;
|
||||
max-width: 420px;
|
||||
width: 90%;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.modal__content--white {
|
||||
background: #ffffff;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
font-size: 28px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.modal__title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal__subtitle {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.modal__field {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.modal__field label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal__field input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal__consents {
|
||||
margin: 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.consent-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.consent-label input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.btn--full {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: #e30613; /* красный акцент арены */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Открытие модального окна
|
||||
document.querySelectorAll('[href="#booking"], .btn[href="#booking"]').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
document.getElementById('booking-popup').classList.add('modal--active');
|
||||
});
|
||||
});
|
||||
|
||||
// Закрытие
|
||||
document.querySelectorAll('[data-modal-close]').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
document.getElementById('booking-popup').classList.remove('modal--active');
|
||||
});
|
||||
});
|
||||
|
||||
// Закрытие по Esc
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === "Escape") {
|
||||
document.getElementById('booking-popup').classList.remove('modal--active');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="./assets/js/main.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
32
send-form.php
Normal file
32
send-form.php
Normal file
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||
$name = strip_tags(trim($_POST["name"]));
|
||||
$phone = strip_tags(trim($_POST["phone"]));
|
||||
$email = strip_tags(trim($_POST["email"]));
|
||||
|
||||
//$to = "receptionadmin@o-arena.ru"; // поменяй на свой реальный email
|
||||
$to = "rid89@mail.ru"; // поменяй на свой реальный email
|
||||
$subject = "Новая заявка с сайта OlimpArena";
|
||||
|
||||
$message = "Имя: $name\n";
|
||||
$message .= "Телефон: $phone\n";
|
||||
$message .= "Email: $email\n";
|
||||
$message .= "Дата отправки: " . date('d.m.Y H:i') . "\n";
|
||||
|
||||
$headers = "From: no-reply@o-arena.ru\r\n";
|
||||
$headers .= "Reply-To: $email\r\n";
|
||||
$headers .= "Content-Type: text/plain; charset=utf-8\r\n";
|
||||
|
||||
if (mail($to, $subject, $message, $headers)) {
|
||||
// Можно перенаправить на успех
|
||||
header("Location: index.html#booking-success-modal");
|
||||
// или показать JSON для JS
|
||||
echo json_encode(["status" => "success"]);
|
||||
} else {
|
||||
echo json_encode(["status" => "error"]);
|
||||
}
|
||||
} else {
|
||||
http_response_code(403);
|
||||
echo "Доступ запрещён";
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user