Spaces:

Rajkhanke007
/

irrigation_Water_Requirement_Prediction

Running

App Files Files Community

RushiMane2003 commited on Sep 16, 2025

Commit

c1efad7

verified ·

1 Parent(s): c9cc2fc

made responsive

Browse files

Files changed (1) hide show

templates/index.html +125 -101

templates/index.html CHANGED Viewed

@@ -3,155 +3,179 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Smart Irrigation Water Predictor</title>
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   <style>
       body {
-          background-color: #f0fff0;
       }
-      .container {
-          border: 1px solid #28a745;
-          padding: 20px;
-          margin: 40px auto;
-          background-color: white;
-          border-radius: 10px;
-      }
-      #weather_info {
-          background-color: #f8f9fa;
-          border: 2px solid #000;
-          padding: 15px;
-          border-radius: 5px;
       }
-      h1 {
-          color: #28a745;
-          text-align: center;
           font-weight: bold;
       }
-      .input-container {
-          display: flex;
-          justify-content: space-between;
-          height: 100%;
       }
-      .left-input {
-          width: 53%;
-          border-right: 2px solid #28a745;
-          padding-right: 20px;
       }
-      .right-image {
-          width: 45%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 200%;
-          margin-top: 50px;
       }
-      .right-image img {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
       }
       .form-control {
           border-color: #28a745;
-          background-color: #f0fff0;
       }
       .btn-green {
           background-color: #28a745;
           color: white;
           font-weight: bold;
           width: 100%;
-          margin-top: 10px;
       }
   </style>
 </head>
 <body>
 <div class="container">
-  <h1>Irrigation Water Requirement Prediction</h1>
-  <form action="/predict" method="POST">
-    <div class="input-container">
-      <div class="left-input">
-        <div class="form-group">
-          <label for="crop_type">Crop Type</label>
-          <select class="form-control" id="crop_type" name="crop_type" required>
-            <option value="BANANA">Banana</option>
-            <option value="BEAN">BEAN</option>
-            <option value="CABBAGE">CABBAGE</option>
-            <option value="CITRUS">CITRUS</option>
-            <option value="COTTON">COTTON</option>
-            <option value="MAIZE">MAIZE</option>
-            <option value="MELON">MELON</option>
-            <option value="MUSTARD">MUSTARD</option>
-            <option value="ONION">ONION</option>
-            <option value="OTHER">OTHER</option>
-            <option value="POTATO">POTATO</option>
-            <option value="RICE">RICE</option>
-            <option value="SOYABEAN">SOYABEAN</option>
-            <option value="SUGARCANE">SUGARCANE</option>
-            <option value="TOMATO">TOMATO</option>
-            <option value="WHEAT">WHEAT</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="soil_type">Soil Type</label>
-          <select class="form-control" id="soil_type" name="soil_type" required>
-            <option value="DRY">Dry</option>
-            <option value="HUMID">Humid</option>
-            <option value="WET">Wet</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="city">City</label>
-          <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather" required>
-        </div>
-        <button type="button" class="btn btn-green" onclick="fetchWeather()">Fetch Weather Data</button>
-        <div id="weather_info" class="mt-3" style="display: none;">
-           <p><strong>Weather Info:</strong></p>
-           <div id="weather_data"></div>
-        </div>
-        <div class="form-group mt-3">
-          <label for="motor_capacity">Motor Capacity (liters/sec)</label>
-          <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
-        </div>
-        <button type="submit" class="btn btn-green">Predict Water Requirement</button>
-      </div>
-      <div class="right-image">
-        <img src="/static/images/img.png" alt="Decorative Image">
-      </div>
     </div>
-  </form>
 </div>
 <script>
     function fetchWeather() {
         const city = document.getElementById('city').value;
         if (city) {
             fetch(`/fetch_weather?city=${city}`)
                 .then(response => response.json())
                 .then(data => {
                     if (data) {
-                        document.getElementById('weather_data').innerHTML = `
-                            Weather: ${data.description}<br>
-                            Temperature: ${data.temperature}°C<br>
-                            Humidity: ${data.humidity}%<br>
-                            Pressure: ${data.pressure} hPa
                         `;
-                        document.getElementById('weather_info').style.display = 'block';
                     } else {
-                        document.getElementById('weather_data').innerHTML = 'Weather data not available';
-                        document.getElementById('weather_info').style.display = 'block';
                     }
                 })
                 .catch(error => {
                     console.error('Error fetching weather:', error);
-                    document.getElementById('weather_data').innerHTML = 'Error fetching weather data';
-                    document.getElementById('weather_info').style.display = 'block';
                 });
         }
     }
 </script>
 </body>
-</html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Smart Irrigation Predictor</title>
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   <style>
       body {
+          background-color: #f4f8f4; /* Lighter green background */
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       }
+      .navbar {
+          background-color: #28a745;
+          color: white;
       }
+      .navbar-brand {
           font-weight: bold;
       }
