From d3a6cf9540d650059f47fdb96aaf1b4e38bce090 Mon Sep 17 00:00:00 2001
From: Artem <rid89@mail.ru>
Date: Fri, 5 Jun 2026 11:55:17 +0300
Subject: [PATCH] style: add some style 5 (modal form)

---
 index.html    | 183 ++++++++++++++++++++++++++++++++++++++++++++++++++
 send-form.php |  32 +++++++++
 2 files changed, 215 insertions(+)
 create mode 100644 send-form.php

diff --git a/index.html b/index.html
index ea8b11a..9427e49 100644
--- a/index.html
+++ b/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>
diff --git a/send-form.php b/send-form.php
new file mode 100644
index 0000000..0029ac4
--- /dev/null
+++ b/send-form.php
@@ -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 "Доступ запрещён";
+}
+?>
\ No newline at end of file