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