.

2026-05-02 21:51:32 +05:00
parent e1a75c0bc5
commit 8d60188725
5 changed files with 605 additions and 153 deletions
--- a/public/about.js
+++ b/public/about.js
@@ -0,0 +1,104 @@
+// Данные для фактов (ключи переводов)
+const factsData = [
+    { icon: "🏖️", key: "fact1" },
+    { icon: "🌊", key: "fact2" },
+    { icon: "☀️", key: "fact3" },
+    { icon: "🍷", key: "fact4" }
+];
+
+// Генерация HTML для about
+function generateAboutHTML(lang) {
+    const title = window.translations[lang].about_title;
+    const subtitle = window.translations[lang].about_subtitle;
+    const mainText = window.translations[lang].about_text;
+    const extraText = window.translations[lang].about_extra || "";
+
+    // Генерируем карточки фактов на основе переводов
+    const factsHTML = factsData.map(fact => `
+        <div class="fact-card">
+            <div class="fact-icon">${fact.icon}</div>
+            <div class="fact-text">${window.translations[lang][fact.key]}</div>
+        </div>
+    `).join('');
+
+    return `
+        <h2 class="section-title animate" data-i18n="about_title">${title}</h2>
+        <div class="about-grid modern-about">
+            <div class="about-text animate delay-1">
+                <h3>${subtitle}</h3>
+                <p class="main-description">${mainText}</p>
+                <div class="extra-description">
+                    <p>${extraText}</p>
+                </div>
+                <div class="facts-grid">
+                    ${factsHTML}
+                </div>
+            </div>
+            <div class="about-image-wrapper animate delay-2">
+                <img src="img/beach.webp" alt="Пляж в Мгудзырхуа" class="about-img" loading="lazy">
+            </div>
+        </div>
+    `;
+}
+
+// Рендер секции about
+function renderAbout(lang) {
+    const aboutSection = document.getElementById('about');
+    if (!aboutSection) return;
+
+    aboutSection.innerHTML = generateAboutHTML(lang);
+
+    // Повторно запускаем анимации для новых .animate
+    document.querySelectorAll('.animate').forEach(el => {
+        if (el.style.animationPlayState !== 'running') {
+            el.style.animationPlayState = 'paused';
+            const obs = new IntersectionObserver(entries => {
+                entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
+            });
+            obs.observe(el);
+        }
+    });
+}
+
+// Обновление текстов без перерисовки (если нужно)
+function updateAboutTexts(lang) {
+    const aboutSection = document.getElementById('about');
+    if (!aboutSection || !aboutSection.innerHTML.trim()) return;
+
+    const title = aboutSection.querySelector('.section-title');
+    if (title) title.innerHTML = window.translations[lang].about_title;
+
+    const subtitle = aboutSection.querySelector('.about-text h3');
+    if (subtitle) subtitle.innerHTML = window.translations[lang].about_subtitle;
+
+    const mainDesc = aboutSection.querySelector('.main-description');
+    if (mainDesc) mainDesc.innerHTML = window.translations[lang].about_text;
+
+    const extraDesc = aboutSection.querySelector('.extra-description p');
+    if (extraDesc && window.translations[lang].about_extra) extraDesc.innerHTML = window.translations[lang].about_extra;
+
+    const factCards = aboutSection.querySelectorAll('.fact-card');
+    factCards.forEach((card, idx) => {
+        if (factsData[idx]) {
+            const textDiv = card.querySelector('.fact-text');
+            if (textDiv) textDiv.innerHTML = window.translations[lang][factsData[idx].key];
+        }
+    });
+}
+
+// Функция для вызова из scripts.js при смене языка
+function updateAboutLanguage(lang) {
+    if (document.getElementById('about').innerHTML.trim() !== '') {
+        updateAboutTexts(lang);
+    } else {
+        renderAbout(lang);
+    }
+}
+
+window.updateAboutLanguage = updateAboutLanguage;
+
+// Инициализация
+document.addEventListener("DOMContentLoaded", () => {
+    const currentLang = localStorage.getItem('siteLang') || 'ru';
+    renderAbout(currentLang);
+});
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,8 @@
    <title>Hotel 777 | Отдых в Абхазии</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
