first
This commit is contained in:
@@ -71,61 +71,145 @@ const LoginPage = () => {
|
||||
return <Loader />
|
||||
}
|
||||
|
||||
const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
|
||||
const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
|
||||
|
||||
return (
|
||||
<div className="relative flex h-screen flex-col items-center justify-center gap-8 py-8">
|
||||
<div className="mb-4 flex items-center justify-center gap-4">
|
||||
<div className="relative min-h-screen w-full flex flex-col items-center justify-center gap-8 py-8 overflow-hidden">
|
||||
<style>{`
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(180deg); }
|
||||
}
|
||||
@keyframes glow {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes slideIn {
|
||||
0% { transform: translateX(-100%); opacity: 0; }
|
||||
100% { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
.glow-animation {
|
||||
animation: glow 3s ease-in-out infinite;
|
||||
}
|
||||
.rotate-animation {
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
.slide-in {
|
||||
animation: slideIn 0.8s ease-out;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Фоновый градиент - многоуровневый */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#050810] via-[#0f1729] to-[#1a1f28] z-0"></div>
|
||||
|
||||
{/* Второй слой градиента */}
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-transparent via-[#1a3a52]/20 to-transparent z-0"></div>
|
||||
|
||||
{/* Основные светящиеся орбиты */}
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-br from-blue-600/20 to-cyan-500/10 rounded-full blur-3xl glow-animation" style={{ animationDelay: '0s' }}></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-tl from-blue-500/20 to-cyan-500/10 rounded-full blur-3xl glow-animation" style={{ animationDelay: '1s' }}></div>
|
||||
<div className="absolute top-1/2 right-1/3 w-80 h-80 bg-gradient-to-bl from-cyan-500/15 to-blue-400/10 rounded-full blur-3xl glow-animation" style={{ animationDelay: '2s' }}></div>
|
||||
|
||||
{/* Дополнительные акцентные элементы */}
|
||||
<div className="absolute top-0 right-0 w-72 h-72 bg-blue-500/5 rounded-full blur-2xl float-animation"></div>
|
||||
<div className="absolute bottom-0 left-0 w-72 h-72 bg-cyan-500/5 rounded-full blur-2xl float-animation" style={{ animationDelay: '3s' }}></div>
|
||||
|
||||
{/* Сетка с градиентом */}
|
||||
<div className="absolute inset-0 opacity-5 z-0" style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(0deg, transparent 24%, rgba(59, 147, 245, 0.08) 25%, rgba(59, 147, 245, 0.08) 26%, transparent 27%, transparent 74%, rgba(59, 147, 245, 0.08) 75%, rgba(59, 147, 245, 0.08) 76%, transparent 77%, transparent),
|
||||
linear-gradient(90deg, transparent 24%, rgba(59, 147, 245, 0.08) 25%, rgba(59, 147, 245, 0.08) 26%, transparent 27%, transparent 74%, rgba(59, 147, 245, 0.08) 75%, rgba(59, 147, 245, 0.08) 76%, transparent 77%, transparent)
|
||||
`,
|
||||
backgroundSize: '60px 60px'
|
||||
}}></div>
|
||||
|
||||
{/* Диагональные линии */}
|
||||
<div className="absolute inset-0 opacity-3 z-0" style={{
|
||||
backgroundImage: `
|
||||
repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(59, 147, 245, 0.1) 35px, rgba(59, 147, 245, 0.1) 70px)
|
||||
`
|
||||
}}></div>
|
||||
|
||||
{/* Центральный светящийся элемент */}
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-1 bg-cyan-400 rounded-full shadow-2xl" style={{
|
||||
boxShadow: '0 0 60px 20px rgba(34, 211, 238, 0.15), 0 0 100px 40px rgba(59, 147, 245, 0.08)'
|
||||
}}></div>
|
||||
|
||||
{/* Верхний логотип */}
|
||||
<div className="relative z-10 mb-4 flex items-center justify-center gap-4 slide-in">
|
||||
<Image src="/icons/logo.png" alt="AerBIM Logo" width={438} height={60} />
|
||||
</div>
|
||||
<div className="bg-cards z-10 mx-4 flex w-full max-w-xl flex-col gap-4 rounded-2xl p-6 shadow-lg md:mx-8">
|
||||
|
||||
{/* Карточка формы с улучшенным стилем */}
|
||||
<div className="relative z-10 mx-4 flex w-full max-w-md flex-col gap-6 rounded-[20px] bg-[#161824]/80 p-8 shadow-2xl border border-cyan-500/20 backdrop-blur-xl slide-in" style={{ animationDelay: '0.2s' }}>
|
||||
{/* Верхний градиент на карточке */}
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent rounded-t-[20px]"></div>
|
||||
|
||||
<form
|
||||
className="flex flex-col items-center justify-between gap-8 md:flex-row md:gap-4"
|
||||
className="flex flex-col gap-6"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<h1 className="text-2xl font-bold">Авторизация</h1>
|
||||
<TextInput
|
||||
value={values.login}
|
||||
name="login"
|
||||
handleChange={handleChange}
|
||||
placeholder="ivan_ivanov"
|
||||
style="register"
|
||||
label="Ваш логин"
|
||||
/>
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 style={interSemiboldStyle} className="text-3xl text-white">
|
||||
Авторизация
|
||||
</h1>
|
||||
|
||||
<TextInput
|
||||
value={values.password}
|
||||
name="password"
|
||||
handleChange={handleChange}
|
||||
placeholder="Не менее 8 символов"
|
||||
style="register"
|
||||
label="Ваш пароль"
|
||||
isPassword={true}
|
||||
isVisible={isVisible}
|
||||
togglePasswordVisibility={togglePasswordVisibility}
|
||||
/>
|
||||
<RoleSelector
|
||||
value={values.role}
|
||||
name="role"
|
||||
handleChange={handleChange}
|
||||
label="Ваша роль"
|
||||
placeholder="Выберите вашу роль"
|
||||
/>
|
||||
<div className="flex flex-col gap-4">
|
||||
<TextInput
|
||||
value={values.login}
|
||||
name="login"
|
||||
handleChange={handleChange}
|
||||
placeholder="ivan_ivanov"
|
||||
style="register"
|
||||
label="Ваш логин"
|
||||
/>
|
||||
|
||||
<div className="flex w-full items-center justify-center pt-6">
|
||||
<Button
|
||||
text="Войти"
|
||||
className="bg-blue mt-3 flex w-full items-center justify-center py-4 text-base font-semibold text-white shadow-lg transition-all duration-200 hover:opacity-90"
|
||||
type="submit"
|
||||
<TextInput
|
||||
value={values.password}
|
||||
name="password"
|
||||
handleChange={handleChange}
|
||||
placeholder="Не менее 8 символов"
|
||||
style="register"
|
||||
label="Ваш пароль"
|
||||
isPassword={true}
|
||||
isVisible={isVisible}
|
||||
togglePasswordVisibility={togglePasswordVisibility}
|
||||
/>
|
||||
|
||||
<RoleSelector
|
||||
value={values.role}
|
||||
name="role"
|
||||
handleChange={handleChange}
|
||||
label="Ваша роль"
|
||||
placeholder="Выберите вашу роль"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-4 w-full py-3 px-4 bg-gradient-to-r from-[#3193f5] to-[#1e7ce8] hover:from-[#2563eb] hover:to-[#1a5fd6] text-white font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-2xl hover:shadow-blue-500/50"
|
||||
style={interSemiboldStyle}
|
||||
>
|
||||
Войти
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-base font-medium">
|
||||
<span className="hover:text-blue transition-colors duration-200 hover:underline">
|
||||
<Link href="/password-recovery">Забыли логин/пароль?</Link>
|
||||
</span>
|
||||
</p>
|
||||
<div className="border-t border-cyan-500/20 pt-4">
|
||||
<p style={interRegularStyle} className="text-center text-sm text-gray-400">
|
||||
<span className="hover:text-cyan-400 transition-colors duration-200 hover:underline cursor-pointer">
|
||||
<Link href="/password-recovery">Забыли логин/пароль?</Link>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user