kalugin66/hotel777
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
kalugin66
2026-05-03 12:31:01 +05:00
parent 8d60188725
commit 2e6d692ad4
4 changed files with 758 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/index.html
View File

@@ -95,6 +95,15 @@
<button class="cookie-btn" onclick="acceptCookies()" data-i18n="cookie_btn">Согласен</button>
</div>
<!-- Модальное окно для фактов о городах -->
<div id="cityModal" class="modal">
<div class="modal-content">
<span class="modal-close">&times;</span>
<h3 id="modalCityTitle"></h3>
<div id="modalFactsList" class="modal-facts"></div>
</div>
</div>
<script src="scripts.js"></script>
<script src="about.js"></script>
<script src="location.js"></script>

120
public/location.js
View File

@@ -13,11 +13,6 @@ const citiesData = [
{ key: "gudauta", distance: 10 }
];
// Цвета для карточек городов (циклически)
const cityColors = [
"#FFB3BA", "#C5E99B", "#B5E3FF", "#FFD6A5", "#D4A5FF", "#A5FFD6", "#FFA5D6"
];
let map = null;
let placemark = null;
let mapVisible = false;
@@ -37,16 +32,40 @@ function getCityTranslation(cityKey, lang) {
return transMap[cityKey] || cityKey;
}
// Генерация HTML для секции location (карта под картинкой, кнопка между координатами и городами)
// Показать модальное окно с фактами о городе
function showCityModal(cityKey, lang) {
const modal = document.getElementById('cityModal');
const titleElem = document.getElementById('modalCityTitle');
const factsContainer = document.getElementById('modalFactsList');
if (!modal || !titleElem || !factsContainer) return;
const cityName = getCityTranslation(cityKey, lang);
titleElem.textContent = cityName;
const factsKey = `loc_facts_${cityKey}`;
let factsArray = window.translations[lang][factsKey];
if (!factsArray || !factsArray.length) {
factsArray = [window.translations[lang].loc_facts_default || "Удивительные места ждут вас!"];
}
factsContainer.innerHTML = factsArray.map(fact => `<div class="modal-fact-item">${fact}</div>`).join('');
modal.style.display = 'flex';
}
function closeModal() {
const modal = document.getElementById('cityModal');
if (modal) modal.style.display = 'none';
}
// Генерация 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) => `
<div class="location-card" style="background-color: ${cityColors[idx % cityColors.length]}">
// Карточки городов – стили задаются через CSS, инлайн-цвета удалены
const cardsHTML = citiesData.map((city) => `
<div class="location-card" data-city-key="${city.key}">
<div class="location-icon">🚗</div>
<div class="location-title">${getCityTranslation(city.key, lang)}</div>
<div class="location-distance">${city.distance} ${kmLabel}</div>
@@ -56,7 +75,6 @@ function generateLocationHTML(lang) {
return `
<h2 class="section-title animate" data-i18n="loc_title">${window.translations[lang].loc_title}</h2>
<div class="about-grid">
<!-- Левая колонка: адрес, координаты, кнопка, города -->
<div class="about-text animate delay-1">
<p style="font-size:1.1rem; margin-bottom:1.5rem;"><strong>${addressLabel}</strong></p>
<div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
@@ -65,16 +83,10 @@ function generateLocationHTML(lang) {
<div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
<span style="font-size:1.1rem;"><strong>${coordsLabel}</strong> ${HOTEL_COORDS[0]}, ${HOTEL_COORDS[1]}</span>
</div>
<!-- Кнопка показа карты
<button id="showMapBtn" class="btn show-map-btn" style="margin-bottom: 1.5rem; width: 100%;">${showMapBtnText}</button>
-->
<div class="location-cards">
${cardsHTML}
</div>
</div>
<!-- Правая колонка: картинка и под ней карта (скрыта по умолчанию) -->
<div class="about-image-wrapper animate delay-2">
<img src="img/znak.webp" alt="Указатель Hotel 777" class="about-img signpost-img location-img-animate" id="signpostImg" loading="lazy">
<div id="yandexMap" class="map-container" style="display: none;"></div>
@@ -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);
});

520
public/scripts.js
View File

@@ -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');
}
// 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();
});
}
});

457
public/style.css
View File

@@ -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;
}