FINAL/MainMedia.html at main · Arable-Farming/FINAL · 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<html class="animate"></html>
 <head>
  <title>
   Crop Disease Media Resources
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap" rel="stylesheet"/>
  <style>
   body {
            font-family: 'Poppins', sans-serif;
        }
        .hover-zoom img {
            transition: transform 0.3s ease;
        }
        .hover-zoom:hover img {
            transform: scale(1.1);
        }
        .animate {
      opacity: 0;
      transform: translateY(100px);
      animation: slideIn 1s ease-out forwards;
    }

    /* Define the keyframes for the slide-in effect */
    @keyframes slideIn {
      0% {
        opacity: 0;
        transform: translateY(100px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Add some delay between each element's animation */
    .animate:nth-child(1) {
      animation-delay: 0.2s;
    }
    .animate:nth-child(2) {
      animation-delay: 0.4s;
    }
    .animate:nth-child(3) {
      animation-delay: 0.6s;
    }
    header {
            background-color: #fff;
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        header nav {
            display: flex;
            align-items: center;
        }
        header nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
            font-weight: 500;
        }
        header .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 700;
        }
        header .logo img {
            margin-right: 10px;
            height: 40px;
        }
        header .scan-btn {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 15px;
        }
        .dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
  </style>
 </head>
 <header>
    <div class="logo">
     <img alt="AI Farming Logo" height="40" src="Only Image\aarablelogo.jpg" width="40"/>
     AGROFIELD
    </div>
    <nav>
     <a href="home.html">
      Home
     </a>
     <a href="finance.html">
      Finance
     </a>
     <a href="MainMedia.html">
      Media
     </a>
     <div class="dropdown">
      <a href="#" class="dropbtn">Services</a>
      <div class="dropdown-content">
        <a href="weather.html">Weather</a>
        <a href="#">Near Shop</a>
        <a href="aimodal.html">Scan Image</a>
      </div>
    </div>
    </nav>
   </header>
  <main class="max-w-7xl mx-auto p-6">
   <section class="text-center my-12">
    <p style="font-size: 60px; line-height: 1.2;width: 700px; margin-bottom: 20px;" class="text-4xl font-bold text-gray-900 mt-4 mx-auto max-w-3xl mb-12">
     Crop Disease Media
     Resources
    </p>
    <p style="width: 500px;line-height: 1.9;font-size: 14px;" class="text-lg text-gray-600 mt-4 mx-auto max-w-3xl mb-12">
     Explore our comprehensive library of images, videos, and articles on various crop diseases. Stay informed and protect your crops with the latest insights.
    </p>
   </section>
   <section class="my-12">
    <h2 style="font-size: 25;margin-top: 50px;margin-top: 150px;" class="text-2xl font-bold text-gray-900">
     Crop Disease Gallery
    </h2>
    <p style="margin-bottom: 40px;" class="text-lg text-gray-600 mt-2">
     Visual resources to help you identify and understand crop diseases. Browse through our collection of images and videos.
     <p style="margin-bottom: 40px;" class="text-lg text-gray-600 mt-2">
        Crop diseases remain a persistent threat to agriculture, but with a combination of traditional practices and modern technology, farmers can manage and mitigate their impact. Prevention and early detection are key to maintaining healthy crops and ensuring food security. As farming evolves, the integration of resistant varieties, sustainable farming practices, and cutting-edge tools will help reduce the devastating effects of crop diseases, securing agricultural productivity for future generations.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mt-6">
     <div class="relative hover-zoom">
      <a href="mediafor tomatobilght.html">
       <img alt="Blight on Tomatoes" class="w-full h-64 object-cover rounded-lg" src="Only Image\tamato.jpeg"/>
       <div class="absolute bottom-0 left-0 right-0 text-center text-white p-2">
        <h3 style="color: rgba(255, 255, 255, 0.534);line-height:1.2 ;" class="text-lg font-semibold">
         Blight on Tomato
        </h3>
       </div>
      </a>
     </div>
     <div class="relative hover-zoom">
      <a href="mediaforwheatrust.html">
       <img alt="Wheat Rust" class="w-full h-64 object-cover rounded-lg" src="Only Image\wheat rust.jpeg"/>
       <div class="absolute bottom-0 left-0 right-0 text-center text-white p-2">
        <h3 style="color:rgba(255, 255, 255, 0.534);line-height:1.2 ;" class="text-lg font-semibold">
         Wheat Rust
        </h3>
       </div>
      </a>
     </div>
     <div class="relative hover-zoom">
      <a href="mediaforcornsmut.html">
       <img alt="Corn Smut" class="w-full h-64 object-cover rounded-lg" src="Only Image\corn smut.jpg"/>
       <div class="absolute bottom-0 left-0 right-0 text-center text-white p-2">
        <h3 style="color:rgba(255, 255, 255, 0.534);line-height:1.2 ;" class="text-lg font-semibold">
         Corn Smut
        </h3>
       </div>
      </a>
     </div>
     <div class="relative hover-zoom">
      <a href="mediapotatoblight.html">
       <img alt="Potato Blight" class="w-full h-64 object-cover rounded-lg" src="Only Image\patato.jpeg"/>
       <div class="absolute bottom-0 left-0 right-0 text-center text-white p-2">
        <h3 style="color:rgba(255, 255, 255, 0.534);line-height:1.2 ;" class="text-lg font-semibold">
         Potato Blight
        </h3>
       </div>
      </a>
     </div>
     <div class="relative hover-zoom">
      <a href="mediaforriceblast.html">
       <img alt="Rice scab" class="w-full h-64 object-cover rounded-lg" src="Only Image\Rice-Blast-Disease.png"/>
       <div class="absolute bottom-0 left-0 right-0 text-center text-white p-2">
        <h3 style="color: rgba(255, 255, 255, 0.534);line-height:1.2 ;" class="text-lg font-semibold">
        Rice leaf Blast
        </h3>
       </div>
      </a>
     </div>
     <div class="relative hover-zoom">
      <a href="mediaforapplesacb.html">
       <img alt="Apple Scab" class="w-full h-64 object-cover rounded-lg" src="Only Image\apple-scab.jpg"/>
       <div class="absolute bottom-0 left-0 right-0 text-center text-white p-2">
        <h3 style="color: rgba(255, 255, 255, 0.534);line-height:1.2 ;" class="text-lg font-semibold">
         Apple Scab
        </h3>
       </div>
      </a>
     </div>
    </div>
   </section>
   <section class="my-12">
    <h2 style="margin-top: 150px;" class="text-2xl font-bold text-gray-900">
     Crop Disease Articles
    </h2>
    <p style="margin-bottom: 40px;" class="text-lg text-gray-600 mt-2">
Crop diseases pose a significant challenge to global agriculture, threatening food security, farmer livelihoods, and economic stability. These diseases are caused by various pathogens, including fungi, bacteria, viruses, and pests, which affect the growth, yield, and quality of crops. The impact of crop diseases is felt worldwide, from small-scale farmers to large agricultural operations, leading to severe financial losses and reduced productivity. Understanding the causes, symptoms, and management of crop diseases is crucial for sustainable farming.
    </p>
    <hr style="margin-bottom: 50px;" class="border-gray-300 my-5"/>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
     <div class="bg-white p-6 rounded-lg shadow-md">
      <p class="text-sm text-gray-500">
       Sep 19, 2021
      </p>
      <h3 class="text-lg font-semibold text-gray-900 mt-2">
       Understanding Blight in Tomatoes
      </h3>
      <p class="text-sm text-green-500 mt-1">
       Tomato Disease
      </p>
      <p class="text-sm text-gray-600 mt-2">
       Learn about the causes, symptoms, and prevention methods for blight in tomatoes.
      </p>
      <div class="flex items-center mt-4">
       <div class="ml-3">
        <p class="text-sm font-semibold text-gray-900">
         Dr. Sarah Green
        </p>
        <p class="text-sm text-gray-600">
         Plant Pathologist
        </p>
       </div>
      </div>
     </div>
     <div class="bg-white p-6 rounded-lg shadow-md">
      <p class="text-sm text-gray-500">
       Aug 28, 2021
      </p>
      <h3 class="text-lg font-semibold text-gray-900 mt-2">
       Combating Wheat Rust
      </h3>
      <p class="text-sm text-green-500 mt-1">
       Wheat Disease
      </p>
      <p class="text-sm text-gray-600 mt-2">
       Effective strategies to prevent and manage wheat rust in your fields.
      </p>
      <div class="flex items-center mt-4">
       <div class="ml-3">
        <p class="text-sm font-semibold text-gray-900">
         John Farmer
        </p>
        <p class="text-sm text-gray-600">
         Agricultural Expert
        </p>
       </div>
      </div>
     </div>
     <div class="bg-white p-6 rounded-lg shadow-md">
      <p class="text-sm text-gray-500">
       Jul 20, 2021
      </p>
      <h3 class="text-lg font-semibold text-gray-900 mt-2">
       Dealing with Corn Smut
      </h3>
      <p class="text-sm text-green-500 mt-1">
       Corn Disease
      </p>
      <p class="text-sm text-gray-600 mt-2">
       An in-depth look at corn smut, its impact, and how to control it.
      </p>
      <div class="flex items-center mt-4">
        <div class="ml-3">
         <p class="text-sm font-semibold text-gray-900">
            Emily Fields
         </p>
         <p class="text-sm text-gray-600">
            Crop Specialist
         </p>
     </div>
    </div>
   </section>
  </main>
  <body class="bg-white text-gray-800">
    <div class="max-w-6xl mx-auto p-6">
     <div class="flex flex-col md:flex-row items-start">
      <div class="w-full md:w-1/2 p-4">
       <img alt="Farmer inspecting crops in a field" class="rounded-lg shadow-lg" height="400" src="Only Image\pexels-artiagarwal-2880741.jpg"/>
      </div>
      <div class="w-full md:w-1/2 p-4">
       <h2 class="text-green-600 text-lg font-semibold mb-2">
        FAQs
       </h2>
       <h1 style="width: 300;" class="text-3xl font-bold mb-6">
        Frequently Asked Questions
       </h1>
       <div class="mb-4">
        <button style="font-weight: normal;font-size: 16px;" class="w-full text-left text-lg font-semibold text-gray-800 py-2 border-b border-gray-200 flex justify-between items-center" onclick="toggleVisibility('answer1')">
         What are the common signs of crop diseases?
         <i class="fas fa-chevron-down">
         </i>
        </button>
        <p style="font-size: 14px;" class="text-gray-600 mt-2 hidden" id="answer1">
         Common signs include discoloration, wilting, and unusual growth patterns. Refer to our gallery for more visual examples.
        </p>
       </div>
       <div class="mb-4">
        <button style="font-weight: normal;font-size: 16px;" class="w-full text-left text-lg font-semibold text-gray-800 py-2 border-b border-gray-200 flex justify-between items-center" onclick="toggleVisibility('answer2')">
         How can AI help in predicting crop diseases?
         <i class="fas fa-chevron-down">
         </i>
        </button>
        <p style="font-size: 14px;" class="text-gray-600 mt-2 hidden" id="answer2">
         AI can analyze patterns and predict potential outbreaks, helping farmers take preventive measures.
        </p>
       </div>
       <div class="mb-4">
        <button style="font-weight: normal;font-size: 16px;" class="w-full text-left text-lg font-semibold text-gray-800 py-2 border-b border-gray-200 flex justify-between items-center" onclick="toggleVisibility('answer3')">
         Where can I find more resources on crop disease management?
         <i class="fas fa-chevron-down">
         </i>
        </button>
        <p style="font-size: 14px;" class="text-gray-600 mt-2 hidden" id="answer3">
         You can find more resources on our website, including articles, videos, and expert advice.
        </p>
       </div>
      </div>
     </div>
    </div>
    <footer class="bg-green-100 mt-12 py-6">
     <div class="max-w-6xl mx-auto text-center text-gray-600">
      <div class="flex justify-center space-x-4 mb-4">
       <a class="hover:text-gray-400 transition duration-300 text-sm font-bold" href="#">
      </div>
      <p>
        © AI Farming 2024. Empowering Farmers with AI Technology. All rights reserved.
      </p>
     </div>
    </footer>
 </body>
 <script>
    function toggleVisibility(id) {
             var answers = document.querySelectorAll('p[id^="answer"]');
             answers.forEach(function(answer) {
                 if (answer.id === id) {
                     answer.classList.toggle('hidden');
                 } else {
                     answer.classList.add('hidden');
                 }
             });
         }

   </script>
   <script>
   </script>
</html>