|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
|
<meta name="theme-color" content="#003400"> |
|
|
<title>Crop Recommendation</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
|
|
|
|
<style> |
|
|
.navbar { |
|
|
background-color: #0d1025; |
|
|
padding: 0.5rem 1rem; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 1000; |
|
|
min-height: 65px; |
|
|
} |
|
|
|
|
|
.navbar-brand { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo-img { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.navbar-toggler { |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
padding: 0.25rem 0.75rem; |
|
|
} |
|
|
|
|
|
.navbar-toggler:focus { |
|
|
box-shadow: none; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.navbar-collapse { |
|
|
flex-grow: 0; |
|
|
} |
|
|
|
|
|
.navbar-nav { |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: white !important; |
|
|
padding: 0.5rem 1rem !important; |
|
|
margin: 0 0.2rem; |
|
|
border-radius: 5px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.brand-text { |
|
|
color: #737373; |
|
|
margin-left: 1rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 991px) { |
|
|
.navbar-collapse { |
|
|
background-color: #0d1025; |
|
|
padding: 1rem; |
|
|
border-radius: 0 0 10px 10px; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.brand-text { |
|
|
margin: 0.5rem 0; |
|
|
text-align: center; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-control { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
margin: 0.5rem; |
|
|
padding: 0.5rem 2rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 576px) { |
|
|
.btn { |
|
|
width: 100%; |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #0d1025; height: 65px;"> |
|
|
<div class="container-fluid"> |
|
|
<a href="/" class="navbar-brand"> |
|
|
<img src="data:image/png;base64,{{ images['logo'] }}" alt="AgroAssist Logo" class="me-2" style="width: 80px; height: 80px;"> |
|
|
</a> |
|
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link active" aria-current="page" href="/"><i class="fa-solid fa-house"></i>Home</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" style="color: white;" href="/recommendation"><i class="fas fa-seedling"></i>Recommend</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" style="color: white;" href="/info"><i class="fas fa-chart-bar"></i>Statistics</a> |
|
|
</li> |
|
|
</ul> |
|
|
<a class="navbar-brand ms-auto" style="color: #737373;">AgroAssist</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
|
|
|
<div class="container mt-5"> |
|
|
<h1 class="text-center">Crop Recommendation System</h1> |
|
|
<form id="cropRecommendationForm" action="/recommendation" method="POST"> |
|
|
<div class="row mt-4"> |
|
|
<div class="col-md-4"> |
|
|
<label for="Nitrogen">Nitrogen</label> |
|
|
<input type="number" step="0.01" id="Nitrogen" name="Nitrogen" placeholder="Enter Nitrogen" class="form-control" required value="{{ N }}"> |
|
|
</div> |
|
|
<div class="col-md-4"> |
|
|
<label for="Phosporus">Phosphorus</label> |
|
|
<input type="number" step="0.01" id="Phosporus" name="Phosporus" placeholder="Enter Phosphorus" class="form-control" required value="{{ P }}"> |
|
|
</div> |
|
|
<div class="col-md-4"> |
|
|
<label for="Potassium">Potassium</label> |
|
|
<input type="number" step="0.01" id="Potassium" name="Potassium" placeholder="Enter Potassium" class="form-control" required value="{{ K }}"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="row mt-4"> |
|
|
<div class="col-md-4"> |
|
|
<label for="Temperature">Temperature (°C)</label> |
|
|
<input type="number" step="0.01" id="Temperature" name="Temperature" placeholder="Enter Temperature" class="form-control" required value="{{ temp }}"> |
|
|
</div> |
|
|
<div class="col-md-4"> |
|
|
<label for="Humidity">Humidity (%)</label> |
|
|
<input type="number" step="0.01" id="Humidity" name="Humidity" placeholder="Enter Humidity" class="form-control" required value="{{ humidity }}"> |
|
|
</div> |
|
|
<div class="col-md-4"> |
|
|
<label for="Ph">pH</label> |
|
|
<input type="number" step="0.01" id="Ph" name="Ph" placeholder="Enter pH" class="form-control" required value="{{ ph }}"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="row mt-4"> |
|
|
<div class="col-md-4"> |
|
|
<label for="Rainfall">Rainfall (mm/year)</label> |
|
|
<input type="number" step="0.01" id="Rainfall" name="Rainfall" placeholder="Enter Rainfall" class="form-control" required value="{{ rainfall }}"> |
|
|
</div> |
|
|
<div class="col-md-12 mt-4 text-center"> |
|
|
<button type="submit" class="btn btn-success">Get Recommendation</button> |
|
|
<button type="button" class="btn btn-danger" onclick="resetForm()">Reset</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
{% if result %} |
|
|
<div class="mt-4 alert alert-success"> |
|
|
<h4>{{ result }}</h4> |
|
|
</div> |
|
|
{% endif %} |
|
|
|
|
|
<div class="alert alert-info mt-4"> |
|
|
<h5>Input Parameter Information</h5> |
|
|
<ul> |
|
|
<li>Nitrogen: 0 - 150 kg/ha</li> |
|
|
<li>Phosphorus: 0 - 150 kg/ha</li> |
|
|
<li>Potassium: 0 - 150 kg/ha</li> |
|
|
<li>Temperature: 0 - 45 °C</li> |
|
|
<li>Humidity: 0 - 100%</li> |
|
|
<li>pH: 0 - 14</li> |
|
|
<li>Rainfall: 100 - 3000 mm/year</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="bg-dark text-white text-center py-3 mt-5"> |
|
|
<p>© 2024-25 AgroAssist. All rights reserved.</p> |
|
|
<p> created by Gunjankumar Choudhari</p> |
|
|
</footer> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> |
|
|
<script> |
|
|
function resetForm() { |
|
|
|
|
|
document.getElementById('cropRecommendationForm').reset(); |
|
|
|
|
|
const resultElement = document.querySelector('.mt-4.alert-success'); |
|
|
if (resultElement) { |
|
|
resultElement.remove(); |
|
|
} |
|
|
|
|
|
alert("Form has been reset."); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
|
|
|
