Spaces:
Sleeping
Sleeping
File size: 4,646 Bytes
1e216a1 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AQI Forecast Map</title>
<!-- Add Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
}
/* Fixed Navigation Bar at the top */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Content area */
.content {
display: flex;
flex-direction: column;
height: 100vh; /* Full height */
padding-top: 80px; /* Space for fixed navbar */
}
/* Map Container to fill the remaining space */
.map-container {
flex: 1;
margin-bottom: 20px;
background-color: #e9ecef; /* Optional: set a background color for the map container */
}
/* AQI Legend box */
#legend {
position: fixed;
bottom: 20px;
left: 20px;
width: 220px; /* Reduced the width */
background-color: rgba(255, 255, 255, 0.8);
z-index: 9999;
font-size: 12px; /* Reduced font size */
border-radius: 8px;
padding: 10px; /* Reduced padding */
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
/* Navbar style adjustments */
.navbar-brand {
font-size: 1.5rem;
}
/* Container for the form */
.form-container {
margin-bottom: 30px;
}
/* Form styling */
.form-control {
margin-right: 10px;
}
/* List styling for AQI legend */
.legend-list li {
margin-bottom: 6px;
}
.legend-list i {
width: 18px; /* Reduced the size of the color box */
height: 18px;
display: inline-block;
margin-right: 8px;
}
</style>
</head>
<body>
<!-- Fixed Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">AQI Forecaster</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<form class="d-flex ms-auto form-container" method="POST" action="{{ url_for('forecast') }}">
<input class="form-control me-2" type="text" name="latitude" placeholder="Enter Latitude" required>
<input class="form-control me-2" type="text" name="longitude" placeholder="Enter Longitude"
required>
<button class="btn btn-outline-success" type="submit">Update Map</button>
</form>
</div>
</div>
</nav>
<div class="content">
<div class="map-container">
<!-- AQI Forecast Map -->
<div>
<!-- Render the map -->
{{ map_html|safe }}
</div>
</div>
<!-- AQI Legend -->
<div id="legend">
<b>AQI Color Legend</b>
<ul class="legend-list" style="list-style: none; padding: 0; margin: 5px;">
<li><i style="background:green;"></i> Good (0-50)</li>
<li><i style="background:yellow;"></i> Moderate (51-100)</li>
<li><i style="background:orange;"></i> Unhealthy for Sensitive Groups (101-150)</li>
<li><i style="background:red;"></i> Unhealthy (151-200)</li>
<li><i style="background:purple;"></i> Very Unhealthy (201-300)</li>
<li><i style="background:maroon;"></i> Hazardous (301+)</li>
</ul>
</div>
</div>
<!-- Add Bootstrap 5 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
|