omroy07 · Gowthamimudam · Feb 12, 2026
diff --git a/index.css b/index.css
@@ -1104,4 +1104,123 @@ body {
     padding: 0.3rem 0.5rem;
     font-size: 0.7rem;
   }
-}
+}
+/* Dashboard Cards */
+.card {
+  background: #ffffff;
+  padding: 16px;
+  margin: 15px 0;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card img {
+  width: 60px;
+  margin-bottom: 10px;
+}
+
+/* Crop Health Status */
+.health {
+  margin-top: 15px;
+  padding: 12px;
+  border-radius: 10px;
+  font-weight: bold;
+  text-align: center;
+}
+
+/* Health Colors */
+.good {
+  background-color: #c8e6c9;
+  color: #2e7d32;
+}
+
+.warning {
+  background-color: #fff9c4;
+  color: #f57f17;
+}
+
+.bad {
+  background-color: #ffcdd2;
+  color: #c62828;
+}
+.dashboard {
+  margin: 40px auto;
+  max-width: 900px;
+}
+#yieldChart {
+  width: 100%;
+  height: 300px;
+}
+.dashboard {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 20px;
+  border-radius: 12px;
+  margin: 30px;
+}
+
+
+/* Farmer Success Stories Section */
+#success-stories {
+  padding: 60px 20px;
+  background: #f9f9f9;
+  text-align: center;
+}
+
+#success-stories .section-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #222; /* darker title */
+  margin-bottom: 30px;
+}
+/* Fake image box for offline placeholder */
+.fake-img {
+  width: 100%;
+  height: 200px;
+  background: #ddd;
+  color: #555;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+
+
+.story-cards {
+  display: flex;
+  gap: 25px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.story-card {
+  background: #0d1117;
+  width: 280px;
+  padding: 18px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  color: white;
+}
+
+.story-card img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.story-card h3 {
+  font-size: 22px;
+  margin-top: 15px;
+}
+
+/* Hover Styles for Success Story Cards */
+.story-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.story-card:hover {
+  transform: translateY(-7px) scale(1.02);
+  box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.15);
+}
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <link rel="icon" type="image/png" href="images/logo.png">
+  <link rel="stylesheet" href="index.css">
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="description"
@@ -1374,6 +1375,21 @@
 
 <body>
 
+  <!-- Offline & Cached Notices -->
+  <div id="network-status" class="hidden">
+    ⚠️ Offline or poor connection
+  </div>
+
+  <div id="cached-notice" class="hidden">
+    ⚠️ Showing cached data — may be outdated
+  </div>
+
+  <!-- rest of your page starts here -->
+
+
+
+
+
   <canvas id="bg-canvas"></canvas>
 
  <nav class="navbar" data-theme="light">
@@ -1453,6 +1469,7 @@
   </div>
 </nav>
 
+
 <script>
   // Language Selector Function
   function setLanguage(code, label) {
@@ -1666,6 +1683,28 @@ <h3 id="feature-6-title" class="feature-title serif">Finance & Insurance</h3>
       </div>
     </div>
   </section>
+   </div>
+      <!-- Farmer Success Stories Section -->
+<section id="success-stories" class="success-stories-container">
+  <h2 class="section-title">Farmer Success Stories</h2>
+  <div class="story-cards">
+
+    <!-- EXAMPLE CARD -->
+<div class="story-card">
+  <div class="fake-img">Farmer Photo</div>
+  <h3>Farmer Name</h3>
+  <p>Crop: Wheat</p>
+  <p>Yield Increased: 25%+</p>
+  <blockquote>"Using AgriTech insights improved my crop and income!"</blockquote>
+</div>
+
+
+
+
+    <!-- You can duplicate this card for more stories -->
+
+  </div>
+</section>
 
   <footer class="site-footer tech-dark-theme final-match">
   <div class="footer-top-accent"></div>
@@ -1699,7 +1738,8 @@ <h4>Quick Links</h4>
           <li><a href="chat.html"><i class="fas fa-robot"></i> AI Assistant</a></li>
           <li><a href="terms-and-service.html"><i class="fas fa-file-contract"></i> Terms & Service</a></li>
         </ul>
-      </div>
+
+
 
       <div class="footer-section footer-contact">
         <h4>Contact</h4>
@@ -1814,6 +1854,8 @@ <h4>Contact</h4>
 
     animate();
   </script>
+
+
 
 
 
@@ -1895,6 +1937,8 @@ <h4>Contact</h4>
       });
     }
 
+
+
     // ===== MOBILE MENU (FINAL FIX) =====
 const hamburgerBtn = document.getElementById('hamburgerBtn');
 const mobileMenu = document.getElementById('mobileMenu');
@@ -2136,10 +2180,26 @@ <h3>No Results Found</h3>
   <script>
   document.addEventListener("DOMContentLoaded", () => {
     // Restore theme
-    const savedTheme = localStorage.getItem("theme");
-    if (savedTheme) {
-      document.documentElement.setAttribute("data-theme", savedTheme);
-    }
+   const applyTheme = (theme) => {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('theme', theme);
+
+  if (themeText) themeText.textContent = theme === 'dark' ? 'Dark' : 'Light';
+  if (moonIcon) moonIcon.style.display = theme === 'dark' ? 'none' : 'inline-block';
+  if (sunIcon) sunIcon.style.display = theme === 'dark' ? 'inline-block' : 'none';
+};
+
+// Initialize
+const savedTheme = localStorage.getItem('theme') || 'dark';
+applyTheme(savedTheme);
+
+// Toggle on Click
+if (themeText) {
+  themeText.addEventListener('click', () => {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
+    applyTheme(nextTheme);
+  });}
 
     // Restore scroll position
     const scrollY = localStorage.getItem("homeScrollY");

diff --git a/index.js b/index.js
@@ -317,4 +317,43 @@ localStorage.setItem(
   JSON.stringify(tasks)
 );
 
-renderRoadmap(tasks);
+renderRoadmap(tasks);
+// ===== Farmer Visual Dashboard =====
+
+// Yield Prediction Graph
+const yieldCanvas = document.getElementById("yieldChart");
+
+if (yieldCanvas) {
+  new Chart(yieldCanvas, {
+    type: "line",
+    data: {
+      labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
+      datasets: [{
+        label: "Expected Yield",
+        data: [1.8, 2.4, 3.0, 3.6],
+        borderColor: "green",
+        borderWidth: 2,
+        fill: false
+      }]
+    },
+    options: {
+      responsive: true
+    }
+  });
+}
+
+// Crop Health Status
+const healthDiv = document.getElementById("healthStatus");
+const healthStatus = "good"; // good | warning | bad
+
+if (healthDiv) {
+  healthDiv.className = `health ${healthStatus}`;
+
+  if (healthStatus === "good") {
+    healthDiv.innerText = "Crop Health: Good";
+  } else if (healthStatus === "warning") {
+    healthDiv.innerText = "Crop Health: Attention Needed";
+  } else {
+    healthDiv.innerText = "Crop Health: Disease Risk";
+  }
+}