Skip to content

Commit 40e0db6

Browse files
omroy07omroy07
authored
Merge pull request #232 from Samridhi012/main
Integrating Weather Check System
2 parents c04f91b + 89fc723 commit 40e0db6

5 files changed

Lines changed: 647 additions & 0 deletions

File tree

‎images/weather.webp‎

24.2 KB
Loading

‎main.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ <h2>Welcome to AgriTech</h2>
147147
<li><a href="disease.html">🔬 Disease Prediction</a></li>
148148
<li><a href="organic.html">🌿 Organic Farming</a></li>
149149
<li><a href="farmer.html">👥 Farmer Network</a></li>
150+
<li><a href="weather.html">⛅ Weather Check</a></li>
150151
<li><a href="shopkeeper.html">🏪 Shopkeeper Listings</a></li>
151152
<li><a href="chat.html">🤖 ChatBot</a></li>
152153
<li><a href="plantation.html">🌳 Plantation</a></li>
@@ -233,6 +234,20 @@ <h3>Organic Farming Guide</h3>
233234
</div>
234235
</a>
235236

237+
<a href="weather.html" class="grid-item">
238+
<img src="images/weather.webp" alt="Weather check" loading="lazy" />
239+
<div class="grid-item-content">
240+
<h3>Weather Check</h3>
241+
<p>
242+
Check current weather of your place and weather for upcoming hours and days to plan your farming practices.
243+
</p>
244+
<div class="grid-item-footer">
245+
<span class="feature-badge">Real-time</span>
246+
<span class="arrow-icon">→</span>
247+
</div>
248+
</div>
249+
</a>
250+
236251
<a href="farmer.html" class="grid-item">
237252
<img src="images/farmer.avif" alt="Farmer Connection" loading="lazy" />
238253
<div class="grid-item-content">

‎weather.css‎

