142 lines
7.9 KiB
HTML
142 lines
7.9 KiB
HTML
<!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="Hotel 777 — отдых в Абхазии, Мгудзырхуа. Комфортные номера, пляж, домашняя кухня.">
|
||
<title>Hotel 777 | Отдых в Абхазии</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||
<!-- Яндекс.Карты временно отключены (закомментированы)
|
||
<script src="https://api-maps.yandex.ru/2.1/?apikey=YOUR_YANDEX_MAP_API_KEY&lang=ru_RU"></script>
|
||
-->
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Шапка сайта -->
|
||
<header>
|
||
<div class="logo">HOTEL 777</div>
|
||
<nav>
|
||
<a href="#about" data-i18n="nav_about">О нас</a>
|
||
<a href="#food" data-i18n="nav_food">Кухня</a>
|
||
<a href="#location" data-i18n="nav_location">Где мы</a>
|
||
<a href="#booking" data-i18n="nav_booking">Бронь</a>
|
||
</nav>
|
||
<select id="langSwitch" class="lang-switch" aria-label="Выбор языка">
|
||
<option value="ru">Русский</option>
|
||
<option value="ab">Аҧсуа</option>
|
||
<option value="en">English</option>
|
||
</select>
|
||
</header>
|
||
|
||
<!-- Hero секция -->
|
||
<section class="hero">
|
||
<h1 class="animate" data-i18n="hero_title">Добро пожаловать</h1>
|
||
<p class="animate delay-1" data-i18n="hero_subtitle">Ваш идеальный отдых на берегу Черного моря</p>
|
||
<a href="#booking" class="btn animate delay-2" data-i18n="hero_btn">Забронировать номер</a>
|
||
</section>
|
||
|
||
<!-- Секция "О нас" (динамически через about.js) -->
|
||
<section id="about" class="white-bg"></section>
|
||
|
||
<!-- Секция "Кухня" (с карточками питания) -->
|
||
<section id="food">
|
||
<h2 class="section-title animate" data-i18n="food_title">Вкус Абхазии</h2>
|
||
<div class="about-grid">
|
||
<div class="about-image-wrapper animate delay-1">
|
||
<img src="img/food.webp" alt="Абхазская кухня" class="about-img" loading="lazy">
|
||
</div>
|
||
<div class="about-text animate delay-2">
|
||
<h3 data-i18n="food_subtitle">Домашняя кухня из местных продуктов</h3>
|
||
<p data-i18n="food_text">Почувствуйте настоящее гостеприимство! Мы готовим из того, что выросло прямо здесь: свежайший сыр сулугуни, ароматная абыста, сочные овощи с грядки и домашнее вино.</p>
|
||
|
||
<div class="facts-grid food-features">
|
||
<div class="fact-card">
|
||
<div class="fact-icon">🍽️</div>
|
||
<div class="fact-text" data-i18n="food_request">Учитываем пожелания по питанию</div>
|
||
</div>
|
||
<div class="fact-card">
|
||
<div class="fact-icon">👨🍳</div>
|
||
<div class="fact-text" data-i18n="food_chef">Приготовим блюдо для Вас – спросите у шефа</div>
|
||
</div>
|
||
<div class="fact-card">
|
||
<div class="fact-icon">🕒</div>
|
||
<div class="fact-text" data-i18n="food_breakfast">Завтрак: с 8:30 до 10:00</div>
|
||
</div>
|
||
<div class="fact-card">
|
||
<div class="fact-icon">🕒</div>
|
||
<div class="fact-text" data-i18n="food_lunch">Обед: с 12:00 до 14:00</div>
|
||
</div>
|
||
<div class="fact-card">
|
||
<div class="fact-icon">🕒</div>
|
||
<div class="fact-text" data-i18n="food_dinner">Ужин: с 19:00 до 21:00</div>
|
||
</div>
|
||
</div>
|
||
<p class="food-note" data-i18n="food_note">📢 <em>Сообщите администратору о любых предпочтениях при заселении – мы всё организуем!</em></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция "Где мы" (без карты, только указатель и города) -->
|
||
<section id="location" class="white-bg"></section>
|
||
|
||
<!-- Секция "Бронирование" -->
|
||
<section id="booking">
|
||
<h2 class="section-title animate" data-i18n="book_title">Забронировать отдых</h2>
|
||
<form id="bookingForm" class="booking-form animate">
|
||
<div class="form-group">
|
||
<label for="name" data-i18n="label_name">Ваше имя</label>
|
||
<input type="text" id="name" name="name" required data-i18n-ph="ph_name" placeholder="Иван Иванов">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone" data-i18n="label_phone">Номер телефона</label>
|
||
<input type="tel" id="phone" name="phone" required placeholder="+ ___ (___) ___-__-__">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="adults" data-i18n="book_adults">Количество взрослых</label>
|
||
<input type="number" id="adults" name="adults" min="1" value="1" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="children" data-i18n="book_children">Количество детей (до 12 лет)</label>
|
||
<input type="number" id="children" name="children" min="0" value="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkin" data-i18n="book_checkin">Дата заезда</label>
|
||
<input type="date" id="checkin" name="checkin" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkout" data-i18n="book_checkout">Дата выезда</label>
|
||
<input type="date" id="checkout" name="checkout" required>
|
||
</div>
|
||
<div style="margin:1.5rem 0; font-size:0.9rem; color:#666;">
|
||
<input type="checkbox" id="consent" required style="margin-right:8px;">
|
||
<label for="consent" data-i18n="fz152" style="display:inline; font-weight:400;">Согласие на обработку данных (152-ФЗ)</label>
|
||
</div>
|
||
<button type="submit" class="btn full-width" data-i18n="book_btn">Отправить заявку</button>
|
||
<div id="bookingMessage" style="margin-top:1rem; text-align:center;"></div>
|
||
</form>
|
||
</section>
|
||
|
||
<footer>
|
||
<p data-i18n="footer_text">© 2026 Hotel 777. Абхазия, Мгудзырхуа.</p>
|
||
</footer>
|
||
|
||
<div id="cookieBanner" class="cookie-banner">
|
||
<p data-i18n="cookie_text">Мы используем файлы cookie для улучшения работы сайта.</p>
|
||
<button class="cookie-btn" onclick="acceptCookies()" data-i18n="cookie_btn">Согласен</button>
|
||
</div>
|
||
|
||
<!-- Модальное окно для фактов о городах -->
|
||
<div id="cityModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="modal-close">×</span>
|
||
<h3 id="modalCityTitle"></h3>
|
||
<div id="modalFactsList" class="modal-facts"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="scripts.js"></script>
|
||
<script src="about.js"></script>
|
||
<script src="location.js"></script>
|
||
</body>
|
||
</html> |