anasayfaya takvim ekleme deneme.

src/counter.js

@@ -1,9 +1,9 @@
 export function setupCounter(element) {
-  let counter = 0
+  let counter = 0;
   const setCounter = (count) => {
-    counter = count
+    counter = count;
-    element.innerHTML = `Count is ${counter}`
+    element.innerHTML = `Count is ${counter}`;
-  }
+  };
-  element.addEventListener('click', () => setCounter(counter + 1))
+  element.addEventListener("click", () => setCounter(counter + 1));
-  setCounter(0)
+  setCounter(0);
 }

src/main.js

@@ -1,32 +1,34 @@
-import './style.css'
+import "./style.css";
-import PocketBase from 'pocketbase'
+import PocketBase from "pocketbase";
-import { renderSettings } from './pages/settings.js'
+import { renderSettings } from "./pages/settings.js";
-import { renderDesktop } from './pages/desktop.js'
+import { renderDesktop } from "./pages/desktop.js";
 
-const pb = new PocketBase('https://pocketbase.iontalp.com')
+const pb = new PocketBase("https://pocketbase.iontalp.com");
-const app = document.getElementById('app')
+const app = document.getElementById("app");
 
-let activeTab = 'desktop'
+let activeTab = "desktop";
 
 async function render() {
-  const user = pb.authStore.model
+  const user = pb.authStore.model;
 
   if (!user) {
-    renderLogin()
+    renderLogin();
-    return
+    return;
   }
 
-  let currentBg = localStorage.getItem('selected_bg') || 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920'
+  let currentBg =
+    localStorage.getItem("selected_bg") ||
+    "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920";
 
   // Sayfayı Yükle
-  let currentPage
+  let currentPage;
-  if (activeTab === 'settings') {
+  if (activeTab === "settings") {
     currentPage = await renderSettings(pb, currentBg, (newBg) => {
-      localStorage.setItem('selected_bg', newBg)
+      localStorage.setItem("selected_bg", newBg);
-      render()
+      render();
-    })
+    });
   } else {
-    currentPage = renderDesktop()
+    currentPage = renderDesktop();
   }
 
   app.innerHTML = `
@@ -40,8 +42,8 @@ async function render() {
         <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="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>
+            <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>
@@ -51,15 +53,24 @@ async function render() {
         ${currentPage.html}
       </main>
     </div>
-  `
+  `;
 
   // Etkinlikleri bağla
-  const mainContent = document.getElementById('mainContent')
+  const mainContent = document.getElementById("mainContent");
-  currentPage.initEvents(mainContent)
+  currentPage.initEvents(mainContent);
 
-  document.getElementById('navDesktop').addEventListener('click', () => { activeTab = 'desktop'; render() })
+  document.getElementById("navDesktop").addEventListener("click", () => {
-  document.getElementById('navSettings').addEventListener('click', () => { activeTab = 'settings'; render() })
+    activeTab = "desktop";
-  document.getElementById('logoutBtn').addEventListener('click', () => { pb.authStore.clear(); render() })
+    render();
+  });
+  document.getElementById("navSettings").addEventListener("click", () => {
+    activeTab = "settings";
+    render();
+  });
+  document.getElementById("logoutBtn").addEventListener("click", () => {
+    pb.authStore.clear();
+    render();
+  });
 }
 
 function renderLogin() {
@@ -74,19 +85,21 @@ function renderLogin() {
         </form>
       </div>
     </div>
-  `
+  `;
-  document.getElementById('loginForm').addEventListener('submit', async (e) => {
+  document.getElementById("loginForm").addEventListener("submit", async (e) => {
-    e.preventDefault()
+    e.preventDefault();
     try {
-      await pb.collection('users').authWithPassword(
+      await pb
-        document.getElementById('identity').value,
+        .collection("users")
-        document.getElementById('password').value
+        .authWithPassword(
-      )
+          document.getElementById("identity").value,
-      render()
+          document.getElementById("password").value,
+        );
+      render();
     } catch {
-      alert('Giriş başarısız!')
+      alert("Giriş başarısız!");
     }
-  })
+  });
 }
 
-render()
+render();

src/pages/desktop.js

@@ -12,7 +12,19 @@ export function renderDesktop() {
         Modüler mimariye geçtik! Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
       </p>
     </div>
-  `
 
-  return { html, initEvents: () => {} }
+    <div class="absolute middle-8 right-8 bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl max-w-md w-full text-left space-y-3">
+      <div class="flex items-center gap-3">
+        <div class="inline-flex p-1 bg-indigo-500/20 border border-indigo-500/30 rounded-xl text-indigo-300 text-xl">
+          🌙
+        </div>
+        <h2 class="text-xl font-bold text-white">Takvim</h2>
+      </div>
+      <p class="text-slate-300 text-xs leading-relaxed">
+        Modüler mimariye geçtik! Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
+      </p>
+    </div>
+  `;
+
+  return { html, initEvents: () => {} };
 }

src/pages/settings.js

@@ -1,15 +1,15 @@
 export async function renderSettings(pb, currentBg, onBgSelect) {
-  let bgList = []
+  let bgList = [];
 
   try {
-    const records = await pb.collection('backgrounds').getFullList()
+    const records = await pb.collection("backgrounds").getFullList();
-    bgList = records.map(item => ({
+    bgList = records.map((item) => ({
       id: item.id,
-      title: item.title || 'Duvar Kağıdı',
+      title: item.title || "Duvar Kağıdı",
-      url: `https://pocketbase.iontalp.com/api/files/${item.collectionId}/${item.id}/${item.image || item.file}`
+      url: `https://pocketbase.iontalp.com/api/files/${item.collectionId}/${item.id}/${item.image || item.file}`,
-    }))
+    }));
   } catch (err) {
-    console.error('Görseller yüklenemedi:', err)
+    console.error("Görseller yüklenemedi:", err);
   }
 
   const html = `
@@ -20,35 +20,43 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
       <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 ? `
+        ${
+          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 => `
+            ${bgList
-              <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'}">
+              .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">
+                <div class="absolute inset-0 bg-linear-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>
+              )
-        `}
+              .join("")}
-      </div>
           </div>
         `
+        }
+      </div>
+    </div>
+  `;
 
   return {
     html,
     initEvents: (container) => {
-      container.querySelectorAll('.bg-card').forEach(card => {
+      container.querySelectorAll(".bg-card").forEach((card) => {
-        card.addEventListener('click', () => {
+        card.addEventListener("click", () => {
-          const selectedUrl = card.getAttribute('data-url')
+          const selectedUrl = card.getAttribute("data-url");
-          onBgSelect(selectedUrl)
+          onBgSelect(selectedUrl);
-        })
+        });
-      })
+      });
-    }
+    },
-  }
+  };
 }