92 lines
3.8 KiB
JavaScript
Executable File
92 lines
3.8 KiB
JavaScript
Executable File
import './style.css'
|
||
import PocketBase from 'pocketbase'
|
||
import { renderSettings } from './pages/settings.js'
|
||
import { renderDesktop } from './pages/desktop.js'
|
||
|
||
const pb = new PocketBase('https://pocketbase.iontalp.com')
|
||
const app = document.getElementById('app')
|
||
|
||
let activeTab = 'desktop'
|
||
|
||
async function render() {
|
||
const user = pb.authStore.model
|
||
|
||
if (!user) {
|
||
renderLogin()
|
||
return
|
||
}
|
||
|
||
let currentBg = localStorage.getItem('selected_bg') || 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920'
|
||
|
||
// Sayfayı Yükle
|
||
let currentPage
|
||
if (activeTab === 'settings') {
|
||
currentPage = await renderSettings(pb, currentBg, (newBg) => {
|
||
localStorage.setItem('selected_bg', newBg)
|
||
render()
|
||
})
|
||
} else {
|
||
currentPage = renderDesktop()
|
||
}
|
||
|
||
app.innerHTML = `
|
||
<div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
|
||
<div class="absolute inset-0 z-0 bg-no-repeat transition-all duration-700"
|
||
style="background-image: url('${currentBg}'); background-size: 100% 100%;">
|
||
</div>
|
||
<div class="absolute inset-0 z-10 bg-slate-950/50 backdrop-blur-[2px]"></div>
|
||
|
||
<aside class="relative z-30 w-72 h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between">
|
||
<div>
|
||
<h1 class="font-bold text-white mb-6 text-xl">Dashboard OS</h1>
|
||
<nav class="space-y-2">
|
||
<button id="navDesktop" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === 'desktop' ? 'bg-white/10 text-white' : 'text-slate-400 hover:text-white'}">🏠 Masaüstü</button>
|
||
<button id="navSettings" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === 'settings' ? 'bg-white/10 text-white' : 'text-slate-400 hover:text-white'}">⚙️ Ayarlar</button>
|
||
</nav>
|
||
</div>
|
||
<button id="logoutBtn" class="bg-rose-500/20 text-rose-300 py-2 rounded-xl border border-rose-500/30">🚪 Çıkış Yap</button>
|
||
</aside>
|
||
|
||
<main id="mainContent" class="relative z-20 flex-1 h-screen p-8 flex items-center justify-center">
|
||
${currentPage.html}
|
||
</main>
|
||
</div>
|
||
`
|
||
|
||
// Etkinlikleri bağla
|
||
const mainContent = document.getElementById('mainContent')
|
||
currentPage.initEvents(mainContent)
|
||
|
||
document.getElementById('navDesktop').addEventListener('click', () => { activeTab = 'desktop'; render() })
|
||
document.getElementById('navSettings').addEventListener('click', () => { activeTab = 'settings'; render() })
|
||
document.getElementById('logoutBtn').addEventListener('click', () => { pb.authStore.clear(); render() })
|
||
}
|
||
|
||
function renderLogin() {
|
||
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">
|
||
<h1 class="text-2xl font-bold text-center mb-6">Giriş Yap</h1>
|
||
<form id="loginForm" class="space-y-4">
|
||
<input type="text" id="identity" placeholder="E-posta" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white" />
|
||
<input type="password" id="password" placeholder="Şifre" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white" />
|
||
<button type="submit" class="w-full bg-indigo-600 py-2 rounded-xl text-white font-medium">Giriş</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
`
|
||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||
e.preventDefault()
|
||
try {
|
||
await pb.collection('users').authWithPassword(
|
||
document.getElementById('identity').value,
|
||
document.getElementById('password').value
|
||
)
|
||
render()
|
||
} catch {
|
||
alert('Giriş başarısız!')
|
||
}
|
||
})
|
||
}
|
||
|
||
render() |