162 lines
8.9 KiB
HTML
162 lines
8.9 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 Panel - Вход</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&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: {
|
|
"on-primary": "#003355",
|
|
"surface-variant": "#353534",
|
|
"surface-tint": "#9acbff",
|
|
"secondary-fixed-dim": "#c7c6ca",
|
|
"on-secondary": "#2f3033",
|
|
"surface-bright": "#393939",
|
|
"background": "#131313",
|
|
"secondary-container": "#48494c",
|
|
"primary": "#9acbff",
|
|
"on-secondary-fixed-variant": "#46474a",
|
|
"secondary-fixed": "#e3e2e6",
|
|
"on-surface-variant": "#c1c6d7",
|
|
"on-primary-container": "#002c4a",
|
|
"on-primary-fixed": "#001d34",
|
|
"inverse-surface": "#e5e2e1",
|
|
"surface-dim": "#131313",
|
|
"on-background": "#e5e2e1",
|
|
"inverse-on-surface": "#313030",
|
|
"outline-variant": "#414755",
|
|
"surface-container-highest": "#353534",
|
|
"on-tertiary": "#003911",
|
|
"tertiary": "#53e16f",
|
|
"secondary": "#c7c6ca",
|
|
"primary-fixed": "#cfe5ff",
|
|
"primary-fixed-dim": "#9acbff",
|
|
"on-primary-fixed-variant": "#004a79",
|
|
"surface-container-low": "#1c1b1b",
|
|
"on-surface": "#e5e2e1",
|
|
"on-secondary-container": "#b9b8bc",
|
|
"primary-container": "#3096e5",
|
|
"surface-container": "#201f1f",
|
|
"tertiary-container": "#00a741",
|
|
"tertiary-fixed-dim": "#53e16f",
|
|
"on-secondary-fixed": "#1a1b1e",
|
|
"error-container": "#93000a",
|
|
"surface": "#131313",
|
|
"on-tertiary-container": "#00320e",
|
|
"on-error-container": "#ffdad6",
|
|
"on-error": "#690005",
|
|
"on-tertiary-fixed": "#002107",
|
|
"inverse-primary": "#00629e",
|
|
"tertiary-fixed": "#72fe88",
|
|
"on-tertiary-fixed-variant": "#00531c",
|
|
"error": "#ffb4ab",
|
|
"outline": "#8b90a0",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"surface-container-high": "#2a2a2a"
|
|
},
|
|
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;
|
|
}
|
|
.knot-gradient-bg {
|
|
background: radial-gradient(circle at 20% 30%, rgba(48, 150, 229, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(154, 203, 255, 0.1) 0%, transparent 50%);
|
|
}
|
|
.glass-card {
|
|
background: rgba(32, 31, 31, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body antialiased min-h-screen flex items-center justify-center knot-gradient-bg selection:bg-primary/30">
|
|
<!-- Theme Switcher (Corner) -->
|
|
<div class="fixed top-8 right-8 z-50">
|
|
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container hover:bg-surface-bright transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] active:scale-95 group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">dark_mode</span>
|
|
</button>
|
|
</div>
|
|
<!-- Main Auth Container -->
|
|
<main class="relative w-full max-w-[440px] px-6 py-12">
|
|
<!-- Logo Section -->
|
|
<div class="flex flex-col items-center mb-12">
|
|
<div class="relative mb-6">
|
|
<!-- Abstract "Knot" visual element -->
|
|
<div class="absolute -inset-4 bg-primary/20 blur-2xl rounded-full opacity-50"></div>
|
|
<div class="relative w-16 h-16 flex items-center justify-center bg-gradient-to-br from-primary to-primary-container rounded-xl rotate-12 shadow-xl shadow-primary/20">
|
|
<span class="material-symbols-outlined text-on-primary-container text-4xl" style="font-variation-settings: 'FILL' 1;">hub</span>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-4xl font-extrabold tracking-tighter text-on-surface mb-2">Knot Admin</h1>
|
|
<p class="text-on-surface-variant text-sm font-medium opacity-70">Управление вашей инфраструктурой</p>
|
|
</div>
|
|
<!-- Auth Card -->
|
|
<div class="glass-card rounded-3xl p-8 md:p-10 shadow-2xl border border-outline-variant/10">
|
|
<form class="space-y-6">
|
|
<!-- Login/Email Field -->
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant ml-1">Логин или Email</label>
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-focus-within:text-primary transition-colors">person</span>
|
|
</div>
|
|
<input class="w-full bg-surface-container-highest/50 border-none rounded-2xl py-4 pl-12 pr-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary/30 focus:bg-surface-bright transition-all duration-300" placeholder="Введите ваш логин" type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- Password Field -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-end px-1">
|
|
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant">Пароль</label>
|
|
<a class="text-xs font-semibold text-primary hover:text-primary-fixed transition-colors" href="#">Забыли пароль?</a>
|
|
</div>
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-focus-within:text-primary transition-colors">lock</span>
|
|
</div>
|
|
<input class="w-full bg-surface-container-highest/50 border-none rounded-2xl py-4 pl-12 pr-12 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary/30 focus:bg-surface-bright transition-all duration-300" 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">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Action Button -->
|
|
<button class="w-full bg-gradient-to-br from-primary to-primary-container text-on-primary-container font-bold py-4 rounded-2xl shadow-lg shadow-primary/10 hover:shadow-primary/20 hover:opacity-90 active:scale-[0.98] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] mt-4" type="submit">
|
|
Войти в систему
|
|
</button>
|
|
</form>
|
|
<!-- Footer Links -->
|
|
<div class="mt-10 pt-8 border-t border-outline-variant/10 text-center">
|
|
<p class="text-on-surface-variant text-sm font-medium">
|
|
Нет аккаунта?
|
|
<a class="text-primary font-bold ml-1 hover:underline underline-offset-4 decoration-2" href="#">Зарегистрироваться</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Metadata -->
|
|
<div class="mt-8 flex justify-center gap-6 opacity-40">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest cursor-default">v4.2.0 Stable</span>
|
|
<span class="text-[10px] font-bold uppercase tracking-widest cursor-default">© 2024 Knot Ecosystem</span>
|
|
</div>
|
|
</main>
|
|
<!-- Decorative Elements (Blobs/Knots) -->
|
|
<div class="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
|
|
<div class="fixed bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-tertiary/5 rounded-full blur-[120px] pointer-events-none"></div>
|
|
</body></html> |