Hugging Face's logo

Spaces:
pranit144
/
crop_Recommendation_System_npk
Sleeping

App Files Community
crop_Recommendation_System_npk / templates /index.html
pranit144's picture
pranit144
Update templates/index.html
a650dd6 verified
raw
history blame contribute delete
9.23 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crop Recommendation System</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #eef7ee;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0; /* Remove default body margin */
padding: 0; /* Remove default body padding */
}
.container {
margin: 30px auto; /* Adjust margin for better spacing on all screens */
padding: 20px; /* Adjust padding */
border: 2px solid #28a745;
border-radius: 15px;
max-width: 1200px;
background-color: #f9fff9;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
h1 {
color: #28a745;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
font-size: 2.5rem; /* Responsive font size for H1 */
}
.input-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}
.form-group {
width: 60%;
padding-right: 15px; /* Add some padding for spacing */
}
.form-label {
display: block;
margin-top: 15px;
font-weight: bold;
}
.form-control {
width: 100%;
}
.image-section {
width: 35%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-left: -30px;
padding-left: 15px; /* Add some padding for spacing */
}
.image-section img {
max-width: 100%;
height: 580px; /* Keep height for larger screens */
border-radius: 10px;
border: 3px solid #28a745;
object-fit: cover; /* Ensures the image covers the area without distortion */
}
.btn-predict {
background-color: #28a745;
color: white;
font-weight: bold;
margin-top: 30px; /* Increase top margin for button */
width: 100%;
padding: 12px; /* Make button more clickable */
font-size: 1.1rem; /* Adjust button font size */
}
.result-container {
margin-top: 30px;
border: 2px solid #28a745;
padding: 20px;
background-color: #e3ffe3;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.result-container h3 {
color: #28a745;
text-align: center;
margin-bottom: 20px;
font-size: 1.8rem; /* Responsive font size for H3 */
}
.ai-suggestions {
margin-top: 20px;
background-color: #ffffff;
padding: 15px;
border-radius: 10px;
border: 1px solid #28a745;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
text-align: left;
line-height: 1.6; /* Improve readability */
}
/* --- Media Queries for Responsiveness --- */
/* Tablets and smaller desktops (e.g., Bootstrap's md breakpoint) */
@media (max-width: 991.98px) {
.container {
margin: 20px auto;
padding: 15px;
}
h1 {
font-size: 2rem;
}
.form-group {
width: 100%; /* Full width for form inputs */
padding-right: 0;
}
.image-section {
width: 100%; /* Full width for image */
margin-top: 30px; /* Adjust top margin */
margin-left: 0; /* Reset left margin */
padding-left: 0;
order: -1; /* Place image above form fields on smaller screens */
}
.image-section img {
max-height: 400px; /* Limit image height on smaller screens */
height: auto; /* Allow height to adjust proportionally */
}
}
/* Mobile devices (e.g., Bootstrap's sm breakpoint) */
@media (max-width: 767.98px) {
h1 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.form-label {
margin-top: 10px;
}
.btn-predict {
margin-top: 20px;
padding: 10px;
font-size: 1rem;
}
.result-container {
padding: 15px;
}
.result-container h3 {
font-size: 1.5rem;
}
.ai-suggestions {
padding: 10px;
font-size: 0.95rem;
}
.image-section {
margin-top: 20px;
}
.image-section img {
max-height: 250px; /* Further limit image height on very small screens */
}
}
/* Extra small devices */
@media (max-width: 575.98px) {
h1 {
font-size: 1.5rem;
}
.container {
margin: 15px;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Crop Recommendation System</h1>
<form id="cropForm" method="POST">
<div class="input-section">
<div class="form-group">
<label class="form-label" for="location">Enter Location</label>
<input type="text" class="form-control" id="location" name="location" required>
<label class="form-label" for="nitrogen">Enter Nitrogen (N)</label>
<input type="text" class="form-control" id="nitrogen" name="nitrogen" required>
<label class="form-label" for="phosphorus">Enter Phosphorus (p)</label>
<input type="text" class="form-control" id="phosphorus" name="phosphorus" required>
<label class="form-label" for="potassium">Enter Potassium (k)</label>
<input type="text" class="form-control" id="potassium" name="potassium" required>
<label class="form-label" for="temperature">Enter Temperature (°C)</label>
<input type="text" class="form-control" id="temperature" name="temperature" required>
<label class="form-label" for="humidity">Enter Humidity (%)</label>
<input type="text" class="form-control" id="humidity" name="humidity" required>
<label class="form-label" for="ph">Enter pH Level</label>
<input type="text" class="form-control" id="ph" name="ph" required>
<label class="form-label" for="rainfall">Enter Rainfall (mm)</label>
<input type="text" class="form-control" id="rainfall" name="rainfall" required>
</div>
<div class="image-section">
<img src="https://www.shutterstock.com/image-photo/young-corn-plants-growing-on-600nw-2299683499.jpg" alt="Crop Image">
</div>
</div>
<button type="submit" class="btn btn-predict">Predict Crop</button>
</form>
<!-- Results will be shown here -->
<div class="result-container" id="resultContainer" style="display:none;">
<h3>Predicted Crop: <span id="predictedCrop"></span></h3>
<div class="ai-suggestions" id="aiSuggestions"></div>
</div>
</div>
<!-- Bootstrap and jQuery JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('#cropForm').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: '/predict', // Ensure this URL matches your backend endpoint
type: 'POST',
data: $(this).serialize(),
success: function(response) {
$('#predictedCrop').text(response.predicted_crop);
$('#aiSuggestions').text(response.ai_suggestions);
$('#resultContainer').show();
},
error: function(xhr, status, error) {
console.error("AJAX Error:", status, error);
$('#predictedCrop').text("Error predicting crop.");
$('#aiSuggestions').text("Please try again or check your input values.");
$('#resultContainer').show();
}
});
});
});
</script>
</body>
</html>