Spaces:
Sleeping
Sleeping
| <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> | |