saat eklendi ve widget tasarıı düzeltildi.
This commit is contained in:
+59
-35
@@ -20,8 +20,9 @@ async function render() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Güvenli Avatar URL
|
||||
const avatarUrl = user?.avatar
|
||||
? `https://pocketbase.iontalp.com/api/files/_pb_users_auth_/${user.id}/${user.avatar}?thumb=100x100`
|
||||
? `https://pocketbase.iontalp.com/api/files/${user.collectionId || "_pb_users_auth_"}/${user.id}/${user.avatar}?thumb=100x100`
|
||||
: null;
|
||||
|
||||
let currentBg =
|
||||
@@ -54,17 +55,17 @@ async function render() {
|
||||
selectedCity = city;
|
||||
localStorage.setItem("selected_city", city);
|
||||
render();
|
||||
}
|
||||
},
|
||||
);
|
||||
} else if (activeTab === "kaza") {
|
||||
currentPage = renderKaza(pb);
|
||||
currentPage = await renderKaza(pb);
|
||||
} else {
|
||||
currentPage = renderDesktop(selectedCity, pb);
|
||||
currentPage = await renderDesktop(selectedCity, pb);
|
||||
}
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
|
||||
<!-- Kristal Netliğinde Arka Plan (Blur Kaldırıldı) -->
|
||||
<!-- Kristal Netliğinde Arka Plan -->
|
||||
<div class="absolute inset-0 z-0 bg-center bg-cover bg-no-repeat transition-all duration-700"
|
||||
style="background-image: url('${currentBg}');">
|
||||
</div>
|
||||
@@ -72,51 +73,59 @@ async function render() {
|
||||
<!-- İnce Netlik Katmanı -->
|
||||
<div class="absolute inset-0 z-10 bg-black/25"></div>
|
||||
|
||||
<!-- Sol Menü (Sidebar) -->
|
||||
<button id="globalSidebarToggle" class="fixed top-4 left-4 z-50 bg-slate-900/80 hover:bg-slate-800 text-white p-2.5 rounded-xl transition-all border border-white/10 shadow-lg">
|
||||
${sidebarOpen ? "◀" : "▶"}
|
||||
</button>
|
||||
|
||||
<!-- Mobil Karartma Overlay -->
|
||||
${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 p-6" : "w-72 -translate-x-full md:w-20 md:translate-x-0 md:p-3"} h-screen bg-slate-900/85 border-r border-white/10 flex flex-col justify-between transition-all duration-300 overflow-hidden shadow-2xl">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-8 mt-2">
|
||||
<h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:hidden"}">Dashboard OS</h1>
|
||||
<!-- Sol Menü (Sidebar) -->
|
||||
<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/85 border-r border-white/10 flex flex-col justify-between transition-all duration-300 ease-in-out overflow-hidden shadow-2xl p-4">
|
||||
<div class="w-full">
|
||||
<!-- Sidebar Üst Başlık & Toggle Butonu (İç içe geçmeyi çözen kısım) -->
|
||||
<div class="flex items-center justify-between mb-6 h-10 px-1">
|
||||
<h1 class="font-bold text-white text-lg ${sidebarOpen ? "block" : "hidden"} transition-all truncate">İon Talp</h1>
|
||||
<button id="globalSidebarToggle" class="bg-slate-800/80 hover:bg-slate-700 text-white w-9 h-9 rounded-xl transition-all border border-white/10 shadow-md flex items-center justify-center shrink-0 ${sidebarOpen ? "" : "mx-auto"}">
|
||||
<span>${sidebarOpen ? "◀" : "▶"}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigasyon Menüsü (Zıplamayı önleyen sabit genişlikli ikonlar) -->
|
||||
<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-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Masaüstü</span>
|
||||
<button id="navDesktop" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "desktop" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">🏠</span>
|
||||
<span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-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-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span>📿</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Kaza Namazı</span>
|
||||
<button id="navKaza" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "kaza" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">📿</span>
|
||||
<span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-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-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Ayarlar</span>
|
||||
<button id="navSettings" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "settings" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">⚙️</span>
|
||||
<span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Ayarlar</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Profil ve Çıkış Alanı -->
|
||||
<div class="space-y-3 pt-4 border-t border-white/10 w-full">
|
||||
<div id="profileBtn" class="flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
|
||||
<div id="profileBtn" class="flex items-center h-12 px-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
|
||||
${
|
||||
avatarUrl
|
||||
? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md 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 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
|
||||
? `<img src="${avatarUrl}" alt="Avatar" class="w-9 h-9 rounded-full object-cover border border-white/20 shadow-md shrink-0" />`
|
||||
: `<div class="w-9 h-9 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
|
||||
}
|
||||
<div class="${sidebarOpen ? "block" : "hidden md:hidden"} overflow-hidden">
|
||||
<div class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 overflow-hidden whitespace-nowrap">
|
||||
<p class="text-sm font-medium text-white truncate">${user.name || user.username || user.email}</p>
|
||||
<p class="text-xs text-emerald-400">Çevrimiçi</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 py-2.5 rounded-xl border border-rose-500/30 text-sm font-medium transition-all flex items-center justify-center gap-2">
|
||||
<span>🚪</span> <span class="${sidebarOpen ? "inline" : "hidden md:hidden"}">Çıkış Yap</span>
|
||||
<button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 h-11 rounded-xl border border-rose-500/30 text-sm font-medium transition-all flex items-center justify-center">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-base shrink-0">🚪</span>
|
||||
<span class="${sidebarOpen ? "opacity-100 ml-2" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Çıkış Yap</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Ana İçerik -->
|
||||
<main id="mainContent" class="relative z-20 flex-1 h-screen p-4 md:p-8 flex items-center justify-center overflow-y-auto">
|
||||
${currentPage.html}
|
||||
</main>
|
||||
@@ -124,21 +133,35 @@ async function render() {
|
||||
`;
|
||||
|
||||
const mainContent = document.getElementById("mainContent");
|
||||
currentPage.initEvents(mainContent);
|
||||
|
||||
document.getElementById("navDesktop")?.addEventListener("click", () => { activeTab = "desktop"; render(); });
|
||||
document.getElementById("navKaza")?.addEventListener("click", () => { activeTab = "kaza"; render(); });
|
||||
document.getElementById("navSettings")?.addEventListener("click", () => { activeTab = "settings"; render(); });
|
||||
if (currentPage.initEvents) {
|
||||
currentPage.initEvents(mainContent);
|
||||
}
|
||||
|
||||
document.getElementById("navDesktop")?.addEventListener("click", () => {
|
||||
activeTab = "desktop";
|
||||
render();
|
||||
});
|
||||
document.getElementById("navKaza")?.addEventListener("click", () => {
|
||||
activeTab = "kaza";
|
||||
render();
|
||||
});
|
||||
document.getElementById("navSettings")?.addEventListener("click", () => {
|
||||
activeTab = "settings";
|
||||
render();
|
||||
});
|
||||
|
||||
document.getElementById("logoutBtn")?.addEventListener("click", () => {
|
||||
pb.authStore.clear();
|
||||
render();
|
||||
});
|
||||
|
||||
document.getElementById("globalSidebarToggle")?.addEventListener("click", () => {
|
||||
sidebarOpen = !sidebarOpen;
|
||||
render();
|
||||
});
|
||||
document
|
||||
.getElementById("globalSidebarToggle")
|
||||
?.addEventListener("click", () => {
|
||||
sidebarOpen = !sidebarOpen;
|
||||
render();
|
||||
});
|
||||
|
||||
document.getElementById("sidebarOverlay")?.addEventListener("click", () => {
|
||||
sidebarOpen = false;
|
||||
@@ -171,7 +194,7 @@ function renderLogin() {
|
||||
.collection("users")
|
||||
.authWithPassword(
|
||||
document.getElementById("identity").value,
|
||||
document.getElementById("password").value
|
||||
document.getElementById("password").value,
|
||||
);
|
||||
render();
|
||||
} catch {
|
||||
@@ -180,4 +203,5 @@ function renderLogin() {
|
||||
});
|
||||
}
|
||||
|
||||
// Uygulamayı başlat
|
||||
render();
|
||||
Reference in New Issue
Block a user