Lines changed: 356 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
1+
body{
2+
margin: 0 auto;
3+
padding: 0;
4+
background-image: url("https://www.transparenttextures.com/patterns/clean-textile.png");
5+
display: flex;
6+
flex-direction: column;
7+
}
8+
9+
.box{
10+
background-color: #ceecf7;
11+
/* background-image: url("https://img.freepik.com/premium-vector/day-with-clouds-weather-app-screen-mobile-interface-design-forecast-weather-background-time-concept-vector-banner_87946-4137.jpg") ; */
12+
opacity: 1;
13+
width: 60% ;
14+
height: 600px;
15+
/* position: relative;
16+
top: 18%;
17+
left: 20%; */
18+
margin: 0 auto;
19+
margin-top: 50px;
20+
margin-bottom: 50px;
21+
margin-left: 22%;
22+
23+
border-radius: 20px;
24+
/* border: 2px solid rgb(0, 0, 0); */
25+
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.389);
26+
display: flex;
27+
flex-direction: row;
28+
backdrop-filter: blur(10px); /* Adjust the blur intensity */
29+
background-color: rgba(255, 255, 255, 0.5); /* Optional: Add transparency */
30+
}
31+
32+
33+
.box .left{
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: space-evenly;
37+
width: 400px;
38+
height: 100%;
39+
}
40+
41+
.box .left .main{
42+
text-align: center;
43+
}
44+
.box .left .main input{
45+
width: 75%;
46+
height: 15px;
47+
border-radius: 20px;
48+
border: 2px solid #aeadad;
49+
background-color: rgb(255, 255, 255) ;
50+
padding: 12px;
51+
}
52+
.box .left .main button{
53+
width: 30%;
54+
height: 30px;
55+
margin-top: 20px;
56+
border-radius: 20px;
57+
border: 2px solid #aeadad;
58+
background-color: white;
59+
cursor: pointer;
60+
transition: all 0.4s ease;
61+
overflow: hidden;
62+
}
63+
.box .left .main button:hover {
64+
/* background: #b4bdc0; */
65+
transform: translateY(-5px) scale(1.05);
66+
border-radius: 8px;
67+
}
68+
69+
70+
71+
.box .left .general{
72+
display: flex;
73+
flex-direction: column;
74+
justify-content: center;
75+
align-items: center;
76+
/* width: 80%; */
77+
/* margin-left: 20%; */
78+
padding: 30px;
79+
}
80+
.box .left .general h3 {
81+
font-size: 35px;
82+
margin-top: 10px;
83+
margin-bottom: 0;
84+
font-family: "Tinos", serif;
85+
}
86+
87+
.box .left .general h4 {
88+
margin-top: 5px;
89+
margin-bottom: 0;
90+
}
91+
92+
.box .left .general h5 {
93+
margin-top: 5px;
94+
margin-bottom: 0;
95+
}
96+
97+
.box .left .general h6 {
98+
font-size: 20px;
99+
margin-top: 5px;
100+
margin-bottom: 0;
101+
}
102+
103+
.box .left .general p {
104+
font-size: 50px;
105+
margin-top: 5px;
106+
margin-bottom: 0;
107+
font-family: "Libre Caslon Display", serif;
108+
font-weight: 200;
109+
color: black;
110+
}
111+
112+
.box .left .general p img {
113+
/* image added dynamically */
114+
width: 60px;
115+
height: 60px;
116+
position: relative;
117+
top: 20%;
118+
left: 5%;
119+
opacity: 1;
120+
}
121+
122+
123+
.box .right{
124+
display: flex;
125+
flex-direction: column ;
126+
justify-content: space-evenly;
127+
padding: 20px;
128+
width: 60%;
129+
margin-right: 10px;
130+
margin-bottom: 10px;
131+
}
132+
133+
/* Hourly forecast */
134+
135+
.box .right .hourly{
136+
display: flex;
137+
flex-direction: column;
138+
height: 250px;
139+
margin-bottom: 20px;
140+
border-radius: 12px;
141+
}
142+
.box .right .hourly div p{
143+
font-size: 18px ;
144+
font-weight: bold;
145+
}
146+
.box .right .hourly .hour{
147+
display: flex;
148+
flex-direction: row;
149+
150+
overflow: auto;
151+
overflow-x: scroll;
152+
/* overflow: hidden; */
153+
scrollbar-width: 2px;
154+
155+
height: 200px;
156+
border: 1px solid #aeadad;
157+
padding: 10px;
158+
background-color: white;
159+
border-radius: 12px;
160+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0
161+
}
162+
#hour::-webkit-scrollbar-track{
163+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
164+
background-color: #F5F5F5;
165+
border-radius: 20px;
166+
height: 200px;
167+
}
168+
#hour::-webkit-scrollbar{
169+
height: 4px;
170+
background-color: #F5F5F5;
171+
border-radius: 30px;
172+
}
173+
#hour::-webkit-scrollbar-thumb{
174+
background-color: #a5a5a5;
175+
border: 1px solid #9b9b9b;
176+
}
177+
178+
.box .right .hourly .hour div{
179+
display: flex;
180+
flex-direction: column;
181+
justify-content: space-evenly;
182+
align-items: center;
183+
margin-right: 20px;
184+
}
185+
.box .right .hourly .hour div p{
186+
font-size: 15px;
187+
text-align: center;
188+
}
189+
.box .right .hourly .hour div img{
190+
width: 40px;
191+
height: 40px;
192+
}
193+
194+
/* 10 days forecast */
195+
196+
.box .right .daywise{
197+
display: flex;
198+
flex-direction: column;
199+
margin-bottom: 15px;
200+
}
201+
.box .right .daywise div p{
202+
font-size: 18px ;
203+
font-weight: bold;
204+
205+
}
206+
.box .right .daywise .day{
207+
display: flex;
208+
flex-direction: column;
209+
overflow-y: scroll;
210+
/* overflow: hidden; */
211+
scrollbar-width: 2px;
212+
scroll-behavior: smooth;
213+
scrollbar-color: white;
214+
height: 200px;
215+
border: 1px solid #aeadad;
216+
padding: 10px;
217+
background-color: white;
218+
/* border-radius:top-left top-right bottom-right bottom-left */
219+
border-radius: 12px 12px;
220+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0
221+
}
222+
#day::-webkit-scrollbar-track{
223+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
224+
background-color: #F5F5F5;
225+
border-radius: 20px;
226+
height: 200px;
227+
}
228+
#day::-webkit-scrollbar{
229+
width: 4px;
230+
background-color: #F5F5F5;
231+
border-radius: 30px;
232+
}
233+
#day::-webkit-scrollbar-thumb{
234+
background-color: #a5a5a5;
235+
border: 1px solid #9b9b9b;
236+
}
237+
238+
.box .right .daywise .day div{
239+
display: flex;
240+
flex-direction: row;
241+
justify-content: space-between;
242+
align-items: center;
243+
background-color: white ;
244+
padding: 10px;
245+
padding-bottom: 0;
246+
}
247+
.box .right .daywise .day div p{
248+
font-size: 15px;
249+
text-align: center;
250+
}
251+
.box .right .daywise .day div img{
252+
width: 40px;
253+
height: 40px;
254+
}
255+
256+
/* Footer */
257+
258+
footer{
259+
position: relative;
260+
bottom: 0;
261+
width: 100%;
262+
}
263+
264+
.site-footer {
265+
background: linear-gradient(135deg, #2e7d32, #66bb6a);
266+
color: #fff;
267+
padding: 2rem 1.25rem;
268+
}
269+
270+
.site-footer .footer-inner {
271+
max-width: 1200px;
272+
margin: 0 auto;
273+
display: grid;
274+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
275+
gap: 1.5rem;
276+
align-items: flex-start;
277+
}
278+
279+
.footer-brand {
280+
display: flex;
281+
flex-direction: column;
282+
gap: .5rem
283+
}
284+
285+
.footer-logo {
286+
width: 48px;
287+
height: 48px;
288+
border-radius: 8px;
289+
object-fit: cover;
290+
background: #fff;
291+
padding: 4px
292+
}
293+
294+
.site-footer h3,
295+
.site-footer h4 {
296+
margin: 0 0 .5rem 0
297+
}
298+
299+
.site-footer p {
300+
margin: 0;
301+
opacity: .9
302+
}
303+
304+
.site-footer ul {
305+
list-style: none;
306+
padding: 0;
307+
margin: 0;
308+
display: flex;
309+
flex-direction: column;
310+
gap: .4rem
311+
}
312+
313+
.site-footer a {
314+
color: #fff;
315+
text-decoration: none;
316+
opacity: .9;
317+
transition: opacity .2s
318+
}
319+
320+
.site-footer a:hover {
321+
opacity: 1;
322+
text-decoration: underline
323+
}
324+
325+
.footer-bottom {
326+
max-width: 1200px;
327+
margin: 1rem auto 0;
328+
padding-top: 1rem;
329+
border-top: 1px solid rgba(255, 255, 255, .25);
330+
text-align: center;
331+
font-size: .9rem;
332+
opacity: .9
333+
}
334+
335+
.social-media {
336+
display: flex;
337+
gap: 1rem;
338+
margin-top: .5rem
339+
}
340+
341+
.social-media a {
342+
display: flex;
343+
align-items: center;
344+
justify-content: center;
345+
width: 40px;
346+
height: 40px;
347+
background: rgba(255, 255, 255, .1);
348+
border-radius: 50%;
349+
transition: all .3s ease;
350+
font-size: 1.2rem
351+
}
352+
353+
.social-media a:hover {
354+
background: rgba(255, 255, 255, .2);
355+
transform: translateY(-2px)
356+
}

0 commit comments

Comments
 (0)