mirror of
https://github.com/andrey271192/vps_monitoring.git
synced 2026-09-20 11:55:34 +00:00
4846742c60
- Light and dark theme toggle with localStorage persistence - Russian and English language support (full i18n) - Instructions & cheat sheet modal with install/SSH/API/commands - Green pulsing dot for online, red for offline servers - Color-coded metrics: green (ok), yellow (warn >70%), red (crit >90%) - Top bar on server cards: green=online, red=offline Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
3.1 KiB
HTML
74 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VPS Monitoring — Login</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<script src="/static/js/theme.js"></script>
|
|
<script src="/static/js/i18n.js"></script>
|
|
</head>
|
|
<body class="login-page">
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<h1>🖥 VPS Monitoring</h1>
|
|
<p data-i18n="login">Вход</p>
|
|
<div style="margin-top:12px;display:flex;gap:8px;justify-content:center">
|
|
<button class="lang-btn" id="langBtn" onclick="toggleLang(); updateLoginTexts()">RU</button>
|
|
<button class="btn-icon" id="themeToggleBtn" onclick="toggleTheme()" style="width:32px;height:32px;font-size:14px">🌙</button>
|
|
</div>
|
|
</div>
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username" id="lbl-user">Логин</label>
|
|
<input type="text" id="username" name="username" required autofocus>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password" id="lbl-pass">Пароль</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<button type="submit" class="btn-primary" id="loginBtn">Войти</button>
|
|
<div id="error" class="error-msg" style="display:none"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function updateLoginTexts() {
|
|
document.getElementById('langBtn').textContent = currentLang.toUpperCase();
|
|
document.getElementById('lbl-user').textContent = t('username');
|
|
document.getElementById('lbl-pass').textContent = t('password');
|
|
document.getElementById('loginBtn').textContent = t('loginBtn');
|
|
}
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
applyTheme(currentTheme);
|
|
updateLoginTexts();
|
|
});
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const errorEl = document.getElementById('error');
|
|
|
|
try {
|
|
const resp = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({username, password})
|
|
});
|
|
if (resp.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errorEl.textContent = t('invalidCreds');
|
|
errorEl.style.display = 'block';
|
|
}
|
|
} catch (err) {
|
|
errorEl.textContent = t('connError');
|
|
errorEl.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|