mirror of
https://github.com/yggdrasil-network/yggdrasil-go.git
synced 2025-08-25 08:25:07 +03:00
Enhance WebUI with multilingual support
This commit is contained in:
Andy Oknen
parent
a984fba30d
commit
008ac3d864
4 changed files with 362 additions and 45 deletions
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Yggdrasil Web Interface</title>
|
||||
<link rel="stylesheet" href="static/style.css">
|
||||
<script src="static/lang/ru.js"></script>
|
||||
<script src="static/lang/en.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -13,57 +15,169 @@
|
|||
<header>
|
||||
<div class="header-content">
|
||||
<div>
|
||||
<h1>🌳 Yggdrasil Web Interface</h1>
|
||||
<p>Network mesh management dashboard</p>
|
||||
<h1 data-key="title">🌳 Yggdrasil Web Interface</h1>
|
||||
<p data-key="subtitle">Network mesh management dashboard</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button onclick="logout()" class="logout-btn">Logout</button>
|
||||
<div class="language-switcher">
|
||||
<button onclick="switchLanguage('ru')" class="lang-btn" id="lang-ru">RU</button>
|
||||
<button onclick="switchLanguage('en')" class="lang-btn" id="lang-en">EN</button>
|
||||
</div>
|
||||
<button onclick="logout()" class="logout-btn" data-key="logout">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="status-card">
|
||||
<h2>Node Status</h2>
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot active"></span>
|
||||
<span>Active</span>
|
||||
</div>
|
||||
<p>WebUI is running and accessible</p>
|
||||
</div>
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<nav class="nav-menu">
|
||||
<div class="nav-item active" onclick="showSection('status')">
|
||||
<span class="nav-icon">📊</span>
|
||||
<span class="nav-text" data-key="nav_status">Состояние</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="showSection('peers')">
|
||||
<span class="nav-icon">🌐</span>
|
||||
<span class="nav-text" data-key="nav_peers">Пиры</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="showSection('config')">
|
||||
<span class="nav-icon">⚙️</span>
|
||||
<span class="nav-text" data-key="nav_config">Конфигурация</span>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<h3>Configuration</h3>
|
||||
<p>Manage node settings and peers</p>
|
||||
<small>Coming soon...</small>
|
||||
<main class="main-content">
|
||||
<div id="status-section" class="content-section active">
|
||||
<div class="status-card">
|
||||
<h2 data-key="status_title">Состояние узла</h2>
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot active"></span>
|
||||
<span data-key="status_active">Активен</span>
|
||||
</div>
|
||||
<p data-key="status_description">WebUI запущен и доступен</p>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<h3 data-key="network_info">Сетевая информация</h3>
|
||||
<p><span data-key="address">Адрес</span>: 200:1234:5678:9abc::1</p>
|
||||
<p><span data-key="subnet">Подсеть</span>: 300:1234:5678:9abc::/64</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3 data-key="statistics">Статистика</h3>
|
||||
<p><span data-key="uptime">Время работы</span>: 2д 15ч 42м</p>
|
||||
<p><span data-key="connections">Активных соединений</span>: 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>Peers</h3>
|
||||
<p>View and manage peer connections</p>
|
||||
<small>Coming soon...</small>
|
||||
<div id="peers-section" class="content-section">
|
||||
<div class="status-card">
|
||||
<h2 data-key="peers_title">Управление пирами</h2>
|
||||
<p data-key="peers_description">Просмотр и управление соединениями с пирами</p>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<h3 data-key="active_peers">Активные пиры</h3>
|
||||
<p data-key="active_connections">Количество активных соединений</p>
|
||||
<small data-key="coming_soon">Функция в разработке...</small>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3 data-key="add_peer">Добавить пир</h3>
|
||||
<p data-key="add_peer_description">Подключение к новому узлу</p>
|
||||
<small data-key="coming_soon">Функция в разработке...</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>Network</h3>
|
||||
<p>Network topology and routing</p>
|
||||
<small>Coming soon...</small>
|
||||
<div id="config-section" class="content-section">
|
||||
<div class="status-card">
|
||||
<h2 data-key="config_title">Конфигурация</h2>
|
||||
<p data-key="config_description">Настройки узла и параметры сети</p>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<h3 data-key="basic_settings">Основные настройки</h3>
|
||||
<p data-key="basic_settings_description">Базовая конфигурация узла</p>
|
||||
<small data-key="coming_soon">Функция в разработке...</small>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3 data-key="network_settings">Сетевые настройки</h3>
|
||||
<p data-key="network_settings_description">Параметры сетевого взаимодействия</p>
|
||||
<small data-key="coming_soon">Функция в разработке...</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Yggdrasil Network • Minimal WebUI v1.0</p>
|
||||
<p data-key="footer_text">Yggdrasil Network • Minimal WebUI v1.0</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentLanguage = localStorage.getItem('yggdrasil-language') || 'ru';
|
||||
|
||||
function updateTexts() {
|
||||
const elements = document.querySelectorAll('[data-key]');
|
||||
elements.forEach(element => {
|
||||
const key = element.getAttribute('data-key');
|
||||
if (window.translations && window.translations[currentLanguage] && window.translations[currentLanguage][key]) {
|
||||
element.textContent = window.translations[currentLanguage][key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function switchLanguage(lang) {
|
||||
currentLanguage = lang;
|
||||
localStorage.setItem('yggdrasil-language', lang);
|
||||
|
||||
// Update active button
|
||||
document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active'));
|
||||
document.getElementById('lang-' + lang).classList.add('active');
|
||||
|
||||
updateTexts();
|
||||
}
|
||||
|
||||
function logout() {
|
||||
if (confirm('Are you sure you want to logout?')) {
|
||||
const confirmText = window.translations[currentLanguage]['logout_confirm'];
|
||||
if (confirm(confirmText)) {
|
||||
window.location.href = '/auth/logout';
|
||||
}
|
||||
}
|
||||
|
||||
function showSection(sectionName) {
|
||||
// Hide all sections
|
||||
const sections = document.querySelectorAll('.content-section');
|
||||
sections.forEach(section => section.classList.remove('active'));
|
||||
|
||||
// Remove active class from all nav items
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
navItems.forEach(item => item.classList.remove('active'));
|
||||
|
||||
// Show selected section
|
||||
const targetSection = document.getElementById(sectionName + '-section');
|
||||
if (targetSection) {
|
||||
targetSection.classList.add('active');
|
||||
}
|
||||
|
||||
// Add active class to clicked nav item
|
||||
event.target.closest('.nav-item').classList.add('active');
|
||||
}
|
||||
|
||||
// Initialize language on page load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Set active language button
|
||||
document.getElementById('lang-' + currentLanguage).classList.add('active');
|
||||
// Update all texts
|
||||
updateTexts();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue