diff --git a/src/main.js b/src/main.js index f60ad39..d6f4dbb 100755 --- a/src/main.js +++ b/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 = ` -
-
-
- ✓ -
-

Hayırla Geldiniz!

-

${user.email}

- +
+ + +
+
+ + + + + + + + +
+ + +
+
+ ✨ +
+

Hoş Geldin!

+

+ 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. +

+ +
+ +
+
+ +
` + // 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 = `
@@ -44,7 +145,7 @@ function render() {
- + @@ -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() \ No newline at end of file