104 lines
3.9 KiB
JavaScript
104 lines
3.9 KiB
JavaScript
// Данные для фактов (ключи переводов)
|
|
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);
|
|
}); |