Skip to content

2
2023-323
Commit 81af39ca authored by Kareshaan Logeswaran's avatar Kareshaan Logeswaran
Browse files
Options

created It20229948 front end

parent 423cd88b
Show whitespace changes
Inline Side-by-side
Showing with 195 additions and 0 deletions
index.html 0 → 100644
View file @ 81af39ca
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rice Breed Identification</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<style>
h1 {
color: mediumseagreen;
text-align: center;
}
.warning {
color: red;
font-weight: bold;
text-align: center;
}
.card{
margin-left:410px;
margin-top: 20px;
color: white;
}
.container{
background:#edf2f7;
font-weight: bold;
padding-bottom:10px;
border-radius: 15px;
}
nav {
display: flex;
justify-content: center;
background-color: #145214;
padding: 10px 0;
width: 100%; /* Add this line to make it fit the screen width */
}
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 20px;
font-family: Times New Roman, sans-serif;
margin: 0 10px; /* Add margin to create space between links */
}
nav a:hover {
background-color: #555;
}
h1 {
color: mediumseagreen;
text-align: center;
}
.warning {
color: red;
font-weight: bold;
text-align: center;
}
.card{
margin-left:410px;
margin-top: 20px;
color: white;
}
.container{
background:#edf2f7;
font-weight: bold;
padding-bottom:10px;
border-radius: 15px;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
</style>
<body style="background:#BCBBB8">
<header>
<h1 style="Font-size:50px;">E-Goyama</h1>
<h2>E-Solution for paddy plantation</h2>
</header>
<!--=======================navbar=====================================================-->
<nav>
<a href="http://192.168.56.1:7000">Home</a>
<a href="http://127.0.0.1:5010">Economy Prediction</a>
<a href="http://localhost:8010/">Harvesting Time Prediction</a>
<a href="http://localhost:8000/">Leaf Diseases Identification</a>
<a href="http://127.0.0.1:5000/">Soil Testing</a>
<a href="http://127.0.0.1:5500">About</a>
</nav>
<!--==========================================================================================-->
<div class="container my-3 mt-3">
<h1 class="text-success">Crop Recommendation System <span class="text-success">🌱</span></h1>
<!-- adding form-->
<form action="/predict" method="POST">
<div class="row">
<div class="col-md-4">
<label for="Nitrogen">Nitrogen</label>
<input type="number" id="Nitrogen" name="Nitrogen" placeholder="Enter Nitrogen" class="form-control" required step="00">
</div>
<div class="col-md-4">
<label for="Phosporus">Phosphorus</label>
<input type="number" id="Phosporus" name="Phosporus" placeholder="Enter Phosphorus" class="form-control" required step="00">
</div>
<div class="col-md-4">
<label for="Potassium">Potassium</label>
<input type="number" id="Potassium" name="Potassium" placeholder="Enter Potassium" class="form-control" required step="00">
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<label for="Temperature">Temperature</label>
<input type="number" step="0.01" id="Temperature" name="Temperature" placeholder="Enter Temperature in °C" class="form-control" required step="00">
</div>
<div class="col-md-4">
<label for="Humidity">Humidity</label>
<input type="number" step="0.01" id="Humidity" name="Humidity" placeholder="Enter Humidity in %" class="form-control" required step="00">
</div>
<div class="col-md-4">
<label for="pH">pH</label>
<input type="number" step="0.01" id="Ph" name="Ph" placeholder="Enter pH value" class="form-control" required step="00">
</div>
</div>
<div class="row mt-4">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Get Recommendation</button>
</div>
</div>
</form>
{% if result %}
<div class="card bg-dark" style="width: 18rem;">
<img src="{{url_for('static', filename='img.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Recommend Crop for cultivation is:</h5>
<p class="card-text">{{ result }}</p>
</div>
</div>
{% endif %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script>
// Wait for the DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector("form");
// Function to validate the form
function validateForm() {
const nitrogen = parseFloat(document.getElementById("Nitrogen").value);
const phosphorus = parseFloat(document.getElementById("Phosporus").value);
const potassium = parseFloat(document.getElementById("Potassium").value);
const temperature = parseFloat(document.getElementById("Temperature").value);
const humidity = parseFloat(document.getElementById("Humidity").value);
const pH = parseFloat(document.getElementById("Ph").value);
if (isNaN(nitrogen) || isNaN(phosphorus) || isNaN(potassium) || isNaN(temperature) || isNaN(humidity) || isNaN(pH)) {
alert("Please enter valid numeric values for all fields.");
return false;
}
// Additional validation logic can be added here if needed
return true;
}
// Attach a submit event listener to the form
form.addEventListener("submit", function (event) {
if (!validateForm()) {
event.preventDefault(); // Prevent form submission if validation fails
}
});
});
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment