185 lines
10 KiB
HTML
185 lines
10 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</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;
|
|
}
|
|
body {
|
|
background-color: #131313;
|
|
color: #e5e2e1;
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.knot-gradient {
|
|
background: linear-gradient(135deg, #9acbff 0%, #3096e5 100%);
|
|
}
|
|
.glass-header {
|
|
background: rgba(57, 57, 57, 0.6);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
input:focus ~ .input-glow {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex flex-col items-center selection:bg-primary/30">
|
|
<!-- TopAppBar Fragmented Logic -->
|
|
<header class="fixed top-0 w-full flex justify-between items-center px-6 py-4 z-50 bg-transparent">
|
|
<div class="text-2xl font-black tracking-tighter text-[#9ACBFF] dark:text-[#9ACBFF] italic">Knot</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-gray-400 hover:opacity-80 transition-opacity">
|
|
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1 w-full max-w-[420px] px-6 flex flex-col justify-center py-20 relative">
|
|
<!-- Abstract Decoration (The Thread) -->
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full border-[1px] border-primary/10 pointer-events-none"></div>
|
|
<div class="absolute top-40 -left-40 w-80 h-80 rounded-full border-[1px] border-primary/5 pointer-events-none"></div>
|
|
<!-- Identity Section -->
|
|
<div class="mb-12">
|
|
<h1 class="text-[3.5rem] font-black leading-[1.1] tracking-tighter mb-4 text-on-background">
|
|
Регистрация<br/><span class="text-primary italic">в Knot</span>
|
|
</h1>
|
|
<p class="text-on-surface-variant body-lg max-w-[300px] leading-relaxed">
|
|
Начните общение в новом формате. Простая регистрация без лишних данных.
|
|
</p>
|
|
</div>
|
|
<!-- Registration Form -->
|
|
<form class="space-y-6">
|
|
<div class="space-y-5">
|
|
<!-- Username Field -->
|
|
<div class="group relative">
|
|
<label class="block text-xs font-semibold tracking-widest text-on-surface-variant uppercase mb-2 ml-1" for="username">
|
|
Имя пользователя
|
|
</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-highest border-none rounded-xl px-5 py-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" id="username" placeholder="@username" type="text"/>
|
|
<div class="input-glow absolute inset-0 rounded-xl bg-primary/5 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Password Field -->
|
|
<div class="group relative">
|
|
<label class="block text-xs font-semibold tracking-widest text-on-surface-variant uppercase mb-2 ml-1" for="password">
|
|
Пароль
|
|
</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-highest border-none rounded-xl px-5 py-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" id="password" placeholder="••••••••" type="password"/>
|
|
<div class="input-glow absolute inset-0 rounded-xl bg-primary/5 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Repeat Password Field -->
|
|
<div class="group relative">
|
|
<label class="block text-xs font-semibold tracking-widest text-on-surface-variant uppercase mb-2 ml-1" for="repeat-password">
|
|
Повторите пароль
|
|
</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-highest border-none rounded-xl px-5 py-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" id="repeat-password" placeholder="••••••••" type="password"/>
|
|
<div class="input-glow absolute inset-0 rounded-xl bg-primary/5 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Primary Action -->
|
|
<button class="w-full knot-gradient text-on-primary-container font-bold text-lg py-4 rounded-xl shadow-[0_8px_30px_rgb(48,150,229,0.3)] hover:scale-[0.98] active:scale-95 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] mt-4" type="submit">
|
|
Создать аккаунт
|
|
</button>
|
|
</form>
|
|
<!-- Footer Link -->
|
|
<div class="mt-8 text-center">
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors text-sm font-medium" href="#">
|
|
Уже есть аккаунт? <span class="text-primary underline decoration-primary/30 underline-offset-4">Войти</span>
|
|
</a>
|
|
</div>
|
|
</main>
|
|
<!-- BottomNavBar Suppression Check: Only render if not transactional.
|
|
But wait, the prompt asks for specific components and a minimalist screen.
|
|
Following the "Semantic Shell" mandate: Registration is a transactional flow.
|
|
However, for the sake of following the provided JSON as an anchor for the platform,
|
|
we include the BottomNavBar as a visual reference of the "Registration" active state. -->
|
|
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-8 pt-4 bg-[#131313]/60 backdrop-blur-xl bg-gradient-to-t from-[#201F1F] to-transparent shadow-[0_-4px_40px_rgba(0,0,0,0.5)] rounded-t-[24px]">
|
|
<a class="flex flex-col items-center justify-center text-gray-500 px-6 py-2 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="login">login</span>
|
|
<span class="font-['Inter'] text-[11px] font-medium tracking-wide">Вход</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center bg-[#3096E5]/20 text-[#9ACBFF] rounded-xl px-6 py-2 scale-98 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="person_add">person_add</span>
|
|
<span class="font-['Inter'] text-[11px] font-medium tracking-wide">Регистрация</span>
|
|
</a>
|
|
</nav>
|
|
<!-- Decorative Canvas Elements -->
|
|
<div class="fixed bottom-32 right-8 pointer-events-none opacity-20">
|
|
<div class="w-24 h-24 rounded-full border-[10px] border-tertiary-container blur-2xl"></div>
|
|
</div>
|
|
</body></html> |