DylanDDeng/QwQ-32b-animatedweathercard.html

## QwQ-32b-animatedweathercard.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Cards</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1a1a1a;
        }
        .weather-container {
            display: flex;
            gap: 20px;
            flex-wrap: nowrap;
            padding: 20px;
        }
        .weather-card {
            position: relative;
            width: 250px;
            height: 300px;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 30px rgba(0,0,0,0.1);
            background: #2d2d2d;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        .weather-type {
            font-size: 1.2em;
            font-weight: bold;
            margin-top: 10px;
        }

        /* Wind */
        .wind .clouds {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cloud {
            position: absolute;
            width: 50px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
            animation: move-clouds 10s linear infinite;
        }
        .cloud:nth-child(1) {
            top: 20%; left: -50px;
            animation-delay: 0s;
            width: 60px;
        }
        .cloud:nth-child(2) {
            top: 40%; left: 120px;
            animation-delay: 2s;
            width: 40px;
        }
        .cloud:nth-child(3) {
            top: 60%; left: -80px;
            animation-delay: 4s;
            width: 70px;
        }
        @keyframes move-clouds {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(150%); }
        }
        .tree {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 100px;
            background: #2d8818;
            border-radius: 5px 5px 0 0;
            animation: sway 3s infinite ease-in-out;
        }
        @keyframes sway {
            0%, 100% { transform: translateX(-5px) rotate(-3deg); }
            50% { transform: translateX(5px) rotate(3deg); }
        }

        /* Rain */
        .rain {
            position: relative;
            overflow: hidden;
        }
        .raindrop {
            position: absolute;
            left: 50%;
            width: 2px;
            height: 15px;
            background: #007acc;
            animation: fall 2s linear infinite;
            opacity: 0;
        }
        .raindrop:nth-child(1) {
            top: -20px; left: 30%;
            animation-delay: 0s;
        }
        .raindrop:nth-child(2) {
            top: -40px; left: 15%;
            animation-delay: 0.5s;
        }
        .raindrop:nth-child(3) {
            top: -60px; left: 65%;
            animation-delay: 1s;
        }
        @keyframes fall {
            0% { opacity: 1; transform: translateY(-100%); }
            100% { opacity: 0; transform: translateY(400%); }
        }
        .puddle {
            position: absolute;
            bottom: -10px;
            left: 50%;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, #007acc 10%, transparent 30%);
            border-radius: 50%;
            animation: ripple 2s infinite;
        }
        @keyframes ripple {
            0% { transform: scale(0.5); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* Sun */
        .sun {
            background: linear-gradient(45deg, #f8e71c, #ff9f1c);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sun-rays {
            position: absolute;
            top: 50%; left: 50%;
            width: 100px; height: 100px;
            animation: rotate 5s linear infinite;
        }
        .sun-rays::before,
        .sun-rays::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, #f8e71c 30%, transparent 50%);
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        /* Snow */
        .snow {
            position: relative;
            overflow: hidden;
        }
        .snowflake {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #fff;
            border-radius: 50%;
            animation: snowfall 5s linear infinite;
        }
        .snowflake:nth-child(1) {
            top: -20px; left: 20%;
            animation-delay: 0s;
        }
        .snowflake:nth-child(2) {
            top: -40px; left: 60%;
            animation-delay: 1s;
        }
        .snowflake:nth-child(3) {
            top: -60px; left: 80%;
            animation-delay: 2s;
        }
        @keyframes snowfall {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(150%); }
        }
        .snow-base {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: #fff;
            border-radius: 0 0 15px 15px;
            animation: accumulate 3s infinite;
        }
        @keyframes accumulate {
            0% { height: 20px; }
            100% { height: 40px; }
        }
    </style>
</head>
<body>
    <div class="weather-container">
        <!-- Wind Card -->
        <div class="weather-card wind">
            <div class="clouds">
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
            </div>
            <div class="tree"></div>
            <div class="weather-type">Wind</div>
        </div>

        <!-- Rain Card -->
        <div class="weather-card rain">
            <div class="raindrop"></div>
            <div class="raindrop"></div>
            <div class="raindrop"></div>
            <div class="puddle"></div>
            <div class="weather-type">Rain</div>
        </div>

        <!-- Sun Card -->
        <div class="weather-card sun">
            <div class="sun-rays"></div>
            <div class="weather-type">Sun</div>
        </div>

        <!-- Snow Card -->
        <div class="weather-card snow">
            <div class="snowflake"></div>
            <div class="snowflake"></div>
            <div class="snowflake"></div>
            <div class="snow-base"></div>
            <div class="weather-type">Snow</div>
        </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Weather Cards</title>
	<style>
	body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #1a1a1a;
	}
	.weather-container {
	display: flex;
	gap: 20px;
	flex-wrap: nowrap;
	padding: 20px;
	}
	.weather-card {
	position: relative;
	width: 250px;
	height: 300px;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 4px 30px rgba(0,0,0,0.1);
	background: #2d2d2d;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	}
	.weather-type {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 10px;
	}

	/* Wind */
	.wind .clouds {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	.cloud {
	position: absolute;
	width: 50px;
	height: 30px;
	background: #fff;
	border-radius: 50%;
	animation: move-clouds 10s linear infinite;
	}
	.cloud:nth-child(1) {
	top: 20%; left: -50px;
	animation-delay: 0s;
	width: 60px;
	}
	.cloud:nth-child(2) {
	top: 40%; left: 120px;
	animation-delay: 2s;
	width: 40px;
	}
	.cloud:nth-child(3) {
	top: 60%; left: -80px;
	animation-delay: 4s;
	width: 70px;
	}
	@keyframes move-clouds {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(150%); }
	}
	.tree {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 100px;
	background: #2d8818;
	border-radius: 5px 5px 0 0;
	animation: sway 3s infinite ease-in-out;
	}
	@keyframes sway {
	0%, 100% { transform: translateX(-5px) rotate(-3deg); }
	50% { transform: translateX(5px) rotate(3deg); }
	}

	/* Rain */
	.rain {
	position: relative;
	overflow: hidden;
	}
	.raindrop {
	position: absolute;
	left: 50%;
	width: 2px;
	height: 15px;
	background: #007acc;
	animation: fall 2s linear infinite;
	opacity: 0;
	}
	.raindrop:nth-child(1) {
	top: -20px; left: 30%;
	animation-delay: 0s;
	}
	.raindrop:nth-child(2) {
	top: -40px; left: 15%;
	animation-delay: 0.5s;
	}
	.raindrop:nth-child(3) {
	top: -60px; left: 65%;
	animation-delay: 1s;
	}
	@keyframes fall {
	0% { opacity: 1; transform: translateY(-100%); }
	100% { opacity: 0; transform: translateY(400%); }
	}
	.puddle {
	position: absolute;
	bottom: -10px;
	left: 50%;
	width: 40px;
	height: 40px;
	background: radial-gradient(circle, #007acc 10%, transparent 30%);
	border-radius: 50%;
	animation: ripple 2s infinite;
	}
	@keyframes ripple {
	0% { transform: scale(0.5); opacity: 0.8; }
	100% { transform: scale(1.5); opacity: 0; }
	}

	/* Sun */
	.sun {
	background: linear-gradient(45deg, #f8e71c, #ff9f1c);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.sun-rays {
	position: absolute;
	top: 50%; left: 50%;
	width: 100px; height: 100px;
	animation: rotate 5s linear infinite;
	}
	.sun-rays::before,
	.sun-rays::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #f8e71c 30%, transparent 50%);
	animation: pulse 2s ease-in-out infinite;
	}
	@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}
	@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
	}

	/* Snow */
	.snow {
	position: relative;
	overflow: hidden;
	}
	.snowflake {
	position: absolute;
	width: 5px;
	height: 5px;
	background: #fff;
	border-radius: 50%;
	animation: snowfall 5s linear infinite;
	}
	.snowflake:nth-child(1) {
	top: -20px; left: 20%;
	animation-delay: 0s;
	}
	.snowflake:nth-child(2) {
	top: -40px; left: 60%;
	animation-delay: 1s;
	}
	.snowflake:nth-child(3) {
	top: -60px; left: 80%;
	animation-delay: 2s;
	}
	@keyframes snowfall {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(150%); }
	}
	.snow-base {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background: #fff;
	border-radius: 0 0 15px 15px;
	animation: accumulate 3s infinite;
	}
	@keyframes accumulate {
	0% { height: 20px; }
	100% { height: 40px; }
	}
	</style>
	</head>
	<body>
	<div class="weather-container">
	<!-- Wind Card -->
	<div class="weather-card wind">
	<div class="clouds">
	<div class="cloud"></div>
	<div class="cloud"></div>
	<div class="cloud"></div>
	</div>
	<div class="tree"></div>
	<div class="weather-type">Wind</div>
	</div>

	<!-- Rain Card -->
	<div class="weather-card rain">
	<div class="raindrop"></div>
	<div class="raindrop"></div>
	<div class="raindrop"></div>
	<div class="puddle"></div>
	<div class="weather-type">Rain</div>
	</div>

	<!-- Sun Card -->
	<div class="weather-card sun">
	<div class="sun-rays"></div>
	<div class="weather-type">Sun</div>
	</div>

	<!-- Snow Card -->
	<div class="weather-card snow">
	<div class="snowflake"></div>
	<div class="snowflake"></div>
	<div class="snowflake"></div>
	<div class="snow-base"></div>
	<div class="weather-type">Snow</div>
	</div>
	</div>
	</body>
	</html>