iontalp/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

genel olarak yapılan düzeltmeler

Browse Source
This commit is contained in:
iontalp
2026-07-29 04:01:21 +02:00
parent cb67fb4a84
commit dc4af9cc1d
4 changed files with 319 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/desktop.js
+77 -92
View File
@@ -1,9 +1,8 @@
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") {
export function renderDesktop(selectedCity = "Edremit") {
const hijri = gregorianToHijri();
const today = new Date();
const dateStr = today.toLocaleDateString("tr-TR", {
@@ -14,77 +13,58 @@ export function renderDesktop(selectedCity = "İstanbul") {
});
const html = `
<div class="flex flex-col items-end gap-4 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">
✨
</div>
<h2 class="text-xl font-bold text-white">Masaüstü</h2>
</div>
<p class="text-slate-300 text-xs leading-relaxed">
Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
</p>
<div class="flex justify-end w-full max-w-6xl h-full items-start pt-4">
<!-- Windows Vista Tarzı Entegre Tek Kolon Sidebar -->
<div class="w-full max-w-sm bg-slate-900/50 backdrop-blur-2xl border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
<!-- Header -->
<div class="flex items-center justify-between pb-4 border-b border-white/10">
<h2 class="text-lg font-bold text-white flex items-center gap-2">
<span>🖥️</span> Masaüstü Araçları
</h2>
<span class="text-xs text-slate-400 font-medium">${selectedCity}</span>
</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">
📅
</div>
<h2 class="text-xl font-bold text-white">Hicri Takvim</h2>
<!-- Bölüm 1: Hicri Takvim -->
<div class="space-y-1.5">
<div class="flex items-center gap-2 text-xs font-semibold text-emerald-400">
<span>📅</span> HİCRİ TAKVİM
</div>
<p class="text-slate-300 text-xs leading-relaxed">
<span class="text-white font-semibold">${hijri.weekday}</span><br />
${hijri.day} ${hijri.monthName} ${hijri.year}<br />
<span class="text-slate-400">${dateStr}</span>
</p>
<p class="text-white font-bold text-base">${hijri.day} ${hijri.monthName} ${hijri.year}</p>
<p class="text-xs text-slate-400">${dateStr} / ${hijri.weekday}</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">
🌤️
</div>
<h2 class="text-xl font-bold text-white">Hava Durumu</h2>
</div>
<p class="text-slate-300 text-xs leading-relaxed" id="weatherWidget">
Yükleniyor...
</p>
</div>
</div>
<hr class="border-white/5" />
<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">
🌅
</div>
<h2 class="text-xl font-bold text-white">İmsakiye</h2>
<!-- Bölüm 2: Hava Durumu -->
<div class="space-y-1.5" id="weatherWidget">
<div class="flex items-center gap-2 text-xs font-semibold text-sky-400">
<span>Yükleniyor...</span>
</div>
<p class="text-slate-300 text-xs leading-relaxed" id="imsakiyeWidget">
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">
🕌
</div>
<h2 class="text-xl font-bold text-white">Kaza Namaz</h2>
</div>
<p class="text-slate-300 text-xs leading-relaxed">
Kaza namaz takibine geçmek için tıkla.
</p>
<hr class="border-white/5" />
<!-- Bölüm 3: İmsakiye & Aktif Vakit -->
<div class="space-y-3" id="imsakiyeWidget">
<div class="text-xs font-semibold text-orange-400">İMSAKİYE</div>
<p class="text-xs text-slate-400">Yükleniyor...</p>
</div>
<hr class="border-white/5" />
<!-- Bölüm 4: Kaza Namazı Kısayolu -->
<div id="kazaShortcut" class="bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 p-4 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="text-2xl group-hover:scale-110 transition-transform">📿</span>
<div>
<h3 class="text-sm font-bold text-white">Kaza Namazı Takibi</h3>
<p class="text-[11px] text-indigo-300">Kaydetmeye ve takibe başla</p>
</div>
</div>
<span class="text-slate-400 group-hover:translate-x-1 transition-transform">➔</span>
</div>
</div>
</div>
`;
@@ -94,7 +74,10 @@ export function renderDesktop(selectedCity = "İstanbul") {
initEvents: (container) => {
loadWeather(container, selectedCity);
loadImsakiye(container, selectedCity);
setupKazaShortcut(container);
container.querySelector("#kazaShortcut")?.addEventListener("click", () => {
window.dispatchEvent(new CustomEvent("navigate", { detail: "kaza" }));
});
},
};
}
@@ -102,51 +85,53 @@ export function renderDesktop(selectedCity = "İstanbul") {
async function loadWeather(container, selectedCity) {
const widget = container.querySelector("#weatherWidget");
if (!widget) return;
const data = await fetchWeather(selectedCity);
if (!data) {
widget.innerHTML = "Hava durumu alınamadı.";
widget.innerHTML = `<span class="text-xs text-rose-400">Hava durumu alınamadı</span>`;
return;
}
const icon = getWeatherIcon(data.weathercode);
const desc = getWeatherDesc(data.weathercode);
const temp = Math.round(data.temperature);
widget.innerHTML = `
<span class="text-2xl">${icon}</span> <span class="text-white font-semibold">${temp}°C</span>
<br />
${desc} <span class="text-slate-400">(${data.cityName})</span>
<div class="flex items-center justify-between">
<div>
<div class="flex items-center gap-2 text-xs font-semibold text-sky-400">
<span>🌤️</span> HAVA DURUMU
</div>
<p class="text-xs text-slate-300 mt-1">${desc}</p>
</div>
<div class="flex items-center gap-2">
<span class="text-3xl">${icon}</span>
<span class="text-2xl font-bold text-white">${temp}°C</span>
</div>
</div>
`;
}
async function loadImsakiye(container, selectedCity) {
const widget = container.querySelector("#imsakiyeWidget");
if (!widget) return;
const city = getCityByName(selectedCity);
const times = await fetchPrayerTimes(selectedCity, city.lat, city.lon);
const times = await fetchPrayerTimes(selectedCity);
if (!times) {
widget.innerHTML = "Namaz vakitleri alınamadı.";
widget.innerHTML = `<span class="text-xs text-rose-400">Vakitler alınamadı</span>`;
return;
}
const activeKey = times.currentPrayer?.key;
widget.innerHTML = `
🌅 İmsak: <span class="text-white font-semibold">${times.imsak}</span><br />
🌅 Güneş: <span class="text-white font-semibold">${times.sunrise}</span><br />
🌅 Öğle: <span class="text-white font-semibold">${times.dhuhr}</span><br />
🌅 İkindi: <span class="text-white font-semibold">${times.asr}</span><br />
🕌 Akşam: <span class="text-emerald-300 font-semibold">${times.maghrib}</span>
🌅 Yatsı: <span class="text-white font-semibold">${times.isha}</span><br />
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold text-orange-400">🕌 NAMAZ VAKİTLERİ</span>
<span class="text-[10px] bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 px-2 py-0.5 rounded-full">Şu an: ${times.currentPrayer?.name}</span>
</div>
<div class="grid grid-cols-2 gap-2 text-xs">
<div class="p-2 rounded-xl ${activeKey === 'fajr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">İmsak: ${times.imsak}</div>
<div class="p-2 rounded-xl bg-slate-900/40 text-slate-300">Güneş: ${times.sunrise}</div>
<div class="p-2 rounded-xl ${activeKey === 'dhuhr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Öğle: ${times.dhuhr}</div>
<div class="p-2 rounded-xl ${activeKey === 'asr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">İkindi: ${times.asr}</div>
<div class="p-2 rounded-xl ${activeKey === 'maghrib' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Akşam: ${times.maghrib}</div>
<div class="p-2 rounded-xl ${activeKey === 'isha' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Yatsı: ${times.isha}</div>
</div>
`;
}
function setupKazaShortcut(container) {
const shortcut = container.querySelector("#kazaShortcut");
if (!shortcut) return;
shortcut.addEventListener("click", () => {
const event = new CustomEvent("navigate", { detail: "kaza" });
window.dispatchEvent(event);
});
}
}