oc
This commit is contained in:
BIN
public/img/a1.webp
Normal file
BIN
public/img/a1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
public/img/a2.webp
Normal file
BIN
public/img/a2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
BIN
public/img/a3.webp
Normal file
BIN
public/img/a3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
public/img/a4.webp
Normal file
BIN
public/img/a4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
public/img/a5.webp
Normal file
BIN
public/img/a5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 904 KiB |
@@ -1,109 +1,175 @@
|
||||
<!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 — отдых в Абхазии, Мгудзырхуа. Отель у моря, пляж, домашняя кухня, летнее кафе, Gudauta и Золотой берег.">
|
||||
<meta name="keywords" content="отдых в абхазии, отель, гудаута, золотой берег, абхазия отдых, пляж, кухня абхазская, жилье абхазия, Gudauta, Abkhazia, 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>
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Основные SEO теги -->
|
||||
<title>Hotel 777 - Уютный отдых в Абхазии | Мгудзырхуа</title>
|
||||
<meta name="description" content="Hotel 777 в селе Мгудзырхуа, Абхазия. Уютные номера, вкусная кухня, близость к морю и горам. Забронируйте отдых прямо сейчас!">
|
||||
<meta name="keywords" content="отель абхазия, гостиница мгудзырхуа, отдых в абхазии, бронирование отеля, hotel 777">
|
||||
|
||||
<!-- Open Graph для соцсетей -->
|
||||
<meta property="og:title" content="Hotel 777 - Уютный отдых в Абхазии">
|
||||
<meta property="og:description" content="Комфортабельные номера, домашняя кухня и живописные виды. Ждем вас в гости!">
|
||||
<meta property="og:image" content="/img/h777.webp">
|
||||
<meta property="og:url" content="https://hotel777.abh">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<!-- Стили AOS (Animate On Scroll) -->
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
|
||||
<!-- Стили Swiper (Галерея) -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
</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" selected>Русский</option>
|
||||
<option value="en">English</option>
|
||||
<option value="ab">Аҧсуа</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>
|
||||
|
||||
</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>
|
||||
|
||||
<!-- Кухня будет загружаться отдельным скриптом food.js -->
|
||||
<section id="food"></section>
|
||||
|
||||
<!-- Летнее кафе будет добавлено в будущем (фото можно вставить позже) -->
|
||||
<section id="summer-cafe" class="white-bg"></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>
|
||||
|
||||
|
||||
<!-- Секция "Где мы" (без карты, только указатель и города) -->
|
||||
<section id="location" class="white-bg"></section>
|
||||
|
||||
<!-- Секция Галереи -->
|
||||
<section id="gallery" class="gallery-section white-bg">
|
||||
<div class="container">
|
||||
<h2 class="section-title" data-aos="fade-up" data-i18n="gallery_title">Фотогалерея</h2>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper mySwiper" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Слайды с абхазской природой -->
|
||||
<div class="swiper-slide"><img src="img/a1.webp" alt="Природа Абхазии 1" loading="lazy"></div>
|
||||
<div class="swiper-slide"><img src="img/a2.webp" alt="Природа Абхазии 2" loading="lazy"></div>
|
||||
<div class="swiper-slide"><img src="img/a3.webp" alt="Природа Абхазии 3" loading="lazy"></div>
|
||||
<div class="swiper-slide"><img src="img/a4.webp" alt="Природа Абхазии 4" loading="lazy"></div>
|
||||
<div class="swiper-slide"><img src="img/a5.webp" alt="Природа Абхазии 5" loading="lazy"></div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Schema.org разметка -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Hotel",
|
||||
"name": "Hotel 777",
|
||||
"image": [
|
||||
"https://hotel777.abh/img/h777.webp"
|
||||
],
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "с. Мгудзырхуа",
|
||||
"addressLocality": "Гудаутский район",
|
||||
"addressCountry": "Абхазия"
|
||||
},
|
||||
"telephone": "+7940XXXXXXX",
|
||||
"priceRange": "$",
|
||||
"starRating": {
|
||||
"@type": "Rating",
|
||||
"ratingValue": "3"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Скрипт AOS -->
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
|
||||
<!-- Скрипт Swiper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<script src="scripts.js"></script>
|
||||
<script src="about.js"></script>
|
||||
<script src="location.js"></script>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// Глобальные переводы (расширены для location, about, booking, food)
|
||||
window.translations = {
|
||||
ru: {
|
||||
gallery_title: "Фотогалерея",
|
||||
nav_about: "О нас",
|
||||
nav_food: "Кухня",
|
||||
nav_location: "Где мы",
|
||||
@@ -97,6 +98,7 @@ window.translations = {
|
||||
summer_alt: "Летнее кафе у моря"
|
||||
},
|
||||
en: {
|
||||
gallery_title: "Photo Gallery",
|
||||
nav_about: "About Us",
|
||||
nav_food: "Cuisine",
|
||||
nav_location: "Where We Are",
|
||||
@@ -193,6 +195,7 @@ window.translations = {
|
||||
summer_alt: "Summer Café by the Sea"
|
||||
},
|
||||
ab: {
|
||||
gallery_title: "Афотоқәа ргалерея",
|
||||
nav_about: "Ҳара ҳхәыҷра",
|
||||
nav_food: "Аџьа",
|
||||
nav_location: "Ҳара иҟоу",
|
||||
@@ -304,6 +307,39 @@ window.acceptCookies = function() {
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Инициализация AOS (Анимации при скролле)
|
||||
if (typeof AOS !== 'undefined') {
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
}
|
||||
|
||||
// Инициализация Swiper (Галерея)
|
||||
if (typeof Swiper !== 'undefined') {
|
||||
new Swiper('.mySwiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
320: { slidesPerView: 1, spaceBetween: 10 },
|
||||
768: { slidesPerView: 2, spaceBetween: 20 },
|
||||
1024: { slidesPerView: 3, spaceBetween: 30 }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Установка статичного фона для hero (первое изображение) ---
|
||||
const hero = document.querySelector('.hero');
|
||||
const firstImage = 'img/h777.webp';
|
||||
|
||||
@@ -559,3 +559,37 @@ footer {
|
||||
0% { transform: scale(0); opacity: 1; }
|
||||
100% { transform: scale(4); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Стили для галереи Swiper */
|
||||
.gallery-section {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
color: var(--white);
|
||||
text-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.swiper {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user