diff --git a/public/about.js b/public/about.js new file mode 100644 index 0000000..2455fba --- /dev/null +++ b/public/about.js @@ -0,0 +1,104 @@ +// Данные для фактов (ключи переводов) +const factsData = [ + { icon: "🏖️", key: "fact1" }, + { icon: "🌊", key: "fact2" }, + { icon: "☀️", key: "fact3" }, + { icon: "🍷", key: "fact4" } +]; + +// Генерация HTML для about +function generateAboutHTML(lang) { + const title = window.translations[lang].about_title; + const subtitle = window.translations[lang].about_subtitle; + const mainText = window.translations[lang].about_text; + const extraText = window.translations[lang].about_extra || ""; + + // Генерируем карточки фактов на основе переводов + const factsHTML = factsData.map(fact => ` +
+
${fact.icon}
+
${window.translations[lang][fact.key]}
+
+ `).join(''); + + return ` +

${title}

+
+
+

${subtitle}

+

${mainText}

+
+

${extraText}

+
+
+ ${factsHTML} +
+
+
+ Пляж в Мгудзырхуа +
+
+ `; +} + +// Рендер секции about +function renderAbout(lang) { + const aboutSection = document.getElementById('about'); + if (!aboutSection) return; + + aboutSection.innerHTML = generateAboutHTML(lang); + + // Повторно запускаем анимации для новых .animate + document.querySelectorAll('.animate').forEach(el => { + if (el.style.animationPlayState !== 'running') { + el.style.animationPlayState = 'paused'; + const obs = new IntersectionObserver(entries => { + entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; }); + }); + obs.observe(el); + } + }); +} + +// Обновление текстов без перерисовки (если нужно) +function updateAboutTexts(lang) { + const aboutSection = document.getElementById('about'); + if (!aboutSection || !aboutSection.innerHTML.trim()) return; + + const title = aboutSection.querySelector('.section-title'); + if (title) title.innerHTML = window.translations[lang].about_title; + + const subtitle = aboutSection.querySelector('.about-text h3'); + if (subtitle) subtitle.innerHTML = window.translations[lang].about_subtitle; + + const mainDesc = aboutSection.querySelector('.main-description'); + if (mainDesc) mainDesc.innerHTML = window.translations[lang].about_text; + + const extraDesc = aboutSection.querySelector('.extra-description p'); + if (extraDesc && window.translations[lang].about_extra) extraDesc.innerHTML = window.translations[lang].about_extra; + + const factCards = aboutSection.querySelectorAll('.fact-card'); + factCards.forEach((card, idx) => { + if (factsData[idx]) { + const textDiv = card.querySelector('.fact-text'); + if (textDiv) textDiv.innerHTML = window.translations[lang][factsData[idx].key]; + } + }); +} + +// Функция для вызова из scripts.js при смене языка +function updateAboutLanguage(lang) { + if (document.getElementById('about').innerHTML.trim() !== '') { + updateAboutTexts(lang); + } else { + renderAbout(lang); + } +} + +window.updateAboutLanguage = updateAboutLanguage; + +// Инициализация +document.addEventListener("DOMContentLoaded", () => { + const currentLang = localStorage.getItem('siteLang') || 'ru'; + renderAbout(currentLang); +}); \ No newline at end of file diff --git a/public/index.html b/public/index.html index 58434f6..fc88a1c 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,8 @@ Hotel 777 | Отдых в Абхазии + + @@ -26,26 +28,15 @@ - +

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

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

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

Море в шаговой доступности

-
-
-

Бескрайние пляжи Гудауты

-

Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.

-
-
- Пляж в Мгудзырхуа -
-
-
+ +
@@ -54,90 +45,26 @@
Абхазская кухня
-
-

Домашняя кухня из местных продуктов

-

Почувствуйте настоящее гостеприимство! Мы готовим из того, что выросло прямо здесь: свежайший сыр сулугуни, ароматная абыста, сочные овощи с грядки и домашнее вино.

- - -
-

✨ Для наших гостей:

-
    -
  • 🍽️ Учитываем пожелания по питанию
    • -
  • 👨‍🍳 Приготовим блюдо для Вас – спросите у шефа
    • -
  • 🕒 Завтрак: с 8:30 до 10:00
    • -
  • 🕒 Обед: с 12:00 до 14:00
    • -
  • 🕒 Ужин: с 19:00 до 21:00
    • -
-

📢 Сообщите администратору о любых предпочтениях при заселении – мы всё организуем!

-
-
+
+

Домашняя кухня из местных продуктов

+

Почувствуйте настоящее гостеприимство! Мы готовим из того, что выросло прямо здесь: свежайший сыр сулугуни, ароматная абыста, сочные овощи с грядки и домашнее вино.

+
+

✨ Для наших гостей:

+
    +
  • 🍽️ Учитываем пожелания по питанию
    • +
  • 👨‍🍳 Приготовим блюдо для Вас – спросите у шефа
    • +
  • 🕒 Завтрак: с 8:30 до 10:00
    • +
  • 🕒 Обед: с 12:00 до 14:00
    • +
  • 🕒 Ужин: с 19:00 до 21:00
    • +
+

📢 Сообщите администратору о любых предпочтениях при заселении – мы всё организуем!

+
+
- -
-

Удобное расположение

- -
-
-

- Наш Адрес: -

-
- Набережная улица, 1, село Мгудзырхуа, Гудаутский район, Абхазия -
-
- Координаты: 43.139637, 40.527054 -
-
-
-
-
🚗
-
Сухум
-
51 км
-
-
-
🚗
-
Очамчыра
-
105 км
-
-
-
🚗
-
Ткуарчал
-
165 км
-
-
-
🚗
-
Гал
-
145 км
-
-
-
🚗
-
Новый Афон
-
25 км
-
-
-
🚗
-
Приморск
-
20 км
-
-
-
🚗
-
🚗 Гудаута
-
10 км
-
-
-
-
- - -
- Указатель Hotel 777 -
-
- - -
+ +
@@ -145,8 +72,7 @@
- +
@@ -160,18 +86,17 @@
- - - + + \ No newline at end of file diff --git a/public/location.js b/public/location.js new file mode 100644 index 0000000..75a5003 --- /dev/null +++ b/public/location.js @@ -0,0 +1,236 @@ +// Координаты отеля +const HOTEL_COORDS = [43.139637, 40.527054]; +const HOTEL_ADDRESS = "Набережная улица, 1, село Мгудзырхуа, Гудаутский район, Абхазия"; + +// Данные городов с расстояниями (км) и ключами для перевода +const citiesData = [ + { key: "sukhum", distance: 51 }, + { key: "ochamchyra", distance: 105 }, + { key: "tkvarcheli", distance: 165 }, + { key: "gal", distance: 145 }, + { key: "new_athos", distance: 25 }, + { key: "primorsk", distance: 20 }, + { key: "gudauta", distance: 10 } +]; + +// Цвета для карточек городов (циклически) +const cityColors = [ + "#FFB3BA", "#C5E99B", "#B5E3FF", "#FFD6A5", "#D4A5FF", "#A5FFD6", "#FFA5D6" +]; + +let map = null; +let placemark = null; +let mapVisible = false; +let currentLang = localStorage.getItem('siteLang') || 'ru'; + +// Функция получения перевода названия города +function getCityTranslation(cityKey, lang) { + const transMap = { + sukhum: window.translations[lang].loc_city_sukhum, + ochamchyra: window.translations[lang].loc_city_ochamchyra, + tkvarcheli: window.translations[lang].loc_city_tkvarcheli, + gal: window.translations[lang].loc_city_gal, + new_athos: window.translations[lang].loc_city_new_athos, + primorsk: window.translations[lang].loc_city_primorsk, + gudauta: window.translations[lang].loc_city_gudauta + }; + return transMap[cityKey] || cityKey; +} + +// Генерация HTML для секции location (карта под картинкой, кнопка между координатами и городами) +function generateLocationHTML(lang) { + const addressLabel = window.translations[lang].loc_address_label; + const coordsLabel = window.translations[lang].loc_coords_label; + const kmLabel = window.translations[lang].loc_km; + const showMapBtnText = window.translations[lang].loc_show_map || "Показать карту"; + + // Создаём разноцветные карточки городов + const cardsHTML = citiesData.map((city, idx) => ` +
+
🚗
+
${getCityTranslation(city.key, lang)}
+
${city.distance} ${kmLabel}
+
+ `).join(''); + + return ` +

