style: add some style 5 (modal form)
This commit is contained in:
183
index.html
183
index.html
@@ -664,6 +664,189 @@
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</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>
|
<script src="./assets/js/main.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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