${getCityTranslation(city.key, lang)}
${city.distance} ${kmLabel}
@@ -56,7 +75,6 @@ function generateLocationHTML(lang) {
return `
${window.translations[lang].loc_title}
-
@@ -83,15 +95,11 @@ function generateLocationHTML(lang) {
`;
}
-// Инициализация карты (вызывается только при первом нажатии кнопки)
+// Инициализация карты (без изменений)
function initMapOnce() {
- if (!window.ymaps) {
- console.warn("Яндекс.Карты не загружены");
- return;
- }
+ if (!window.ymaps) return;
const mapContainer = document.getElementById('yandexMap');
if (!mapContainer) return;
-
if (!map) {
window.ymaps.ready(() => {
map = new window.ymaps.Map('yandexMap', {
@@ -102,64 +110,39 @@ function initMapOnce() {
placemark = new window.ymaps.Placemark(HOTEL_COORDS, {
hintContent: HOTEL_ADDRESS,
balloonContent: HOTEL_ADDRESS
- }, {
- preset: 'islands#redDotIcon'
- });
+ }, { 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();
- });
- }
+ if (map) window.ymaps.ready(() => map.container.fitToViewport());
}, 300);
} else {
mapContainer.style.display = 'block';
- window.ymaps.ready(() => {
- map.container.fitToViewport();
- });
+ 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;
- }
-
+ if (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');
+ const coordsSpan = aboutText.querySelector('div:nth-of-type(2) 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]) {
@@ -170,23 +153,16 @@ function updateLocationTexts(lang) {
}
});
}
-
if (map && placemark) {
- placemark.properties.set({
- hintContent: HOTEL_ADDRESS,
- balloonContent: HOTEL_ADDRESS
- });
+ 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) => {
@@ -200,13 +176,19 @@ function renderLocation(lang) {
imgObserver.observe(signImg);
}
- // Назначаем обработчик на кнопку показа карты
const showBtn = document.getElementById('showMapBtn');
- if (showBtn) {
- showBtn.addEventListener('click', showMap);
- }
+ if (showBtn) showBtn.addEventListener('click', showMap);
+
+ // Обработчик клика на карточках городов
+ const cityCards = locationSection.querySelectorAll('.location-card');
+ cityCards.forEach(card => {
+ card.addEventListener('click', (event) => {
+ event.stopPropagation();
+ const cityKey = card.getAttribute('data-city-key');
+ if (cityKey) showCityModal(cityKey, lang);
+ });
+ });
- // Запуск анимаций для новых .animate элементов
document.querySelectorAll('.animate').forEach(el => {
if (el.style.animationPlayState !== 'running') {
el.style.animationPlayState = 'paused';
@@ -222,15 +204,15 @@ function updateLocationLanguage(lang) {
currentLang = lang;
if (document.getElementById('location').innerHTML.trim() !== '') {
updateLocationTexts(lang);
+ closeModal();
} else {
renderLocation(lang);
}
}
window.updateLocationLanguage = updateLocationLanguage;
+window.closeModal = closeModal; // для доступа из scripts.js
document.addEventListener("DOMContentLoaded", () => {
- setTimeout(() => {
- renderLocation(currentLang);
- }, 300);
+ setTimeout(() => renderLocation(currentLang), 300);
});
\ No newline at end of file
diff --git a/public/scripts.js b/public/scripts.js
index 53dcf2a..9644b45 100644
--- a/public/scripts.js
+++ b/public/scripts.js
@@ -1,208 +1,336 @@
-// Глобальные переводы (расширены для location и about)
+// Глобальные переводы (расширены для 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: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.",
-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",
-nav_food: "Cuisine",
-nav_location: "Where We Are",
-nav_booking: "Booking",
-hero_title: "Welcome",
-hero_subtitle: "Your perfect getaway on the Black Sea coast",
-hero_btn: "Book a room",
-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! Suluguni cheese, mamalyga, garden vegetables, and homemade wine.",
-loc_title: "Convenient location",
-book_title: "Book your holiday",
-label_name: "Your name",
-label_phone: "Phone number",
-ph_name: "Ivan Ivanov",
-fz152: "Consent to data processing (152-FZ RF)",
-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.",
-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: "Ҳара ҳхәыҷра",
-nav_food: "Аџьа",
-nav_location: "Ҳара иҟоу",
-nav_booking: "Аҭагалара",
-hero_title: "Бзиала шәаабеит",
-hero_subtitle: "Амшын Еиқәа аԥшазы уара уидеалтә уахыҧсыра",
-hero_btn: "Аҭаӡара аҭагалатә",
-about_title: "Амшын ашьапыла ихьчо",
-about_subtitle: "Гәдоуҭа иаҵәаку аҧшаҳәақәа",
-about_text: "Ҳара ахәҭа ҳҟоуп агәаҟаратә ақыҭа Мгудзырхуа. Ҳара ҳааҭауеит комфорттә аҭаӡарақәа нас амшын аҟныҵла аҩаӡара.",
-about_extra: "Гәдоуҭа араион иҭоуҳәоуп «Аԥсны Аџьа аԥша» ҳәа – абар аҧшаҳәақәа иреиҳау, амшын аҵаԥхьа ишәоит +28°C, уи аҭыԥ амикроклимат ҳаирҭоит ашьха нас амшын.",
-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: "км"
-}
+ ru: {
+ 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: "км",
+ // Факты о городах (русский)
+ loc_facts_sukhum: [
+ "🏛️ Один из древнейших городов мира, основан в VI веке до н.э.",
+ "🌿 Ботанический сад — один из старейших на Кавказе (основан в 1838 году).",
+ "🐬 Летом можно наблюдать дельфинов прямо у набережной."
+ ],
+ loc_facts_ochamchyra: [
+ "🌊 Известен своим широким пляжем и чистой водой.",
+ "🏚️ В окрестностях находятся руины древнего храма.",
+ "🍊 Славится цитрусовыми садами."
+ ],
+ loc_facts_tkvarcheli: [
+ "⛰️ Город расположен в живописном ущелье, окружён горами.",
+ "🚂 Железнодорожная станция на живописной ветке.",
+ "💧 Рядом находятся уникальные горные озёра."
+ ],
+ loc_facts_gal: [
+ "🌾 Важный сельскохозяйственный центр Абхазии.",
+ "🍈 Знаменит дынями и арбузами, выращиваемыми в регионе.",
+ "🏛️ Имеет богатую историю, связанную с мегрельской культурой."
+ ],
+ loc_facts_new_athos: [
+ "⛪ Знаменит Новоафонским монастырём (XIX век).",
+ "🕯️ Экскурсия в пещеру — одно из самых ярких впечатлений.",
+ "🚞 Работает канатная дорога к монастырю."
+ ],
+ loc_facts_primorsk: [
+ "🌅 Уютный посёлок с отличными пляжами.",
+ "🏞️ Близость к Пицундскому заповеднику.",
+ "🍷 В окрестностях производят домашнее вино."
+ ],
+ loc_facts_gudauta: [
+ "🎖️ Город воинской славы, родина многих героев.",
+ "🏖️ Широкие галечные пляжи — одни из лучших в Абхазии.",
+ "🍇 Традиционные виноградники и знаменитые сорта винограда."
+ ],
+ loc_facts_default: "✨ Удивительные места ждут вас!"
+ },
+ en: {
+ nav_about: "About Us",
+ nav_food: "Cuisine",
+ nav_location: "Where We Are",
+ nav_booking: "Booking",
+ hero_title: "Welcome",
+ hero_subtitle: "Your perfect getaway on the Black Sea coast",
+ hero_btn: "Book a room",
+ 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! Suluguni cheese, mamalyga, garden vegetables, and homemade wine.",
+ loc_title: "Convenient location",
+ book_title: "Book your holiday",
+ label_name: "Your name",
+ label_phone: "Phone number",
+ ph_name: "Ivan Ivanov",
+ fz152: "Consent to data processing (152-FZ RF)",
+ 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.",
+ 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",
+ // Facts about cities (English)
+ loc_facts_sukhum: [
+ "🏛️ One of the oldest cities in the world, founded in the 6th century BC.",
+ "🌿 Botanical Garden – one of the oldest in the Caucasus (founded 1838).",
+ "🐬 Dolphins can be seen near the embankment in summer."
+ ],
+ loc_facts_ochamchyra: [
+ "🌊 Known for its wide beach and clear water.",
+ "🏚️ Ruins of an ancient temple are nearby.",
+ "🍊 Famous for citrus groves."
+ ],
+ loc_facts_tkvarcheli: [
+ "⛰️ The city is located in a picturesque gorge, surrounded by mountains.",
+ "🚂 Railway station on a scenic branch.",
+ "💧 Unique mountain lakes are nearby."
+ ],
+ loc_facts_gal: [
+ "🌾 An important agricultural center of Abkhazia.",
+ "🍈 Famous for melons and watermelons grown in the region.",
+ "🏛️ Has a rich history related to Mingrelian culture."
+ ],
+ loc_facts_new_athos: [
+ "⛪ Famous for the New Athos Monastery (19th century).",
+ "🕯️ A tour of the cave is one of the most vivid experiences.",
+ "🚞 A cable car runs to the monastery."
+ ],
+ loc_facts_primorsk: [
+ "🌅 A cozy town with excellent beaches.",
+ "🏞️ Close to the Pitsunda Nature Reserve.",
+ "🍷 Homemade wine is produced in the area."
+ ],
+ loc_facts_gudauta: [
+ "🎖️ City of military glory, birthplace of many heroes.",
+ "🏖️ Wide pebble beaches – some of the best in Abkhazia.",
+ "🍇 Traditional vineyards and famous grape varieties."
+ ],
+ loc_facts_default: "✨ Amazing places are waiting for you!"
+ },
+ ab: {
+ nav_about: "Ҳара ҳхәыҷра",
+ nav_food: "Аџьа",
+ nav_location: "Ҳара иҟоу",
+ nav_booking: "Аҭагалара",
+ hero_title: "Бзиала шәаабеит",
+ hero_subtitle: "Амшын Еиқәа аԥшазы уара уидеалтә уахыҧсыра",
+ hero_btn: "Аҭаӡара аҭагалатә",
+ about_title: "Амшын ашьапыла ихьчо",
+ about_subtitle: "Гәдоуҭа иаҵәаку аҧшаҳәақәа",
+ about_text: "Ҳара ахәҭа ҳҟоуп агәаҟаратә ақыҭа Мгудзырхуа. Ҳара ҳааҭауеит комфорттә аҭаӡарақәа нас амшын аҟныҵла аҩаӡара.",
+ about_extra: "Гәдоуҭа араион иҭоуҳәоуп «Аԥсны Аџьа аԥша» ҳәа – абар аҧшаҳәақәа иреиҳау, амшын аҵаԥхьа ишәоит +28°C, уи аҭыԥ амикроклимат ҳаирҭоит ашьха нас амшын.",
+ 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: "км",
+ // Факты об городах на абхазском (упрощённо, для демонстрации)
+ loc_facts_sukhum: [
+ "🏛️ Адунеи аиҳабылакьықәа руакы, VI ашәышықәса рахь нҵа иҟоуп.",
+ "🌿 Аботаникатә сад — Акавказ аиҳабылакьықәа руакы (1838 ш.).",
+ "🐬 Амшын аҟынӡа дельфинқәа аԥсабарала уаԥхьоит."
+ ],
+ loc_facts_ochamchyra: [
+ "🌊 Иҭоуҳәоуп иаау аҧшаҳәаҟынтәи ласа аҵакыра.",
+ "🏚️ Иҝеиԥшу аҩныҵҟатәи ацқьатә уахәама иҟоуп.",
+ "🍊 Ацитрусқәа рҵаҵәра рымоуп."
+ ],
+ loc_facts_tkvarcheli: [
+ "⛰️ Ақалақь ашьхақәа рыкәтә аҟны иҟоуп.",
+ "🚂 Ацәахаҵатә аиаша аҟны астанциа.",
+ "💧 Ихадоу ашьхатә иоу аӡиқәа ҷыдала иҟоуп."
+ ],
+ loc_facts_gal: [
+ "🌾 Аԥсны аҳәынҭқарратә аԥштәыҩсатә центр.",
+ "🍈 Иҭоуҳәоуп аҵәа, арбузқәа.",
+ "🏛️ Амингрел ҳәынҭқарратә культура (америкатәи америкаҭтәи америкатәи америкаҭ) иааҵанакуеит."
+ ],
+ loc_facts_new_athos: [
+ "⛪ Иҭоуҳәоуп Афон Ҵыцтәи ауахәама (XIX ашә.).",
+ "🕯️ Ацқьатә хьаҧсаҟны аиҭаҵра — аиҳабылакьықәа руакы.",
+ "🚞 Ауахәамаҟны аканат аҩра ұсуеит."
+ ],
+ loc_facts_primorsk: [
+ "🌅 Амшын аԥшазы ухыҧсыразы ҷыдатә ақыҭа.",
+ "🏞️ Пицундатә заповедник аҟынтәи аҩаӡара.",
+ "🍷 Аҭыҧ аҟны аҭаацәарантәи аҵаа аҟаҵоуп."
+ ],
+ loc_facts_gudauta: [
+ "🎖️ Аиааира аиҭаҵра ақалақь, аиааираҭҵаақәа рҭаацәара.",
+ "🏖️ Иаау аҧшаҳәақәа — Аԥсны аиҳабылакьықәа руакы.",
+ "🍇 Аҭыԥтәи авиноградникқәа нас иҭоуҳәоу авин асортқәа."
+ ],
+ loc_facts_default: "✨ Амилакьатә аҭыԥқәа шәаажәлар!"
+ }
+};
+
+// Функция закрытия модального окна (глобальная, используется также в location.js)
+window.closeModal = function() {
+ const modal = document.getElementById('cityModal');
+ if (modal) modal.style.display = 'none';
+};
+
+// Принятие куки
+window.acceptCookies = function() {
+ localStorage.setItem('cookiesAccepted', 'true');
+ const banner = document.getElementById('cookieBanner');
+ if (banner) banner.classList.remove('show');
};
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;
+ // Циклическая смена фона Hero
+ const hero = document.querySelector('.hero');
+ const images = ['img/h777.webp', 'img/h777o.webp', 'img/h777l.webp', 'img/h777z.webp'];
+ let currentImg = 0;
-const setHeroBackground = () => {
- const img = new Image();
- img.src = images[currentImg];
- img.onload = () => {
- hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`;
+ const setHeroBackground = () => {
+ const img = new Image();
+ img.src = images[currentImg];
+ img.onload = () => {
+ hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`;
+ };
};
-};
-setHeroBackground();
-setInterval(() => {
- currentImg = (currentImg + 1) % images.length;
setHeroBackground();
-}, 15000);
+ setInterval(() => {
+ currentImg = (currentImg + 1) % images.length;
+ setHeroBackground();
+ }, 15000);
-// Локализация основных элементов (с data-i18n)
-const langSelect = document.getElementById('langSwitch');
-let currentLang = localStorage.getItem('siteLang') || 'ru';
+ // Локализация основных элементов (с 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 (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 (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;
-updateText(currentLang);
-langSelect.onchange = (e) => updateText(e.target.value);
-
-// Cookie
-if (!localStorage.getItem('cookiesAccepted')) {
- setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
-}
-
-// Форма бронирования
-const bookingForm = document.getElementById('bookingForm');
-if (bookingForm) {
- bookingForm.onsubmit = (e) => {
- e.preventDefault();
- alert(window.translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
+ const updateText = (lang) => {
+ // Обновляем элементы с data-i18n
+ document.querySelectorAll('[data-i18n]').forEach(el => {
+ const key = el.getAttribute('data-i18n');
+ 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 (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);
+ }
};
-}
-// Анимации при скролле
-const obs = new IntersectionObserver(entries => {
- entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
-});
-document.querySelectorAll('.animate').forEach(el => {
- el.style.animationPlayState = 'paused';
- obs.observe(el);
-});
-});
+ langSelect.value = currentLang;
+ updateText(currentLang);
+ langSelect.onchange = (e) => updateText(e.target.value);
-function acceptCookies() {
-localStorage.setItem('cookiesAccepted', 'true');
-const banner = document.getElementById('cookieBanner');
-if (banner) banner.classList.remove('show');
-}
\ No newline at end of file
+ // Cookie
+ if (!localStorage.getItem('cookiesAccepted')) {
+ setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
+ }
+
+ // Форма бронирования
+ 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 => {
+ entries.forEach(en => { if (en.isIntersecting) en.target.style.animationPlayState = 'running'; });
+ });
+ document.querySelectorAll('.animate').forEach(el => {
+ el.style.animationPlayState = 'paused';
+ obs.observe(el);
+ });
+
+ // Модальное окно: закрытие по крестику и по клику на фон
+ const modal = document.getElementById('cityModal');
+ if (modal) {
+ const closeBtn = modal.querySelector('.modal-close');
+ if (closeBtn) closeBtn.addEventListener('click', window.closeModal);
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) window.closeModal();
+ });
+ }
+});
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 1202ec7..686fc0e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,63 +1,168 @@
:root {
---primary: #005f73;
---secondary: #0a9396;
---light: #e9d8a6;
---dark: #001219;
---bg: #f8f9fa;
---white: #ffffff;
---input-bg: #f0f4f5;
+ --primary: #005f73;
+ --secondary: #0a9396;
+ --light: #e9d8a6;
+ --dark: #001219;
+ --bg: #f8f9fa;
+ --white: #ffffff;
+ --input-bg: #f0f4f5;
+}
+
+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;
+ margin: 0;
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
-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);
-color: var(--white);
-padding: 1rem 5%;
-position: fixed;
-width: 90%;
-z-index: 100;
-display: flex;
-justify-content: space-between;
-align-items: center;
-backdrop-filter: blur(10px);
-box-shadow: 0 2px 15px rgba(0,0,0,0.2);
+ background: rgba(0, 18, 25, 0.95);
+ color: var(--white);
+ padding: 1rem 5%;
+ position: fixed;
+ width: 90%;
+ z-index: 100;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ backdrop-filter: blur(10px);
+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}
+
+.logo {
+ font-weight: 800;
+ font-size: 1.2rem;
+ letter-spacing: 1px;
+}
+
.lang-switch {
-background: rgba(255,255,255,0.1);
-color: var(--white);
-border: 1px solid rgba(255,255,255,0.3);
-padding: 6px 10px;
-border-radius: 8px;
-cursor: pointer;
-outline: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--white);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ padding: 6px 10px;
+ border-radius: 8px;
+ cursor: pointer;
+ 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);
}
-.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;
+ 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;
+}
+
+.hero h1 {
+ font-size: clamp(2.5rem, 8vw, 5rem);
+ font-weight: 800;
+ line-height: 1.1;
}
-.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); }
-.section-title { font-size: clamp(2rem, 5vw, 3rem); color: var(--primary); margin-bottom: 3.5rem; text-align: center; }
-.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--secondary); margin: 15px auto; border-radius: 2px; }
-.about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
-@media (min-width: 992px) { .about-grid { grid-template-columns: 1fr 1fr; } }
-.about-image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
-.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; }
+section {
+ padding: 6rem 10%;
+}
+
+.white-bg {
+ background: var(--white);
+}
+
+.section-title {
+ font-size: clamp(2rem, 5vw, 3rem);
+ color: var(--primary);
+ margin-bottom: 3.5rem;
+ text-align: center;
+}
+
+.section-title::after {
+ content: '';
+ display: block;
+ width: 60px;
+ height: 4px;
+ background: var(--secondary);
+ margin: 15px auto;
+ border-radius: 2px;
+}
+
+.about-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 4rem;
+ align-items: center;
+}
+
+@media (min-width: 992px) {
+ .about-grid {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.about-image-wrapper {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+ border-radius: 24px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.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 {
@@ -65,6 +170,7 @@ section { padding: 6rem 10%; }
transform: scale(0.85);
opacity: 0;
}
+
.location-img-animate.in-view {
transform: scale(1);
opacity: 1;
@@ -72,35 +178,125 @@ section { padding: 6rem 10%; }
/* ФОРМА */
.booking-form {
-max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem;
-border-radius: 30px; box-shadow: 0 30px 60px rgba(0,18,25,0.1); border: 1px solid rgba(0,0,0,0.05);
+ max-width: 550px;
+ margin: 0 auto;
+ background: var(--white);
+ padding: 3rem;
+ border-radius: 30px;
+ box-shadow: 0 30px 60px rgba(0, 18, 25, 0.1);
+ border: 1px solid rgba(0, 0, 0, 0.05);
}
-.form-group { margin-bottom: 1.5rem; }
-.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); }
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: var(--dark);
+}
+
.form-group input {
-width: 100%; padding: 14px; border: 2px solid transparent;
-background: var(--input-bg); border-radius: 12px; transition: 0.3s;
+ width: 100%;
+ padding: 14px;
+ border: 2px solid transparent;
+ background: var(--input-bg);
+ border-radius: 12px;
+ transition: 0.3s;
+ font-size: 1rem;
}
-.form-group input:focus { outline: none; border-color: var(--secondary); background: var(--white); }
+
+.form-group input:focus {
+ outline: none;
+ border-color: var(--secondary);
+ background: var(--white);
+}
+
.btn {
-display: inline-block; padding: 16px 30px; background: var(--secondary);
-color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s;
+ display: inline-block;
+ padding: 16px 30px;
+ background: var(--secondary);
+ color: var(--white);
+ border-radius: 14px;
+ font-weight: 700;
+ border: none;
+ cursor: pointer;
+ transition: 0.3s;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn:hover {
+ background: var(--primary);
+ transform: translateY(-3px);
+}
+
+.full-width {
+ width: 100%;
}
-.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;
-background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px; transition: 0.6s; z-index: 1000;
+ position: fixed;
+ bottom: -200px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 90%;
+ max-width: 600px;
+ background: var(--dark);
+ color: var(--white);
+ padding: 20px;
+ border-radius: 20px;
+ transition: 0.6s;
+ z-index: 1000;
+ text-align: center;
+}
+
+.cookie-banner.show {
+ bottom: 20px;
+}
+
+.cookie-btn {
+ background: var(--light);
+ border: none;
+ padding: 8px 20px;
+ border-radius: 8px;
+ font-weight: 700;
+ cursor: pointer;
+ margin-top: 10px;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate {
+ animation: fadeIn 1s ease-out forwards;
+ opacity: 0;
+}
+
+.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;
}
-.cookie-banner.show { bottom: 20px; }
-.cookie-btn { background: var(--light); border: none; padding: 8px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
-.animate { animation: fadeIn 1s ease-out forwards; opacity: 0; }
-.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 {
@@ -109,25 +305,31 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
gap: 1rem;
justify-content: center;
}
+
.location-card {
padding: 1rem 1.5rem;
border-radius: 12px;
text-align: center;
min-width: 120px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
+ cursor: pointer;
}
+
.location-card:hover {
transform: translateY(-5px);
- box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+ 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;
@@ -138,6 +340,7 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
background: var(--primary);
transition: 0.3s;
}
+
.show-map-btn:hover {
background: var(--secondary);
transform: translateY(-2px);
@@ -149,23 +352,18 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
height: 400px;
border-radius: 24px;
overflow: hidden;
- box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+ 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 */
+/* Стили для секции about (модерн) */
.modern-about {
gap: 3rem;
}
@@ -205,14 +403,14 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
padding: 1rem;
border-radius: 20px;
text-align: center;
- box-shadow: 0 10px 20px rgba(0,0,0,0.05);
+ 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);
+ 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);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
.fact-icon {
@@ -230,16 +428,109 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
.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);
+/* Модальное окно для фактов о городах */
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 2000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ justify-content: center;
+ align-items: center;
}
-.about-image-wrapper {
- box-shadow: 0 30px 40px rgba(0,0,0,0.08);
+.modal-content {
+ background: var(--white);
+ margin: 10% auto;
+ padding: 2rem;
+ border-radius: 30px;
+ width: 90%;
+ max-width: 500px;
+ box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
+ position: relative;
+ animation: fadeIn 0.3s ease;
+}
+
+.modal-close {
+ position: absolute;
+ top: 1rem;
+ right: 1.5rem;
+ font-size: 2rem;
+ cursor: pointer;
+ color: #666;
+ transition: 0.2s;
+}
+
+.modal-close:hover {
+ color: var(--primary);
+}
+
+.modal-content h3 {
+ color: var(--primary);
+ margin-bottom: 1rem;
+ font-size: 1.8rem;
+}
+
+.modal-facts {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.modal-fact-item {
+ padding: 0.8rem;
+ background: var(--bg);
+ border-radius: 20px;
+ border-left: 4px solid var(--secondary);
+ font-size: 1rem;
+}
+/* Блок с расстояниями до городов (карточки в стиле fact-card) */
+.location-cards {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.location-card {
+ background: var(--white); /* как у fact-card */
+ padding: 1rem;
+ border-radius: 20px; /* как у fact-card */
+ text-align: center;
+ min-width: 120px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ cursor: pointer;
+ border: 1px solid rgba(0, 0, 0, 0.03);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+}
+
+.location-card:hover {
+ transform: translateY(-5px); /* как у fact-card */
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+}
+
+.location-icon {
+ font-size: 2rem; /* увеличенная иконка, как .fact-icon */
+ margin-bottom: 0.5rem;
+}
+
+.location-title {
+ font-weight: 600;
+ color: var(--primary);
+ font-size: 0.9rem; /* под размер .fact-text */
+}
+
+.location-distance {
+ font-size: 0.9rem;
+ color: #666;
}
\ No newline at end of file
${addressLabel}
@@ -65,16 +83,10 @@ function generateLocationHTML(lang) {
-
-
${coordsLabel} ${HOTEL_COORDS[0]}, ${HOTEL_COORDS[1]}
-
-
${cardsHTML}
@@ -83,15 +95,11 @@ function generateLocationHTML(lang) {
`;
}
-// Инициализация карты (вызывается только при первом нажатии кнопки)
+// Инициализация карты (без изменений)
function initMapOnce() {
- if (!window.ymaps) {
- console.warn("Яндекс.Карты не загружены");
- return;
- }
+ if (!window.ymaps) return;
const mapContainer = document.getElementById('yandexMap');
if (!mapContainer) return;
-
if (!map) {
window.ymaps.ready(() => {
map = new window.ymaps.Map('yandexMap', {
@@ -102,64 +110,39 @@ function initMapOnce() {
placemark = new window.ymaps.Placemark(HOTEL_COORDS, {
hintContent: HOTEL_ADDRESS,
balloonContent: HOTEL_ADDRESS
- }, {
- preset: 'islands#redDotIcon'
- });
+ }, { 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();
- });
- }
+ if (map) window.ymaps.ready(() => map.container.fitToViewport());
}, 300);
} else {
mapContainer.style.display = 'block';
- window.ymaps.ready(() => {
- map.container.fitToViewport();
- });
+ 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;
- }
-
+ if (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');
+ const coordsSpan = aboutText.querySelector('div:nth-of-type(2) 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]) {
@@ -170,23 +153,16 @@ function updateLocationTexts(lang) {
}
});
}
-
if (map && placemark) {
- placemark.properties.set({
- hintContent: HOTEL_ADDRESS,
- balloonContent: HOTEL_ADDRESS
- });
+ 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) => {
@@ -200,13 +176,19 @@ function renderLocation(lang) {
imgObserver.observe(signImg);
}
- // Назначаем обработчик на кнопку показа карты
const showBtn = document.getElementById('showMapBtn');
- if (showBtn) {
- showBtn.addEventListener('click', showMap);
- }
+ if (showBtn) showBtn.addEventListener('click', showMap);
+
+ // Обработчик клика на карточках городов
+ const cityCards = locationSection.querySelectorAll('.location-card');
+ cityCards.forEach(card => {
+ card.addEventListener('click', (event) => {
+ event.stopPropagation();
+ const cityKey = card.getAttribute('data-city-key');
+ if (cityKey) showCityModal(cityKey, lang);
+ });
+ });
- // Запуск анимаций для новых .animate элементов
document.querySelectorAll('.animate').forEach(el => {
if (el.style.animationPlayState !== 'running') {
el.style.animationPlayState = 'paused';
@@ -222,15 +204,15 @@ function updateLocationLanguage(lang) {
currentLang = lang;
if (document.getElementById('location').innerHTML.trim() !== '') {
updateLocationTexts(lang);
+ closeModal();
} else {
renderLocation(lang);
}
}
window.updateLocationLanguage = updateLocationLanguage;
+window.closeModal = closeModal; // для доступа из scripts.js
document.addEventListener("DOMContentLoaded", () => {
- setTimeout(() => {
- renderLocation(currentLang);
- }, 300);
+ setTimeout(() => renderLocation(currentLang), 300);
});
\ No newline at end of file
diff --git a/public/scripts.js b/public/scripts.js
index 53dcf2a..9644b45 100644
--- a/public/scripts.js
+++ b/public/scripts.js
@@ -1,208 +1,336 @@
-// Глобальные переводы (расширены для location и about)
+// Глобальные переводы (расширены для 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: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.",
-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",
-nav_food: "Cuisine",
-nav_location: "Where We Are",
-nav_booking: "Booking",
-hero_title: "Welcome",
-hero_subtitle: "Your perfect getaway on the Black Sea coast",
-hero_btn: "Book a room",
-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! Suluguni cheese, mamalyga, garden vegetables, and homemade wine.",
-loc_title: "Convenient location",
-book_title: "Book your holiday",
-label_name: "Your name",
-label_phone: "Phone number",
-ph_name: "Ivan Ivanov",
-fz152: "Consent to data processing (152-FZ RF)",
-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.",
-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: "Ҳара ҳхәыҷра",
-nav_food: "Аџьа",
-nav_location: "Ҳара иҟоу",
-nav_booking: "Аҭагалара",
-hero_title: "Бзиала шәаабеит",
-hero_subtitle: "Амшын Еиқәа аԥшазы уара уидеалтә уахыҧсыра",
-hero_btn: "Аҭаӡара аҭагалатә",
-about_title: "Амшын ашьапыла ихьчо",
-about_subtitle: "Гәдоуҭа иаҵәаку аҧшаҳәақәа",
-about_text: "Ҳара ахәҭа ҳҟоуп агәаҟаратә ақыҭа Мгудзырхуа. Ҳара ҳааҭауеит комфорттә аҭаӡарақәа нас амшын аҟныҵла аҩаӡара.",
-about_extra: "Гәдоуҭа араион иҭоуҳәоуп «Аԥсны Аџьа аԥша» ҳәа – абар аҧшаҳәақәа иреиҳау, амшын аҵаԥхьа ишәоит +28°C, уи аҭыԥ амикроклимат ҳаирҭоит ашьха нас амшын.",
-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: "км"
-}
+ ru: {
+ 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: "км",
+ // Факты о городах (русский)
+ loc_facts_sukhum: [
+ "🏛️ Один из древнейших городов мира, основан в VI веке до н.э.",
+ "🌿 Ботанический сад — один из старейших на Кавказе (основан в 1838 году).",
+ "🐬 Летом можно наблюдать дельфинов прямо у набережной."
+ ],
+ loc_facts_ochamchyra: [
+ "🌊 Известен своим широким пляжем и чистой водой.",
+ "🏚️ В окрестностях находятся руины древнего храма.",
+ "🍊 Славится цитрусовыми садами."
+ ],
+ loc_facts_tkvarcheli: [
+ "⛰️ Город расположен в живописном ущелье, окружён горами.",
+ "🚂 Железнодорожная станция на живописной ветке.",
+ "💧 Рядом находятся уникальные горные озёра."
+ ],
+ loc_facts_gal: [
+ "🌾 Важный сельскохозяйственный центр Абхазии.",
+ "🍈 Знаменит дынями и арбузами, выращиваемыми в регионе.",
+ "🏛️ Имеет богатую историю, связанную с мегрельской культурой."
+ ],
+ loc_facts_new_athos: [
+ "⛪ Знаменит Новоафонским монастырём (XIX век).",
+ "🕯️ Экскурсия в пещеру — одно из самых ярких впечатлений.",
+ "🚞 Работает канатная дорога к монастырю."
+ ],
+ loc_facts_primorsk: [
+ "🌅 Уютный посёлок с отличными пляжами.",
+ "🏞️ Близость к Пицундскому заповеднику.",
+ "🍷 В окрестностях производят домашнее вино."
+ ],
+ loc_facts_gudauta: [
+ "🎖️ Город воинской славы, родина многих героев.",
+ "🏖️ Широкие галечные пляжи — одни из лучших в Абхазии.",
+ "🍇 Традиционные виноградники и знаменитые сорта винограда."
+ ],
+ loc_facts_default: "✨ Удивительные места ждут вас!"
+ },
+ en: {
+ nav_about: "About Us",
+ nav_food: "Cuisine",
+ nav_location: "Where We Are",
+ nav_booking: "Booking",
+ hero_title: "Welcome",
+ hero_subtitle: "Your perfect getaway on the Black Sea coast",
+ hero_btn: "Book a room",
+ 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! Suluguni cheese, mamalyga, garden vegetables, and homemade wine.",
+ loc_title: "Convenient location",
+ book_title: "Book your holiday",
+ label_name: "Your name",
+ label_phone: "Phone number",
+ ph_name: "Ivan Ivanov",
+ fz152: "Consent to data processing (152-FZ RF)",
+ 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.",
+ 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",
+ // Facts about cities (English)
+ loc_facts_sukhum: [
+ "🏛️ One of the oldest cities in the world, founded in the 6th century BC.",
+ "🌿 Botanical Garden – one of the oldest in the Caucasus (founded 1838).",
+ "🐬 Dolphins can be seen near the embankment in summer."
+ ],
+ loc_facts_ochamchyra: [
+ "🌊 Known for its wide beach and clear water.",
+ "🏚️ Ruins of an ancient temple are nearby.",
+ "🍊 Famous for citrus groves."
+ ],
+ loc_facts_tkvarcheli: [
+ "⛰️ The city is located in a picturesque gorge, surrounded by mountains.",
+ "🚂 Railway station on a scenic branch.",
+ "💧 Unique mountain lakes are nearby."
+ ],
+ loc_facts_gal: [
+ "🌾 An important agricultural center of Abkhazia.",
+ "🍈 Famous for melons and watermelons grown in the region.",
+ "🏛️ Has a rich history related to Mingrelian culture."
+ ],
+ loc_facts_new_athos: [
+ "⛪ Famous for the New Athos Monastery (19th century).",
+ "🕯️ A tour of the cave is one of the most vivid experiences.",
+ "🚞 A cable car runs to the monastery."
+ ],
+ loc_facts_primorsk: [
+ "🌅 A cozy town with excellent beaches.",
+ "🏞️ Close to the Pitsunda Nature Reserve.",
+ "🍷 Homemade wine is produced in the area."
+ ],
+ loc_facts_gudauta: [
+ "🎖️ City of military glory, birthplace of many heroes.",
+ "🏖️ Wide pebble beaches – some of the best in Abkhazia.",
+ "🍇 Traditional vineyards and famous grape varieties."
+ ],
+ loc_facts_default: "✨ Amazing places are waiting for you!"
+ },
+ ab: {
+ nav_about: "Ҳара ҳхәыҷра",
+ nav_food: "Аџьа",
+ nav_location: "Ҳара иҟоу",
+ nav_booking: "Аҭагалара",
+ hero_title: "Бзиала шәаабеит",
+ hero_subtitle: "Амшын Еиқәа аԥшазы уара уидеалтә уахыҧсыра",
+ hero_btn: "Аҭаӡара аҭагалатә",
+ about_title: "Амшын ашьапыла ихьчо",
+ about_subtitle: "Гәдоуҭа иаҵәаку аҧшаҳәақәа",
+ about_text: "Ҳара ахәҭа ҳҟоуп агәаҟаратә ақыҭа Мгудзырхуа. Ҳара ҳааҭауеит комфорттә аҭаӡарақәа нас амшын аҟныҵла аҩаӡара.",
+ about_extra: "Гәдоуҭа араион иҭоуҳәоуп «Аԥсны Аџьа аԥша» ҳәа – абар аҧшаҳәақәа иреиҳау, амшын аҵаԥхьа ишәоит +28°C, уи аҭыԥ амикроклимат ҳаирҭоит ашьха нас амшын.",
+ 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: "км",
+ // Факты об городах на абхазском (упрощённо, для демонстрации)
+ loc_facts_sukhum: [
+ "🏛️ Адунеи аиҳабылакьықәа руакы, VI ашәышықәса рахь нҵа иҟоуп.",
+ "🌿 Аботаникатә сад — Акавказ аиҳабылакьықәа руакы (1838 ш.).",
+ "🐬 Амшын аҟынӡа дельфинқәа аԥсабарала уаԥхьоит."
+ ],
+ loc_facts_ochamchyra: [
+ "🌊 Иҭоуҳәоуп иаау аҧшаҳәаҟынтәи ласа аҵакыра.",
+ "🏚️ Иҝеиԥшу аҩныҵҟатәи ацқьатә уахәама иҟоуп.",
+ "🍊 Ацитрусқәа рҵаҵәра рымоуп."
+ ],
+ loc_facts_tkvarcheli: [
+ "⛰️ Ақалақь ашьхақәа рыкәтә аҟны иҟоуп.",
+ "🚂 Ацәахаҵатә аиаша аҟны астанциа.",
+ "💧 Ихадоу ашьхатә иоу аӡиқәа ҷыдала иҟоуп."
+ ],
+ loc_facts_gal: [
+ "🌾 Аԥсны аҳәынҭқарратә аԥштәыҩсатә центр.",
+ "🍈 Иҭоуҳәоуп аҵәа, арбузқәа.",
+ "🏛️ Амингрел ҳәынҭқарратә культура (америкатәи америкаҭтәи америкатәи америкаҭ) иааҵанакуеит."
+ ],
+ loc_facts_new_athos: [
+ "⛪ Иҭоуҳәоуп Афон Ҵыцтәи ауахәама (XIX ашә.).",
+ "🕯️ Ацқьатә хьаҧсаҟны аиҭаҵра — аиҳабылакьықәа руакы.",
+ "🚞 Ауахәамаҟны аканат аҩра ұсуеит."
+ ],
+ loc_facts_primorsk: [
+ "🌅 Амшын аԥшазы ухыҧсыразы ҷыдатә ақыҭа.",
+ "🏞️ Пицундатә заповедник аҟынтәи аҩаӡара.",
+ "🍷 Аҭыҧ аҟны аҭаацәарантәи аҵаа аҟаҵоуп."
+ ],
+ loc_facts_gudauta: [
+ "🎖️ Аиааира аиҭаҵра ақалақь, аиааираҭҵаақәа рҭаацәара.",
+ "🏖️ Иаау аҧшаҳәақәа — Аԥсны аиҳабылакьықәа руакы.",
+ "🍇 Аҭыԥтәи авиноградникқәа нас иҭоуҳәоу авин асортқәа."
+ ],
+ loc_facts_default: "✨ Амилакьатә аҭыԥқәа шәаажәлар!"
+ }
+};
+
+// Функция закрытия модального окна (глобальная, используется также в location.js)
+window.closeModal = function() {
+ const modal = document.getElementById('cityModal');
+ if (modal) modal.style.display = 'none';
+};
+
+// Принятие куки
+window.acceptCookies = function() {
+ localStorage.setItem('cookiesAccepted', 'true');
+ const banner = document.getElementById('cookieBanner');
+ if (banner) banner.classList.remove('show');
};
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;
+ // Циклическая смена фона Hero
+ const hero = document.querySelector('.hero');
+ const images = ['img/h777.webp', 'img/h777o.webp', 'img/h777l.webp', 'img/h777z.webp'];
+ let currentImg = 0;
-const setHeroBackground = () => {
- const img = new Image();
- img.src = images[currentImg];
- img.onload = () => {
- hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`;
+ const setHeroBackground = () => {
+ const img = new Image();
+ img.src = images[currentImg];
+ img.onload = () => {
+ hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`;
+ };
};
-};
-setHeroBackground();
-setInterval(() => {
- currentImg = (currentImg + 1) % images.length;
setHeroBackground();
-}, 15000);
+ setInterval(() => {
+ currentImg = (currentImg + 1) % images.length;
+ setHeroBackground();
+ }, 15000);
-// Локализация основных элементов (с data-i18n)
-const langSelect = document.getElementById('langSwitch');
-let currentLang = localStorage.getItem('siteLang') || 'ru';
+ // Локализация основных элементов (с 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 (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 (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;
-updateText(currentLang);
-langSelect.onchange = (e) => updateText(e.target.value);
-
-// Cookie
-if (!localStorage.getItem('cookiesAccepted')) {
- setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
-}
-
-// Форма бронирования
-const bookingForm = document.getElementById('bookingForm');
-if (bookingForm) {
- bookingForm.onsubmit = (e) => {
- e.preventDefault();
- alert(window.translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
+ const updateText = (lang) => {
+ // Обновляем элементы с data-i18n
+ document.querySelectorAll('[data-i18n]').forEach(el => {
+ const key = el.getAttribute('data-i18n');
+ 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 (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);
+ }
};
-}
-// Анимации при скролле
-const obs = new IntersectionObserver(entries => {
- entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
-});
-document.querySelectorAll('.animate').forEach(el => {
- el.style.animationPlayState = 'paused';
- obs.observe(el);
-});
-});
+ langSelect.value = currentLang;
+ updateText(currentLang);
+ langSelect.onchange = (e) => updateText(e.target.value);
-function acceptCookies() {
-localStorage.setItem('cookiesAccepted', 'true');
-const banner = document.getElementById('cookieBanner');
-if (banner) banner.classList.remove('show');
-}
\ No newline at end of file
+ // Cookie
+ if (!localStorage.getItem('cookiesAccepted')) {
+ setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
+ }
+
+ // Форма бронирования
+ 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 => {
+ entries.forEach(en => { if (en.isIntersecting) en.target.style.animationPlayState = 'running'; });
+ });
+ document.querySelectorAll('.animate').forEach(el => {
+ el.style.animationPlayState = 'paused';
+ obs.observe(el);
+ });
+
+ // Модальное окно: закрытие по крестику и по клику на фон
+ const modal = document.getElementById('cityModal');
+ if (modal) {
+ const closeBtn = modal.querySelector('.modal-close');
+ if (closeBtn) closeBtn.addEventListener('click', window.closeModal);
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) window.closeModal();
+ });
+ }
+});
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 1202ec7..686fc0e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,63 +1,168 @@
:root {
---primary: #005f73;
---secondary: #0a9396;
---light: #e9d8a6;
---dark: #001219;
---bg: #f8f9fa;
---white: #ffffff;
---input-bg: #f0f4f5;
+ --primary: #005f73;
+ --secondary: #0a9396;
+ --light: #e9d8a6;
+ --dark: #001219;
+ --bg: #f8f9fa;
+ --white: #ffffff;
+ --input-bg: #f0f4f5;
+}
+
+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;
+ margin: 0;
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
-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);
-color: var(--white);
-padding: 1rem 5%;
-position: fixed;
-width: 90%;
-z-index: 100;
-display: flex;
-justify-content: space-between;
-align-items: center;
-backdrop-filter: blur(10px);
-box-shadow: 0 2px 15px rgba(0,0,0,0.2);
+ background: rgba(0, 18, 25, 0.95);
+ color: var(--white);
+ padding: 1rem 5%;
+ position: fixed;
+ width: 90%;
+ z-index: 100;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ backdrop-filter: blur(10px);
+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}
+
+.logo {
+ font-weight: 800;
+ font-size: 1.2rem;
+ letter-spacing: 1px;
+}
+
.lang-switch {
-background: rgba(255,255,255,0.1);
-color: var(--white);
-border: 1px solid rgba(255,255,255,0.3);
-padding: 6px 10px;
-border-radius: 8px;
-cursor: pointer;
-outline: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--white);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ padding: 6px 10px;
+ border-radius: 8px;
+ cursor: pointer;
+ 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);
}
-.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;
+ 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;
+}
+
+.hero h1 {
+ font-size: clamp(2.5rem, 8vw, 5rem);
+ font-weight: 800;
+ line-height: 1.1;
}
-.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); }
-.section-title { font-size: clamp(2rem, 5vw, 3rem); color: var(--primary); margin-bottom: 3.5rem; text-align: center; }
-.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--secondary); margin: 15px auto; border-radius: 2px; }
-.about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
-@media (min-width: 992px) { .about-grid { grid-template-columns: 1fr 1fr; } }
-.about-image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
-.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; }
+section {
+ padding: 6rem 10%;
+}
+
+.white-bg {
+ background: var(--white);
+}
+
+.section-title {
+ font-size: clamp(2rem, 5vw, 3rem);
+ color: var(--primary);
+ margin-bottom: 3.5rem;
+ text-align: center;
+}
+
+.section-title::after {
+ content: '';
+ display: block;
+ width: 60px;
+ height: 4px;
+ background: var(--secondary);
+ margin: 15px auto;
+ border-radius: 2px;
+}
+
+.about-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 4rem;
+ align-items: center;
+}
+
+@media (min-width: 992px) {
+ .about-grid {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.about-image-wrapper {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+ border-radius: 24px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.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 {
@@ -65,6 +170,7 @@ section { padding: 6rem 10%; }
transform: scale(0.85);
opacity: 0;
}
+
.location-img-animate.in-view {
transform: scale(1);
opacity: 1;
@@ -72,35 +178,125 @@ section { padding: 6rem 10%; }
/* ФОРМА */
.booking-form {
-max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem;
-border-radius: 30px; box-shadow: 0 30px 60px rgba(0,18,25,0.1); border: 1px solid rgba(0,0,0,0.05);
+ max-width: 550px;
+ margin: 0 auto;
+ background: var(--white);
+ padding: 3rem;
+ border-radius: 30px;
+ box-shadow: 0 30px 60px rgba(0, 18, 25, 0.1);
+ border: 1px solid rgba(0, 0, 0, 0.05);
}
-.form-group { margin-bottom: 1.5rem; }
-.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); }
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: var(--dark);
+}
+
.form-group input {
-width: 100%; padding: 14px; border: 2px solid transparent;
-background: var(--input-bg); border-radius: 12px; transition: 0.3s;
+ width: 100%;
+ padding: 14px;
+ border: 2px solid transparent;
+ background: var(--input-bg);
+ border-radius: 12px;
+ transition: 0.3s;
+ font-size: 1rem;
}
-.form-group input:focus { outline: none; border-color: var(--secondary); background: var(--white); }
+
+.form-group input:focus {
+ outline: none;
+ border-color: var(--secondary);
+ background: var(--white);
+}
+
.btn {
-display: inline-block; padding: 16px 30px; background: var(--secondary);
-color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s;
+ display: inline-block;
+ padding: 16px 30px;
+ background: var(--secondary);
+ color: var(--white);
+ border-radius: 14px;
+ font-weight: 700;
+ border: none;
+ cursor: pointer;
+ transition: 0.3s;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn:hover {
+ background: var(--primary);
+ transform: translateY(-3px);
+}
+
+.full-width {
+ width: 100%;
}
-.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;
-background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px; transition: 0.6s; z-index: 1000;
+ position: fixed;
+ bottom: -200px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 90%;
+ max-width: 600px;
+ background: var(--dark);
+ color: var(--white);
+ padding: 20px;
+ border-radius: 20px;
+ transition: 0.6s;
+ z-index: 1000;
+ text-align: center;
+}
+
+.cookie-banner.show {
+ bottom: 20px;
+}
+
+.cookie-btn {
+ background: var(--light);
+ border: none;
+ padding: 8px 20px;
+ border-radius: 8px;
+ font-weight: 700;
+ cursor: pointer;
+ margin-top: 10px;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate {
+ animation: fadeIn 1s ease-out forwards;
+ opacity: 0;
+}
+
+.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;
}
-.cookie-banner.show { bottom: 20px; }
-.cookie-btn { background: var(--light); border: none; padding: 8px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
-.animate { animation: fadeIn 1s ease-out forwards; opacity: 0; }
-.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 {
@@ -109,25 +305,31 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
gap: 1rem;
justify-content: center;
}
+
.location-card {
padding: 1rem 1.5rem;
border-radius: 12px;
text-align: center;
min-width: 120px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
+ cursor: pointer;
}
+
.location-card:hover {
transform: translateY(-5px);
- box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+ 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;
@@ -138,6 +340,7 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
background: var(--primary);
transition: 0.3s;
}
+
.show-map-btn:hover {
background: var(--secondary);
transform: translateY(-2px);
@@ -149,23 +352,18 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
height: 400px;
border-radius: 24px;
overflow: hidden;
- box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+ 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 */
+/* Стили для секции about (модерн) */
.modern-about {
gap: 3rem;
}
@@ -205,14 +403,14 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
padding: 1rem;
border-radius: 20px;
text-align: center;
- box-shadow: 0 10px 20px rgba(0,0,0,0.05);
+ 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);
+ 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);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
.fact-icon {
@@ -230,16 +428,109 @@ footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: cent
.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);
+/* Модальное окно для фактов о городах */
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 2000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ justify-content: center;
+ align-items: center;
}
-.about-image-wrapper {
- box-shadow: 0 30px 40px rgba(0,0,0,0.08);
+.modal-content {
+ background: var(--white);
+ margin: 10% auto;
+ padding: 2rem;
+ border-radius: 30px;
+ width: 90%;
+ max-width: 500px;
+ box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
+ position: relative;
+ animation: fadeIn 0.3s ease;
+}
+
+.modal-close {
+ position: absolute;
+ top: 1rem;
+ right: 1.5rem;
+ font-size: 2rem;
+ cursor: pointer;
+ color: #666;
+ transition: 0.2s;
+}
+
+.modal-close:hover {
+ color: var(--primary);
+}
+
+.modal-content h3 {
+ color: var(--primary);
+ margin-bottom: 1rem;
+ font-size: 1.8rem;
+}
+
+.modal-facts {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.modal-fact-item {
+ padding: 0.8rem;
+ background: var(--bg);
+ border-radius: 20px;
+ border-left: 4px solid var(--secondary);
+ font-size: 1rem;
+}
+/* Блок с расстояниями до городов (карточки в стиле fact-card) */
+.location-cards {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.location-card {
+ background: var(--white); /* как у fact-card */
+ padding: 1rem;
+ border-radius: 20px; /* как у fact-card */
+ text-align: center;
+ min-width: 120px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ cursor: pointer;
+ border: 1px solid rgba(0, 0, 0, 0.03);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+}
+
+.location-card:hover {
+ transform: translateY(-5px); /* как у fact-card */
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+}
+
+.location-icon {
+ font-size: 2rem; /* увеличенная иконка, как .fact-icon */
+ margin-bottom: 0.5rem;
+}
+
+.location-title {
+ font-weight: 600;
+ color: var(--primary);
+ font-size: 0.9rem; /* под размер .fact-text */
+}
+
+.location-distance {
+ font-size: 0.9rem;
+ color: #666;
}
\ No newline at end of file