Hugging Face's logo

Spaces:
Rajkhanke007
/
irrigation_Water_Requirement_Prediction
Running

App Files Community
5
Rajkhanke007 commited on
Commit
3513d37
·
verified ·
1 Parent(s): 0994aa5

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +115 -125
templates/index.html CHANGED
@@ -1,136 +1,127 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Smart Irrigation Water Predictor</title>
7
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
- <style>
9
- body {
10
- background-color: #f0fff0; /* Very light green */
11
- }
12
- .container {
13
- border: 1px solid #28a745; /* Green border */
14
- padding: 20px;
15
- margin: 40px auto;
16
- background-color: white;
17
- border-radius: 10px;
18
- }
19
- /* Add these styles */
20
- #weather_info {
21
- background-color: #f8f9fa; /* Light grey background */
22
- border: 2px solid #000000; /* Dark black border */
23
- padding: 15px; /* Padding for spacing inside the box */
24
- border-radius: 5px; /* Optional: Rounded corners */
25
- }
26
- h1 {
27
- color: #28a745; /* Bold green heading */
28
- text-align: center;
29
- font-weight: bold;
30
- }
31
- .input-container {
32
- display: flex;
33
- justify-content: space-between;
34
- height: 100%; /* Ensure both sides are the same height */
35
- }
36
- .left-input {
37
- width: 53%;
38
- border-right: 2px solid #28a745;
39
- padding-right: 20px;
40
- }
41
- .right-image {
42
- width: 45%;
43
- display: flex;
44
- justify-content: center;
45
- align-items: center;
46
- height: 200%; /* Ensure full height */
47
- margin-top: 50px;
48
- }
49
- .right-image img {
50
- width: 100%;
51
- height: 100%; /* Match the height of the left container */
52
- object-fit: contain; /* Ensure the image scales well */
53
- }
54
- .form-control {
55
- border-color: #28a745; /* Green border */
56
- background-color: #f0fff0; /* Light green shading */
57
- }
58
- .btn-green {
59
- background-color: #28a745;
60
- color: white;
61
- font-weight: bold;
62
- width: 100%;
63
- margin-top: 10px;
64
- }
65
- </style>
66
  </head>
67
  <body>
68
 
69
  <div class="container">
70
- <h1>Irrigation Water Requirement Prediction</h1>
71
- <form action="/predict" method="POST">
72
- <div class="input-container">
73
- <div class="left-input">
74
- <!-- Crop Type Input -->
75
- <div class="form-group">
76
- <label for="crop_type">Crop Type</label>
77
- <select class="form-control" id="crop_type" name="crop_type" required>
78
- <option value="BANANA">Banana</option>
79
- <option value="BEAN">BEAN</option>
80
- <option value="CABBAGE">CABBAGE</option>
81
- <option value="CITRUS">CITRUS</option>
82
- <option value="COTTON">COTTON</option>
83
- <option value="MAIZE">MAIZE</option>
84
- <option value="MELON">MELON</option>
85
- <option value="MUSTARD">MUSTARD</option>
86
- <option value="ONION">ONION</option>
87
- <option value="OTHER">OTHER</option>
88
- <option value="POTATO">POTATO</option>
89
- <option value="RICE">RICE</option>
90
- <option value="SOYABEAN">SOYABEAN</option>
91
- <option value="SUGARCANE">SUGARCANE</option>
92
- <option value="TOMATO">TOMATO</option>
93
- <option value="WHEAT">WHEAT</option>
94
- <!-- Add other options as needed -->
95
- </select>
96
- </div>
97
-
98
- <!-- Soil Type Input -->
99
- <div class="form-group">
100
- <label for="soil_type">Soil Type</label>
101
- <select class="form-control" id="soil_type" name="soil_type" required>
102
- <option value="DRY">Dry</option>
103
- <option value="HUMID">Humid</option>
104
- <option value="WET">Wet</option>
105
- </select>
106
- </div>
107
-
108
- <!-- City Input and Fetch Weather Button -->
109
- <div class="form-group">
110
- <label for="city">City</label>
111
- <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather" required>
112
- </div>
113
- <button type="button" class="btn btn-green" onclick="fetchWeather()">Fetch Weather Data</button>
114
- <!-- Weather Info will be inserted below when fetched -->
115
- <div id="weather_info" class="mt-3" style="display: none;">
116
- <p><strong>Weather Info:</strong></p>
117
- <div id="weather_data"></div>
118
- </div>
119
- <!-- Motor Capacity Input -->
120
- <div class="form-group mt-3">
121
- <label for="motor_capacity">Motor Capacity (liters/sec)</label>
122
- <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
123
- </div>
124
 
125
- <!-- Predict Button -->
126
- <button type="submit" class="btn btn-green">Predict Water Requirement</button>
127
- </div>
 
 
 
 
 
128
 
129
- <div class="right-image">
130
- <img src="/static/images/img.png" alt="Decorative Image">
131
- </div>
 
 
 
 
 
132
  </div>
133
- </form>
 
 
 
 
 
 
 
 
 
 
 
134
  </div>
135
 
136
  <script>
