Rajkhanke007's picture
Update templates/index.html
0c18f7b verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crop Production Analysis</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
body {
padding: 20px;
background-color: #f4f4f9;
}
.navbar {
background-color: black;
color: white;
}
.navbar a {
color: white;
}
.navbar-nav {
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.container {
background: white;
border-radius: 8px;
padding: 20px;
max-height: 1500px;
max-width: 1700px;
margin-top: 20px;
margin-bottom: 20px;
}
.heading {
font-weight: bold;
color: green;
}
.btn-red {
background-color: red;
color: white;
}
#map-container {
margin-top: 20px;
margin-bottom:20px;
height: 500px;
border: 2px solid #ddd;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/">Crop Analysis</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="/prodction_analysis">Production Analysis</a></li>
<li class="nav-item"><a class="nav-link" href="/heatmap_analysis">Heatmap Analysis</a></li>
<li class="nav-item"><a class="nav-link" href="/season_analysis">Season Analysis</a></li>
<li class="nav-item"><a class="nav-link" href="/crop_analysis">Geospatial Analysis</a></li>
</ul>
</div>
</nav>
<div class="container">
<h2 class="heading">Crop Production Analysis</h2>
<form method="POST" action="/prodction_analysis">
<div class="form-group">
<label for="crop_type">Select Crop Type:</label>
<select class="form-control" id="crop_type" name="crop_type">
<option value="">Select Crop</option>
{% for crop in crop_options %}
<option value="{{ crop }}" {% if crop == selected_crop %}selected{% endif %}>{{ crop }}</option>
{% endfor %}
</select>
</div>
<button type="submit" class="btn btn-success">Analyze</button>
</form>
<div id="map-container">
{{ map_html | safe }}
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>