biraz daha geliştirme

src/main.js

@@ -69,20 +69,20 @@ async function render() {
 
       ${sidebarOpen ? `<div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-30 md:hidden"></div>` : ""}
 
-      <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col ${sidebarOpen ? "" : "md:items-center"} justify-between transition-all duration-300 overflow-hidden">
+      <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 ${sidebarOpen ? "p-6" : "md:p-0"} flex flex-col ${sidebarOpen ? "" : "md:items-center"} justify-between transition-all duration-300 overflow-hidden">
         <div>
           <div class="flex items-center justify-between mb-6">
-            <h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:block"}">Dashboard OS</h1>
+            <h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:hidden"}">Dashboard OS</h1>
           </div>
           <nav class="space-y-2 w-full">
              <button id="navDesktop" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "desktop" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
-              <span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:block"}">Masaüstü</span>
+               <span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Masaüstü</span>
              </button>
              <button id="navKaza" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "kaza" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
-              <span>🕌</span> <span class="${sidebarOpen ? "block" : "hidden md:block"}">Kaza Namaz</span>
+               <span>🕌</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Kaza Namaz</span>
              </button>
              <button id="navSettings" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
-              <span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:block"}">Ayarlar</span>
+               <span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Ayarlar</span>
              </button>
            </nav>
         </div>
@@ -94,7 +94,7 @@ async function render() {
                 ? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md flex-shrink-0" />`
                 : `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 flex-shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
             }
-            <div class="overflow-hidden ${sidebarOpen ? "block" : "hidden md:block"}">
+            <div class="${sidebarOpen ? "block" : "hidden md:hidden"}">
               <p class="text-sm font-medium text-white truncate">${user.name || user.email}</p>
               <p class="text-xs text-slate-400">Çevrimiçi</p>
             </div>

src/pages/desktop.js

@@ -1,6 +1,7 @@
 import { gregorianToHijri } from "../utils/hijri.js";
 import { fetchWeather, getWeatherIcon, getWeatherDesc } from "../utils/weather.js";
 import { fetchPrayerTimes } from "../utils/prayerTimes.js";
+import { getCityByName } from "../utils/locations.js";
 
 export function renderDesktop(selectedCity = "İstanbul") {
   const hijri = gregorianToHijri();
@@ -13,8 +14,8 @@ export function renderDesktop(selectedCity = "İstanbul") {
   });
 
   const html = `
-    <div class="flex justify-end w-full">
+    <div class="flex flex-col items-end gap-4 w-full max-w-6xl">
-      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 w-full max-w-6xl">
+      <div class="w-full max-w-md">
         <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
           <div class="flex items-center gap-3">
             <div class="inline-flex p-2 bg-indigo-500/20 border border-indigo-500/30 rounded-xl text-indigo-300 text-xl">
@@ -26,7 +27,9 @@ export function renderDesktop(selectedCity = "İstanbul") {
             Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
           </p>
         </div>
+      </div>
 
+      <div class="w-full max-w-md">
         <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
           <div class="flex items-center gap-3">
             <div class="inline-flex p-2 bg-emerald-500/20 border border-emerald-500/30 rounded-xl text-emerald-300 text-xl">
@@ -40,7 +43,9 @@ export function renderDesktop(selectedCity = "İstanbul") {
             <span class="text-slate-400">${dateStr}</span>
           </p>
         </div>
+      </div>
 
+      <div class="w-full max-w-md">
         <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
           <div class="flex items-center gap-3">
             <div class="inline-flex p-2 bg-sky-500/20 border border-sky-500/30 rounded-xl text-sky-300 text-xl">
@@ -52,7 +57,9 @@ export function renderDesktop(selectedCity = "İstanbul") {
             Yükleniyor...
           </p>
         </div>
+      </div>
 
+      <div class="w-full max-w-md">
         <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
           <div class="flex items-center gap-3">
             <div class="inline-flex p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl text-orange-300 text-xl">
@@ -64,7 +71,9 @@ export function renderDesktop(selectedCity = "İstanbul") {
             Yükleniyor...
           </p>
         </div>
+      </div>
 
+      <div class="w-full max-w-md">
         <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3 cursor-pointer hover:border-white/20 transition-all" id="kazaShortcut">
           <div class="flex items-center gap-3">
             <div class="inline-flex p-2 bg-amber-500/20 border border-amber-500/30 rounded-xl text-amber-300 text-xl">
@@ -77,6 +86,7 @@ export function renderDesktop(selectedCity = "İstanbul") {
           </p>
         </div>
       </div>
+    </div>
   `;
 
   return {
@@ -114,7 +124,8 @@ async function loadImsakiye(container, selectedCity) {
   const widget = container.querySelector("#imsakiyeWidget");
   if (!widget) return;
 
-  const times = await fetchPrayerTimes(selectedCity);
+  const city = getCityByName(selectedCity);
+  const times = await fetchPrayerTimes(selectedCity, city.lat, city.lon);
   if (!times) {
     widget.innerHTML = "Namaz vakitleri alınamadı.";
     return;

src/pages/kaza.js

@@ -1,4 +1,4 @@
-import { gregorianToHijri, calculateMissedPrayers, getHijriAge } from "../utils/hijri.js";
+import { gregorianToHijri, calculateMissedPrayers, getHijriAge, getHijriBirthDate } from "../utils/hijri.js";
 
 const PRAYERS = [
   { id: "fajr", name: "SABAH", arabic: "Fecr" },
@@ -6,15 +6,17 @@ const PRAYERS = [
   { id: "asr", name: "İKİNDİ", arabic: "Asr" },
   { id: "maghrib", name: "AKŞAM", arabic: "Mağrib" },
   { id: "isha", name: "YATSI", arabic: "İşa" },
+  { id: "vitr", name: "VİTR", arabic: "Vitr" },
 ];
 
 export function renderKaza(pb) {
+  const pbBirthDate = pb.authStore.model?.birthDate;
+  const pbGender = pb.authStore.model?.gender;
   const profileS = localStorage.getItem("kaza_profile");
   let profile = profileS ? JSON.parse(profileS) : null;
 
-  const hijri = gregorianToHijri();
+  const birthDate = pbBirthDate || profile?.birthDate;
-  const hijriAge = profile ? getHijriAge(profile.birthDate) : 0;
+  const gender = pbGender || profile?.gender;
-  const calc = profile ? calculateMissedPrayers(profile.birthDate, profile.gender) : { missed: 0, days: 0 };
 
   const html = `
     <div class="bg-slate-900/60 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[80vh] flex flex-col">
@@ -27,7 +29,7 @@ export function renderKaza(pb) {
         Hicri yaşını ve kalan kaza namazını takip et.
       </p>
 
-      ${!profile ? `
+      ${!birthDate ? `
         <div class="bg-slate-900/40 border border-white/10 p-6 rounded-2xl mb-6">
           <h3 class="text-sm font-semibold text-slate-300 mb-4">Profil Bilgileri</h3>
           <form id="profileForm" class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -50,19 +52,18 @@ export function renderKaza(pb) {
           </form>
         </div>
       ` : `
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mb-6">
-          <div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl text-center">
+          <div class="bg-slate-900/40 border border-white/10 p-3 rounded-2xl text-center">
-            <p class="text-xs text-slate-400 mb-1">Hicri Yaş</p>
+            <p class="text-[10px] text-slate-400 mb-1">Hicri Doğum Tarihi</p>
-            <p class="text-2xl font-bold text-white" id="hijriAgeDisplay">-</p>
+            <p class="text-sm font-bold text-white" id="hijriBirthDateDisplay">-</p>
           </div>
-          <div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl text-center">
+          ${PRAYERS.map((p) => `
-            <p class="text-xs text-slate-400 mb-1">Toplam Kaza</p>
+            <div class="bg-slate-900/40 border border-white/10 p-3 rounded-2xl text-center">
-            <p class="text-2xl font-bold text-rose-300" id="totalKazaDisplay">-</p>
+              <p class="text-[10px] text-slate-400 mb-1">${p.name}</p>
-          </div>
+              <p class="text-xs text-white">Kalan: <span id="remaining-${p.id}" class="font-bold text-emerald-300">-</span></p>
-          <div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl text-center">
+              <p class="text-[10px] text-slate-500 mt-1">Toplam: <span id="total-${p.id}">-</span></p>
-            <p class="text-xs text-slate-400 mb-1">Kalan</p>
-            <p class="text-2xl font-bold text-emerald-300" id="remainingDisplay">-</p>
             </div>
+          `).join("")}
         </div>
 
         <div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl mb-6">
@@ -84,10 +85,10 @@ export function renderKaza(pb) {
 
         <div class="flex-1 overflow-y-auto pr-2">
           <h3 class="text-sm font-semibold text-slate-300 mb-4">Bugünkü Namazlar</h3>
-          <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
+          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
             ${PRAYERS.map((p) => {
               const todayKey = new Date().toISOString().split("T")[0];
-              const alreadyDone = profile.todayLogs?.some(
+              const alreadyDone = profile?.todayLogs?.some(
                 (l) => l.prayerId === p.id && l.date === todayKey
               );
               return `
@@ -120,25 +121,37 @@ export function renderKaza(pb) {
         });
       }
 
-      if (!profile) {
-        const form = container.querySelector("#profileForm");
-        if (form) {
-          form.addEventListener("submit", (e) => {
-            e.preventDefault();
-            const birthDate = container.querySelector("#birthDate").value;
-            const gender = container.querySelector("#gender").value;
-
       if (!birthDate) {
+        const form = container.querySelector("#profileForm");
+        const genderSelect = container.querySelector("#gender");
+        if (gender && genderSelect) {
+          genderSelect.value = gender;
+        }
+        if (form) {
+          form.addEventListener("submit", async (e) => {
+            e.preventDefault();
+            const birthDateInput = container.querySelector("#birthDate").value;
+            const genderInput = container.querySelector("#gender").value;
+
+            if (!birthDateInput) {
               alert("Lütfen doğum tarihinizi girin.");
               return;
             }
 
+            try {
+              await pb.collection("users").update(pb.authStore.model.id, {
+                birthDate: birthDateInput,
+                gender: genderInput,
+              });
+            } catch (err) {
+              console.error("PocketBase kaydedilemedi:", err);
+            }
+
             profile = {
-              birthDate,
+              gender: genderInput,
-              gender,
+              logs: profile?.logs || [],
-              logs: [],
+              todayLogs: profile?.todayLogs || [],
-              todayLogs: [],
+              createdAt: profile?.createdAt || new Date().toISOString(),
-              createdAt: new Date().toISOString(),
             };
             localStorage.setItem("kaza_profile", JSON.stringify(profile));
 
@@ -147,7 +160,7 @@ export function renderKaza(pb) {
           });
         }
       } else {
-        refreshKazaStats(container, pb, profile);
+        refreshKazaStats(container, pb, birthDate, gender, profile);
 
         const addBtn = container.querySelector("#addKazaBtn");
         const removeBtn = container.querySelector("#removeKazaBtn");
@@ -169,7 +182,7 @@ export function renderKaza(pb) {
 
               showKazaMsg(msg, `${count} kaza namaz eklendi!`, true);
               if (countInput) countInput.value = "1";
-              await refreshKazaStats(container, pb, profile);
+              await refreshKazaStats(container, pb, birthDate, gender, profile);
             } catch (err) {
               console.error("Kaza eklenemedi:", err);
               showKazaMsg(msg, "Eklenemedi. PocketBase bağlantısını kontrol et.", false);
@@ -207,7 +220,7 @@ export function renderKaza(pb) {
 
               showKazaMsg(msg, `${count} kaza namaz çıkarıldı!`, true);
               if (countInput) countInput.value = "1";
-              await refreshKazaStats(container, pb, profile);
+              await refreshKazaStats(container, pb, birthDate, gender, profile);
             } catch (err) {
               console.error("Kaza çıkarılamadı:", err);
               showKazaMsg(msg, "Çıkarılamadı. PocketBase bağlantısını kontrol et.", false);
@@ -219,22 +232,19 @@ export function renderKaza(pb) {
   };
 }
 
-async function refreshKazaStats(container, pb, profile) {
+async function refreshKazaStats(container, pb, birthDate, gender, profile) {
-  if (!profile) return;
+  if (!birthDate) return;
 
-  const hijriAge = getHijriAge(profile.birthDate);
+  const calc = calculateMissedPrayers(birthDate, gender);
-  const calc = calculateMissedPrayers(profile.birthDate, profile.gender);
+  const hijriBirth = getHijriBirthDate(birthDate);
 
-  const ageEl = container.querySelector("#hijriAgeDisplay");
+  const birthDateEl = container.querySelector("#hijriBirthDateDisplay");
-  const totalEl = container.querySelector("#totalKazaDisplay");
+  if (birthDateEl) {
-  const remainEl = container.querySelector("#remainingDisplay");
+    birthDateEl.textContent = `${hijriBirth.day} ${hijriBirth.monthName} ${hijriBirth.year}`;
-  const logsContainer = container.querySelector("#logsContainer");
+  }
 
-  if (ageEl) ageEl.textContent = hijriAge;
-  if (totalEl) totalEl.textContent = calc.missed;
-
-  let totalCompleted = 0;
   let logs = [];
+  let logsByPrayer = {};
 
   try {
     const records = await pb.collection("kaza_logs").getFullList({
@@ -250,18 +260,32 @@ async function refreshKazaStats(container, pb, profile) {
       createdAt: r.createdAt,
     }));
 
-    totalCompleted = logs.reduce((sum, l) => sum + (l.count || 1), 0);
+    logs.forEach((l) => {
+      logsByPrayer[l.prayerId] = (logsByPrayer[l.prayerId] || 0) + (l.count || 1);
+    });
   } catch (err) {
     console.error("Loglar yüklenemedi:", err);
   }
 
-  if (remainEl) remainEl.textContent = Math.max(0, calc.missed - totalCompleted);
+  PRAYERS.forEach((p) => {
+    const totalEl = container.querySelector(`#total-${p.id}`);
+    const remainEl = container.querySelector(`#remaining-${p.id}`);
+    const missed = calc[p.id] || 0;
+    const completed = logsByPrayer[p.id] || 0;
+    const remaining = Math.max(0, missed - completed);
+
+    if (totalEl) totalEl.textContent = missed;
+    if (remainEl) remainEl.textContent = remaining;
+  });
 
   const todayKey = new Date().toISOString().split("T")[0];
   const todayLogs = logs.filter((l) => l.date === todayKey);
+  if (profile) {
     profile.todayLogs = todayLogs;
     localStorage.setItem("kaza_profile", JSON.stringify(profile));
+  }
 
+  const logsContainer = container.querySelector("#logsContainer");
   if (logsContainer) {
     logsContainer.innerHTML = logs
       .slice(0, 20)

src/utils/hijri.js

@@ -67,14 +67,17 @@ export function calculateMissedPrayers(birthDate, gender, mukallafAge = 15) {
   mukallafDate.setFullYear(mukallafDate.getFullYear() + mukallafAge);
 
   if (today <= mukallafDate) {
-    return { missed: 0, days: 0 };
+    return { fajr: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0, vitr: 0, days: 0 };
   }
 
   const diffTime = today - mukallafDate;
   const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-  const missed = days * 5;
 
-  return { missed, days, mukallafDate };
+  return { fajr: days, dhuhr: days, asr: days, maghrib: days, isha: days, vitr: days, days };
+}
+
+export function getHijriBirthDate(birthDate) {
+  return gregorianToHijri(new Date(birthDate));
 }
 
 export function getHijriAge(birthDate, mukallafAge = 15) {

src/utils/prayerTimes.js

@@ -1,9 +1,19 @@
-export async function fetchPrayerTimes(cityName = "Istanbul") {
+export async function fetchPrayerTimes(cityName = "Istanbul", lat, lon) {
   try {
-    const url =
+    let url;
+    if (lat !== undefined && lon !== undefined) {
+      url =
+        "https://api.aladhan.com/v1/timings?latitude=" +
+        encodeURIComponent(lat) +
+        "&longitude=" +
+        encodeURIComponent(lon) +
+        "&method=13";
+    } else {
+      url =
         "https://api.aladhan.com/v1/timingsByCity?city=" +
         encodeURIComponent(cityName) +
         "&country=Turkey&method=2";
+    }
     const res = await fetch(url);
     if (!res.ok) {
       throw new Error("Namaz vakitleri alınamadı");