2163b9ea0e
✨ Beautiful Animated Fire Glow: - Slow-moving fire gradient background with light/dark modes - Floating ember particles with realistic animation - 12-second background animation cycle with subtle color shifts - Theme-aware gradient colors (warm daylight vs cozy evening) 🎨 Enhanced Login Experience: - Updated branding to Deck Hearth with fire emoji - Backdrop blur effects on form elements - Semi-transparent containers for depth - Orange focus states to match fire theme - Enhanced shadows and glow effects 🌙 Theme Support: - Light mode: Warm daylight fire with golden embers - Dark mode: Cozy evening fire with bright orange flames - RGB color variables for backdrop-blur compatibility - Gradient-bg-ember class for consistent fire theming The login page now perfectly captures the warm, inviting Deck Hearth atmosphere
62 lines
No EOL
2.3 KiB
JavaScript
62 lines
No EOL
2.3 KiB
JavaScript
import { useTheme } from '../lib/theme-context';
|
|
|
|
export default function AuthLayout({ children }) {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<div className="min-h-screen relative overflow-hidden">
|
|
{/* Animated Fire Glow Background */}
|
|
<div
|
|
className="absolute inset-0 fire-glow-bg"
|
|
style={{
|
|
background: theme === 'dark'
|
|
? `
|
|
radial-gradient(circle at 20% 80%, rgba(255, 107, 0, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(255, 69, 0, 0.12) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 40%, rgba(220, 38, 127, 0.08) 0%, transparent 50%),
|
|
linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%)
|
|
`
|
|
: `
|
|
radial-gradient(circle at 20% 80%, rgba(255, 171, 64, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(251, 146, 60, 0.06) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 40%, rgba(249, 115, 22, 0.04) 0%, transparent 50%),
|
|
linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 0.95) 100%)
|
|
`
|
|
}}
|
|
/>
|
|
|
|
{/* Floating Embers */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute animate-ember-float opacity-30"
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 8}s`,
|
|
animationDuration: `${8 + Math.random() * 4}s`
|
|
}}
|
|
>
|
|
<div
|
|
className="w-1 h-1 rounded-full"
|
|
style={{
|
|
backgroundColor: theme === 'dark'
|
|
? `rgba(255, ${100 + Math.random() * 100}, 0, 0.6)`
|
|
: `rgba(251, ${100 + Math.random() * 46}, 60, 0.4)`,
|
|
boxShadow: theme === 'dark'
|
|
? `0 0 8px rgba(255, ${100 + Math.random() * 100}, 0, 0.4)`
|
|
: `0 0 6px rgba(251, ${100 + Math.random() * 46}, 60, 0.3)`
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|