Commit graph

7 commits

Author SHA1 Message Date
Randall Stillwell
d3e4980b8f 🔥 Primary Red Add Button + Static Rarity Shadows
🎨 Add Button Color Update:
- Changed main add button from wood brown to ember red
- Updated 'Own' option to match ember red theme
- Added static ember red shadow with ring effect
- Consistent fire-themed primary action color

 Performance: Removed All Pulsing Animations:
- Eliminated mythic-pulse animation (3s infinite)
- Eliminated rare-pulse animation (2.5s infinite)
- Eliminated uncommon-pulse animation (2s infinite)
- Eliminated enchanted-pulse animation (2s infinite)
- Removed all @keyframes pulse definitions

 Static Rarity Shadow System:
- Mythic/Legendary: Enhanced golden glow (static)
- Rare: Enhanced purple glow (static)
- Uncommon: Enhanced blue glow (static)
- Enchanted: Multi-color rainbow glow (static)
- All shadows now use consistent opacity levels

🚀 Performance Benefits:
- Eliminated continuous CSS animations on every card
- Reduced GPU usage from constant pulse effects
- Smoother scrolling and hover interactions
- Better battery life on mobile devices
- Cleaner, more professional appearance

🎯 Visual Improvements:
- More vibrant static shadows than pulsing minimums
- Consistent visual hierarchy with static effects
- Primary red add button stands out appropriately
- Cleaner, less distracting card presentation

The cards page should now be much more performant without the constant pulsing animations! 🔥
2025-07-26 09:17:22 -05:00
Randall Stillwell
e056f53b1f 🔥 Transform to Deck Hearth Fire-Inspired Design
🎨 Complete Brand Transformation:
- Rebranded from 'TCG Vault' to 'Deck Hearth'
- Updated logo initials from 'TCG' to 'DH'
- Changed app name throughout the application