+    <!-- Яндекс.Карты API (замените YOUR_API_KEY на реальный ключ) -->
+    <script src="https://api-maps.yandex.ru/2.1/?apikey=YOUR_YANDEX_MAP_API_KEY&lang=ru_RU"></script>
 </head>
 <body>

@@ -26,26 +28,15 @@
        </select>
    </header>

-    <!-- Hero секция с циклическим фоном -->
+    <!-- Hero секция -->
    <section class="hero">
        <h1 class="animate" data-i18n="hero_title">Добро пожаловать</h1>
        <p class="animate delay-1" data-i18n="hero_subtitle">Ваш идеальный отдых на берегу Черного моря</p>
        <a href="#booking" class="btn animate delay-2" data-i18n="hero_btn">Забронировать номер</a>
    </section>

-    <!-- Секция "О нас" -->
-    <section id="about" class="white-bg">
-        <h2 class="section-title animate" data-i18n="about_title">Море в шаговой доступности</h2>
-        <div class="about-grid">
-            <div class="about-text animate delay-1">
-                <h3 data-i18n="about_subtitle">Бескрайние пляжи Гудауты</h3>
-                <p data-i18n="about_text">Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.</p>
-            </div>
-            <div class="about-image-wrapper animate delay-2">
-                <img src="img/beach.webp" alt="Пляж в Мгудзырхуа" class="about-img" loading="lazy">
-            </div>
-        </div>
-    </section>
+    <!-- Секция "О нас" (динамически через about.js) -->
+    <section id="about" class="white-bg"></section>

    <!-- Секция "Кухня" -->
    <section id="food">
@@ -57,8 +48,6 @@
            <div class="about-text animate delay-2">
                <h3 data-i18n="food_subtitle">Домашняя кухня из местных продуктов</h3>
                <p data-i18n="food_text">Почувствуйте настоящее гостеприимство! Мы готовим из того, что выросло прямо здесь: свежайший сыр сулугуни, ароматная абыста, сочные овощи с грядки и домашнее вино.</p>
-    
-    <!-- Дополнительный блок для туристов – повышает клиентоориентированность -->
                <div class="food-benefits">
                    <p><strong>✨ Для наших гостей:</strong></p>
                    <ul>
@@ -74,70 +63,8 @@
        </div>
    </section>

-    <!-- Секция "Где мы" с картинкой znak и картой -->
-    <section id="location" class="white-bg">
-        <h2 class="section-title animate" data-i18n="loc_title">Удобное расположение</h2>
-        
-        <div class="about-grid">
-            <div class="about-text animate delay-1" >
-                <p style="font-size:1.1rem; margin-bottom:1.5rem; ">
-                    Наш Адрес:
-                </p>
-                <div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
-                    <span style="font-size:1.1rem;">Набережная улица, 1, село Мгудзырхуа, Гудаутский район, Абхазия</span>
-                </div>
-                <div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
-                    <span style="font-size:1.1rem;">Координаты: 43.139637, 40.527054</span>
-                </div>
-                <div style="display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;">
-<div class="location-cards">
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">Сухум</div>
-        <div class="location-distance">51 км</div>
-    </div>
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">Очамчыра</div>
-        <div class="location-distance">105 км</div>
-    </div>
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">Ткуарчал</div>
-        <div class="location-distance">165 км</div>
-    </div>
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">Гал</div>
-        <div class="location-distance">145 км</div>
-    </div>
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">Новый Афон</div>
-        <div class="location-distance">25 км</div>
-    </div>
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">Приморск</div>
-        <div class="location-distance">20 км</div>
-    </div>
-    <div class="location-card">
-        <div class="location-icon">🚗</div>
-        <div class="location-title">🚗 Гудаута</div>
-        <div class="location-distance">10 км</div>
-    </div>
-</div>
-                </div>
-            </div>
-            
-            <!-- Картинка указателя -->
-            <div class="about-image-wrapper animate delay-2">
-                <img src="img/znak.webp" alt="Указатель Hotel 777" class="about-img signpost-img" loading="lazy">
-            </div>
-        </div>
-        
-        <!-- Контейнер для Яндекс.Карты -->
-    </section>
+    <!-- Секция "Где мы" (динамически через location.js) -->
+    <section id="location" class="white-bg"></section>

    <!-- Секция "Бронирование" -->
    <section id="booking">
