Spaces:
Sleeping
Sleeping
File size: 6,413 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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
<!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;
}
/* Thinner Navigation Bar */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 3px 10px;
/* Reduced padding for a thinner navbar */
font-size: 0.85rem;
/* Slightly smaller font size */
height: 50px;
/* Explicit height for consistent thinness */
}
/* Reduced brand name size */
.navbar-brand {
font-size: 1rem;
/* Smaller font size for brand */
padding: 0;
/* Remove extra padding */
line-height: 50px;
/* Center-align text vertically */
}
/* Adjust the navbar toggler button */
.navbar-toggler {
padding: 2px 8px;
/* Smaller padding for toggler */
line-height: 1;
/* Adjust spacing */
}
/* Adjust form-container inside navbar */
.form-container {
margin-bottom: 0;
display: flex;
align-items: center; /* Vertically align form fields and button */
}
/* Reduce size of form inputs and button */
.form-control {
font-size: 0.85rem;
padding: 4px 6px;
height: auto;
flex-grow: 1; /* Ensure input fields expand proportionally */
min-width: 50px; /* Prevent inputs from shrinking too much */
margin-right: 5px; /* Spacing between input fields */
}
.btn-outline-success {
font-size: 0.85rem;
padding: 4px 8px;
height: auto;
white-space: nowrap; /* Prevent button text from wrapping */
}
/* Content area */
.content {
display: flex;
flex-direction: column;
height: 80vh;
/* Full height */
padding-top: 50px;
/* Reduced space for the smaller 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.6);
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);
}
.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">
<!-- Brand -->
<a class="navbar-brand" href="#">AQI Forecaster</a>
<!-- Toggler for mobile view -->
<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>
<!-- Navigation content -->
<div class="collapse navbar-collapse" id="navbarNav">
<div class="w-100 d-flex justify-content-between align-items-center">
<!-- Form for latitude and longitude -->
<form class="d-flex flex-grow-1 form-container me-2" 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>
</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> |