020d031627
- White background, card-style forms - Fixed top header: logo, nav links (Главная, Инструменты, Возможности), login/register buttons - Active state highlighting for current page - Placeholders in inputs, password hint - Mobile responsive (nav hidden on small screens) - Red error styling matching light theme
141 lines
7.0 KiB
HTML
141 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Вход — WA Dev Tools</title>
|
|
<script src="/vendor/tailwind.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: { extend: {
|
|
fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['Manrope', 'sans-serif'] },
|
|
colors: { accent: { DEFAULT: '#0054e6', dim: '#0043b8', light: '#e8f0fe' } }
|
|
}}
|
|
};
|
|
</script>
|
|
<link href="/vendor/fonts.css" rel="stylesheet">
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family:'Manrope',sans-serif; background:#f7f8fa; min-height:100vh; color:#1a1a2e; }
|
|
|
|
/* Header */
|
|
.top-header { position:fixed; top:0; left:0; right:0; height:56px; background:#fff; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; padding:0 24px; z-index:50; }
|
|
.top-logo { font-size:18px; font-weight:800; color:#1a1a2e; text-decoration:none; display:flex; align-items:center; gap:8px; }
|
|
.top-logo span { color:#0054e6; }
|
|
.top-nav { display:flex; align-items:center; gap:6px; margin-left:32px; }
|
|
.top-nav a { font-size:13px; color:#666; text-decoration:none; padding:6px 12px; border-radius:8px; transition:all .15s; font-weight:500; }
|
|
.top-nav a:hover { color:#1a1a2e; background:#f0f1f3; }
|
|
.top-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
|
|
.btn-ghost { font-size:13px; color:#666; text-decoration:none; padding:8px 16px; border-radius:8px; transition:all .15s; font-weight:600; border:none; background:none; cursor:pointer; }
|
|
.btn-ghost:hover { color:#1a1a2e; background:#f0f1f3; }
|
|
.btn-ghost.active { color:#0054e6; background:#e8f0fe; }
|
|
.btn-primary-sm { font-size:13px; color:#fff; background:#0054e6; padding:8px 18px; border-radius:8px; text-decoration:none; font-weight:600; transition:background .15s; border:none; cursor:pointer; }
|
|
.btn-primary-sm:hover { background:#0043b8; }
|
|
|
|
@media(max-width:640px) {
|
|
.top-nav { display:none; }
|
|
.top-header { padding:0 16px; }
|
|
}
|
|
|
|
/* Content */
|
|
.page-body { padding-top:56px; min-height:100vh; display:flex; align-items:center; justify-content:center; }
|
|
.auth-card { max-width:420px; width:100%; padding:20px; }
|
|
.auth-card-inner { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:36px 32px; box-shadow:0 4px 24px rgba(0,0,0,.04); }
|
|
.auth-title { font-size:24px; font-weight:800; color:#1a1a2e; text-align:center; }
|
|
.auth-subtitle { font-size:14px; color:#888; text-align:center; margin-top:6px; }
|
|
.auth-label { display:block; font-size:13px; color:#888; margin-bottom:6px; font-family:'JetBrains Mono',monospace; font-weight:500; }
|
|
.auth-input { width:100%; background:#f7f8fa; border:1px solid #e5e7eb; color:#1a1a2e; padding:12px 16px; border-radius:10px; font-family:'Manrope',sans-serif; font-size:15px; outline:none; transition:border-color .2s; }
|
|
.auth-input:focus { border-color:#0054e6; background:#fff; }
|
|
.auth-btn { width:100%; padding:14px; background:#0054e6; color:#fff; border:none; border-radius:10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; cursor:pointer; transition:background .2s; }
|
|
.auth-btn:hover { background:#0043b8; }
|
|
.auth-btn:disabled { opacity:0.5; cursor:not-allowed; }
|
|
.auth-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; padding:10px 14px; border-radius:8px; font-size:13px; display:none; }
|
|
.auth-error.visible { display:block; }
|
|
.auth-footer { text-align:center; margin-top:20px; font-size:14px; color:#888; }
|
|
.auth-footer a { color:#0054e6; text-decoration:none; font-weight:600; }
|
|
.auth-footer a:hover { text-decoration:underline; }
|
|
.auth-divider { height:1px; background:#e5e7eb; margin:20px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="top-header">
|
|
<a href="/" class="top-logo">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0054e6" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
|
|
WA Dev <span>Tools</span>
|
|
</a>
|
|
<nav class="top-nav">
|
|
<a href="/">Главная</a>
|
|
<a href="/#tools">Инструменты</a>
|
|
<a href="/#features">Возможности</a>
|
|
</nav>
|
|
<div class="top-right">
|
|
<a href="/auth/login" class="btn-ghost active">Войти</a>
|
|
<a href="/auth/register" class="btn-primary-sm">Регистрация</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Form -->
|
|
<div class="page-body">
|
|
<div class="auth-card">
|
|
<div class="auth-card-inner">
|
|
<div class="auth-title">Вход в аккаунт</div>
|
|
<div class="auth-subtitle">Добро пожаловать обратно</div>
|
|
|
|
<div id="error" class="auth-error" style="margin-top:20px;"></div>
|
|
|
|
<form id="loginForm" style="display:flex;flex-direction:column;gap:16px;margin-top:24px;" onsubmit="return handleLogin(event)">
|
|
<div>
|
|
<label class="auth-label">Email</label>
|
|
<input class="auth-input" type="email" name="email" required autofocus autocomplete="email" placeholder="you@example.com" />
|
|
</div>
|
|
<div>
|
|
<label class="auth-label">Пароль</label>
|
|
<input class="auth-input" type="password" name="password" required autocomplete="current-password" placeholder="Минимум 6 символов" />
|
|
</div>
|
|
<button class="auth-btn" type="submit" id="submitBtn">Войти</button>
|
|
</form>
|
|
|
|
<div class="auth-divider"></div>
|
|
|
|
<div class="auth-footer">
|
|
Нет аккаунта? <a href="/auth/register">Зарегистрируйтесь</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function handleLogin(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const btn = document.getElementById('submitBtn');
|
|
const err = document.getElementById('error');
|
|
err.classList.remove('visible');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Вход...';
|
|
try {
|
|
const res = await fetch('/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: form.email.value, password: form.password.value }),
|
|
});
|
|
const data = await res.json();
|
|
if (data.ok) {
|
|
window.location.href = data.redirect || '/dashboard';
|
|
} else {
|
|
err.textContent = data.error;
|
|
err.classList.add('visible');
|
|
}
|
|
} catch {
|
|
err.textContent = 'Ошибка сети';
|
|
err.classList.add('visible');
|
|
}
|
|
btn.disabled = false;
|
|
btn.textContent = 'Войти';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|