159 lines
8.4 KiB
HTML
159 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="ru"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Knot Messenger - Вход</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"surface-variant": "#353534",
|
|
"primary-container": "#3096e5",
|
|
"on-surface-variant": "#c1c6d7",
|
|
"error-container": "#93000a",
|
|
"surface-container-low": "#1c1b1b",
|
|
"tertiary": "#53e16f",
|
|
"tertiary-fixed-dim": "#53e16f",
|
|
"on-tertiary-fixed": "#002107",
|
|
"secondary-fixed-dim": "#c7c6ca",
|
|
"outline-variant": "#414755",
|
|
"on-tertiary-fixed-variant": "#00531c",
|
|
"surface-container": "#201f1f",
|
|
"on-primary": "#003355",
|
|
"on-error-container": "#ffdad6",
|
|
"background": "#131313",
|
|
"error": "#ffb4ab",
|
|
"outline": "#8b90a0",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"surface-container-highest": "#353534",
|
|
"on-secondary-fixed-variant": "#46474a",
|
|
"secondary-container": "#48494c",
|
|
"on-surface": "#e5e2e1",
|
|
"surface-dim": "#131313",
|
|
"on-background": "#e5e2e1",
|
|
"surface": "#131313",
|
|
"secondary": "#c7c6ca",
|
|
"on-primary-fixed": "#001d34",
|
|
"surface-tint": "#9acbff",
|
|
"surface-bright": "#393939",
|
|
"secondary-fixed": "#e3e2e6",
|
|
"primary-fixed-dim": "#9acbff",
|
|
"on-secondary-container": "#b9b8bc",
|
|
"on-primary-container": "#002c4a",
|
|
"primary": "#9acbff",
|
|
"on-secondary": "#2f3033",
|
|
"tertiary-fixed": "#72fe88",
|
|
"inverse-primary": "#00629e",
|
|
"tertiary-container": "#00a741",
|
|
"on-primary-fixed-variant": "#004a79",
|
|
"on-error": "#690005",
|
|
"inverse-surface": "#e5e2e1",
|
|
"on-tertiary-container": "#00320e",
|
|
"on-tertiary": "#003911",
|
|
"surface-container-high": "#2a2a2a",
|
|
"primary-fixed": "#cfe5ff",
|
|
"on-secondary-fixed": "#1a1b1e",
|
|
"inverse-on-surface": "#313030"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.knot-gradient-bg {
|
|
background: radial-gradient(circle at 0% 0%, rgba(48, 150, 229, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 100% 100%, rgba(154, 203, 255, 0.05) 0%, transparent 50%);
|
|
}
|
|
.btn-knot {
|
|
background: linear-gradient(135deg, #9ACBFF 0%, #3096E5 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body knot-gradient-bg min-h-screen flex flex-col">
|
|
<!-- Top Navigation (Shell suppressed for transactional screen as per protocol) -->
|
|
<header class="fixed top-0 w-full flex justify-between items-center px-6 py-8 z-50">
|
|
<div class="text-2xl font-black tracking-tighter text-primary italic">Knot</div>
|
|
<div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="language">language</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-grow flex items-center justify-center px-4 relative overflow-hidden">
|
|
<!-- Abstract Decoration (The Kinetic Thread) -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-20 pointer-events-none">
|
|
<svg class="w-full h-full" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40,100 C40,20 160,180 160,100 C160,20 40,180 40,100 Z" fill="none" stroke="#9ACBFF" stroke-width="0.5"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="w-full max-w-md z-10">
|
|
<div class="mb-12 text-center md:text-left">
|
|
<h1 class="text-5xl font-extrabold tracking-tight mb-4 text-on-surface leading-tight">Вход в Knot</h1>
|
|
<p class="text-on-surface-variant text-lg">Добро пожаловать в единственную нить общения.</p>
|
|
</div>
|
|
<form class="space-y-6">
|
|
<!-- Username Field -->
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-on-surface-variant ml-4">Имя пользователя</label>
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="person">person</span>
|
|
</div>
|
|
<input class="w-full bg-surface-container-highest/30 border-none rounded-xl py-4 pl-12 pr-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 focus:bg-surface-bright/40 transition-all outline-none" placeholder="username" type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- Password Field -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center px-4">
|
|
<label class="block text-sm font-medium text-on-surface-variant">Пароль</label>
|
|
<a class="text-xs font-semibold text-primary hover:opacity-80 transition-opacity" href="#">Забыли пароль?</a>
|
|
</div>
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="lock">lock</span>
|
|
</div>
|
|
<input class="w-full bg-surface-container-highest/30 border-none rounded-xl py-4 pl-12 pr-12 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 focus:bg-surface-bright/40 transition-all outline-none" placeholder="••••••••" type="password"/>
|
|
<button class="absolute inset-y-0 right-0 pr-4 flex items-center text-on-surface-variant hover:text-on-surface transition-colors" type="button">
|
|
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Login Button -->
|
|
<div class="pt-4">
|
|
<button class="btn-knot w-full py-4 rounded-xl text-on-primary-container font-bold text-lg shadow-[0_10px_20px_-5px_rgba(48,150,229,0.3)] hover:scale-[0.98] active:scale-[0.96] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" type="submit">
|
|
Войти
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="mt-12 text-center">
|
|
<p class="text-on-surface-variant">
|
|
Нет аккаунта?
|
|
<a class="text-primary font-bold ml-1 hover:underline decoration-primary/30 underline-offset-4" href="#">Зарегистрироваться</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="p-8 flex justify-center items-center space-x-6">
|
|
<div class="h-[1px] w-12 bg-outline-variant/20"></div>
|
|
<div class="text-[10px] uppercase tracking-[0.2em] text-outline/40 font-bold">Encrypted & Secure</div>
|
|
<div class="h-[1px] w-12 bg-outline-variant/20"></div>
|
|
</footer>
|
|
<!-- Bottom Nav (Suppressed for Login Page as per Contextual Rules) -->
|
|
</body></html> |