moduler sayfa yapısına gecıldı

2026-07-27 05:28:07 +02:00
parent e4b3ba76d7
commit cfa70819fe
4 changed files with 141 additions and 172 deletions
@@ -0,0 +1,54 @@
+export async function renderSettings(pb, currentBg, onBgSelect) {
+  let bgList = []
+  
+  try {
+    const records = await pb.collection('backgrounds').getFullList()
+    bgList = records.map(item => ({
+      id: item.id,
+      title: item.title || 'Duvar Kağıdı',
+      url: `https://pocketbase.iontalp.com/api/files/${item.collectionId}/${item.id}/${item.image || item.file}`
+    }))
+  } catch (err) {
+    console.error('Görseller yüklenemedi:', err)
+  }
+
+  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">
+      <h2 class="text-2xl font-bold text-white mb-2">⚙️ Sistem Ayarları</h2>
+      <p class="text-slate-400 text-sm mb-6">PocketBase sunucundaki duvar kağıtlarından birini seçerek arka planı özelleştir.</p>
+
+      <div class="flex-1 overflow-y-auto pr-2">
+        <h3 class="text-sm font-semibold text-slate-300 mb-4">Arka Plan Galerisi (${bgList.length})</h3>
+        
+        ${bgList.length === 0 ? `
+          <div class="text-center py-12 border border-dashed border-white/10 rounded-2xl text-slate-500">
+            PocketBase 'backgrounds' koleksiyonunda henüz görsel bulunamadı.
+          </div>
+        ` : `
+          <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+            ${bgList.map(bg => `
+              <div data-url="${bg.url}" class="bg-card group relative h-40 rounded-2xl overflow-hidden border-2 cursor-pointer transition-all duration-300 hover:scale-[1.02] ${currentBg === bg.url ? 'border-indigo-500 ring-4 ring-indigo-500/20' : 'border-white/10 hover:border-white/30'}">
+                <img src="${bg.url}" alt="${bg.title}" class="w-full h-full object-cover" />
+                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity flex items-end p-3">
+                  <span class="text-xs font-medium text-white truncate">${bg.title}</span>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        `}
+      </div>
+    </div>
+  `
+
+  return {
+    html,
+    initEvents: (container) => {
+      container.querySelectorAll('.bg-card').forEach(card => {
+        card.addEventListener('click', () => {
+          const selectedUrl = card.getAttribute('data-url')
+          onBgSelect(selectedUrl)
+        })
+      })
+    }
+  }
+}