HeagBoKaT/cats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: доработано оформление — тени, анимации, градиенты, iOS-стиль

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 11:52:04 +03:00
parent a67b8c3341
commit f8f220469c
13 changed files with 362 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/pages/LoginPage.tsx
View File

@@ -26,22 +26,22 @@ export default function LoginPage() {
};
return (
<div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
<div className="w-full max-w-sm animate-fade-in-up">
<div className="text-center mb-10">
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float"
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
</div>
<h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
<p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
<h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
<p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">
Войдите, чтобы смотреть котов
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-3.5">
<div className="space-y-1">
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5">
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
Имя пользователя
</label>
<Input
@@ -50,11 +50,11 @@ export default function LoginPage() {
placeholder="your_cat_lover"
required
autoFocus
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
className="h-12 text-[15px] rounded-xl bg-white border input-focus"
/>
</div>
<div className="space-y-1">
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
<div className="space-y-1.5">
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
Пароль
</label>
<Input
@@ -63,13 +63,13 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
className="h-12 text-[15px] rounded-xl bg-white border input-focus"
/>
</div>
{error && (
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
<span>⚠</span>
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up">
<span>⚠️</span>
<span>{error}</span>
</div>
)}
@@ -77,7 +77,8 @@ export default function LoginPage() {
<Button
type="submit"
disabled={loading}
className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
className="w-full h-12 rounded-xl text-[15px] font-semibold transition-all active:scale-[0.98]"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
>
{loading ? (
<span className="flex items-center gap-2">
@@ -89,21 +90,15 @@ export default function LoginPage() {
</form>
<div className="relative my-8">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-[var(--border)]"></div>
</div>
<div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
<div className="relative flex justify-center">
<span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
или
</span>
<span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
</div>
</div>
<p className="text-center text-[14px] text-[var(--foreground-secondary)]">
<p className="text-center text-[14px] text-[var(--fg-secondary)]">
Нет аккаунта?{' '}
<Link to="/register" className="link-blue">
Зарегистрироваться
</Link>
<Link to="/register" className="link-accent">Зарегистрироваться</Link>
</p>
</div>
</div>