diff --git a/public/img/a1.webp b/public/img/a1.webp new file mode 100644 index 0000000..c891b9e Binary files /dev/null and b/public/img/a1.webp differ diff --git a/public/img/a2.webp b/public/img/a2.webp new file mode 100644 index 0000000..d5e7f57 Binary files /dev/null and b/public/img/a2.webp differ diff --git a/public/img/a3.webp b/public/img/a3.webp new file mode 100644 index 0000000..2f5b90a Binary files /dev/null and b/public/img/a3.webp differ diff --git a/public/img/a4.webp b/public/img/a4.webp new file mode 100644 index 0000000..2797862 Binary files /dev/null and b/public/img/a4.webp differ diff --git a/public/img/a5.webp b/public/img/a5.webp new file mode 100644 index 0000000..9e3c5e1 Binary files /dev/null and b/public/img/a5.webp differ diff --git a/public/img/summer-cafe.png b/public/img/summer-cafe.png deleted file mode 100644 index beee43d..0000000 Binary files a/public/img/summer-cafe.png and /dev/null differ diff --git a/public/index.html b/public/index.html index 53bb1e3..e40d2cb 100644 --- a/public/index.html +++ b/public/index.html @@ -1,109 +1,175 @@ - - - - - - - - Hotel 777 | Отдых в Абхазии - - - - - - - -
- - + + + + + + + + Hotel 777 - Уютный отдых в Абхазии | Мгудзырхуа + + + + + + + + + + + + + + + + + + + + + + +
+ + -
- - -
-

Добро пожаловать

-

Ваш идеальный отдых на берегу Черного моря

- Забронировать номер -
- - -
- +
+ + +
+

Добро пожаловать

+

Ваш идеальный отдых на берегу Черного моря

+ Забронировать номер +
+ + +
+
- - -
- - -
-

Забронировать отдых

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
-
- - - - - - - - + + +
+ + + + + +
+

Забронировать отдых

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/public/scripts.js b/public/scripts.js index 38e3b9f..3ef08d8 100644 --- a/public/scripts.js +++ b/public/scripts.js @@ -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'; diff --git a/public/style.css b/public/style.css index 407ad7b..27ec9cd 100644 --- a/public/style.css +++ b/public/style.css @@ -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; + } +}