Add initial styles, logo, and language support
- Added custom font 'Onest' and main CSS styles for the application. - Created a logo SVG file for branding. - Implemented language translations for Russian and English. - Developed JavaScript functions for language selection and social link creation. - Set up particle effects for a dynamic background. - Included download button functionality with a specified URL.
This commit is contained in:
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
140
src/js/main.js
Normal file
140
src/js/main.js
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
|
||||||
|
// Текущий язык (по умолчанию русский)
|
||||||
|
let currentLanguage = localStorage.getItem('language') || 'ru';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Функция для обновления текста на странице
|
||||||
|
function updateLanguage(lang) {
|
||||||
|
const t = translations[lang];
|
||||||
|
if (!t) return;
|
||||||
|
|
||||||
|
document.getElementById('mainTitle').textContent = t.comingSoon;
|
||||||
|
document.getElementById('subtitle').textContent = t.subtitle;
|
||||||
|
document.getElementById('downloadBtn').textContent = t.downloadBtn;
|
||||||
|
document.getElementById('betaNotice').textContent = t.betaNotice;
|
||||||
|
|
||||||
|
// Сохранить выбранный язык
|
||||||
|
localStorage.setItem('language', lang);
|
||||||
|
currentLanguage = lang;
|
||||||
|
|
||||||
|
// Применить RTL для арабского
|
||||||
|
if (lang === 'ar') {
|
||||||
|
document.body.classList.add('rtl');
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove('rtl');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для инициализации переключателя языка
|
||||||
|
function initLanguageSelector() {
|
||||||
|
const selector = document.getElementById('languageSelect');
|
||||||
|
selector.value = currentLanguage;
|
||||||
|
|
||||||
|
selector.addEventListener('change', function () {
|
||||||
|
updateLanguage(this.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function createSocialLinks() {
|
||||||
|
const container = document.getElementById('socialLinks');
|
||||||
|
|
||||||
|
socialLinks.forEach(link => {
|
||||||
|
const linkElement = document.createElement('a');
|
||||||
|
linkElement.href = link.url;
|
||||||
|
linkElement.className = `social-btn platform-${link.platform}`;
|
||||||
|
linkElement.target = '_blank';
|
||||||
|
linkElement.rel = 'noopener noreferrer';
|
||||||
|
|
||||||
|
linkElement.innerHTML = `
|
||||||
|
<div class="social-icon platform-${link.platform}"><img src="${link.icon}"/></div>
|
||||||
|
<span>${link.name}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(linkElement);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для создания частиц
|
||||||
|
function createParticles() {
|
||||||
|
const particlesContainer = document.getElementById('particles');
|
||||||
|
const particleCount = 50;
|
||||||
|
|
||||||
|
for (let i = 0; i < particleCount; i++) {
|
||||||
|
const particle = document.createElement('div');
|
||||||
|
particle.className = 'particle';
|
||||||
|
particle.style.left = Math.random() * 100 + '%';
|
||||||
|
particle.style.top = Math.random() * 100 + '%';
|
||||||
|
particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
|
||||||
|
particle.style.animationDelay = Math.random() * 2 + 's';
|
||||||
|
particlesContainer.appendChild(particle);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Инициализация
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Инициализировать переключатель языка
|
||||||
|
initLanguageSelector();
|
||||||
|
|
||||||
|
// Применить сохраненный язык
|
||||||
|
updateLanguage(currentLanguage);
|
||||||
|
|
||||||
|
// Установить ссылку для скачивания
|
||||||
|
document.getElementById('downloadBtn').href = downloadUrl;
|
||||||
|
|
||||||
|
// Создать социальные ссылки
|
||||||
|
createSocialLinks();
|
||||||
|
|
||||||
|
// Создать частицы
|
||||||
|
createParticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Функция для добавления новой ссылки (для удобства)
|
||||||
|
function addSocialLink(platform, name, url, icon) {
|
||||||
|
socialLinks.push({ platform, name, url, icon });
|
||||||
|
// Пересоздать ссылки
|
||||||
|
document.getElementById('socialLinks').innerHTML = '';
|
||||||
|
createSocialLinks();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Альтернативные источники иконок для разных платформ
|
||||||
|
|
||||||
|
// Функция для смены источника иконок
|
||||||
|
function changeIconSource(source) {
|
||||||
|
socialLinks.forEach(link => {
|
||||||
|
if (iconSources[source]) {
|
||||||
|
link.icon = iconSources[source](link.platform);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Пересоздать ссылки с новыми иконками
|
||||||
|
document.getElementById('socialLinks').innerHTML = '';
|
||||||
|
createSocialLinks();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для изменения ссылки на скачивание
|
||||||
|
function setDownloadUrl(url) {
|
||||||
|
document.getElementById('downloadBtn').href = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для добавления нового языка
|
||||||
|
function addLanguage(code, translations, flagEmoji, nativeName) {
|
||||||
|
// Добавить переводы
|
||||||
|
translations[code] = translations;
|
||||||
|
|
||||||
|
// Добавить опцию в селектор
|
||||||
|
const selector = document.getElementById('languageSelect');
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = code;
|
||||||
|
option.textContent = `${flagEmoji} ${nativeName}`;
|
||||||
|
selector.appendChild(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для получения текущего языка
|
||||||
|
function getCurrentLanguage() {
|
||||||
|
return currentLanguage;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для получения всех доступных языков
|
||||||
|
function getAvailableLanguages() {
|
||||||
|
return Object.keys(translations);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user