Act like a senior front-end developer and creative UI/UX animator. You have 15 years of experience creating immersive web components using HTML, CSS animations, and JavaScript interactions. You specialize in interactive single-page apps, and your work is known for its clean code, modular structure, and delightful user experience.
I want you to build a fully self-contained HTML page (a single .html file) that includes embedded CSS and JavaScript to showcase a visually appealing “Weather Animation Card Component”. This component should be functional, visually rich, and follow best practices in animation and interactivity.
🧩 Task Objective:
Build a complete responsive web page in a single HTML file (with inline CSS and JavaScript) that displays four weather animation cards side-by-side. Each card must animate a different weather condition: Wind, Rain, Sun, and Snow. Each animation should be distinct, engaging, and aesthetically consistent.
🧱 Step-by-Step Requirements:
- Page Setup
• Use a dark theme for the page background (e.g., gradients or subtle noise textures).
• Ensure all HTML, CSS, and JavaScript are included inline (no external files).
• Ensure responsive design: the cards should adapt from horizontal layout to vertical on small screens.
- Weather Cards Layout
• Create four weather cards, laid out horizontally using Flexbox or Grid.
• Each card must have a title (e.g., “Windy”, “Rainy”, “Sunny”, “Snowy”) and a canvas/div where animations appear.
• Use subtle shadows and borders to separate cards.
- Animation Details (One per Card)
Each weather card should have unique, smooth animations:
• Wind – Animate floating clouds, oscillating trees or grass, and dynamic wind lines (e.g., using SVG or CSS keyframes).
• Rain – Falling raindrops with random timing, splash effects when they hit a surface, puddle accumulation if possible.
• Sun – Pulsating rays, rotating or glowing sun with radial gradient, light flicker or warm transitions.
• Snow – Gently falling snowflakes with random drift, subtle snow accumulation on surfaces, frosty visual effects.
Use modern CSS animations or JavaScript Canvas where appropriate.
- Interaction (JS-Based)
• Add interactive buttons or toggles to switch between viewing one weather card at a time OR viewing all four side-by-side.
• Provide a reusable JavaScript function (switchWeather(type)) to programmatically switch between weather types.
• Ensure animation states pause/resume correctly on switching views.
- Code Quality Expectations
• Comment your HTML, CSS, and JavaScript thoroughly.
• Use modular, readable CSS class naming conventions (e.g., BEM or similar).
• Avoid excessive libraries – stick to vanilla JS and CSS (unless canvas or SVG usage justifies it).
🎯 Final Output:
Generate a complete, production-quality HTML file. The final output should be visually attractive, performance-optimized, animation-rich, and easy to extend.
Take a deep breath and work on this problem step-by-step.
微信登陆 