🔥 Fire-Themed Color Palette:
Light Theme (Warm Daylight by the Hearth):
- Primary: Warm cream (#fefcf8) like sunlit stone
- Secondary: Soft beige (#f7f3ed) like aged parchment
- Tertiary: Light wood tone (#f0e6d6)
- Text: Dark chocolate brown (#2d1810)
- Accents: Ember orange, flame orange, golden yellow

Dark Theme (Cozy Evening by the Fire):
- Primary: Deep charcoal (#1a0f0a) like burnt wood
- Secondary: Rich dark brown (#2d1b12) like oak
- Tertiary: Medium brown (#3d2317) like mahogany
- Text: Warm white (#fff8f0) like firelight
- Accents: Bright flame, glowing ember, golden glow

🎨 Fire-Inspired Design Elements:
- Flame gradient: Orange to ember red
- Golden gradient: Golden yellow to flame orange
- Fire glow effects with warm shadows
- Wood-toned borders and accents
- Ember and flame-colored interactive elements

🔧 Enhanced Component Styling:
- Updated BulkSelectionToolbar with fire colors
- New CSS classes: btn-flame, btn-ember, btn-gold
- Fire glow and ember glow effects
- Gradient backgrounds: gradient-bg-fire, gradient-bg-golden
- Tailwind color palette: hearth.flame, hearth.ember, etc.

 Warm & Inviting Experience:
- Light mode: Cozy daytime fireplace atmosphere
- Dark mode: Intimate evening hearth ambiance
- Maintains accessibility with proper contrast
- Smooth transitions between themes

The app now perfectly captures the warm, inviting feeling of gathering around a hearth! 🔥🏠
2025-07-26 08:30:07 -05:00
Randall Stillwell
d537474a61 Added Magical Rarity Effects with Glowing Shadows & Particles
�� Rarity-Based Visual Effects:
- Mythic/Legendary: Golden glow with 3-layer pulsing animation
- Rare/Holo: Purple glow with shimmering particles
- Uncommon: Blue glow with subtle twinkling
- Enchanted/Secret: Rainbow cycling glow with rotating particles

💫 Dynamic Particle Systems:
- Radial gradient overlays for sparkle effects
- Animated opacity and rotation for enchanted cards
- Multiple particle layers for depth and richness
- Smooth pulsing animations with different timings

🎨 Enhanced Visual Hierarchy:
- Rarity-specific border colors and shadows
- Hover intensification of glow effects
- Side panel inherits rarity styling
- Pulsing rarity indicator dots in panel headers

 Performance Optimized:
- CSS-only animations using hardware acceleration
- Efficient keyframe animations
- Proper z-index layering
- Responsive particle effects

🎯 Smart Rarity Detection:
- Flexible string matching for various rarity names
- Supports MTG, Pokemon, Lorcana rarity systems
- Fallback to standard styling for common cards
- Case-insensitive rarity recognition

Cards now have that premium, magical feel! 🃏
2025-07-26 00:01:04 -05:00
Randall Stillwell
1387ecaccb 🎨 Redesigned Card Hover with Side Information Panel
 New Side Panel Design:
- Information panel slides out from the right side of cards
- 500ms hover delay to prevent accidental triggers
- 320px wide panel with comprehensive card details
- Smooth slide-in animation with backdrop blur effect

🎯 TCG-Specific Information:
- MTG: Mana cost, Power/Toughness, Colors with proper styling
- Pokemon: HP display with yellow highlighting
- Lorcana: Ink cost, Strength/Willpower stats
- Oracle text/description for all card types

🌙 Dark Theme Support:
- Full dark mode styling for all panel elements
- Dark-aware color schemes for TCG-specific badges
- Proper contrast ratios for accessibility

 Enhanced Features:
- Structured layout: Header, Body, Footer sections
- Grid-based action buttons with tooltips
- Copy card info functionality
- Responsive design (hidden on mobile/tablet)
- Better grid spacing with right padding for panels

🎨 Professional Polish:
- Backdrop blur effects for depth
- Smooth transitions with proper easing
- Z-index management for layering
- Reduced grid columns to accommodate panels

Perfect for detailed card inspection! 🃏
2025-07-25 23:55:54 -05:00
Randall Stillwell
a6602eab87 Redesigned Card Interaction with Sliding Information Panel
🎨 New Card-Focused Design:
- Cards now display as clean images without permanent overlays
- Information and actions slide out from behind the card on hover
- Selected cards scale up slightly and show persistent info panel

🚀 Enhanced User Experience:
- Card images are the primary focus, no visual clutter
- Smooth 300ms transitions with easing for professional feel
- Sliding panel appears 2px below card for depth effect
- Backdrop blur effect for better contrast and readability

 Improved Interactions:
- Primary actions (Collection, Deck) prominently displayed
- Secondary actions (Own, Favorite, View) in compact grid
- Proper z-index management prevents panel conflicts
- Increased grid spacing (gap-8, p-8) for sliding panels

🎯 Technical Improvements:
- CSS classes for consistent styling and performance
- Prevented text selection during interactions
- Transform origin optimization for smooth animations
- Proper pointer event handling for accessibility

Cards are now the star of the show! 🌟
2025-07-25 23:44:03 -05:00
Randall Stillwell
e75a4a6649 Major redesign: Enhanced card display with particle effects, improved filters, and search functionality
- Redesigned card display with 2.5:3.5 aspect ratio and image-only view
- Added infinite scroll to replace pagination
- Implemented authentic card back placeholders for MTG, Pokemon, and Lorcana
- Added rarity-based particle effects with tiered intensity (mythic/enchanted/rare/uncommon)
- Enhanced hover details panel with structured card information
- Fixed search functionality with debouncing and Enter key support
- Improved filter system with working TCG, rarity, set, and price filters
- Added favorite system for cards in both hover and detail views
- Updated card detail page with comprehensive metadata and actions
- Fixed API filtering with proper Vercel Postgres implementation
- Added particle animations and rarity glow effects
- Improved overall UX with better visual hierarchy and interactions
2025-07-23 21:26:54 -05:00
Randall Stillwell
7be41b4490 Clean slate: Remove React traces and create pure Next.js setup 2025-07-23 09:32:31 -05:00