@@ -145,8 +72,7 @@
        <form id="bookingForm" class="booking-form animate">
            <div class="form-group">
                <label for="name" data-i18n="label_name">Ваше имя</label>
-                <input type="text" id="name" name="name" required 
-                       data-i18n-ph="ph_name" placeholder="Иван Иванов">
+                <input type="text" id="name" name="name" required data-i18n-ph="ph_name" placeholder="Иван Иванов">
            </div>
            <div class="form-group">
                <label for="phone" data-i18n="label_phone">Номер телефона</label>
@@ -160,18 +86,17 @@
        </form>
    </section>

-    <!-- Футер -->
    <footer>
        <p data-i18n="footer_text">© 2026 Hotel 777. Абхазия, Мгудзырхуа.</p>
    </footer>

-    <!-- Cookie баннер -->
    <div id="cookieBanner" class="cookie-banner">
        <p data-i18n="cookie_text">Мы используем файлы cookie для улучшения работы сайта.</p>
        <button class="cookie-btn" onclick="acceptCookies()" data-i18n="cookie_btn">Согласен</button>
    </div>

-    <!-- Подключение скриптов -->
    <script src="scripts.js"></script>
+    <script src="about.js"></script>
+    <script src="location.js"></script>
 </body>
 </html>
--- a/public/location.js
+++ b/public/location.js
@@ -0,0 +1,236 @@
+// Координаты отеля
+const HOTEL_COORDS = [43.139637, 40.527054];
+const HOTEL_ADDRESS = "Набережная улица, 1, село Мгудзырхуа, Гудаутский район, Абхазия";
+
+// Данные городов с расстояниями (км) и ключами для перевода
+const citiesData = [
+    { key: "sukhum", distance: 51 },
+    { key: "ochamchyra", distance: 105 },
+    { key: "tkvarcheli", distance: 165 },
+    { key: "gal", distance: 145 },
+    { key: "new_athos", distance: 25 },
+    { key: "primorsk", distance: 20 },
+    { key: "gudauta", distance: 10 }
+];
+
+// Цвета для карточек городов (циклически)
+const cityColors = [
+    "#FFB3BA", "#C5E99B", "#B5E3FF", "#FFD6A5", "#D4A5FF", "#A5FFD6", "#FFA5D6"
+];
+
+let map = null;
+let placemark = null;
+let mapVisible = false;
+let currentLang = localStorage.getItem('siteLang') || 'ru';
+
+// Функция получения перевода названия города
+function getCityTranslation(cityKey, lang) {
+    const transMap = {
+        sukhum: window.translations[lang].loc_city_sukhum,
+        ochamchyra: window.translations[lang].loc_city_ochamchyra,
+        tkvarcheli: window.translations[lang].loc_city_tkvarcheli,
+        gal: window.translations[lang].loc_city_gal,
+        new_athos: window.translations[lang].loc_city_new_athos,
+        primorsk: window.translations[lang].loc_city_primorsk,
+        gudauta: window.translations[lang].loc_city_gudauta
+    };
+    return transMap[cityKey] || cityKey;
+}
+
+// Генерация HTML для секции location (карта под картинкой, кнопка между координатами и городами)
+function generateLocationHTML(lang) {
+    const addressLabel = window.translations[lang].loc_address_label;
+    const coordsLabel = window.translations[lang].loc_coords_label;
+    const kmLabel = window.translations[lang].loc_km;
+    const showMapBtnText = window.translations[lang].loc_show_map || "Показать карту";
+
+    // Создаём разноцветные карточки городов
+    const cardsHTML = citiesData.map((city, idx) => `
+        <div class="location-card" style="background-color: ${cityColors[idx % cityColors.length]}">
+            <div class="location-icon">🚗</div>
+            <div class="location-title">${getCityTranslation(city.key, lang)}</div>
+            <div class="location-distance">${city.distance} ${kmLabel}</div>
+        </div>
+    `).join('');
+
+    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;">
+                    <span style="font-size:1.1rem;">${HOTEL_ADDRESS}</span>
+                </div>
+                <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>
+            </div>
+        </div>
+    `;
+}
+
+// Инициализация карты (вызывается только при первом нажатии кнопки)
+function initMapOnce() {
+    if (!window.ymaps) {
+        console.warn("Яндекс.Карты не загружены");
+        return;
+    }
+    const mapContainer = document.getElementById('yandexMap');
+    if (!mapContainer) return;
+
+    if (!map) {
+        window.ymaps.ready(() => {
+            map = new window.ymaps.Map('yandexMap', {
+                center: HOTEL_COORDS,
+                zoom: 14,
+                controls: ['zoomControl', 'fullscreenControl']
+            });
+            placemark = new window.ymaps.Placemark(HOTEL_COORDS, {
+                hintContent: HOTEL_ADDRESS,
+                balloonContent: HOTEL_ADDRESS
+            }, {
+                preset: 'islands#redDotIcon'
+            });
+            map.geoObjects.add(placemark);
+        });
+    }
+}
+
+// Показать карту (по кнопке)
+function showMap() {
+    const mapContainer = document.getElementById('yandexMap');
+    if (!mapContainer) return;
+    
+    if (!map) {
+        initMapOnce();
+        // Небольшая задержка, чтобы карта успела создаться, затем показываем контейнер
+        setTimeout(() => {
+            mapContainer.style.display = 'block';
+            if (map) {
+                window.ymaps.ready(() => {
+                    map.container.fitToViewport();
+                });
+            }
+        }, 300);
+    } else {
+        mapContainer.style.display = 'block';
+        window.ymaps.ready(() => {
+            map.container.fitToViewport();
+        });
+    }
+    mapVisible = true;
+}
+
+// Обновление текстов (без пересоздания карты)
+function updateLocationTexts(lang) {
+    const locationSection = document.getElementById('location');
+    if (!locationSection) return;
+
+    const title = locationSection.querySelector('.section-title');
+    if (title && window.translations[lang].loc_title) {
+        title.innerHTML = window.translations[lang].loc_title;
+    }
+
+    const aboutText = locationSection.querySelector('.about-text');
+    if (aboutText) {
+        const addressLabelStrong = aboutText.querySelector('p strong');
+        if (addressLabelStrong) addressLabelStrong.textContent = window.translations[lang].loc_address_label;
+        
+        const coordsSpan = aboutText.querySelector('div:last-of-type span strong');
+        if (coordsSpan) coordsSpan.textContent = window.translations[lang].loc_coords_label;
+        
+        // Обновляем текст кнопки
+        const showBtn = aboutText.querySelector('#showMapBtn');
+        if (showBtn && window.translations[lang].loc_show_map) {
+            showBtn.textContent = window.translations[lang].loc_show_map;
+        }
+        
+        // Обновляем карточки городов
+        const cards = aboutText.querySelectorAll('.location-card');
+        cards.forEach((card, idx) => {
+            if (citiesData[idx]) {
+                const titleDiv = card.querySelector('.location-title');
+                if (titleDiv) titleDiv.textContent = getCityTranslation(citiesData[idx].key, lang);
+                const distSpan = card.querySelector('.location-distance');
+                if (distSpan) distSpan.textContent = `${citiesData[idx].distance} ${window.translations[lang].loc_km}`;
+            }
+        });
+    }
+
+    if (map && placemark) {
+        placemark.properties.set({
+            hintContent: HOTEL_ADDRESS,
+            balloonContent: HOTEL_ADDRESS
+        });
+    }
+}
+
+// Полная отрисовка секции location
+function renderLocation(lang) {
+    const locationSection = document.getElementById('location');
+    if (!locationSection) return;
+
+    locationSection.innerHTML = generateLocationHTML(lang);
+    
+    // Анимация картинки при прокрутке
+    const signImg = document.getElementById('signpostImg');
+    if (signImg) {
+        const imgObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('in-view');
+                    imgObserver.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.3 });
+        imgObserver.observe(signImg);
+    }
+    
+    // Назначаем обработчик на кнопку показа карты
+    const showBtn = document.getElementById('showMapBtn');
+    if (showBtn) {
+        showBtn.addEventListener('click', showMap);
+    }
+    
+    // Запуск анимаций для новых .animate элементов
+    document.querySelectorAll('.animate').forEach(el => {
+        if (el.style.animationPlayState !== 'running') {
+            el.style.animationPlayState = 'paused';
+            const obs = new IntersectionObserver(entries => {
+                entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
+            });
+            obs.observe(el);
+        }
+    });
+}
+
+function updateLocationLanguage(lang) {
+    currentLang = lang;
+    if (document.getElementById('location').innerHTML.trim() !== '') {
+        updateLocationTexts(lang);
+    } else {
+        renderLocation(lang);
+    }
+}
+
+window.updateLocationLanguage = updateLocationLanguage;
+
+document.addEventListener("DOMContentLoaded", () => {
+    setTimeout(() => {
+        renderLocation(currentLang);
+    }, 300);
+});
--- a/public/scripts.js
+++ b/public/scripts.js
@@ -1,4 +1,5 @@
-const translations = {
+// Глобальные переводы (расширены для location и about)
+window.translations = {
 ru: {
 nav_about: "О нас",
 nav_food: "Кухня",
@@ -9,7 +10,12 @@ hero_subtitle:  "Ваш идеальный отдых на берегу Черн
 hero_btn: "Забронировать номер",
 about_title: "Море в шаговой доступности",
 about_subtitle: "Бескрайние пляжи Гудауты",
-about_text:  "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к морю. ",
+about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.",
+about_extra: "Гудаутский район известен как «Золотой берег Абхазии» – здесь самые широкие пляжи, прогретое море и уникальный микроклимат, сочетающий горный и морской воздух.",
+fact1: "🏝️ Золотой берег Абхазии",
+fact2: "🌡️ Температура моря до +28°C летом",
+fact3: "⛰️ Чистейший воздух у подножия Кавказа",
+fact4: "🍇 Собственные виноградники и вино",
 food_title: "Вкус Абхазии",
 food_subtitle: "Домашняя кухня из местных продуктов",
 food_text: "Почувствуйте гостеприимство! Свежайший сыр сулугуни, мамалыга, овощи с грядки и домашнее вино.",
@@ -23,7 +29,18 @@ book_btn:  "Отправить заявку ",
 footer_text: "© 2026 Hotel 777. Абхазия, Мгудзырхуа.",
 cookie_text: "Мы используем файлы cookie для улучшения работы сайта.",
 cookie_btn: "Согласен",
-alert_msg:  "Спасибо! Ваша заявка принята. "
+alert_msg: "Спасибо! Ваша заявка принята.",
+loc_address_label: "Наш Адрес:",
+loc_coords_label: "Координаты:",
+loc_show_map: "Показать карту",
+loc_city_sukhum: "Сухум",
+loc_city_ochamchyra: "Очамчыра",
+loc_city_tkvarcheli: "Ткуарчал",
+loc_city_gal: "Гал",
+loc_city_new_athos: "Новый Афон",
+loc_city_primorsk: "Приморск",
+loc_city_gudauta: "Гудаута",
+loc_km: "км"
 },
 en: {
 nav_about: "About Us",
@@ -33,12 +50,17 @@ nav_booking: "Booking",
 hero_title: "Welcome",
 hero_subtitle: "Your perfect getaway on the Black Sea coast",
 hero_btn: "Book a room",
-about_title: "The sea within walking distance",
-about_subtitle: "The endless beaches of Gudauta",
-about_text: "Our hotel is located in the picturesque village of Mgudzyrkhua. We offer comfortable rooms and direct access to the sea.",
-food_title: "The Taste of Abkhazia",
+about_title: "Sea within walking distance",
+about_subtitle: "Endless beaches of Gudauta",
+about_text: "Our hotel is located in the picturesque village of Mgudzyrkhua. We offer comfortable rooms and direct access to the wide, clean pebble-sand beach.",
+about_extra: "The Gudauta district is known as the 'Golden Beach of Abkhazia' – the widest beaches, warm sea, and a unique microclimate combining mountain and sea air.",
+fact1: "🏝️ Golden Beach of Abkhazia",
+fact2: "🌡️ Sea temperature up to +28°C in summer",
+fact3: "⛰️ Cleanest air at the foot of the Caucasus",
+fact4: "🍇 Own vineyards and wine",
+food_title: "Taste of Abkhazia",
 food_subtitle: "Homemade cuisine from local ingredients",
-food_text: "Feel the hospitality! The freshest suluguni cheese, mamalyga, garden-fresh vegetables, and homemade wine.",
+food_text: "Feel the hospitality! Suluguni cheese, mamalyga, garden vegetables, and homemade wine.",
 loc_title: "Convenient location",
 book_title: "Book your holiday",
 label_name: "Your name",
@@ -49,7 +71,18 @@ book_btn: "Send request",
 footer_text: "© 2026 Hotel 777. Abkhazia, Mgudzyrkhua.",
 cookie_text: "We use cookies to improve the website.",
 cookie_btn: "Agree",
-alert_msg: "Thank you! Your request has been accepted."
+alert_msg: "Thank you! Your request has been accepted.",
+loc_address_label: "Our Address:",
+loc_coords_label: "Coordinates:",
+loc_show_map: "Show map",
+loc_city_sukhum: "Sukhum",
+loc_city_ochamchyra: "Ochamchira",
+loc_city_tkvarcheli: "Tkvarcheli",
+loc_city_gal: "Gal",
+loc_city_new_athos: "New Athos",
+loc_city_primorsk: "Primorsk",
+loc_city_gudauta: "Gudauta",
+loc_km: "km"
 },
 ab: {
 nav_about: "Ҳара ҳхәыҷра",
@@ -62,6 +95,11 @@ hero_btn: "Аҭаӡара аҭагалатә",
 about_title: "Амшын ашьапыла ихьчо",
 about_subtitle: "Гәдоуҭа иаҵәаку аҧшаҳәақәа",
 about_text: "Ҳара ахәҭа ҳҟоуп агәаҟаратә ақыҭа Мгудзырхуа. Ҳара ҳааҭауеит комфорттә аҭаӡарақәа нас амшын аҟныҵла аҩаӡара.",
+about_extra: "Гәдоуҭа араион иҭоуҳәоуп «Аԥсны Аџьа аԥша» ҳәа – абар аҧшаҳәақәа иреиҳау, амшын аҵаԥхьа ишәоит +28°C, уи аҭыԥ амикроклимат ҳаирҭоит ашьха нас амшын.",
+fact1: "🏝️ Аԥсны Аџьа аԥша",
+fact2: "🌡️ Амшын аҵаԥхьа +28°C аҟынӡа",
+fact3: "⛰️ Акавказ аҵаҟа иҟоу аҵхыҵ",
+fact4: "🍇 Ҳара авиноградникқәа нас авин",
 food_title: "Аԥсны аҵәа",
 food_subtitle: "Аџьа ҭаацәарантәи аҭыԥтә афасаҟәақәа рыла",
 food_text: "Ашьааҭра шәаазыр! Ибжьа асулугуни, абаста, аҵиаа ҵаҟатәи нас аҭаацәарантәи аҵаа.",
@@ -75,12 +113,23 @@ book_btn: "Азаявка аҭаҭатә",
 footer_text: "© 2026 Hotel 777. Аԥсны, Мгудзырхуа.",
 cookie_text: "Ҳара асаит аҟаҵара аҵәаҵәаразы cookie-файлқәа ҳхылаҩуеит.",
 cookie_btn: "Аиҭаҵра",
-alert_msg: "Иҭабуп! Шәзаявка алырҵеит."
+alert_msg: "Иҭабуп! Шәзаявка алырҵеит.",
+loc_address_label: "Ҳара адрес:",
+loc_coords_label: "Акоординатқәа:",
+loc_show_map: "Ахәаҧшра карта",
+loc_city_sukhum: "Аҟәа",
+loc_city_ochamchyra: "Очамчыра",
+loc_city_tkvarcheli: "Тҟәарчал",
+loc_city_gal: "Гал",
+loc_city_new_athos: "Афон Ҿыц",
+loc_city_primorsk: "Приморск",
+loc_city_gudauta: "Гәдоуҭа",
+loc_km: "км"
 }
 };

 document.addEventListener("DOMContentLoaded", () => {
-// Циклическая смена фона (мимикрия)
+// Циклическая смена фона Hero
 const hero = document.querySelector('.hero');
 const images = ['img/h777.webp', 'img/h777o.webp', 'img/h777l.webp', 'img/h777z.webp'];
 let currentImg = 0;
@@ -92,30 +141,36 @@ const setHeroBackground = () => {
        hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`;
    };
 };
