Spaces:

rajkhanke
/

Farmer_Training

Running

App Files Files Community

rajkhanke commited on Mar 23

Commit

f78a214

verified ·

1 Parent(s): 339b743

Update index.html

Browse files

Files changed (1) hide show

index.html +250 -18

index.html CHANGED Viewed

@@ -1,19 +1,251 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Farmers Training</title>
+  <style>
+    /* Global Styles */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: Arial, sans-serif;
+    }
+    body {
+      background: #f4f4f4;
+      color: #333;
+      line-height: 1.6;
+    }
+    /* Header */
+    header {
+      background: #2e7d32;
+      color: #fff;
+      padding: 20px 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    header h1 {
+      font-size: 2rem;
+    }
+    .search-container {
+      position: relative;
+    }
+    .search-container input[type="text"] {
+      padding: 8px 12px;
+      border: none;
+      border-radius: 20px;
+      width: 200px;
+      outline: none;
+      transition: width 0.3s ease;
+    }
+    .search-container input[type="text"]:focus {
+      width: 250px;
+    }
+    /* Video Grid */
+    .video-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+      padding: 20px 40px;
+    }
+    .card {
+      background: #fff;
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      opacity: 0;
+      transform: translateY(20px);
+      animation: fadeInUp 0.5s forwards;
+    }
+    .card:nth-child(odd) {
+      animation-delay: 0.1s;
+    }
+    .card:nth-child(even) {
+      animation-delay: 0.2s;
+    }
+    .card:hover {
+      transform: scale(1.03);
+      box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
+    }
+    .card iframe {
+      width: 100%;
+      height: 200px;
+      border: none;
+    }
+    .card-content {
+      padding: 15px;
+    }
+    .card-content h3 {
+      margin-bottom: 10px;
+      font-size: 1.2rem;
+      color: #2e7d32;
+    }
+    .card-content p {
+      font-size: 0.95rem;
+      color: #666;
+    }
+    @keyframes fadeInUp {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Farmers Training</h1>
+    <div class="search-container">
+      <input type="text" placeholder="Search...">
+    </div>
+  </header>
+  <main>
+    <div class="video-grid">
+      <!-- Card 1 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/XsLIkggkcw4" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Farming Techniques 101</h3>
+          <p>A quick overview of modern farming techniques to boost productivity.</p>
+        </div>
+      </div>
+      <!-- Card 2 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/QxK4YbPrWXk" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Organic Farming</h3>
+          <p>Learn how to switch to organic methods for sustainable agriculture.</p>
+        </div>
+      </div>
+      <!-- Card 3 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/Z9HAy9EYKKs" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Irrigation Systems</h3>
+          <p>Explore different irrigation systems and their benefits.</p>
+        </div>
+      </div>
+      <!-- Card 4 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/XeNA6XdMoF8" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Crop Rotation Strategies</h3>
+          <p>Understanding the importance of crop rotation for soil health.</p>
+        </div>
+      </div>
+      <!-- Card 5 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/L14woJZEJnk" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Soil Fertility</h3>
+          <p>Tips to improve soil fertility using natural and chemical methods.</p>
+        </div>
+      </div>
+      <!-- Card 6 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/TfiWMGrRU7w" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Modern Tractor Use</h3>
+          <p>Learn about the latest tractors and machinery for farming.</p>
+        </div>
+      </div>
+      <!-- Card 7 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/_tijHjup-gM" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Precision Agriculture</h3>
+          <p>Using technology to optimize farm production and reduce waste.</p>
+        </div>
+      </div>
+      <!-- Card 8 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/dmThw7TyutA" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Farm Safety Tips</h3>
+          <p>Essential safety guidelines to protect yourself on the farm.</p>
+        </div>
+      </div>
+      <!-- Card 9 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/eQSNKrigiOM" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Greenhouse Management</h3>
+          <p>Learn how to manage greenhouses for year-round farming.</p>
+        </div>
+      </div>
+      <!-- Card 10 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/xW50iMVzo2k" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Farm Equipment Maintenance</h3>
+          <p>Maintenance tips to keep your farm equipment running smoothly.</p>
+        </div>
+      </div>
+      <!-- Card 11 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/AzDWmpVOk5I" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Livestock Management</h3>
+          <p>Best practices for raising and caring for livestock.</p>
+        </div>
+      </div>
+      <!-- Card 12 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/CIVfSXoTsyk" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Organic Pesticides</h3>
+          <p>How to make and use organic pesticides for crop protection.</p>
+        </div>
+      </div>
+      <!-- Card 13 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/Ltc4ZzQN_vE" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Sustainable Farming</h3>
+          <p>Steps toward a sustainable and eco-friendly farm operation.</p>
+        </div>
+      </div>
+      <!-- Card 14 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/ttBywb7DwSo" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Farm Budgeting</h3>
+          <p>Managing finances and budgeting effectively on the farm.</p>
+        </div>
+      </div>
+      <!-- Card 15 -->
+      <div class="card">
+        <iframe src="https://www.youtube.com/embed/Ov3tMgej808" allowfullscreen></iframe>
+        <div class="card-content">
+          <h3>Advanced Farming Tools</h3>
+          <p>Explore the latest tools and technology transforming farming.</p>
+        </div>
+      </div>
+    </div>
+  </main>
+  <script>
+    const searchInput = document.querySelector('.search-container input[type="text"]');
+    const cards = document.querySelectorAll('.card');
+    searchInput.addEventListener('input', function() {
+      const searchTerm = searchInput.value.toLowerCase();
+      cards.forEach(card => {
+        const title = card.querySelector('h3').textContent.toLowerCase();
+        const description = card.querySelector('p').textContent.toLowerCase();
+        if (title.includes(searchTerm) || description.includes(searchTerm)) {
+          card.style.display = 'block';
+        } else {
+          card.style.display = 'none';
+        }
+      });
+    });
+  </script>
+</body>
 </html>