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

91
client/src/pages/RegisterPage.tsx
View File

@@ -18,12 +18,7 @@ export default function RegisterPage() {
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setError('');
if (password !== confirm) {
setError('Пароли не совпадают');
return;
}
if (password !== confirm) { setError('Пароли не совпадают'); return; }
setLoading(true);
try {
await register(username, password);
@@ -33,73 +28,41 @@ export default function RegisterPage() {
};
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">
Присоединяйтесь к сообществу
</p>
<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">
Имя пользователя
</label>
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="your_cat_lover"
minLength={3}
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"
/>
<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 value={username} onChange={(e) => setUsername(e.target.value)} placeholder="your_cat_lover" minLength={3} required autoFocus 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">
Пароль
</label>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Минимум 4 символа"
minLength={4}
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"
/>
<div className="space-y-1.5">
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Пароль</label>
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Минимум 4 символа" minLength={4} required 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">
Подтвердите пароль
</label>
<Input
type="password"
value={confirm}
onChange={(e) => setConfirm(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"
/>
<div className="space-y-1.5">
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Подтвердите пароль</label>
<Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Повторите пароль" required 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>
<span>{error}</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>
)}
<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"
type="submit" disabled={loading}
className="w-full h-12 rounded-xl text-[15px] font-semibold active:scale-[0.98] transition-all"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
>
{loading ? (
<span className="flex items-center gap-2">
@@ -111,21 +74,15 @@ export default function RegisterPage() {
</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="/login" className="link-blue">
Войти
</Link>
<Link to="/login" className="link-accent">Войти</Link>
</p>
</div>
</div>