mirror of
https://github.com/andrey271192/vps_monitoring.git
synced 2026-09-20 11:55:34 +00:00
f5726561ea
- Footer on dashboard, login, Telegram Mini App - Author section in README - Consistent styling across light/dark themes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
77 lines
3.5 KiB
HTML
77 lines
3.5 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>
|
|
<footer class="app-footer">
|
|
автор: <a href="https://github.com/andrey271192" target="_blank">GitHub</a> · <a href="https://boosty.to/iot_andrey" target="_blank">Boosty</a> · <a href="https://t.me/Iot_andrey" target="_blank">Поддержка</a> · <a href="https://t.me/Iot_andrey" target="_blank">@Iot_andrey</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|