<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
	<title>QIK VPN Personal Server</title>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="assets/style.css?v=3">
</head>
<body class="auth-page">
	<div class="bg-decor"></div>

	<main class="login-wrapper">
		<section class="login-card">
			<header class="brand">
				<div class="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-10 h-10 m-5 text-white"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg></div>
				<h1 class="brand-title"><a href="t.me/qikrobot" target="_blank" rel="noopener noreferrer">👋 shah76</a></h1>
				<p class="brand-subtitle"><a href="https://t.me/qikrobot" target="_blank" rel="noopener noreferrer">QIK VPN Personal Server</a></p>
			</header>

			<form id="loginForm" class="form">
				<!-- визуально скрытые лейблы для доступности -->
				<label class="sr-only" for="username">Логин</label>
				<div class="input-wrap">
					<input type="text" id="username" name="username" required placeholder="Логин">
				</div>

				<label class="sr-only" for="password">Пароль</label>
				<div class="input-wrap password-wrap">
					<input type="password" id="password" name="password" required placeholder="Пароль">
					<button type="button" class="icon-btn" id="togglePass" aria-label="Показать/скрыть пароль">👁️</button>
				</div>

				<button type="submit" class="btn btn-primary w-full">Войти</button>
			</form>

			<div id="telegramAuth" class="otp-block hidden">
				<p class="hint">Код верификации отправлен в Telegram</p>
				<div class="input-wrap">
					<input type="text" id="authCode" placeholder="Код из Telegram…">
				</div>
				<button id="verifyCode" class="btn btn-primary w-full">Подтвердить</button>
			</div>

			<div id="message" class="message" role="alert" aria-live="polite"></div>

			<footer class="legal">
				<span>© 2026 <a href="https://t.me/qikrobot" target="_blank" rel="noopener noreferrer">QIK VPN</a></span>
			</footer>
		</section>
	</main>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		// Показ/скрытие пароля
		$('#togglePass').on('click', function () {
			const inp = document.getElementById('password');
			inp.type = inp.type === 'password' ? 'text' : 'password';
		});
	</script>
	<script src="assets/script.js"></script>
</body>
</html>
