File size: 6,792 Bytes
50d3945 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimal Croping Season Prediction</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #e6f5e6; /* Light green background */
font-family: Arial, sans-serif;
}
.container {
margin: 30px auto;
padding: 20px;
background-color: #f9f9f9; /* Slightly off-white background */
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 2px solid #2c662d; /* Dark green border */
}
h1 {
color: #2c662d; /* Dark green for headings */
text-align: center;
margin-bottom: 30px;
font-weight: bold;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
border: 2px solid #2c662d; /* Dark green border */
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: border-color 0.3s;
}
.form-control:focus {
border-color: #4CAF50; /* Lighter green on focus */
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
.btn-success {
background-color: #2c662d; /* Dark green */
border: none;
transition: background-color 0.3s, transform 0.3s;
}
.btn-success:hover {
background-color: #4CAF50; /* Lighter green on hover */
transform: scale(1.05);
}
.btn-success:active {
transform: scale(0.95);
}
.image-preview {
margin-bottom: 30px;
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.result-box {
margin-top: 30px;
padding: 20px;
background-color: #e8f5e9;
border: 2px solid #2c662d;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>Optimal Croping Season Prediction</h1>
<div class="row">
<div class="col-md-7">
<form id="prediction-form" method="POST" action="/predict">
<div class="form-group">
<label for="state">State</label>
<select id="state" name="state" class="form-control" required>
<option value="">Select State</option>
{% for state in states %}
<option value="{{ state }}">{{ state }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="district">Select District</label>
<select id="district" name="district" class="form-control" required>
<option value="">Select District</option>
</select>
</div>
<div class="form-group">
<label for="crop_year">Enter the Croping Year (2024 & onwards)</label>
<input type="number" id="crop_year" name="crop_year" class="form-control" min="2000" required>
</div>
<div class="form-group">
<label for="crop">Select Crop Type</label>
<select id="crop" name="crop" class="form-control" required>
{% for crop in crops %}
<option value="{{ crop }}">{{ crop }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="area">Enter Area (in hectares)</label>
<input type="number" id="area" name="area" class="form-control" step="0.01" required>
</div>
<button type="submit" class="btn btn-success btn-block">Predict Season</button>
</form>
{% if predicted_season %}
<div class="result-box">
<h4>Predicted Optimal Croping Season: <span id="predicted-season">{{ predicted_season }}</span></h4>
<p id="season-description">{{ season_description }}</p>
</div>
{% endif %}
</div>
<div class="col-md-5">
<img src="/static/img1.jpg" alt="Crop Image" class="image-preview">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#state').change(function(){
const state = $(this).val();
$.ajax({
url: '/filter_districts',
method: 'POST',
data: { state: state },
success: function(response) {
$('#district').empty().append('<option value="">Select District</option>');
response.districts.forEach(function(district) {
$('#district').append('<option value="'+district+'">'+district+'</option>');
});
}
});
});
// Hardcoded descriptions for each season
const seasonDescriptions = {
'Kharif': 'Kharif season occurs from June to October, associated with the monsoon. Crops are usually sown at the start of the rainy season.',
'Rabi': 'Rabi season spans from October to March, during the winter cropping season, with crops like wheat and barley.',
'Summer': 'Summer season is from April to June, suitable for crops that need warmer temperatures.',
'Winter': 'Winter cropping season occurs from November to February, including cold-weather crops.',
'Whole Year': 'Crops can be grown throughout the year, without seasonal limitations.',
'Autumn': 'Autumn season, from September to November, accommodates crops suited to a post-monsoon environment.'
};
// Show description based on predicted season
const predictedSeason = document.getElementById('predicted-season').innerText;
if (predictedSeason) {
document.getElementById('season-description').innerText = seasonDescriptions[predictedSeason] || 'No description available';
}
});
</script>
</body>
</html>
|