+      .container {
+          margin-top: 30px;
+          margin-bottom: 30px;
       }
+      .card {
+          border: none;
+          border-radius: 15px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
       }
+      .card-header {
+          background-color: #28a745;
+          color: white;
+          text-align: center;
+          font-weight: bold;
+          font-size: 1.5rem;
+          border-top-left-radius: 15px;
+          border-top-right-radius: 15px;
       }
+      #weather_info {
+          background-color: #e9f5e9;
+          border: 1px solid #28a745;
+          padding: 15px;
+          border-radius: 5px;
       }
       .form-control {
           border-color: #28a745;
+          background-color: #fafffa;
       }
       .btn-green {
           background-color: #28a745;
           color: white;
           font-weight: bold;
           width: 100%;
+          padding: 10px;
+          border-radius: 5px;
+          transition: background-color 0.3s;
+      }
+      .btn-green:hover {
+          background-color: #218838;
+      }
+      .hero-image {
+          width: 100%;
+          height: auto;
+          max-height: 400px;
+          object-fit: cover;
+          border-radius: 10px;
       }
   </style>
 </head>
 <body>
+<nav class="navbar navbar-dark">
+  <span class="navbar-brand mb-0 h1 mx-auto">🌱 Smart Irrigation Water Predictor</span>
+</nav>
 <div class="container">
+  <div class="card">
+    <div class="card-header">
+      Predict Irrigation Water Requirement
+    </div>
+    <div class="card-body">
+      <form action="/predict" method="POST">
+        <div class="row align-items-center">
+          <!-- Left side: Form Inputs -->
+          <div class="col-lg-6">
+            <div class="form-group">
+              <label for="crop_type"><strong>Crop Type</strong></label>
+              <select class="form-control" id="crop_type" name="crop_type" required>
+                <option value="BANANA">Banana</option>
+                <option value="BEAN">Bean</option>
+                <option value="CABBAGE">Cabbage</option>
+                <option value="CITRUS">Citrus</option>
+                <option value="COTTON">Cotton</option>
+                <option value="MAIZE">Maize</option>
+                <option value="MELON">Melon</option>
+                <option value="MUSTARD">Mustard</option>
+                <option value="ONION">Onion</option>
+                <option value="OTHER">Other</option>
+                <option value="POTATO">Potato</option>
+                <option value="RICE">Rice</option>
+                <option value="SOYABEAN">Soyabean</option>
+                <option value="SUGARCANE">Sugarcane</option>
+                <option value="TOMATO">Tomato</option>
+                <option value="WHEAT">Wheat</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="soil_type"><strong>Soil Type</strong></label>
+              <select class="form-control" id="soil_type" name="soil_type" required>
+                <option value="DRY">Dry</option>
+                <option value="HUMID">Humid</option>
+                <option value="WET">Wet</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="city"><strong>City / Location</strong></label>
+              <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather data" required>
+            </div>
+            <button type="button" class="btn btn-secondary btn-block" onclick="fetchWeather()">Fetch Weather Data</button>
+            <div id="weather_info" class="mt-3" style="display: none;">
+               <p><strong>Weather Information:</strong></p>
+               <div id="weather_data"></div>
+            </div>
+            <div class="form-group mt-3">
+              <label for="motor_capacity"><strong>Motor Capacity (liters/sec)</strong></label>
+              <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
+            </div>
+            <button type="submit" class="btn btn-green mt-3">Predict Water Requirement</button>
+          </div>
+          <!-- Right side: Image -->
+          <div class="col-lg-6 d-none d-lg-block text-center">
+            <img src="../static/images/img.png"
+                 alt="Smart Irrigation" class="hero-image">
+          </div>
+        </div>
+      </form>
     </div>
+  </div>
 </div>
 <script>
     function fetchWeather() {
         const city = document.getElementById('city').value;
         if (city) {
+            const weatherDiv = document.getElementById('weather_data');
+            const weatherInfoBox = document.getElementById('weather_info');
+            weatherDiv.innerHTML = 'Fetching weather...';
+            weatherInfoBox.style.display = 'block';
             fetch(`/fetch_weather?city=${city}`)
                 .then(response => response.json())
                 .then(data => {
                     if (data) {
+                        weatherDiv.innerHTML = `
+                            <strong>Weather:</strong> ${data.description}<br>
+                            <strong>Temperature:</strong> ${data.temperature}°C<br>
+                            <strong>Humidity:</strong> ${data.humidity}%<br>
+                            <strong>Pressure:</strong> ${data.pressure} hPa
                         `;
                     } else {
+                        weatherDiv.innerHTML = 'Could not retrieve weather data for the specified city.';
                     }
                 })
                 .catch(error => {
                     console.error('Error fetching weather:', error);
+                    weatherDiv.innerHTML = 'An error occurred while fetching weather data.';
                 });
+        } else {
+            alert('Please enter a city name first.');
         }
     }
 </script>
 </body>
+</html>