72 lines
3.3 KiB
HTML
72 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Регистрация — hh.ru автоотклик</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f1117; --card: #1a1d27; --border: #2a2f3a; --text: #e5e7eb;
|
|
--muted: #9ca3af; --accent: #3b82f6; --accent-hover: #60a5fa;
|
|
--input-bg: #12141c; --red: #ef4444;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
background: var(--bg); color: var(--text); font-size: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-height: 100vh; }
|
|
.login-box { background: var(--card); border: 1px solid var(--border);
|
|
border-radius: 12px; padding: 32px; width: 100%; max-width: 360px; }
|
|
.login-box h1 { font-size: 18px; text-align: center; margin-bottom: 4px; }
|
|
.login-box .muted { text-align: center; font-size: 13px; margin-bottom: 20px; }
|
|
input { width: 100%; padding: 10px 12px; border: 1px solid var(--border);
|
|
border-radius: 8px; font-size: 14px; font-family: inherit;
|
|
background: var(--input-bg); color: var(--text); margin-bottom: 12px; }
|
|
input:focus { outline: none; border-color: var(--accent); }
|
|
button { width: 100%; padding: 10px; border: none; border-radius: 8px;
|
|
cursor: pointer; font-size: 14px; background: var(--accent); color: #fff;
|
|
font-weight: 500; }
|
|
button:hover { background: var(--accent-hover); }
|
|
.error { color: var(--red); font-size: 13px; text-align: center; margin-top: 10px;
|
|
min-height: 20px; }
|
|
.link { text-align: center; margin-top: 14px; font-size: 13px; }
|
|
.link a { color: var(--accent); text-decoration: none; }
|
|
.link a:hover { color: var(--accent-hover); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-box">
|
|
<h1>hh.ru автоотклик</h1>
|
|
<p class="muted">Регистрация</p>
|
|
<input type="text" id="username" placeholder="Логин (3-30 символов)" autocomplete="username" autofocus>
|
|
<input type="password" id="password" placeholder="Пароль (мин. 6 символов)" autocomplete="new-password">
|
|
<input type="password" id="confirm" placeholder="Повторите пароль" autocomplete="new-password">
|
|
<button onclick="doRegister()">Зарегистрироваться</button>
|
|
<div id="msg" class="error"></div>
|
|
<div class="link">Уже есть аккаунт? <a href="/login">Войти</a></div>
|
|
</div>
|
|
<script>
|
|
async function doRegister() {
|
|
const msg = document.getElementById('msg');
|
|
msg.textContent = '';
|
|
try {
|
|
const resp = await fetch('/register', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
username: document.getElementById('username').value,
|
|
password: document.getElementById('password').value,
|
|
confirm: document.getElementById('confirm').value,
|
|
}),
|
|
});
|
|
const data = await resp.json();
|
|
if (!resp.ok) { msg.textContent = data.error || 'Ошибка регистрации'; return; }
|
|
window.location = '/';
|
|
} catch (e) { msg.textContent = 'Ошибка сети'; }
|
|
}
|
|
document.getElementById('confirm').addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') doRegister();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |