Update templates/index.html

templates/index.html

@@ -7,13 +7,11 @@
     /* Import a Google Font for a modern look */
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 
-    /* Keyframe for fade-in effect */
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
     }
 
-    /* Global Styles */
     body {
       margin: 0;
       padding: 0;
@@ -25,7 +23,6 @@
       min-height: 100vh;
     }
 
-    /* Container Styles */
     .container {
       width: 95%;
       max-width: 800px;
@@ -37,7 +34,6 @@
       animation: fadeIn 1s ease-out;
     }
 
-    /* Heading Styles */
     h1 {
       color: #2e7d32;
       text-align: center;
@@ -45,7 +41,6 @@
       font-size: 2.8em;
     }
 
-    /* Form Styles */
     form {
       display: flex;
       flex-direction: column;
@@ -93,7 +88,6 @@
       text-align: center;
     }
 
-    /* Map Section Styles */
     .map {
       margin-top: 40px;
       text-align: center;
@@ -175,6 +169,7 @@
   {% if image_url %}
   <div class="map" id="mapContainer">
     <h2>Fetched Results</h2>
+    <!-- Use the proxy URL for the image -->
     <img src="{{ image_url }}" alt="Map for {{ selected_param }} parameter" onerror="handleImageError(this)">
     <div id="dataNotAvailable" class="error" style="display:none;">Data Not Available. Cannot plot map.</div>
   </div>
@@ -191,7 +186,6 @@
     const pestSelect = document.getElementById("pest");
     const selectedCrop = cropSelect.value;
 
-    // Clear existing options
     pestSelect.innerHTML = "";
     const defaultOption = document.createElement("option");
     defaultOption.value = "";
@@ -204,14 +198,12 @@
         const option = document.createElement("option");
         option.value = p;
         option.textContent = p;
-        // Preserve previous selection if any
         if (p === "{{ selected_pest }}") {
           option.selected = true;
         }
         pestSelect.appendChild(option);
       });
     }
-    // Fetch week options if Year is selected
     if (document.getElementById("year").value) {
       fetchWeeks();
     }
@@ -247,13 +239,11 @@
       .catch(err => console.error("Error fetching weeks:", err));
   }
 
-  // Error handler for image load failure
   function handleImageError(img) {
     img.style.display = "none";
     document.getElementById("dataNotAvailable").style.display = "block";
   }
 
-  // Initialize pest dropdown and fetch weeks on page load
   window.onload = function() {
     updatePestDropdown();
     if ("{{ selected_year }}" && "{{ selected_crop }}" && "{{ selected_pest }}") {