<div class="namaz-block">
  <h3>Namaz Vakitleri</h3>

  <select id="namazIl">
    <option value="Istanbul">İstanbul</option>
    <option value="Ankara">Ankara</option>
    <option value="Izmir">İzmir</option>
    <option value="Bursa">Bursa</option>
    <option value="Ordu">Ordu</option>
    <option value="Amasya">Amasya</option>
    <option value="Samsun">Samsun</option>
    <option value="Trabzon">Trabzon</option>
    <option value="Erzurum">Erzurum</option>
    <option value="Antalya">Antalya</option>
  </select>

  <div id="namazSonuc" class="namaz-list">
    Yükleniyor...
  </div>
</div>

<style>
.namaz-block{
  background:linear-gradient(135deg,#102a43,#0b1727);
  color:#fff;
  border-radius:14px;
  padding:15px;
  max-width:330px;
  font-family:Arial,sans-serif;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
}
.namaz-block h3{
  margin:0 0 12px;
  font-size:18px;
  text-align:center;
}
.namaz-block select{
  width:100%;
  padding:9px;
  border-radius:8px;
  border:0;
  margin-bottom:12px;
}
.namaz-row{
  display:flex;
  justify-content:space-between;
  padding:8px 10px;
  margin-bottom:6px;
  background:rgba(255,255,255,.08);
  border-radius:8px;
}
.namaz-row strong{
  color:#ffd369;
}
.namaz-date{
  text-align:center;
  font-size:12px;
  opacity:.8;
  margin-bottom:8px;
}
</style>

<script>
function namazVakitleriGetir() {
  const il = document.getElementById("namazIl").value;
  const sonuc = document.getElementById("namazSonuc");

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

  fetch("https://api.aladhan.com/v1/timingsByCity?city=" + encodeURIComponent(il) + "&country=Turkey&method=13")
    .then(res => res.json())
    .then(data => {
      const t = data.data.timings;
      const tarih = data.data.date.readable;

      sonuc.innerHTML = `
        <div class="namaz-date">${il} - ${tarih}</div>
        <div class="namaz-row"><span>İmsak</span><strong>${t.Fajr}</strong></div>
        <div class="namaz-row"><span>Öğle</span><strong>${t.Dhuhr}</strong></div>
        <div class="namaz-row"><span>İkindi</span><strong>${t.Asr}</strong></div>
        <div class="namaz-row"><span>Akşam</span><strong>${t.Maghrib}</strong></div>
        <div class="namaz-row"><span>Yatsı</span><strong>${t.Isha}</strong></div>
      `;
    })
    .catch(() => {
      sonuc.innerHTML = "Namaz vakitleri alınamadı.";
    });
}

document.getElementById("namazIl").addEventListener("change", namazVakitleriGetir);
namazVakitleriGetir();
</script>