@@ -147,7 +138,7 @@
147
  Humidity: ${data.humidity}%<br>
148
  Pressure: ${data.pressure} hPa
149
  `;
150
- document.getElementById('weather_info').style.display = 'block'; // Show the weather info box
151
  } else {
152
  document.getElementById('weather_data').innerHTML = 'Weather data not available';
153
  document.getElementById('weather_info').style.display = 'block';
@@ -162,6 +153,5 @@
162
  }
163
  </script>
164
 
165
-
166
  </body>
167
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Smart Irrigation Water Predictor</title>
7
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background-color: #f0fff0;
11
+ }
12
+ .container {
13
+ border: 1px solid #28a745;
14
+ padding: 20px;
15
+ margin: 40px auto;
16
+ background-color: white;
17
+ border-radius: 10px;
18
+ }
19
+ #weather_info {
20
+ background-color: #f8f9fa;
21
+ border: 2px solid #000;
22
+ padding: 15px;
23
+ border-radius: 5px;
24
+ }
25
+ h1 {
26
+ color: #28a745;
27
+ text-align: center;
28
+ font-weight: bold;
29
+ }
30
+ .input-container {
31
+ display: flex;
32
+ justify-content: space-between;
33
+ height: 100%;
34
+ }
35
+ .left-input {
36
+ width: 53%;
37
+ border-right: 2px solid #28a745;
38
+ padding-right: 20px;
39
+ }
40
+ .right-image {
41
+ width: 45%;
42
+ display: flex;
43
+ justify-content: center;
44
+ align-items: center;
45
+ height: 200%;
46
+ margin-top: 50px;
47
+ }
48
+ .right-image img {
49
+ width: 100%;
50
+ height: 100%;
51
+ object-fit: contain;
52
+ }
53
+ .form-control {
54
+ border-color: #28a745;
55
+ background-color: #f0fff0;
56
+ }
57
+ .btn-green {
58
+ background-color: #28a745;
59
+ color: white;
60
+ font-weight: bold;
61
+ width: 100%;
62
+ margin-top: 10px;
63
+ }
64
+ </style>
 
65
  </head>
66
  <body>
67
 
68
  <div class="container">
69
+ <h1>Irrigation Water Requirement Prediction</h1>
70
+ <form action="/predict" method="POST">
71
+ <div class="input-container">
72
+ <div class="left-input">
73
+ <div class="form-group">
74
+ <label for="crop_type">Crop Type</label>
75
+ <select class="form-control" id="crop_type" name="crop_type" required>
76
+ <option value="BANANA">Banana</option>
77
+ <option value="BEAN">BEAN</option>
78
+ <option value="CABBAGE">CABBAGE</option>
79
+ <option value="CITRUS">CITRUS</option>
80
+ <option value="COTTON">COTTON</option>
81
+ <option value="MAIZE">MAIZE</option>
82
+ <option value="MELON">MELON</option>
83
+ <option value="MUSTARD">MUSTARD</option>
84
+ <option value="ONION">ONION</option>
85
+ <option value="OTHER">OTHER</option>
86
+ <option value="POTATO">POTATO</option>
87
+ <option value="RICE">RICE</option>
88
+ <option value="SOYABEAN">SOYABEAN</option>
89
+ <option value="SUGARCANE">SUGARCANE</option>
90
+ <option value="TOMATO">TOMATO</option>
91
+ <option value="WHEAT">WHEAT</option>
92
+ </select>
93
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
 
95
+ <div class="form-group">
96
+ <label for="soil_type">Soil Type</label>
97
+ <select class="form-control" id="soil_type" name="soil_type" required>
98
+ <option value="DRY">Dry</option>
99
+ <option value="HUMID">Humid</option>
100
+ <option value="WET">Wet</option>
101
+ </select>
102
+ </div>
103
 
104
+ <div class="form-group">
105
+ <label for="city">City</label>
106
+ <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather" required>
107
+ </div>
108
+ <button type="button" class="btn btn-green" onclick="fetchWeather()">Fetch Weather Data</button>
109
+ <div id="weather_info" class="mt-3" style="display: none;">
110
+ <p><strong>Weather Info:</strong></p>
111
+ <div id="weather_data"></div>
112
  </div>
113
+ <div class="form-group mt-3">
114
+ <label for="motor_capacity">Motor Capacity (liters/sec)</label>
115
+ <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
116
+ </div>
117
+ <button type="submit" class="btn btn-green">Predict Water Requirement</button>
118
+ </div>
119
+
120
+ <div class="right-image">
121
+ <img src="/static/images/img.png" alt="Decorative Image">
122
+ </div>
123
+ </div>
124
+ </form>
125
  </div>
126
 
127
  <script>
 
138
  Humidity: ${data.humidity}%<br>
139
  Pressure: ${data.pressure} hPa
140
  `;
141
+ document.getElementById('weather_info').style.display = 'block';
142
  } else {
143
  document.getElementById('weather_data').innerHTML = 'Weather data not available';
144
  document.getElementById('weather_info').style.display = 'block';
 
153
  }
154
  </script>
155
 
 
156
  </body>
157
  </html>