-
-// Запуск первого изображения
 setHeroBackground();
-
-// Смена каждые 15 секунды
 setInterval(() => {
    currentImg = (currentImg + 1) % images.length;
    setHeroBackground();
 }, 15000);

-// Локализация
+// Локализация основных элементов (с data-i18n)
 const langSelect = document.getElementById('langSwitch');
 let currentLang = localStorage.getItem('siteLang') || 'ru';

 const updateText = (lang) => {
+    // Обновляем элементы с data-i18n
    document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.getAttribute('data-i18n');
-        if (translations[lang][key]) el.innerHTML = translations[lang][key];
+        if (window.translations[lang][key]) el.innerHTML = window.translations[lang][key];
    });
+    // Обновляем плейсхолдеры
    document.querySelectorAll('[data-i18n-ph]').forEach(el => {
        const key = el.getAttribute('data-i18n-ph');
-        if (translations[lang][key]) el.placeholder = translations[lang][key];
+        if (window.translations[lang][key]) el.placeholder = window.translations[lang][key];
    });
    localStorage.setItem('siteLang', lang);
+    
+    // Вызываем обновление динамических секций, если функции определены
+    if (typeof window.updateLocationLanguage === 'function') {
+        window.updateLocationLanguage(lang);
+    }
+    if (typeof window.updateAboutLanguage === 'function') {
+        window.updateAboutLanguage(lang);
+    }
 };

 langSelect.value = currentLang;
