feat: redesign UI with pastel theme, dark mode and smooth animations

- Add light/dark/system theme switcher with localStorage persistence
  and automatic prefers-color-scheme detection
- New pastel Instagram-inspired palette: rose accent (#C9445D light,
  #E8687E dark), clean #FAFAFA / #000000 backgrounds
- Replace all hardcoded bg-white / red-* colors with CSS variables
  so every page and modal respects the active theme
- Smooth card hover: translateY elevation + image zoom (no layout shift)
- Micro-animations on action buttons with spring cubic-bezier
- Editorial navbar: 3px accent top bar, uppercase wordmark
- Theme toggle button (sun/moon/monitor) added to navbar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-25 23:57:33 +03:00
parent e0247bc288
commit 81c9bba56f
15 changed files with 270 additions and 74 deletions

View File

@@ -37,13 +37,13 @@ export default function LoginPage() {
<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-[var(--border)] focus-ring" />
className="h-12 text-sm rounded-xl bg-[var(--surface)] 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-[var(--border)] focus-ring" />
className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" />
{error && (
<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">
<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-fade-up">
{error}
</div>
)}