79 lines
3.5 KiB
HTML
79 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Вход</title>
|
|
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
|
<style>
|
|
* { margin: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #0f1218; color: #f4f4f5; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
|
|
.card { background: #1a1d24; padding: 40px; border-radius: 16px; border: 1px solid #2a2e36; max-width: 400px; width: 100%; }
|
|
h1 { font-size: 24px; text-align: center; margin-bottom: 8px; }
|
|
p { color: #8a8a92; text-align: center; margin-bottom: 32px; font-size: 14px; }
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
|
|
.form-group input { width: 100%; padding: 12px; border: 1px solid #2a2e36; border-radius: 8px; font-size: 16px; background: #0f1218; color: #f4f4f5; }
|
|
.form-group input:focus { outline: none; border-color: #0066FF; }
|
|
.btn { width: 100%; padding: 14px; border-radius: 8px; border: none; font-size: 16px; cursor: pointer; background: #0066FF; color: white; font-weight: 500; margin-top: 8px; }
|
|
.btn:hover { background: #0052cc; }
|
|
.btn:disabled { background: #2a2e36; cursor: not-allowed; }
|
|
.error { background: #4a1a1a; color: #ff6b6b; padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; display: none; }
|
|
.error.on { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Учёт оборудования</h1>
|
|
<p>Введите логин и пароль</p>
|
|
<div class="error" id="err"></div>
|
|
<form id="f">
|
|
<div class="form-group">
|
|
<label>Логин</label>
|
|
<input type="text" id="l" value="admin" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Пароль</label>
|
|
<input type="password" id="p" value="admin123" required>
|
|
</div>
|
|
<button type="submit" class="btn" id="btn">Войти</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
// Загружаем пользователей из data.json
|
|
async function login(l, p) {
|
|
try {
|
|
const r = await fetch('data.json');
|
|
const d = await r.json();
|
|
const user = d.users.find(u => u.login === l && u.password === p);
|
|
if (!user) {
|
|
throw new Error('Неверный логин или пароль');
|
|
}
|
|
// Создаём токен
|
|
const token = btoa(l + ':' + Date.now());
|
|
localStorage.setItem('token', token);
|
|
localStorage.setItem('user', JSON.stringify({ login: user.login, role: user.role }));
|
|
// Переходим на главную
|
|
window.location.href = 'index.html?token=' + token;
|
|
} catch (e) {
|
|
const err = document.getElementById('err');
|
|
err.textContent = e.message;
|
|
err.classList.add('on');
|
|
document.getElementById('btn').disabled = false;
|
|
}
|
|
}
|
|
|
|
document.getElementById('f').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const l = document.getElementById('l').value;
|
|
const p = document.getElementById('p').value;
|
|
const btn = document.getElementById('btn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Проверка...';
|
|
login(l, p);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|