From 2163b9ea0e5aa559162c005f01a7270fc421a51c Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Mon, 28 Jul 2025 09:51:39 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Add=20Fire=20Glow=20Login=20Back?= =?UTF-8?q?ground?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit โœจ 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 --- components/AuthLayout.js | 55 ++++++++++++++++++++++++++-- pages/login.js | 54 +++++++++++++++++----------- styles/globals.css | 78 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 164 insertions(+), 23 deletions(-) diff --git a/components/AuthLayout.js b/components/AuthLayout.js index 4b27a04..d325716 100644 --- a/components/AuthLayout.js +++ b/components/AuthLayout.js @@ -4,8 +4,59 @@ export default function AuthLayout({ children }) { const { theme } = useTheme(); return ( -
- {children} +
+ {/* Animated Fire Glow Background */} +
+ + {/* Floating Embers */} +
+ {Array.from({ length: 12 }).map((_, i) => ( +
+
+
+ ))} +
+ + {/* Content */} +
+ {children} +
); } \ No newline at end of file diff --git a/pages/login.js b/pages/login.js index 65cfe5d..43d6fe1 100644 --- a/pages/login.js +++ b/pages/login.js @@ -67,21 +67,27 @@ export default function Login() {
-
๐Ÿƒ
-

- Sign in to TCG Vault +
๐Ÿ”ฅ
+

+ Welcome to Deck Hearth

- Access your trading card collection + Sign in to access your trading card collection

-
+
{error && ( -
-

{error}

+
+

{error}

)} @@ -97,9 +103,9 @@ export default function Login() { required value={formData.email} onChange={(e) => handleInputChange('email', e.target.value)} - className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent" + className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm" style={{ - backgroundColor: 'var(--bg-primary)', + backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)', borderColor: 'var(--border)', color: 'var(--text-primary)' }} @@ -119,9 +125,9 @@ export default function Login() { required value={formData.password} onChange={(e) => handleInputChange('password', e.target.value)} - className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent" + className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm" style={{ - backgroundColor: 'var(--bg-primary)', + backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)', borderColor: 'var(--border)', color: 'var(--text-primary)' }} @@ -136,7 +142,7 @@ export default function Login() { className={`w-full px-4 py-3 rounded-lg font-medium transition-all duration-200 ${ loading ? 'opacity-50 cursor-not-allowed' - : 'gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105' + : 'gradient-bg-ember text-white hover:shadow-xl transform hover:scale-105 hover:shadow-orange-500/20' }`} > {loading ? ( @@ -145,13 +151,13 @@ export default function Login() { Signing in...
) : ( - 'Sign in' + 'Sign in to Deck Hearth' )}
{/* Quick Login for Testing */} -
+

Quick Login for Testing: @@ -160,9 +166,9 @@ export default function Login() {

{/* Testing Guide */} -
+

๐Ÿงช Testing Accounts diff --git a/styles/globals.css b/styles/globals.css index dbb15ad..b9652eb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -33,6 +33,11 @@ body { --input-border-light: #e8dcc6; --input-text-light: #2d1810; --input-placeholder-light: #5d4037; + + /* RGB color variables for backdrop-blur effects */ + --bg-primary-rgb: 254, 252, 248; + --bg-secondary-rgb: 247, 243, 237; + --bg-tertiary-rgb: 240, 230, 214; } [data-theme="dark"] { @@ -59,6 +64,11 @@ body { --search-border-dark: #4a2f1f; --search-text-dark: #fff8f0; --search-placeholder-dark: #d7c4b0; + + /* RGB color variables for backdrop-blur effects */ + --bg-primary-rgb: 26, 15, 10; + --bg-secondary-rgb: 45, 27, 18; + --bg-tertiary-rgb: 61, 35, 23; } /* Apply theme colors */ @@ -96,6 +106,11 @@ body { --input-border: var(--input-border-light); --input-text: var(--input-text-light); --input-placeholder: var(--input-placeholder-light); + + /* RGB color variables for backdrop-blur effects */ + --bg-primary-rgb: 254, 252, 248; + --bg-secondary-rgb: 247, 243, 237; + --bg-tertiary-rgb: 240, 230, 214; } /* Dark theme variables */ @@ -172,6 +187,10 @@ body { background: var(--gradient-secondary); } +.gradient-bg-ember { + background: linear-gradient(135deg, #d84315 0%, #bf360c 100%); +} + /* Fire glow effects */ .fire-glow { box-shadow: 0 0 20px rgba(255, 111, 0, 0.3); @@ -697,4 +716,63 @@ body { .animate-float { animation: float 4s ease-in-out infinite; +} + +/* Fire Glow Background Animation */ +@keyframes fire-glow { + 0%, 100% { + filter: hue-rotate(0deg) brightness(1) saturate(1); + transform: scale(1); + } + 25% { + filter: hue-rotate(5deg) brightness(1.05) saturate(1.1); + transform: scale(1.02); + } + 50% { + filter: hue-rotate(-3deg) brightness(0.98) saturate(1.05); + transform: scale(0.99); + } + 75% { + filter: hue-rotate(8deg) brightness(1.03) saturate(1.08); + transform: scale(1.01); + } +} + +.fire-glow-bg { + animation: fire-glow 12s ease-in-out infinite; +} + +/* Ember Floating Animation */ +@keyframes ember-float { + 0% { + transform: translateY(0px) translateX(0px) scale(0.8); + opacity: 0; + } + 10% { + opacity: 0.6; + } + 20% { + transform: translateY(-30px) translateX(15px) scale(1); + opacity: 0.8; + } + 40% { + transform: translateY(-60px) translateX(-10px) scale(0.9); + opacity: 1; + } + 60% { + transform: translateY(-90px) translateX(20px) scale(1.1); + opacity: 0.7; + } + 80% { + transform: translateY(-120px) translateX(-5px) scale(0.8); + opacity: 0.4; + } + 100% { + transform: translateY(-150px) translateX(10px) scale(0.6); + opacity: 0; + } +} + +.animate-ember-float { + animation: ember-float 10s linear infinite; } \ No newline at end of file