Lucky Draw

Lucky Draw - Modern HTML Lottery Application

Overview

• Lucky Draw is a sophisticated, visually stunning web-based lottery system designed with cutting-edge UI/UX principles It offers a seamless, engaging experience for organizing and conducting various types of raffles and drawings with advanced customization options and spectacular visual effects
• Core Features
• 1 Dual-Mode Lottery System
• Name Draw Mode: Input participant names (one per line) and set number of winners
• Number Draw Mode: Generate participant numbers with customizable prefixes and starting numbers
• Seamless Mode Switching: Smooth transition animations with sliding indicators while preserving user input
• 2 Advanced Lottery Control System
• Multi-tier Prize Settings: Support for batch drawings with different prize levels
• Duplicate Winner Control: Elegant toggle switch design with status indicators
• Notification System: User-friendly, non-intrusive feedback for operations
• Visual Design Excellence

Aesthetic Style

• Background System: Multi-layer gradient background (#2D1B69 → #0F2027 → #1a1a2e) with dynamic nebula effects and floating particles
• Design Language: Fusion of neumorphism, glass morphism, and cyberpunk aesthetics
• Lighting System: Multi-source lighting effects creating a three-dimensional spatial feel
• Material Textures: Combined use of metallic, glass, and neon textures
• Color Palette
• Primary Colors:
• Electric Blue (#00D9FF): Main interactive elements
• Deep Purple (#6C5CE7): Secondary interface elements
• Neon Pink (#FF10F0): Special effects and emphasis
• Prize Level Colors:
• Diamond Level (#B9F2FF): Special prize with diamond shine
• Gold Level (#FFD700): First prize with flowing metallic effect
• Silver Level (#C0C0C0): Second prize with mirror reflection
• Bronze Level (#CD7F32): Third prize with antique copper texture
• Animation Matrix
• Environmental Animations: Background particle system, star twinkling, cloud
• Interactive Animations: Button hover, click ripple, state transitions
• Transition Animations: Page switching, content loading, result display
• Celebration Animations: Particle explosions, light scanning, 3D rotation
• "Congratulations" Celebration System (Core Highlight)
• Celebration Experience Design
• First Layer: Immediate Visual Impact
• Full-screen celebration overlay with gradient colors and blurred background
• entrance animation with elastic scaling, rotation, and light scanning
• Haptic feedback on mobile devices
• Second Layer: Particle Explosion System
• Multi-layer particle effects:
• Golden particles rising upward, simulating a gold coin rain
• Colorful confetti fragments scattering in all directions
• Twinkling light spots appearing randomly
• Firework explosions with radial diffusion

Third Layer: Winner Honor Display

• 3D winner cards with depth effects, personalized avatar frames, dynamic ranking badges, and name special effects
• Tiered display effects based on ranking (golden halo for first place, etc.)
• Staggered entrance animations for winner cards
• Technical Architecture
• Frontend Technology Stack
• Base Framework: HTML5 + CSS3 + Native JavaScript
• Style Framework: Tailwind CSS (latest version)
• Icon Library: Font Awesome 60+
• Fonts: Google Fonts (Inter)
• Animation: CSS3 Animation + Web Animations API
• Usage Instructions
• 1 Select Draw Mode: Choose between Name Draw or Number Draw2 Configure Participants:
• In Name Mode: Enter participant names (one per line)
• In Number Mode: Set prefix, start number, and total participants
• 3 Set Prize Settings: Choose prize level and number of winners
• 4 Control Duplicates: Toggle whether previous winners can be selected again
• 5 Start Drawing: Click "Start Draw" to begin the animation
• 6 Stop Drawing: Click "Stop Draw" to finalize winners
• 7 Celebrate: Enjoy the spectacular celebration animation
• 8 View Results: See winners displayed with their respective prizes