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

UI: complete redesign — warm atelier style, Manrope font, burnt orange accent, shadow-based cards

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 13:34:58 +03:00
parent 7fa7394739
commit 4bf9ea22dd
20 changed files with 493 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ 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 LoginPage() {
const { user, login } = useAuth();
@@ -23,37 +24,32 @@ export default function LoginPage() {
};
return (
<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="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
<div className="w-full max-w-[380px] animate-fade-up">
<div className="text-center mb-10">
<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 className="mx-auto mb-5 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)] shadow-sm">
<Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
</div>
<h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
<p className="text-sm text-[var(--fg-secondary)] mt-1.5">Войдите, чтобы смотреть котов</p>
<h1 className="text-2xl font-800 tracking-tight">Catstagram</h1>
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Войдите, чтобы смотреть котов</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<Input value={username} onChange={(e) => setUsername(e.target.value)}
<form onSubmit={handleSubmit} className="space-y-3">
<Input value={username} onChange={e => setUsername(e.target.value)}
placeholder="Имя пользователя" 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)}
className="h-12 text-sm rounded-xl bg-white border-[var(--border)] focus-ring" />
<Input type="password" value={password} onChange={e => setPassword(e.target.value)}
placeholder="Пароль" required
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
className="h-12 text-sm rounded-xl bg-white border-[var(--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-xs font-medium animate-rise">
<span>⚠️</span><span>{error}</span>
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 text-red-600 text-xs font-medium animate-fade-up">
{error}
</div>
)}
<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)' }}>
className="w-full h-12 rounded-xl text-sm font-semibold bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white transition-all active:scale-[0.98]">
{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" />
@@ -63,9 +59,9 @@ export default function LoginPage() {
</Button>
</form>
<p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
<p className="mt-8 text-center text-sm text-[var(--fg-tertiary)]">
Нет аккаунта?{' '}
<Link to="/register" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Зарегистрироваться</Link>
<Link to="/register" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">Зарегистрироваться</Link>
</p>
</div>
</div>