|
5 | 5 | <style> |
6 | 6 | body { font-family: Arial, sans-serif; margin: 2rem; background: #f9fafb; color: #333; } |
7 | 7 | h1 { color: #1d4ed8; } |
| 8 | + h2 { margin-top: 2rem; color: #111; } |
8 | 9 | a { color: #2563eb; text-decoration: none; } |
9 | 10 | a:hover { text-decoration: underline; } |
| 11 | + .nav-grid { |
| 12 | + display: grid; |
| 13 | + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| 14 | + gap: 1rem; |
| 15 | + margin-top: 1rem; |
| 16 | + } |
| 17 | + .card { |
| 18 | + display: block; |
| 19 | + padding: 1rem; |
| 20 | + text-align: center; |
| 21 | + border-radius: 8px; |
| 22 | + color: white; |
| 23 | + font-weight: bold; |
| 24 | + } |
| 25 | + .blue { background: #1d4ed8; } |
| 26 | + .green { background: #10b981; } |
| 27 | + .yellow { background: #f59e0b; } |
| 28 | + .gray { background: #6b7280; } |
| 29 | + .search-bar { |
| 30 | + margin-top: 1rem; |
| 31 | + } |
| 32 | + input[type="text"] { padding: 0.5rem; border: 1px solid #ccc; border-radius: 5px; } |
| 33 | + button { padding: 0.5rem 1rem; border: none; border-radius: 5px; background: #1d4ed8; color: white; cursor: pointer; } |
| 34 | + button:hover { background: #2563eb; } |
| 35 | + footer { |
| 36 | + margin-top: 2rem; |
| 37 | + text-align: center; |
| 38 | + color: #555; |
| 39 | + } |
10 | 40 | </style> |
11 | 41 | </head> |
12 | 42 | <body> |
13 | 43 | <h1>🌤 Weather API</h1> |
14 | | -<p>🌍 Welcome to Weather API built by ENGR. IPAYE</p> |
15 | | -<ul> |
16 | | - <li><a href="/weather/ui/Lagos">🌤 Weather in Lagos(UI)</a></li> |
17 | | - <li><a href="/weather/coordinates?lat=6.5244&lon=3.3792">📍 Weather by Coordinates(JSON)</a></li> |
18 | | - <li><a href="/cities/ui">🌆 Saved Cities(UI)</a></li> |
19 | | - <li><a href="/docs">🗺️ API Docs</a></li> |
20 | | - <li><a href="/search">🔍 Search Weather</a></li> |
21 | | -</ul> |
| 44 | +<p>🌍 Welcome to Weather API built by <strong>ENGR. IPAYE</strong></p> |
| 45 | + |
| 46 | +<!-- Live clock --> |
| 47 | +<p id="datetime"></p> |
| 48 | + |
| 49 | +<!-- Quick search --> |
| 50 | +<div class="search-bar"> |
| 51 | + <form action="/weather/ui/" method="get" onsubmit="event.preventDefault(); window.location='/weather/ui/'+this.city.value;"> |
| 52 | + <input type="text" name="city" placeholder="Enter a city..." required> |
| 53 | + <button type="submit">Check Weather</button> |
| 54 | + </form> |
| 55 | +</div> |
| 56 | + |
| 57 | +<!-- Navigation cards --> |
| 58 | +<div class="nav-grid"> |
| 59 | + <a href="/weather/ui/Lagos" class="card blue">🌤 Weather in Lagos (UI)</a> |
| 60 | + <a href="/weather/coordinates?lat=6.5244&lon=3.3792" class="card gray">📍 Weather by Coordinates (JSON)</a> |
| 61 | + <a href="/cities/ui" class="card green">🌆 Saved Cities (UI)</a> |
| 62 | + <a href="/docs" class="card yellow">🗺️ API Docs</a> |
| 63 | + <a href="/search" class="card blue">🔍 Search Weather</a> |
| 64 | +</div> |
| 65 | + |
| 66 | +<!-- Featured Weather --> |
| 67 | +<h2>🌟 Featured City: Lagos</h2> |
| 68 | +<iframe src="/weather/ui/Lagos" style="width:100%; height:300px; border:none; border-radius:8px; background:white;"></iframe> |
| 69 | + |
| 70 | +<!-- Footer --> |
| 71 | +<footer> |
| 72 | + 🚀 Built by <strong>ENGR. IPAYE</strong> | Powered by FastAPI + Open-Meteo |
| 73 | +</footer> |
| 74 | + |
| 75 | +<script> |
| 76 | + // live clock |
| 77 | + function updateTime() { |
| 78 | + const now = new Date(); |
| 79 | + document.getElementById("datetime").innerText = |
| 80 | + "🕒 " + now.toLocaleString(); |
| 81 | + } |
| 82 | + setInterval(updateTime, 1000); |
| 83 | + updateTime(); |
| 84 | +</script> |
22 | 85 | </body> |
23 | 86 | </html> |
0 commit comments