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

saat eklendi ve widget tasarıı düzeltildi.

Browse Source
This commit is contained in:
iontalp
2026-07-29 04:48:40 +02:00
parent db33fdd963
commit d6f6eca9c3
1 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/desktop.js
+46 -30
View File
@@ -17,19 +17,20 @@ export function renderDesktop(selectedCity = "Edremit", pb) {
});
const html = `
<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/80 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-5">
<!-- Header -->
<div class="flex items-center justify-between pb-3 border-b border-white/10">
<h2 class="text-base 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>
<!-- Paneli Tam Sağa Yapıştırma ve Boyunu Uzatma Kapsayıcısı -->
<div class="fixed top-0 right-0 h-screen w-80 md:w-96 bg-slate-900/85 border-l border-white/10 p-6 shadow-2xl z-20 flex flex-col justify-between overflow-y-auto">
<div class="space-y-6">
<!-- CANLI DİJİTAL SAAT WİDGET'I -->
<div class="bg-slate-950/60 border border-white/10 p-5 rounded-3xl text-center space-y-1 shadow-inner">
<p class="text-xs font-semibold text-indigo-400 tracking-widest uppercase">CANLI SAAT</p>
<div id="liveClock" class="text-4xl font-black text-white tracking-wider font-mono">
00:00:00
</div>
<p class="text-[11px] text-slate-400 font-medium">${dateStr}</p>
</div>
<!-- YENİ: GENEL KAZA İLERLEME WİDGET'I -->
<!-- GENEL KAZA İLERLEME WİDGET'I -->
<div id="desktopKazaProgressWidget" class="bg-slate-950/60 border border-white/10 p-4 rounded-2xl space-y-2">
<div class="flex items-center justify-between text-xs">
<span class="font-bold text-indigo-300 flex items-center gap-1.5">
@@ -43,50 +44,51 @@ export function renderDesktop(selectedCity = "Edremit", pb) {
<p id="desktopKazaSub" class="text-[10px] text-slate-400 text-right">Yükleniyor...</p>
</div>
<!-- Bölüm 1: Hicri Takvim -->
<hr class="border-white/5" />
<!-- HİCRİ TAKVİM -->
<div class="space-y-1">
<div class="flex items-center gap-2 text-xs font-semibold text-emerald-400">
<span>📅</span> HİCRİ TAKVİM
</div>
<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>
<p class="text-xs text-slate-400">${hijri.weekday}</p>
</div>
<hr class="border-white/5" />
<!-- Bölüm 2: Hava Durumu -->
<!-- HAVA DURUMU -->
<div class="space-y-1" id="weatherWidget">
<div class="text-xs text-slate-400">Hava durumu yükleniyor...</div>
</div>
<hr class="border-white/5" />
<!-- Bölüm 3: İmsakiye -->
<!-- İMSAKİYE & VAKİTLER -->
<div class="space-y-2" id="imsakiyeWidget">
<div class="text-xs text-slate-400">Namaz vakitleri yükleniyor...</div>
</div>
<hr class="border-white/5" />
<!-- Bölüm 4: Kaza Kısayolu -->
<div id="kazaShortcut" class="bg-indigo-600/30 hover:bg-indigo-600/50 border border-indigo-500/30 p-3.5 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="text-xl group-hover:scale-110 transition-transform">📿</span>
<div>
<h3 class="text-xs font-bold text-white">Kaza Namazı Takibi</h3>
<p class="text-[10px] text-indigo-300">Detaylı sayaç & takip</p>
</div>
</div>
<span class="text-slate-400 group-hover:translate-x-1 transition-transform text-xs">➔</span>
</div>
</div>
<!-- KAZA NAMAZI KISAYOLU (ALT KISIM) -->
<div id="kazaShortcut" class="mt-6 bg-indigo-600/30 hover:bg-indigo-600/50 border border-indigo-500/30 p-3.5 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="text-xl group-hover:scale-110 transition-transform">📿</span>
<div>
<h3 class="text-xs font-bold text-white">Kaza Namazı Takibi</h3>
<p class="text-[10px] text-indigo-300">Detaylı sayaç & takip</p>
</div>
</div>
<span class="text-slate-400 group-hover:translate-x-1 transition-transform text-xs">➔</span>
</div>
</div>
`;
return {
html,
initEvents: (container) => {
startClock(container);
loadWeather(container, selectedCity);
loadImsakiye(container, selectedCity);
if (pb) loadDesktopKazaProgress(container, pb);
@@ -100,6 +102,20 @@ export function renderDesktop(selectedCity = "Edremit", pb) {
};
}
// Canlı Saat Mantığı (Saniyede Bir Güncellenir)
function startClock(container) {
const clockEl = container.querySelector("#liveClock");
if (!clockEl) return;
const update = () => {
const now = new Date();
clockEl.textContent = now.toLocaleTimeString("tr-TR");
};
update();
setInterval(update, 1000);
}
async function loadDesktopKazaProgress(container, pb) {
const user = pb.authStore.model;
if (!user) return;