ana sayfa arayuz guncellendi.

src/main.js

@@ -1,39 +1,140 @@
 import './style.css'
 import PocketBase from 'pocketbase'
 
-// PocketBase bağlantısını kur (Kendi PocketBase domain adresini yaz)
 const pb = new PocketBase('https://pocketbase.iontalp.com')
-
 const app = document.getElementById('app')
 
-// Kullanıcı oturum durumuna göre arayüzü çizen fonksiyon
-function render() {
+async function render() {
   const user = pb.authStore.model
 
   if (user) {
-    // KULLANICI GİRİŞ YAPMIŞSA
+    // 1. PocketBase'den Arka Plan Resimlerini Çek
+    let bgUrl = 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920' // Varsayılan görsel
+    try {
+      const records = await pb.collection('backgrounds').getFullList()
+      if (records.length > 0) {
+        // Rastgele bir arka plan seç
+        const randomBg = records[Math.floor(Math.random() * records.length)]
+        bgUrl = pb.files.getUrl(randomBg, randomBg.image)
+      }
+    } catch (err) {
+      console.log('Arka plan yüklenirken hata oluştu, varsayılan görsel kullanılıyor.', err)
+    }
+
+    // 2. Masaüstü Arayüzü (WeTransfer Tarzı Hibrit Tasarım)
     app.innerHTML = `
-      <div class="min-h-screen bg-slate-950 text-slate-100 flex flex-col items-center justify-center p-4">
-        <div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-xl w-full max-w-md text-center">
-          <div class="w-16 h-16 bg-emerald-500/10 text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
-            ✓
-          </div>
-          <h2 class="text-2xl font-bold mb-2">Hayırla Geldiniz!</h2>
-          <p class="text-slate-400 mb-6">${user.email}</p>
-          <button id="logoutBtn" class="w-full bg-rose-600 hover:bg-rose-500 text-white font-medium py-2.5 rounded-xl transition-all">
-            Çıkış Yap
-          </button>
+      <div class="relative min-h-screen w-full overflow-hidden bg-slate-950 text-slate-100 flex">
+        
+        <!-- Dinamik Arka Plan Görseli -->
+        <div class="absolute inset-0 bg-cover bg-center transition-all duration-1000 scale-105" 
+             style="background-image: url('${bgUrl}'); filter: brightness(0.75);">
         </div>
+        <div class="absolute inset-0 bg-gradient-to-r from-slate-950/80 via-slate-950/30 to-transparent"></div>
+
+        <!-- Sol Açılır / Kapanır Menü (Sidebar) -->
+        <aside id="sidebar" 
+               class="relative z-20 w-72 h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between transition-all duration-300 transform translate-x-0">
+          
+          <div>
+            <!-- Header & Toggle -->
+            <div class="flex items-center justify-between mb-8">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400">
+                  OS
+                </div>
+                <div>
+                  <h1 class="font-bold text-white leading-none">Dashboard</h1>
+                  <span class="text-xs text-slate-400">v1.0.0</span>
+                </div>
+              </div>
+              <button id="toggleSidebarBtn" class="text-slate-400 hover:text-white transition-colors p-1">
+                ✕
+              </button>
+            </div>
+
+            <!-- Menü Linkleri -->
+            <nav class="space-y-2">
+              <a href="#" class="flex items-center gap-3 px-4 py-3 bg-white/10 text-white rounded-xl font-medium transition-all">
+                <span>🏠</span> Masaüstü
+              </a>
+              <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-white rounded-xl transition-all">
+                <span>📁</span> Dosyalarım
+              </a>
+              <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-white rounded-xl transition-all">
+                <span>⚙️</span> Ayarlar
+              </a>
+            </nav>
+          </div>
+
+          <!-- Alt Kullanıcı Profili & Çıkış -->
+          <div class="pt-6 border-t border-white/10">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-9 h-9 rounded-full bg-emerald-500/20 text-emerald-400 font-bold flex items-center justify-center border border-emerald-500/30">
+                ${user.email.charAt(0).toUpperCase()}
+              </div>
+              <div class="overflow-hidden">
+                <p class="text-sm font-medium text-white truncate">${user.email}</p>
+                <p class="text-xs text-emerald-400 flex items-center gap-1">● Çevrimiçi</p>
+              </div>
+            </div>
+
+            <button id="logoutBtn" class="w-full bg-rose-500/20 hover:bg-rose-500/30 text-rose-300 border border-rose-500/30 font-medium py-2 rounded-xl transition-all text-sm flex items-center justify-center gap-2">
+              <span>🚪</span> Çıkış Yap
+            </button>
+          </div>
+        </aside>
+
+        <!-- Sidebar Kapalıyken Çıkan Açma Butonu -->
+        <button id="openSidebarBtn" class="hidden absolute top-6 left-6 z-30 bg-slate-900/80 backdrop-blur-md border border-white/10 p-3 rounded-xl text-white hover:bg-slate-800 transition-all">
+          ☰
+        </button>
+
+        <!-- Ana Masaüstü Alanı (WeTransfer Widget Tarzı) -->
+        <main class="relative z-10 flex-1 h-screen p-8 flex items-center justify-center">
+          
+          <!-- WeTransfer Tarzı Ortalanmış Transparan Kart -->
+          <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-lg w-full text-center space-y-6">
+            <div class="inline-flex p-3 bg-indigo-500/20 border border-indigo-500/30 rounded-2xl text-indigo-300 text-3xl mb-2">
+              ✨
+            </div>
+            <h2 class="text-3xl font-bold text-white">Hoş Geldin!</h2>
+            <p class="text-slate-300 text-sm leading-relaxed">
+              Kendi bulut sunucunda çalışan bağımsız masaüstü panelindesin. Sol menüyü kullanarak navigasyonu yönetebilir veya arka planın tadını çıkarabilirsin.
+            </p>
+
+            <div class="pt-4 flex gap-3 justify-center">
+              <button onclick="location.reload()" class="bg-white/10 hover:bg-white/20 text-white border border-white/10 px-5 py-2.5 rounded-xl text-sm font-medium transition-all">
+                🔄 Arka Planı Değiştir
+              </button>
+            </div>
+          </div>
+
+        </main>
       </div>
     `
 
+    // Sidebar Açma / Kapama Mantığı
+    const sidebar = document.getElementById('sidebar')
+    const toggleBtn = document.getElementById('toggleSidebarBtn')
+    const openBtn = document.getElementById('openSidebarBtn')
+
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.add('-translate-x-full', 'absolute')
+      openBtn.classList.remove('hidden')
+    })
+
+    openBtn.addEventListener('click', () => {
+      sidebar.classList.remove('-translate-x-full', 'absolute')
+      openBtn.classList.add('hidden')
+    })
+
     document.getElementById('logoutBtn').addEventListener('click', () => {
       pb.authStore.clear()
       render()
     })
 
   } else {
-    // KULLANICI GİRİŞ YAPMAMIŞSA (LOGIN FORM)
+    // Giriş yapılmamışsa mevcut Login ekranını göster...
     app.innerHTML = `
       <div class="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
         <div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl w-full max-w-md">
@@ -44,7 +145,7 @@ function render() {
 
           <form id="loginForm" class="space-y-4">
             <div>
-              <label class="block text-sm font-medium text-slate-300 mb-1.5">E-posta veya Kullanıcı Adı</label>
+              <label class="block text-sm font-medium text-slate-300 mb-1.5">E-posta</label>
               <input type="text" id="identity" required
                 class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-100 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all placeholder-slate-600"
                 placeholder="kullanici@mail.com" />
@@ -76,9 +177,8 @@ function render() {
 
       try {
         errorMsg.classList.add('hidden')
-        // PocketBase Kullanıcı Doğrulama
         await pb.collection('users').authWithPassword(identity, password)
-        render() // Başarılıysa arayüzü güncelle
+        render()
       } catch (err) {
         errorMsg.textContent = 'Giriş başarısız! E-posta veya şifre hatalı.'
         errorMsg.classList.remove('hidden')
@@ -87,5 +187,4 @@ function render() {
   }
 }
 
-// Uygulamayı başlat
 render()