<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Weather Card - Snow Added</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            font-family: 'Poppins', sans-serif;
            overflow: hidden; /* Prevent scrollbars from animations */
        }

        .weather-card {
            width: 320px;
            height: 450px;
            border-radius: 20px;
            background: linear-gradient(135deg, #e0e5ec 0%, #f9fbfd 100%);
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            margin-bottom: 30px;
            transition: background 1s ease-in-out;
        }

        .weather-animation {
            flex: 2; /* Approximately 300px height */
            position: relative;
            overflow: hidden;
            background-color: #87CEEB; /* Default sky blue */
            transition: background-color 1s ease-in-out;
        }

        .weather-info {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #333;
            text-align: center;
        }

        .weather-info h2 {
            margin: 0 0 5px 0;
            font-size: 2em;
            font-weight: 600;
        }

        .weather-info p {
            margin: 0;
            font-size: 1.1em;
            color: #666;
        }

        .controls {
            display: flex;
            gap: 15px;
            flex-wrap: wrap; /* Allow buttons to wrap if needed */
            justify-content: center;
        }

        .controls button {
            padding: 12px 20px; /* Adjusted padding slightly */
            border: none;
            border-radius: 10px;
            background: linear-gradient(145deg, #dce1e7, #f7fcfc);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.9);
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            color: #555;
            cursor: pointer;
            outline: none;
            transition: all 0.2s ease;
        }

        .controls button:active {
            box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.1), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
            transform: translateY(2px);
        }

        /* --- Weather Specific Styles & Animations --- */

        /* --- Sun --- */
        .weather-card.sun .weather-animation {
            background-color: #FFD700; /* Bright yellow */
        }
        .sun-disk {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: #FFC107; /* Slightly darker yellow for the sun */
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
            animation: sun-pulse 2s infinite alternate;
        }

        @keyframes sun-pulse {
            from {
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 0 0 rgba(255, 215, 0, 0.4);
            }
            to {
                transform: translate(-50%, -50%) scale(1.05);
                box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 0 10px rgba(255, 215, 0, 0.2);
            }
        }

        /* --- Rain --- */
        .weather-card.rain .weather-animation {
            background-color: #6C7A89; /* Darker grey-blue */
        }
        .raindrop {
            position: absolute;
            width: 2px;
            height: 15px;
            background: linear-gradient(to bottom, rgba(173, 216, 230, 0.8), rgba(70, 130, 180, 0.8));
            border-radius: 50%;
            opacity: 0;
            animation: rain-fall var(--duration) linear var(--delay) infinite;
        }

        @keyframes rain-fall {
            0% {
                transform: translateY(-20px) translateX(0) scale(1);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            80% {
                opacity: 1;
                transform: translateY(300px) translateX(0) scale(1); /* 300px is the approx height */
            }
            100% {
                transform: translateY(350px) translateX(0) scale(0.5);
                opacity: 0;
            }
        }

        .puddle {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: rgba(70, 130, 180, 0.6);
            border-radius: 50% / 100% 100% 0 0;
            transform: scaleY(0);
            transform-origin: bottom;
            animation: puddle-form 1s forwards;
        }

        @keyframes puddle-form {
            to {
                transform: scaleY(1);
            }
        }

        /* --- Wind --- */
        .weather-card.wind .weather-animation {
            background-color: #B0C4DE; /* Light steel blue */
        }
        .cloud {
            position: absolute;
            background: #f0f0f0;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            animation: cloud-move var(--duration) linear infinite;
        }
        .cloud::before,
        .cloud::after {
            content: '';
            position: absolute;
            background: inherit;
            border-radius: inherit;
        }
        .cloud::before {
            width: 60%;
            height: 60%;
            top: -20%;
            left: 10%;
        }
        .cloud::after {
            width: 80%;
            height: 80%;
            top: -10%;
            right: 10%;
        }

        .cloud:nth-child(1) {
            width: 80px; height: 60px; top: 20%; left: -50px;
        }
        .cloud:nth-child(2) {
            width: 100px; height: 70px; top: 50%; left: -80px;
            animation-delay: 2s;
        }
        .cloud:nth-child(3) {
            width: 70px; height: 50px; top: 10%; left: -100px;
            animation-delay: 4s;
        }

        @keyframes cloud-move {
            from {
                transform: translateX(-100px);
            }
            to {
                transform: translateX(450px); /* Moves across the card width */
            }
        }

        .wind-line {
            position: absolute;
            width: 30px;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 1px;
            opacity: 0;
            animation: wind-line-move var(--duration) linear var(--delay) infinite;
        }

        @keyframes wind-line-move {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            20% {
                opacity: 0.8;
            }
            80% {
                transform: translateX(350px);
                opacity: 0.8;
            }
            100% {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        /* --- NEW: Snow --- */
        .weather-card.snow .weather-animation {
            background-color: #D6EAF8; /* A cold, light blue */
        }

        .snowflake {
            position: absolute;
            background-color: #ffffff;
            border-radius: 50%;
            opacity: 0;
            /* Size is set by JavaScript using CSS variable --size */
            width: var(--size);
            height: var(--size);
            animation: snow-fall var(--duration) linear var(--delay) infinite;
        }

        @keyframes snow-fall {
            0% {
                transform: translateY(-10px) translateX(0);
                opacity: 0;
            }
            10% {
                /* Opacity is set by JavaScript using CSS variable --opacity */
                opacity: var(--opacity);
            }
            90% {
                opacity: var(--opacity);
            }
            100% {
                /* 320px is slightly more than the animation height */
                /* Horizontal sway is set by JavaScript using CSS variable --sway */
                transform: translateY(320px) translateX(var(--sway));
                opacity: 0;
            }
        }

    </style>
</head>
<body>

    <div class="weather-card" id="weather-card">
        <div class="weather-animation" id="weather-animation">
            <!-- Animation elements will be injected here by JavaScript -->
        </div>
        <div class="weather-info">
            <h2 id="weather-condition-text">Sunny</h2>
            <p id="weather-description-text">Enjoy the bright day!</p>
        </div>
    </div>

    <div class="controls">
        <button onclick="setWeather('sun')">Sun</button>
        <button onclick="setWeather('rain')">Rain</button>
        <button onclick="setWeather('wind')">Wind</button>
        <!-- NEW: Snow button -->
        <button onclick="setWeather('snow')">Snow</button>
    </div>

    <script>
        const weatherCard = document.getElementById('weather-card');
        const weatherAnimation = document.getElementById('weather-animation');
        const weatherConditionText = document.getElementById('weather-condition-text');
        const weatherDescriptionText = document.getElementById('weather-description-text');

        // --- Helper Functions ---

        function clearAnimations() {
            weatherAnimation.innerHTML = ''; // Remove all child elements
            weatherCard.className = 'weather-card'; // Reset classes
        }

        // --- Animation Creation Functions ---

        function createSunAnimation() {
            const sunDisk = document.createElement('div');
            sunDisk.className = 'sun-disk';
            weatherAnimation.appendChild(sunDisk);
        }

        function createRainAnimation() {
            const numDrops = 80;
            for (let i = 0; i < numDrops; i++) {
                const drop = document.createElement('div');
                drop.className = 'raindrop';
                drop.style.left = `${Math.random() * 100}%`;
                // Using CSS custom properties for animation parameters
                drop.style.setProperty('--duration', `${Math.random() * 0.8 + 0.8}s`); // Faster than snow
                drop.style.setProperty('--delay', `${Math.random() * 1.5}s`);
                weatherAnimation.appendChild(drop);
            }
            const puddle = document.createElement('div');
            puddle.className = 'puddle';
            weatherAnimation.appendChild(puddle);
        }

        function createWindAnimation() {
            const numClouds = 3;
            for (let i = 0; i < numClouds; i++) {
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                // Styles set directly in CSS for specific cloud sizing and positioning
                cloud.style.setProperty('--duration', `${Math.random() * 8 + 12}s`); // Duration 12-20s
                weatherAnimation.appendChild(cloud);
            }

            const numWindLines = 15;
            for (let i = 0; i < numWindLines; i++) {
                const line = document.createElement('div');
                line.className = 'wind-line';
                line.style.top = `${Math.random() * 100}%`;
                line.style.setProperty('--duration', `${Math.random() * 1 + 1.5}s`); // Duration 1.5-2.5s
                line.style.setProperty('--delay', `${Math.random() * 2}s`);
                weatherAnimation.appendChild(line);
            }
        }

        // NEW: Function to create the snow animation
        function createSnowAnimation() {
            const numFlakes = 100; // Number of snowflakes
            for (let i = 0; i < numFlakes; i++) {
                const flake = document.createElement('div');
                flake.className = 'snowflake';

                // Randomize properties using CSS variables
                const size = Math.random() * 4 + 2; // Size between 2px and 6px
                flake.style.left = `${Math.random() * 100}%`;
                flake.style.setProperty('--size', `${size}px`);
                flake.style.setProperty('--duration', `${Math.random() * 4 + 4}s`); // Duration 4s to 8s (slower than rain)
                flake.style.setProperty('--delay', `${Math.random() * 5}s`);
                flake.style.setProperty('--opacity', `${Math.random() * 0.6 + 0.4}`); // Opacity between 0.4 and 1.0
                flake.style.setProperty('--sway', `${Math.random() * 80 - 40}px`); // Horizontal movement (-40px to 40px)

                weatherAnimation.appendChild(flake);
            }
        }

        // --- Main Control Function ---

        function setWeather(condition) {
            clearAnimations(); // Clear previous animations and styles

            weatherCard.classList.add(condition); // Add condition-specific class for background/main styles

            switch (condition) {
                case 'sun':
                    weatherConditionText.textContent = 'Sunny';
                    weatherDescriptionText.textContent = 'Enjoy the bright day!';
                    createSunAnimation();
                    break;
                case 'rain':
                    weatherConditionText.textContent = 'Rainy';
                    weatherDescriptionText.textContent = 'Grab an umbrella!';
                    createRainAnimation();
                    break;
                case 'wind':
                    weatherConditionText.textContent = 'Windy';
                    weatherDescriptionText.textContent = 'Hold onto your hat!';
                    createWindAnimation();
                    break;
                // NEW: Snow case
                case 'snow':
                    weatherConditionText.textContent = 'Snowy';
                    weatherDescriptionText.textContent = 'Time for hot chocolate!';
                    createSnowAnimation();
                    break;
                default:
                    weatherConditionText.textContent = 'Unknown';
                    weatherDescriptionText.textContent = 'Select a condition.';
            }
        }

        // Initialize with sun animation on page load
        document.addEventListener('DOMContentLoaded', () => {
            setWeather('sun');
        });
    </script>

</body>
</html>（！！！windy模块的云一开始卡在左边不会动，请尝试将它修复）