🌤️ Modern Hava Durumu Widget Blogger

<div id="weather-widget">
  <div class="ww-card">

    <div class="ww-header">🌤️ Şehir Hava Durumu</div>

    <div class="ww-search">
      <input id="cityInput" placeholder="Şehir yaz (Tokat, Istanbul)" />
      <button onclick="getWeather()">Ara</button>
    </div>

    <div id="weatherResult">Şehir girin</div>

  </div>
</div>

<style>
.ww-card{
  width:320px;
  margin:auto;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(145deg,#0f172a,#111827);
  color:#fff;
  box-shadow:0 0 20px rgba(0,255,255,0.2);
}

.ww-header{
  text-align:center;
  color:#00ffe0;
  font-weight:bold;
  margin-bottom:10px;
}

.ww-search{
  display:flex;
  gap:6px;
}

.ww-search input{
  flex:1;
  padding:8px;
  border-radius:8px;
  border:none;
}

.ww-search button{
  background:#00ffe0;
  border:none;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}

</style>

<script>
async function getWeather(){
  let city=document.getElementById("cityInput").value;
  let result=document.getElementById("weatherResult");

  if(!city){
    result.innerHTML="Şehir girin";
    return;
  }

  result.innerHTML="Yükleniyor...";

  let geo=await fetch("https://nominatim.openstreetmap.org/search?format=json&q="+city)
  .then(r=>r.json());

  if(!geo.length){
    result.innerHTML="Şehir bulunamadı";
    return;
  }

  let w=await fetch(
    `https://api.open-meteo.com/v1/forecast?latitude=${geo[0].lat}&longitude=${geo[0].lon}&current_weather=true`
  ).then(r=>r.json());

  let d=w.current_weather;

  result.innerHTML=
    "🌡️ " + d.temperature + "°C<br>" +
    "💨 Rüzgar: " + d.windspeed + " km/h";
}
</script>