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

UI: modern editorial redesign — stone palette, blue-purple gradient, clean typography

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 13:19:05 +03:00
parent cfc6001d62
commit 7fa7394739
13 changed files with 402 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Cat } from 'lucide-react';
export default function RegisterPage() {
const { user, register } = useAuth();
@@ -20,50 +19,46 @@ export default function RegisterPage() {
setError('');
if (password !== confirm) { setError('Пароли не совпадают'); return; }
setLoading(true);
try {
await register(username, password);
} catch (err: any) {
setError(err.response?.data?.error || 'Ошибка регистрации');
} finally { setLoading(false); }
try { await register(username, password); }
catch (err: any) { setError(err.response?.data?.error || 'Ошибка регистрации'); }
finally { setLoading(false); }
};
return (
<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="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
<div className="w-full max-w-sm animate-rise">
<div className="text-center mb-10">
<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 className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-xl shadow-sm"
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
<svg className="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
<path d="M12 2C7.58 2 4 5.58 4 10c0 3.78 2.58 7.02 6 8.12V20h4v-1.88c3.42-1.1 6-4.34 6-8.12 0-4.42-3.58-8-8-8z" />
<circle cx="12" cy="10" r="3" />
</svg>
</div>
<h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
<p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
<h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
<p className="text-sm text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
</div>
<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.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.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>
<Input value={username} onChange={(e) => setUsername(e.target.value)}
placeholder="Имя пользователя" minLength={3} required autoFocus
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль (мин. 4 символа)" minLength={4} required
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
<Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)}
placeholder="Подтвердите пароль" required
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
{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-up">
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise">
<span>⚠️</span><span>{error}</span>
</div>
)}
<Button
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)' }}
>
<Button type="submit" disabled={loading}
className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
{loading ? (
<span className="flex items-center gap-2">
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -73,16 +68,9 @@ export default function RegisterPage() {
</Button>
</form>
<div className="relative my-8">
<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(--fg-tertiary)] bg-[var(--bg)]">или</span>
</div>
</div>
<p className="text-center text-[14px] text-[var(--fg-secondary)]">
<p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
Уже есть аккаунт?{' '}
<Link to="/login" className="link-accent">Войти</Link>
<Link to="/login" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Войти</Link>
</p>
</div>
</div>