Spaces:

sudo-saidso
/

weather

Running

File size: 8,319 Bytes

<!DOCTYPE html>
<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>