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; | |
| } | |
| /* 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> |