@@ -127,11 +182,14 @@ if (!localStorage.getItem('cookiesAccepted')) {
    setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
 }

-// Форма
-document.getElementById('bookingForm').onsubmit = (e) => {
+// Форма бронирования
+const bookingForm = document.getElementById('bookingForm');
+if (bookingForm) {
+    bookingForm.onsubmit = (e) => {
        e.preventDefault();
-    alert(translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
+        alert(window.translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
    };
+}

 // Анимации при скролле
 const obs = new IntersectionObserver(entries => {
@@ -145,5 +203,6 @@ document.querySelectorAll('.animate').forEach(el => {

 function acceptCookies() {
 localStorage.setItem('cookiesAccepted', 'true');
-document.getElementById('cookieBanner').classList.remove('show');
+const banner = document.getElementById('cookieBanner');
+if (banner) banner.classList.remove('show');
 }
--- a/public/style.css
+++ b/public/style.css
@@ -10,6 +10,7 @@
 html { font-size: 16px; scroll-behavior: smooth; }
@media (min-width: 2000px) { html { font-size: 22px; } }
 body { background: var(--bg); color: var(--dark); line-height: 1.6; }
+
 /* ШАПКА */
 header {
 background: rgba(0, 18, 25, 0.95);
@@ -36,14 +37,16 @@ outline: none;
 .lang-switch option { background: var(--dark); color: var(--white); }
 nav a { color: var(--white); text-decoration: none; margin-left: clamp(10px, 2vw, 20px); font-weight: 500; transition: 0.3s; font-size: 0.9rem; }
 nav a:hover { color: var(--secondary); }
+
 /* HERO */
 .hero {
 height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
 text-align: center; color: var(--white); padding: 0 20px;
 background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/h777-tiny.webp') center/cover;
-transition: background-image 1.5s ease-in-out; /* Плавный переход */
+transition: background-image 1.5s ease-in-out;
 }
 .hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; }
+
 /* СЕКЦИИ */
 section { padding: 6rem 10%; }
 .white-bg { background: var(--white); }
@@ -55,6 +58,18 @@ section { padding: 6rem 10%; }
 .about-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
 .about-image-wrapper:hover .about-img { transform: scale(1.05); }
 .signpost-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
+
+/* Анимированная картинка-указатель */
+.location-img-animate {
+    transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1), opacity 0.8s ease;
+    transform: scale(0.85);
+    opacity: 0;
+}
+.location-img-animate.in-view {
+    transform: scale(1);
+    opacity: 1;
+}
+
 /* ФОРМА */
 .booking-form {
 max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem;
@@ -73,6 +88,7 @@ color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor
 }
 .btn:hover { background: var(--primary); transform: translateY(-3px); }
 .full-width { width: 100%; }
+
 /* COOKIE & ANIMATIONS */
 .cookie-banner {
 position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px;
@@ -85,33 +101,145 @@ background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px
 .delay-1 { animation-delay: 0.3s; }
 .delay-2 { animation-delay: 0.6s; }
 footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: center; padding: 3rem; }
-/* Блок с расстояниями до городов */
+
+/* Блок с расстояниями до городов (разноцветные карточки) */
 .location-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
 }
-
 .location-card {
-    background: var(--bg);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    min-width: 120px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.location-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
 }
-
 .location-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
 }
-
 .location-title {
    font-weight: 600;
    color: var(--primary);
 }
-
 .location-distance {
    font-size: 0.9rem;
    color: #666;
 }
+
+/* Кнопка показа карты */
+.show-map-btn {
+    background: var(--primary);
+    transition: 0.3s;
+}
+.show-map-btn:hover {
+    background: var(--secondary);
+    transform: translateY(-2px);
+}
+
+/* Карта под картинкой (скрыта по умолчанию) */
+.map-container {
+    width: 100%;
+    height: 400px;
+    border-radius: 24px;
+    overflow: hidden;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    margin-top: 1rem;
+    display: none;
+}
+@media (max-width: 768px) {
+    .map-container {
+        height: 300px;
+    }
+}
+
+/* Дополнительные стили для колонки с картинкой (вертикальное расположение) */
+.about-image-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+/* Стили для обновлённой секции about */
+.modern-about {
+    gap: 3rem;
+}
+
+.about-text h3 {
+    font-size: 1.8rem;
+    color: var(--primary);
+    margin-bottom: 1rem;
+}
+
+.main-description {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: #2c3e2f;
+    margin-bottom: 1.5rem;
+}
+
+.extra-description {
+    background: linear-gradient(135deg, #e0f2e9 0%, #f0f9f4 100%);
+    padding: 1.2rem;
+    border-radius: 20px;
+    margin: 1.5rem 0;
+    font-style: italic;
+    border-left: 4px solid var(--secondary);
+    font-size: 0.95rem;
+}
+
+.facts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.fact-card {
+    background: var(--white);
+    padding: 1rem;
+    border-radius: 20px;
+    text-align: center;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
+    transition: transform 0.2s, box-shadow 0.2s;
+    border: 1px solid rgba(0,0,0,0.03);
+}
+
+.fact-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 30px rgba(0,0,0,0.1);
+}
+
+.fact-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.fact-text {
+    font-weight: 500;
+    color: var(--dark);
+    font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+    .facts-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+    .about-text h3 {
+        font-size: 1.4rem;
+    }
+}
+
+/* Дополнительно – улучшаем общий вид кнопок и карточек */
+.btn {
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.about-image-wrapper {
+    box-shadow: 0 30px 40px rgba(0,0,0,0.08);
+}