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

biraz daha geliştirme

Browse Source
This commit is contained in:
iontalp
2026-07-28 12:20:24 +03:00
parent ffd022ebe1
commit 73fd2a81a4
5 changed files with 162 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/desktop.js
+56 -45
View File
@@ -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,68 +14,77 @@ export function renderDesktop(selectedCity = "İstanbul") {
});
const html = `
<div class="flex justify-end w-full">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 w-full max-w-6xl">
<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 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>
<h2 class="text-xl font-bold text-white">Masaüstü</h2>
<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>
<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>
<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 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>
</div>
<h2 class="text-xl font-bold text-white">Hicri Takvim</h2>
<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>
</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>
</div>
<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 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>
<h2 class="text-xl font-bold text-white">Hava Durumu</h2>
<p class="text-slate-300 text-xs leading-relaxed" id="weatherWidget">
Yükleniyor...
</p>
</div>
<p class="text-slate-300 text-xs leading-relaxed" id="weatherWidget">
Yükleniyor...
</p>
</div>
<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 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>
</div>
<h2 class="text-xl font-bold text-white">İmsakiye</h2>
<p class="text-slate-300 text-xs leading-relaxed" id="imsakiyeWidget">
Yükleniyor...
</p>
</div>
<p class="text-slate-300 text-xs leading-relaxed" id="imsakiyeWidget">
Yükleniyor...
</p>
</div>
<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 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>
<h2 class="text-xl font-bold text-white">Kaza Namaz</h2>
<p class="text-slate-300 text-xs leading-relaxed">
Kaza namaz takibine geçmek için tıkla.
</p>
</div>
<p class="text-slate-300 text-xs leading-relaxed">
Kaza namaz takibine geçmek için tıkla.
</p>
</div>
</div>
`;
@@ -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;