${window.translations[lang].loc_title}

+
+ +
+

${addressLabel}

+
+ ${HOTEL_ADDRESS} +
+
+ ${coordsLabel} ${HOTEL_COORDS[0]}, ${HOTEL_COORDS[1]} +
+ + +
+ ${cardsHTML} +
+
+ + +
+ Указатель Hotel 777 + +
+
+ `; +} + +// Инициализация карты (вызывается только при первом нажатии кнопки) +function initMapOnce() { + if (!window.ymaps) { + console.warn("Яндекс.Карты не загружены"); + return; + } + const mapContainer = document.getElementById('yandexMap'); + if (!mapContainer) return; + + if (!map) { + window.ymaps.ready(() => { + map = new window.ymaps.Map('yandexMap', { + center: HOTEL_COORDS, + zoom: 14, + controls: ['zoomControl', 'fullscreenControl'] + }); + placemark = new window.ymaps.Placemark(HOTEL_COORDS, { + hintContent: HOTEL_ADDRESS, + balloonContent: HOTEL_ADDRESS + }, { + preset: 'islands#redDotIcon' + }); + map.geoObjects.add(placemark); + }); + } +} + +// Показать карту (по кнопке) +function showMap() { + const mapContainer = document.getElementById('yandexMap'); + if (!mapContainer) return; + + if (!map) { + initMapOnce(); + // Небольшая задержка, чтобы карта успела создаться, затем показываем контейнер + setTimeout(() => { + mapContainer.style.display = 'block'; + if (map) { + window.ymaps.ready(() => { + map.container.fitToViewport(); + }); + } + }, 300); + } else { + mapContainer.style.display = 'block'; + window.ymaps.ready(() => { + map.container.fitToViewport(); + }); + } + mapVisible = true; +} + +// Обновление текстов (без пересоздания карты) +function updateLocationTexts(lang) { + const locationSection = document.getElementById('location'); + if (!locationSection) return; + + const title = locationSection.querySelector('.section-title'); + if (title && window.translations[lang].loc_title) { + title.innerHTML = window.translations[lang].loc_title; + } + + const aboutText = locationSection.querySelector('.about-text'); + if (aboutText) { + const addressLabelStrong = aboutText.querySelector('p strong'); + if (addressLabelStrong) addressLabelStrong.textContent = window.translations[lang].loc_address_label; + + const coordsSpan = aboutText.querySelector('div:last-of-type span strong'); + if (coordsSpan) coordsSpan.textContent = window.translations[lang].loc_coords_label; + + // Обновляем текст кнопки + const showBtn = aboutText.querySelector('#showMapBtn'); + if (showBtn && window.translations[lang].loc_show_map) { + showBtn.textContent = window.translations[lang].loc_show_map; + } + + // Обновляем карточки городов + const cards = aboutText.querySelectorAll('.location-card'); + cards.forEach((card, idx) => { + if (citiesData[idx]) { + const titleDiv = card.querySelector('.location-title'); + if (titleDiv) titleDiv.textContent = getCityTranslation(citiesData[idx].key, lang); + const distSpan = card.querySelector('.location-distance'); + if (distSpan) distSpan.textContent = `${citiesData[idx].distance} ${window.translations[lang].loc_km}`; + } + }); + } + + if (map && placemark) { + placemark.properties.set({ + hintContent: HOTEL_ADDRESS, + balloonContent: HOTEL_ADDRESS + }); + } +} + +// Полная отрисовка секции location +function renderLocation(lang) { + const locationSection = document.getElementById('location'); + if (!locationSection) return; + + locationSection.innerHTML = generateLocationHTML(lang); + + // Анимация картинки при прокрутке + const signImg = document.getElementById('signpostImg'); + if (signImg) { + const imgObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('in-view'); + imgObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.3 }); + imgObserver.observe(signImg); + } + + // Назначаем обработчик на кнопку показа карты + const showBtn = document.getElementById('showMapBtn'); + if (showBtn) { + showBtn.addEventListener('click', showMap); + } + + // Запуск анимаций для новых .animate элементов + document.querySelectorAll('.animate').forEach(el => { + if (el.style.animationPlayState !== 'running') { + el.style.animationPlayState = 'paused'; + const obs = new IntersectionObserver(entries => { + entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; }); + }); + obs.observe(el); + } + }); +} + +function updateLocationLanguage(lang) { + currentLang = lang; + if (document.getElementById('location').innerHTML.trim() !== '') { + updateLocationTexts(lang); + } else { + renderLocation(lang); + } +} + +window.updateLocationLanguage = updateLocationLanguage; + +document.addEventListener("DOMContentLoaded", () => { + setTimeout(() => { + renderLocation(currentLang); + }, 300); +}); \ No newline at end of file diff --git a/public/scripts.js b/public/scripts.js index 3b7419a..53dcf2a 100644 --- a/public/scripts.js +++ b/public/scripts.js @@ -1,29 +1,46 @@ -const translations = { +// Глобальные переводы (расширены для location и about) +window.translations = { ru: { -nav_about: "О нас ", -nav_food: "Кухня ", -nav_location: "Где мы ", -nav_booking: "Бронь ", -hero_title: "Добро пожаловать ", -hero_subtitle: "Ваш идеальный отдых на берегу Черного моря ", -hero_btn: "Забронировать номер ", -about_title: "Море в шаговой доступности ", -about_subtitle: "Бескрайние пляжи Гудауты ", -about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к морю. ", -food_title: "Вкус Абхазии ", -food_subtitle: "Домашняя кухня из местных продуктов ", -food_text: "Почувствуйте гостеприимство! Свежайший сыр сулугуни, мамалыга, овощи с грядки и домашнее вино. ", -loc_title: "Удобное расположение ", -book_title: "Забронировать отдых ", -label_name: "Ваше имя ", -label_phone: "Номер телефона ", -ph_name: "Иван Иванов ", -fz152: "Согласие на обработку данных (152-ФЗ) ", -book_btn: "Отправить заявку ", -footer_text: "© 2026 Hotel 777. Абхазия, Мгудзырхуа. ", -cookie_text: "Мы используем файлы cookie для улучшения работы сайта. ", -cookie_btn: "Согласен ", -alert_msg: "Спасибо! Ваша заявка принята. " +nav_about: "О нас", +nav_food: "Кухня", +nav_location: "Где мы", +nav_booking: "Бронь", +hero_title: "Добро пожаловать", +hero_subtitle: "Ваш идеальный отдых на берегу Черного моря", +hero_btn: "Забронировать номер", +about_title: "Море в шаговой доступности", +about_subtitle: "Бескрайние пляжи Гудауты", +about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.", +about_extra: "Гудаутский район известен как «Золотой берег Абхазии» – здесь самые широкие пляжи, прогретое море и уникальный микроклимат, сочетающий горный и морской воздух.", +fact1: "🏝️ Золотой берег Абхазии", +fact2: "🌡️ Температура моря до +28°C летом", +fact3: "⛰️ Чистейший воздух у подножия Кавказа", +fact4: "🍇 Собственные виноградники и вино", +food_title: "Вкус Абхазии", +food_subtitle: "Домашняя кухня из местных продуктов", +food_text: "Почувствуйте гостеприимство! Свежайший сыр сулугуни, мамалыга, овощи с грядки и домашнее вино.", +loc_title: "Удобное расположение", +book_title: "Забронировать отдых", +label_name: "Ваше имя", +label_phone: "Номер телефона", +ph_name: "Иван Иванов", +fz152: "Согласие на обработку данных (152-ФЗ)", +book_btn: "Отправить заявку", +footer_text: "© 2026 Hotel 777. Абхазия, Мгудзырхуа.", +cookie_text: "Мы используем файлы cookie для улучшения работы сайта.", +cookie_btn: "Согласен", +alert_msg: "Спасибо! Ваша заявка принята.", +loc_address_label: "Наш Адрес:", +loc_coords_label: "Координаты:", +loc_show_map: "Показать карту", +loc_city_sukhum: "Сухум", +loc_city_ochamchyra: "Очамчыра", +loc_city_tkvarcheli: "Ткуарчал", +loc_city_gal: "Гал", +loc_city_new_athos: "Новый Афон", +loc_city_primorsk: "Приморск", +loc_city_gudauta: "Гудаута", +loc_km: "км" }, en: { nav_about: "About Us", @@ -33,12 +50,17 @@ nav_booking: "Booking", hero_title: "Welcome", hero_subtitle: "Your perfect getaway on the Black Sea coast", hero_btn: "Book a room", -about_title: "The sea within walking distance", -about_subtitle: "The endless beaches of Gudauta", -about_text: "Our hotel is located in the picturesque village of Mgudzyrkhua. We offer comfortable rooms and direct access to the sea.", -food_title: "The Taste of Abkhazia", +about_title: "Sea within walking distance", +about_subtitle: "Endless beaches of Gudauta", +about_text: "Our hotel is located in the picturesque village of Mgudzyrkhua. We offer comfortable rooms and direct access to the wide, clean pebble-sand beach.", +about_extra: "The Gudauta district is known as the 'Golden Beach of Abkhazia' – the widest beaches, warm sea, and a unique microclimate combining mountain and sea air.", +fact1: "🏝️ Golden Beach of Abkhazia", +fact2: "🌡️ Sea temperature up to +28°C in summer", +fact3: "⛰️ Cleanest air at the foot of the Caucasus", +fact4: "🍇 Own vineyards and wine", +food_title: "Taste of Abkhazia", food_subtitle: "Homemade cuisine from local ingredients", -food_text: "Feel the hospitality! The freshest suluguni cheese, mamalyga, garden-fresh vegetables, and homemade wine.", +food_text: "Feel the hospitality! Suluguni cheese, mamalyga, garden vegetables, and homemade wine.", loc_title: "Convenient location", book_title: "Book your holiday", label_name: "Your name", @@ -49,7 +71,18 @@ book_btn: "Send request", footer_text: "© 2026 Hotel 777. Abkhazia, Mgudzyrkhua.", cookie_text: "We use cookies to improve the website.", cookie_btn: "Agree", -alert_msg: "Thank you! Your request has been accepted." +alert_msg: "Thank you! Your request has been accepted.", +loc_address_label: "Our Address:", +loc_coords_label: "Coordinates:", +loc_show_map: "Show map", +loc_city_sukhum: "Sukhum", +loc_city_ochamchyra: "Ochamchira", +loc_city_tkvarcheli: "Tkvarcheli", +loc_city_gal: "Gal", +loc_city_new_athos: "New Athos", +loc_city_primorsk: "Primorsk", +loc_city_gudauta: "Gudauta", +loc_km: "km" }, ab: { nav_about: "Ҳара ҳхәыҷра", @@ -62,6 +95,11 @@ hero_btn: "Аҭаӡара аҭагалатә", about_title: "Амшын ашьапыла ихьчо", about_subtitle: "Гәдоуҭа иаҵәаку аҧшаҳәақәа", about_text: "Ҳара ахәҭа ҳҟоуп агәаҟаратә ақыҭа Мгудзырхуа. Ҳара ҳааҭауеит комфорттә аҭаӡарақәа нас амшын аҟныҵла аҩаӡара.", +about_extra: "Гәдоуҭа араион иҭоуҳәоуп «Аԥсны Аџьа аԥша» ҳәа – абар аҧшаҳәақәа иреиҳау, амшын аҵаԥхьа ишәоит +28°C, уи аҭыԥ амикроклимат ҳаирҭоит ашьха нас амшын.", +fact1: "🏝️ Аԥсны Аџьа аԥша", +fact2: "🌡️ Амшын аҵаԥхьа +28°C аҟынӡа", +fact3: "⛰️ Акавказ аҵаҟа иҟоу аҵхыҵ", +fact4: "🍇 Ҳара авиноградникқәа нас авин", food_title: "Аԥсны аҵәа", food_subtitle: "Аџьа ҭаацәарантәи аҭыԥтә афасаҟәақәа рыла", food_text: "Ашьааҭра шәаазыр! Ибжьа асулугуни, абаста, аҵиаа ҵаҟатәи нас аҭаацәарантәи аҵаа.", @@ -75,12 +113,23 @@ book_btn: "Азаявка аҭаҭатә", footer_text: "© 2026 Hotel 777. Аԥсны, Мгудзырхуа.", cookie_text: "Ҳара асаит аҟаҵара аҵәаҵәаразы cookie-файлқәа ҳхылаҩуеит.", cookie_btn: "Аиҭаҵра", -alert_msg: "Иҭабуп! Шәзаявка алырҵеит." +alert_msg: "Иҭабуп! Шәзаявка алырҵеит.", +loc_address_label: "Ҳара адрес:", +loc_coords_label: "Акоординатқәа:", +loc_show_map: "Ахәаҧшра карта", +loc_city_sukhum: "Аҟәа", +loc_city_ochamchyra: "Очамчыра", +loc_city_tkvarcheli: "Тҟәарчал", +loc_city_gal: "Гал", +loc_city_new_athos: "Афон Ҿыц", +loc_city_primorsk: "Приморск", +loc_city_gudauta: "Гәдоуҭа", +loc_km: "км" } }; document.addEventListener("DOMContentLoaded", () => { -// Циклическая смена фона (мимикрия) +// Циклическая смена фона Hero const hero = document.querySelector('.hero'); const images = ['img/h777.webp', 'img/h777o.webp', 'img/h777l.webp', 'img/h777z.webp']; let currentImg = 0; @@ -92,30 +141,36 @@ const setHeroBackground = () => { hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`; }; }; - -// Запуск первого изображения setHeroBackground(); - -// Смена каждые 15 секунды setInterval(() => { currentImg = (currentImg + 1) % images.length; setHeroBackground(); }, 15000); -// Локализация +// Локализация основных элементов (с data-i18n) const langSelect = document.getElementById('langSwitch'); let currentLang = localStorage.getItem('siteLang') || 'ru'; const updateText = (lang) => { + // Обновляем элементы с data-i18n document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n'); - if (translations[lang][key]) el.innerHTML = translations[lang][key]; + if (window.translations[lang][key]) el.innerHTML = window.translations[lang][key]; }); + // Обновляем плейсхолдеры document.querySelectorAll('[data-i18n-ph]').forEach(el => { const key = el.getAttribute('data-i18n-ph'); - if (translations[lang][key]) el.placeholder = translations[lang][key]; + if (window.translations[lang][key]) el.placeholder = window.translations[lang][key]; }); localStorage.setItem('siteLang', lang); + + // Вызываем обновление динамических секций, если функции определены + if (typeof window.updateLocationLanguage === 'function') { + window.updateLocationLanguage(lang); + } + if (typeof window.updateAboutLanguage === 'function') { + window.updateAboutLanguage(lang); + } }; langSelect.value = currentLang; @@ -127,11 +182,14 @@ if (!localStorage.getItem('cookiesAccepted')) { setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000); } -// Форма -document.getElementById('bookingForm').onsubmit = (e) => { - e.preventDefault(); - alert(translations[localStorage.getItem('siteLang') || 'ru'].alert_msg); -}; +// Форма бронирования +const bookingForm = document.getElementById('bookingForm'); +if (bookingForm) { + bookingForm.onsubmit = (e) => { + e.preventDefault(); + alert(window.translations[localStorage.getItem('siteLang') || 'ru'].alert_msg); + }; +} // Анимации при скролле const obs = new IntersectionObserver(entries => { @@ -145,5 +203,6 @@ document.querySelectorAll('.animate').forEach(el => { function acceptCookies() { localStorage.setItem('cookiesAccepted', 'true'); -document.getElementById('cookieBanner').classList.remove('show'); +const banner = document.getElementById('cookieBanner'); +if (banner) banner.classList.remove('show'); } \ No newline at end of file diff --git a/public/style.css b/public/style.css index 0a32aa4..1202ec7 100644 --- a/public/style.css +++ b/public/style.css @@ -10,6 +10,7 @@ html { font-size: 16px; scroll-behavior: smooth; } @media (min-width: 2000px) { html { font-size: 22px; } } body { background: var(--bg); color: var(--dark); line-height: 1.6; } + /* ШАПКА */ header { background: rgba(0, 18, 25, 0.95); @@ -36,14 +37,16 @@ outline: none; .lang-switch option { background: var(--dark); color: var(--white); } nav a { color: var(--white); text-decoration: none; margin-left: clamp(10px, 2vw, 20px); font-weight: 500; transition: 0.3s; font-size: 0.9rem; } nav a:hover { color: var(--secondary); } + /* HERO */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--white); padding: 0 20px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/h777-tiny.webp') center/cover; -transition: background-image 1.5s ease-in-out; /* Плавный переход */ +transition: background-image 1.5s ease-in-out; } .hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; } + /* СЕКЦИИ */ section { padding: 6rem 10%; } .white-bg { background: var(--white); } @@ -55,6 +58,18 @@ section { padding: 6rem 10%; } .about-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; } .about-image-wrapper:hover .about-img { transform: scale(1.05); } .signpost-img { max-width: 100%; height: auto; display: block; margin: 0 auto; } + +/* Анимированная картинка-указатель */ +.location-img-animate { + transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1), opacity 0.8s ease; + transform: scale(0.85); + opacity: 0; +} +.location-img-animate.in-view { + transform: scale(1); + opacity: 1; +} + /* ФОРМА */ .booking-form { max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem; @@ -73,6 +88,7 @@ color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor } .btn:hover { background: var(--primary); transform: translateY(-3px); } .full-width { width: 100%; } + /* COOKIE & ANIMATIONS */ .cookie-banner { position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; @@ -85,33 +101,145 @@ background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px .delay-1 { animation-delay: 0.3s; } .delay-2 { animation-delay: 0.6s; } footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: center; padding: 3rem; } -/* Блок с расстояниями до городов */ + +/* Блок с расстояниями до городов (разноцветные карточки) */ .location-cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } - .location-card { - background: var(--bg); padding: 1rem 1.5rem; border-radius: 12px; text-align: center; min-width: 120px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} +.location-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0,0,0,0.1); } - .location-icon { font-size: 1.5rem; margin-bottom: 0.5rem; } - .location-title { font-weight: 600; color: var(--primary); } - .location-distance { font-size: 0.9rem; color: #666; +} + +/* Кнопка показа карты */ +.show-map-btn { + background: var(--primary); + transition: 0.3s; +} +.show-map-btn:hover { + background: var(--secondary); + transform: translateY(-2px); +} + +/* Карта под картинкой (скрыта по умолчанию) */ +.map-container { + width: 100%; + height: 400px; + border-radius: 24px; + overflow: hidden; + box-shadow: 0 20px 40px rgba(0,0,0,0.1); + margin-top: 1rem; + display: none; +} +@media (max-width: 768px) { + .map-container { + height: 300px; + } +} + +/* Дополнительные стили для колонки с картинкой (вертикальное расположение) */ +.about-image-wrapper { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +/* Стили для обновлённой секции about */ +.modern-about { + gap: 3rem; +} + +.about-text h3 { + font-size: 1.8rem; + color: var(--primary); + margin-bottom: 1rem; +} + +.main-description { + font-size: 1.1rem; + line-height: 1.6; + color: #2c3e2f; + margin-bottom: 1.5rem; +} + +.extra-description { + background: linear-gradient(135deg, #e0f2e9 0%, #f0f9f4 100%); + padding: 1.2rem; + border-radius: 20px; + margin: 1.5rem 0; + font-style: italic; + border-left: 4px solid var(--secondary); + font-size: 0.95rem; +} + +.facts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-top: 2rem; +} + +.fact-card { + background: var(--white); + padding: 1rem; + border-radius: 20px; + text-align: center; + box-shadow: 0 10px 20px rgba(0,0,0,0.05); + transition: transform 0.2s, box-shadow 0.2s; + border: 1px solid rgba(0,0,0,0.03); +} + +.fact-card:hover { + transform: translateY(-5px); + box-shadow: 0 20px 30px rgba(0,0,0,0.1); +} + +.fact-icon { + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.fact-text { + font-weight: 500; + color: var(--dark); + font-size: 0.9rem; +} + +@media (max-width: 768px) { + .facts-grid { + grid-template-columns: 1fr 1fr; + } + .about-text h3 { + font-size: 1.4rem; + } +} + +/* Дополнительно – улучшаем общий вид кнопок и карточек */ +.btn { + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +.about-image-wrapper { + box-shadow: 0 30px 40px rgba(0,0,0,0.08); } \ No newline at end of file