You-Dont-Need-JavaScript/Animated-Weather-Widget/index.html at cb5b40fd8d719688e63ec51b242f04001767beb8 · you-dont-need/You-Dont-Need-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure CSS Animated Weather Widget</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 class="title">Pure CSS Weather Widget</h1>
        <p class="subtitle">Switch between weather conditions using radio buttons - No JavaScript!</p>

        <!-- Weather Type Selector -->
        <!-- Radio buttons must be siblings of weather-widget for CSS to work -->
        <input type="radio" name="weather" id="sunny" checked>
        <input type="radio" name="weather" id="cloudy">
        <input type="radio" name="weather" id="rainy">
        <input type="radio" name="weather" id="snowy">
        <input type="radio" name="weather" id="night">

        <div class="weather-selector">
            <label for="sunny">☀️ Sunny</label>
            <label for="cloudy">☁️ Cloudy</label>
            <label for="rainy">🌧️ Rainy</label>
            <label for="snowy">❄️ Snowy</label>
            <label for="night">🌙 Night</label>
        </div>

        <!-- Weather Widget -->
        <div class="weather-widget">
            <!-- Background Sky -->
            <div class="sky">
                <!-- Sun -->
                <div class="sun">
                    <div class="sun-rays"></div>
                </div>

                <!-- Moon -->
                <div class="moon">
                    <div class="crater crater1"></div>
                    <div class="crater crater2"></div>
                    <div class="crater crater3"></div>
                </div>

                <!-- Stars (for night mode) -->
                <div class="stars">
                    <div class="star star1"></div>
                    <div class="star star2"></div>
                    <div class="star star3"></div>
                    <div class="star star4"></div>
                    <div class="star star5"></div>
                    <div class="star star6"></div>
                    <div class="star star7"></div>
                    <div class="star star8"></div>
                </div>

                <!-- Clouds -->
                <div class="cloud cloud1">
                    <div class="cloud-part"></div>
                    <div class="cloud-part"></div>
                    <div class="cloud-part"></div>
                </div>
                <div class="cloud cloud2">
                    <div class="cloud-part"></div>
                    <div class="cloud-part"></div>
                    <div class="cloud-part"></div>
                </div>
                <div class="cloud cloud3">
                    <div class="cloud-part"></div>
                    <div class="cloud-part"></div>
                    <div class="cloud-part"></div>
                </div>

                <!-- Rain -->
                <div class="rain">
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                    <div class="raindrop"></div>
                </div>

                <!-- Snow -->
                <div class="snow">
                    <div class="snowflake">❅</div>
                    <div class="snowflake">❅</div>
                    <div class="snowflake">❆</div>
                    <div class="snowflake">❅</div>
                    <div class="snowflake">❆</div>
                    <div class="snowflake">❅</div>
                    <div class="snowflake">❆</div>
                    <div class="snowflake">❅</div>
                    <div class="snowflake">❆</div>
                    <div class="snowflake">❅</div>
                </div>
            </div>

            <!-- Weather Info Card -->
            <div class="weather-info">
                <div class="location">
                    <svg class="location-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    <span class="city">San Francisco</span>
                </div>

                <div class="temperature">
                    <span class="temp-value">72</span>
                    <span class="temp-unit">°F</span>
                </div>

                <div class="condition">Partly Cloudy</div>

                <div class="details">
                    <div class="detail-item">
                        <span class="detail-label">Humidity</span>
                        <span class="detail-value">65%</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Wind</span>
                        <span class="detail-value">12 mph</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Pressure</span>
                        <span class="detail-value">1013 mb</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Section -->
        <div class="info-section">
            <h3>✨ Pure CSS Features</h3>
            <ul>
                <li>🎨 Animated sun with rotating rays</li>
                <li>☁️ Floating clouds with smooth motion</li>
                <li>🌧️ Realistic rain animation</li>
                <li>❄️ Falling snowflakes</li>
                <li>🌙 Night mode with twinkling stars</li>
                <li>📱 Fully responsive design</li>
                <li>🚫 Zero JavaScript required!</li>
            </ul>
        </div>
    </div>
</body>
</html>