88 lines
4.0 KiB
HTML
88 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Страница авторизации">
|
|
<title>Авторизация</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="background">
|
|
<div class="shape shape-1"></div>
|
|
<div class="shape shape-2"></div>
|
|
<div class="shape shape-3"></div>
|
|
</div>
|
|
|
|
<main class="login-container">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<div class="logo">
|
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="40" height="40" rx="12" fill="url(#logo-gradient)"/>
|
|
<path d="M12 20L18 26L28 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<defs>
|
|
<linearGradient id="logo-gradient" x1="0" y1="0" x2="40" y2="40">
|
|
<stop stop-color="#6366f1"/>
|
|
<stop offset="1" stop-color="#8b5cf6"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<h1>Добро пожаловать</h1>
|
|
<p class="subtitle">Войдите в свой аккаунт</p>
|
|
</div>
|
|
|
|
<form id="login-form" novalidate>
|
|
<div class="form-group stagger-1">
|
|
<label for="username">Имя пользователя</label>
|
|
<div class="input-wrapper">
|
|
<svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
<input type="text" id="username" name="username" placeholder="Введите имя пользователя" autocomplete="username" required>
|
|
</div>
|
|
<span class="error-message" id="username-error"></span>
|
|
</div>
|
|
|
|
<div class="form-group stagger-2">
|
|
<label for="password">Пароль</label>
|
|
<div class="input-wrapper">
|
|
<svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
<input type="password" id="password" name="password" placeholder="Введите пароль" autocomplete="current-password" required>
|
|
<button type="button" class="toggle-password" id="toggle-password" aria-label="Показать пароль">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<span class="error-message" id="password-error"></span>
|
|
</div>
|
|
|
|
<div class="form-alert stagger-3" id="form-alert" role="alert"></div>
|
|
|
|
<button type="submit" class="btn-submit stagger-4" id="btn-submit">
|
|
<span class="btn-text">Войти</span>
|
|
<span class="btn-loader" hidden>
|
|
<svg class="spinner" width="20" height="20" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="31.4 31.4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="theme-toggle.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|