Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Weather Forecast - Colorado Springs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); | |
| height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .weather-card { | |
| background: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(12px); | |
| border-radius: 20px; | |
| box-shadow: 0 8px 32px 0 rgba(0,0,0,0.4); | |
| } | |
| .scroll-container { | |
| scrollbar-width: none; | |
| overflow-x: auto; | |
| } | |
| .scroll-container::-webkit-scrollbar { display: none; } | |
| .temperature-gradient { background: linear-gradient(90deg, #FF9A9E 0%, #FAD0C4 100%); } | |
| .uv-gradient { background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%); } | |
| .wind-gradient { background: linear-gradient(90deg, #A1C4FD 0%, #C2E9FB 100%); } | |
| .humidity-gradient { background: linear-gradient(90deg, #84FAB0 0%, #8FD3F4 100%); } | |
| /* Clock Styles */ | |
| .clock-container { | |
| position: relative; | |
| width: 180px; | |
| height: 180px; | |
| margin: 20px auto; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 50%; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .clock { | |
| position: relative; | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: radial-gradient(circle, #1e293b 30%, #0f172a 70%); | |
| } | |
| .clock::before { | |
| content: ''; | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background: #fff; | |
| border-radius: 50%; | |
| z-index: 10; | |
| } | |
| .hour, .minute, .second { | |
| position: absolute; | |
| display: flex; | |
| justify-content: center; | |
| border-radius: 50%; | |
| } | |
| .hour { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .hour::before { | |
| content: ''; | |
| position: absolute; | |
| width: 6px; | |
| height: 50px; | |
| background: #fff; | |
| border-radius: 6px 6px 0 0; | |
| z-index: 5; | |
| } | |
| .minute { | |
| width: 120px; | |
| height: 120px; | |
| } | |
| .minute::before { | |
| content: ''; | |
| position: absolute; | |
| width: 4px; | |
| height: 60px; | |
| background: #fff; | |
| border-radius: 6px 6px 0 0; | |
| z-index: 6; | |
| } | |
| .second { | |
| width: 140px; | |
| height: 140px; | |
| } | |
| .second::before { | |
| content: ''; | |
| position: absolute; | |
| width: 2px; | |
| height: 80px; | |
| background: #ff4757; | |
| border-radius: 6px 6px 0 0; | |
| z-index: 7; | |
| } | |
| .digital-clock { | |
| font-family: 'Orbitron', sans-serif; | |
| text-align: center; | |
| margin-top: 15px; | |
| font-size: 1.2rem; | |
| letter-spacing: 1px; | |
| color: rgba(255, 255, 255, 0.9); | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); | |
| } | |
| .date-display { | |
| text-align: center; | |
| margin-top: 5px; | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white relative max-w-md mx-auto" style="width: 390px; height: 844px;"> | |
| <div class="h-full overflow-hidden relative px-6 pt-12"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-center"> | |
| <h1 id="city" class="text-2xl font-semibold">Colorado Springs</h1> | |
| <p id="weather-desc" class="text-sm opacity-80">Loading...</p> | |
| </div> | |
| </div> | |
| <!-- Clock Section --> | |
| <div class="mt-4 flex flex-col items-center"> | |
| <div class="clock-container"> | |
| <div class="clock"> | |
| <div class="hour" id="hour-hand"></div> | |
| <div class="minute" id="minute-hand"></div> | |
| <div class="second" id="second-hand"></div> | |
| </div> | |
| </div> | |
| <div class="digital-clock" id="digital-time">00:00:00</div> | |
| <div class="date-display" id="date-display">Monday, January 1</div> | |
| </div> | |
| <div class="mt-4 flex justify-center items-end"> | |
| <span id="temp" class="text-7xl font-light">--</span> | |
| <span class="text-4xl mb-2">°F</span> | |
| </div> | |
| <div class="flex justify-between mt-2 text-sm"> | |
| <span id="high-low">H: -- L: --</span> | |
| <span id="feels-like">Feels like --</span> | |
| </div> | |
| <!-- Weather Details --> | |
| <div class="weather-card p-4 mt-6"> | |
| <h3 class="font-medium mb-3">Weather Details</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-3 rounded-xl temperature-gradient"> | |
| <div class="flex items-center"><i class="fas fa-temperature-high mr-2"></i><span>Temperature</span></div> | |
| <div id="temp-detail" class="mt-2 text-xl font-medium">--°F</div> | |
| </div> | |
| <div class="p-3 rounded-xl uv-gradient"> | |
| <div class="flex items-center"><i class="fas fa-sun mr-2"></i><span>UV Index</span></div> | |
| <div id="uv" class="mt-2 text-xl font-medium">--</div> | |
| </div> | |
| <div class="p-3 rounded-xl wind-gradient"> | |
| <div class="flex items-center"><i class="fas fa-wind mr-2"></i><span>Wind</span></div> | |
| <div id="wind" class="mt-2 text-xl font-medium">-- mph</div> | |
| </div> | |
| <div class="p-3 rounded-xl humidity-gradient"> | |
| <div class="flex items-center"><i class="fas fa-tint mr-2"></i><span>Humidity</span></div> | |
| <div id="humidity" class="mt-2 text-xl font-medium">--%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const apiKey = "2bdad522ac3bb9f3eefa5566d0f514fa"; | |
| const city = "Colorado Springs,US"; | |
| function cToF(c) { return Math.round(c * 9/5 + 32); } | |
| // Clock functionality | |
| function updateClock() { | |
| const now = new Date(); | |
| const hours = now.getHours(); | |
| const minutes = now.getMinutes(); | |
| const seconds = now.getSeconds(); | |
| // Update analog clock | |
| const hourHand = document.getElementById('hour-hand'); | |
| const minuteHand = document.getElementById('minute-hand'); | |
| const secondHand = document.getElementById('second-hand'); | |
| const hourDeg = (hours % 12) * 30 + minutes * 0.5; | |
| const minuteDeg = minutes * 6; | |
| const secondDeg = seconds * 6; | |
| hourHand.style.transform = `rotate(${hourDeg}deg)`; | |
| minuteHand.style.transform = `rotate(${minuteDeg}deg)`; | |
| secondHand.style.transform = `rotate(${secondDeg}deg)`; | |
| const digitalTime = document.getElementById('digital-time'); | |
| digitalTime.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| const dateDisplay = document.getElementById('date-display'); | |
| const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; | |
| const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; | |
| dateDisplay.textContent = `${days[now.getDay()]}, ${months[now.getMonth()]} ${now.getDate()}`; | |
| } | |
| setInterval(updateClock, 1000); | |
| updateClock(); // Initial call | |
| async function getWeather() { | |
| const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`); | |
| const data = await response.json(); | |
| const tempF = cToF(data.main.temp); | |
| const tempMaxF = cToF(data.main.temp_max); | |
| const tempMinF = cToF(data.main.temp_min); | |
| const feelsF = cToF(data.main.feels_like); | |
| document.getElementById("temp").textContent = tempF; | |
| document.getElementById("temp-detail").textContent = tempF + "°F"; | |
| document.getElementById("weather-desc").textContent = data.weather[0].description; | |
| document.getElementById("high-low").textContent = `H: ${tempMaxF}° L: ${tempMinF}°`; | |
| document.getElementById("feels-like").textContent = `Feels like ${feelsF}°`; | |
| document.getElementById("humidity").textContent = data.main.humidity + "%"; | |
| document.getElementById("wind").textContent = (data.wind.speed * 2.237).toFixed(1) + " mph"; // m/s to mph | |
| // UV Index | |
| const uvRes = await fetch(`https://api.openweathermap.org/data/2.5/uvi?lat=${data.coord.lat}&lon=${data.coord.lon}&appid=${apiKey}`); | |
| const uvData = await uvRes.json(); | |
| document.getElementById("uv").textContent = uvData.value; | |
| } | |
| getWeather(); | |
| </script> | |
| </body> | |
| </html> | |