Updatweb

2025-12-19 20:44:46 -06:00
parent 701f799cde
commit e4b3de4a46
113 changed files with 16673 additions and 2174 deletions
--- a/website/admin/css/admin-style.css
+++ b/website/admin/css/admin-style.css
@@ -378,32 +378,178 @@ body {
 }

 /* Responsive Design */
+
+/* Mobile First - Base Styles */
@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 0px;
+  }
+
  .sidebar {
    transform: translateX(-100%);
+    width: 280px;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .sidebar.active {
    transform: translateX(0);
  }

+  /* Backdrop for mobile menu */
+  .sidebar.active::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 280px;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+
  .main-content {
    margin-left: 0;
+    padding: 15px;
+  }
+
+  /* Mobile Menu Toggle Button */
+  .mobile-menu-toggle {
+    display: block;
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    z-index: 1001;
+    background: var(--primary-gradient);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    width: 44px;
+    height: 44px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .mobile-menu-toggle:focus-visible {
+    outline: 2px solid white;
+    outline-offset: 2px;
  }

  .top-bar {
    flex-direction: column;
    gap: 15px;
+    margin-top: 50px;
+    padding: 15px;
+  }
+
+  .top-bar h1 {
+    font-size: 1.5rem;
  }

  .actions-bar {
    flex-direction: column;
    align-items: stretch;
+    gap: 10px;
  }

  .search-box {
    max-width: 100%;
  }
+
+  /* Table Responsive */
+  .table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  table {
+    min-width: 600px;
+  }
+
+  /* Cards Stack on Mobile */
+  .stats-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  /* Modal Adjustments */
+  .modal-dialog {
+    margin: 10px;
+  }
+
+  .modal-content {
+    max-height: calc(100vh - 20px);
+    overflow-y: auto;
+  }
+
+  /* Form Elements Full Width */
+  .form-control,
+  .btn {
+    font-size: 16px; /* Prevent iOS zoom */
+  }
+
+  /* Hide certain columns on mobile */
+  .hide-mobile {
+    display: none !important;
+  }
+}
+
+/* Tablet Styles */
+@media (min-width: 769px) and (max-width: 1024px) {
+  :root {
+    --sidebar-width: 220px;
+  }
+
+  .sidebar {
+    width: 220px;
+    padding: 15px;
+  }
+
+  .sidebar-brand {
+    font-size: 1.3rem;
+  }
+
+  .sidebar-menu a {
+    padding: 10px 12px;
+    font-size: 0.9rem;
+  }
+
+  .main-content {
+    padding: 20px;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .mobile-menu-toggle {
+    display: none;
+  }
+}
+
+/* Desktop Styles */
+@media (min-width: 1025px) {
+  .mobile-menu-toggle {
+    display: none;
+  }
+
+  .sidebar {
+    width: var(--sidebar-width);
+  }
+
+  /* Larger cards grid */
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+}
+
+/* Large Desktop */
+@media (min-width: 1400px) {
+  :root {
+    --sidebar-width: 280px;
+  }
+
+  .container-large {
+    max-width: 1320px;
+  }
 }

 /* Utility Classes */
--- a/website/admin/dashboard-example.html
+++ b/website/admin/dashboard-example.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Sky Art Shop - Admin Dashboard" />
+    <title>Dashboard - Sky Art Shop Admin</title>
+
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
+    />
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/admin-style.css" />
+    <link rel="stylesheet" href="../assets/css/utilities.css" />
+  </head>
+  <body>
+    <!-- Skip to main content link for accessibility -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    <!-- Sidebar -->
+    <aside class="sidebar" role="navigation" aria-label="Admin navigation">
+      <div class="sidebar-brand">
+        <i class="bi bi-shop" aria-hidden="true"></i> SkyArt Admin
+      </div>
+      <ul class="sidebar-menu">
+        <li>
+          <a href="dashboard.html" class="active" aria-current="page">
+            <i class="bi bi-speedometer2" aria-hidden="true"></i>
+            <span>Dashboard</span>
+          </a>
+        </li>
+        <li>
+          <a href="products.html">
+            <i class="bi bi-box-seam" aria-hidden="true"></i>
+            <span>Products</span>
+          </a>
+        </li>
+        <li>
+          <a href="portfolio.html">
+            <i class="bi bi-images" aria-hidden="true"></i>
+            <span>Portfolio</span>
+          </a>
+        </li>
+        <li>
+          <a href="blog.html">
+            <i class="bi bi-file-text" aria-hidden="true"></i>
+            <span>Blog</span>
+          </a>
+        </li>
+        <li>
+          <a href="pages.html">
+            <i class="bi bi-file-earmark" aria-hidden="true"></i>
+            <span>Pages</span>
+          </a>
+        </li>
+        <li>
+          <a href="users.html">
+            <i class="bi bi-people" aria-hidden="true"></i>
+            <span>Users</span>
+          </a>
+        </li>
+        <li>
+          <a href="settings.html">
+            <i class="bi bi-gear" aria-hidden="true"></i>
+            <span>Settings</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" onclick="logout(); return false;">
+            <i class="bi bi-box-arrow-right" aria-hidden="true"></i>
+            <span>Logout</span>
+          </a>
+        </li>
+      </ul>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content" id="main-content">
+      <header class="top-bar">
+        <div>
+          <h1>Dashboard</h1>
+          <p class="text-muted">Welcome back! Here's what's happening.</p>
+        </div>
+        <div>
+          <span id="userGreeting" aria-live="polite"></span>
+        </div>
+      </header>
+
+      <!-- Stats Grid -->
+      <section class="stats-grid" aria-label="Statistics overview">
+        <article class="stat-card">
+          <div class="stat-icon" style="background: #667eea" aria-hidden="true">
+            <i class="bi bi-box-seam"></i>
+          </div>
+          <div>
+            <h3>Products</h3>
+            <p
+              class="stat-value"
+              id="totalProducts"
+              aria-label="Total products"
+            >
+              <span class="spinner spinner-small"></span>
+            </p>
+          </div>
+        </article>
+
+        <article class="stat-card">
+          <div class="stat-icon" style="background: #28a745" aria-hidden="true">
+            <i class="bi bi-images"></i>
+          </div>
+          <div>
+            <h3>Portfolio Items</h3>
+            <p
+              class="stat-value"
+              id="totalPortfolio"
+              aria-label="Total portfolio items"
+            >
+              <span class="spinner spinner-small"></span>
+            </p>
+          </div>
+        </article>
+
+        <article class="stat-card">
+          <div class="stat-icon" style="background: #17a2b8" aria-hidden="true">
+            <i class="bi bi-file-text"></i>
+          </div>
+          <div>
+            <h3>Blog Posts</h3>
+            <p
+              class="stat-value"
+              id="totalBlogPosts"
+              aria-label="Total blog posts"
+            >
+              <span class="spinner spinner-small"></span>
+            </p>
+          </div>
+        </article>
+
+        <article class="stat-card">
+          <div class="stat-icon" style="background: #ffc107" aria-hidden="true">
+            <i class="bi bi-people"></i>
+          </div>
+          <div>
+            <h3>Users</h3>
+            <p class="stat-value" id="totalUsers" aria-label="Total users">
+              <span class="spinner spinner-small"></span>
+            </p>
+          </div>
+        </article>
+      </section>
+
+      <!-- Quick Actions -->
+      <section class="actions-section" aria-label="Quick actions">
+        <h2 class="section-heading">Quick Actions</h2>
+        <div class="actions-bar">
+          <a href="products.html?action=create" class="btn btn-primary">
+            <i class="bi bi-plus-circle" aria-hidden="true"></i>
+            <span>Add Product</span>
+          </a>
+          <a href="blog.html?action=create" class="btn btn-info">
+            <i class="bi bi-file-plus" aria-hidden="true"></i>
+            <span>New Blog Post</span>
+          </a>
+          <a href="portfolio.html?action=create" class="btn btn-success">
+            <i class="bi bi-image" aria-hidden="true"></i>
+            <span>Add Portfolio</span>
+          </a>
+        </div>
+      </section>
+    </main>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Utility Functions -->
+    <script src="../assets/js/utils.js"></script>
+
+    <!-- Authentication -->
+    <script src="js/auth.js"></script>
+
+    <!-- Dashboard Script -->
+    <script>
+      // Initialize dashboard
+      document.addEventListener("DOMContentLoaded", async function () {
+        // Check authentication
+        const authenticated = await checkAuth();
+
+        if (!authenticated) return;
+
+        // Display user greeting
+        if (window.adminAuth.user) {
+          const greeting = document.getElementById("userGreeting");
+          greeting.textContent = `Hello, ${escapeHtml(
+            window.adminAuth.user.username
+          )}!`;
+        }
+
+        // Load dashboard stats
+        loadDashboardStats();
+      });
+
+      // Load dashboard statistics
+      async function loadDashboardStats() {
+        try {
+          const data = await apiRequest("/api/admin/dashboard/stats");
+
+          if (data.success) {
+            // Update stats
+            document.getElementById("totalProducts").textContent =
+              data.stats.products || 0;
+            document.getElementById("totalPortfolio").textContent =
+              data.stats.portfolio || 0;
+            document.getElementById("totalBlogPosts").textContent =
+              data.stats.blogPosts || 0;
+            document.getElementById("totalUsers").textContent =
+              data.stats.users || 0;
+
+            // Announce to screen readers
+            announceToScreenReader("Dashboard statistics loaded");
+          } else {
+            throw new Error(data.message || "Failed to load stats");
+          }
+        } catch (error) {
+          showToast("Failed to load dashboard statistics", "error");
+
+          // Show fallback values
+          document.getElementById("totalProducts").textContent = "--";
+          document.getElementById("totalPortfolio").textContent = "--";
+          document.getElementById("totalBlogPosts").textContent = "--";
+          document.getElementById("totalUsers").textContent = "--";
+        }
+      }
+    </script>
+  </body>
+</html>
--- a/website/admin/dashboard.html
+++ b/website/admin/dashboard.html
@@ -434,7 +434,7 @@
          <a href="/index.html" target="_blank" class="btn-view-site me-2"
            ><i class="bi bi-eye"></i> View Site</a
          >
-          <button class="btn-logout" onclick="logout()">
+          <button class="btn-logout" id="logoutBtn">
            <i class="bi bi-box-arrow-right"></i> Logout
          </button>
        </div>
--- a/website/admin/js/auth.js
+++ b/website/admin/js/auth.js
@@ -7,8 +7,8 @@ window.adminAuth = {
  isAuthenticated: false,
 };

-// Check authentication and redirect if needed
-async function checkAuth() {
+// Check authentication and redirect if needed - attach to window
+window.checkAuth = async function () {
  try {
    const response = await fetch("/api/admin/session", {
      credentials: "include",
@@ -18,36 +18,272 @@ async function checkAuth() {
    });

    if (!response.ok) {
-      redirectToLogin();
+      window.redirectToLogin();
      return false;
    }

    const data = await response.json();
    if (!data.authenticated) {
-      redirectToLogin();
+      window.redirectToLogin();
      return false;
    }

    // Store user data
    window.adminAuth.user = data.user;
    window.adminAuth.isAuthenticated = true;
+
+    // Initialize mobile menu after auth check
+    window.initMobileMenu();
+
    return true;
  } catch (error) {
-    console.error("Authentication check failed:", error);
-    redirectToLogin();
+    // Only log in development
+    if (window.location.hostname === "localhost") {
+      console.error("Authentication check failed:", error);
+    }
+    window.redirectToLogin();
    return false;
  }
-}
+};

 // Redirect to login page
-function redirectToLogin() {
+window.redirectToLogin = function () {
  if (window.location.pathname !== "/admin/login.html") {
    window.location.href = "/admin/login.html";
  }
+};
+
+// Initialize mobile menu toggle
+window.initMobileMenu = function () {
+  // Check if mobile menu button exists
+  let menuToggle = document.getElementById("mobileMenuToggle");
+
+  if (!menuToggle && window.innerWidth <= 768) {
+    // Create mobile menu button
+    menuToggle = document.createElement("button");
+    menuToggle.id = "mobileMenuToggle";
+    menuToggle.className = "mobile-menu-toggle";
+    menuToggle.setAttribute("aria-label", "Toggle navigation menu");
+    menuToggle.setAttribute("aria-expanded", "false");
+    menuToggle.innerHTML = '<i class="bi bi-list"></i>';
+    document.body.appendChild(menuToggle);
+  }
+
+  if (menuToggle) {
+    menuToggle.addEventListener("click", function () {
+      const sidebar = document.querySelector(".sidebar");
+      if (sidebar) {
+        const isActive = sidebar.classList.toggle("active");
+        this.setAttribute("aria-expanded", isActive ? "true" : "false");
+        this.innerHTML = isActive
+          ? '<i class="bi bi-x"></i>'
+          : '<i class="bi bi-list"></i>';
+      }
+    });
+
+    // Close sidebar when clicking outside on mobile
+    document.addEventListener("click", function (event) {
+      const sidebar = document.querySelector(".sidebar");
+      const menuToggle = document.getElementById("mobileMenuToggle");
+
+      if (sidebar && menuToggle && window.innerWidth <= 768) {
+        if (
+          !sidebar.contains(event.target) &&
+          event.target !== menuToggle &&
+          !menuToggle.contains(event.target)
+        ) {
+          if (sidebar.classList.contains("active")) {
+            sidebar.classList.remove("active");
+            menuToggle.setAttribute("aria-expanded", "false");
+            menuToggle.innerHTML = '<i class="bi bi-list"></i>';
+          }
+        }
+      }
+    });
+
+    // Close menu on link click (mobile)
+    const sidebarLinks = document.querySelectorAll(".sidebar-menu a");
+    sidebarLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        if (window.innerWidth <= 768) {
+          const sidebar = document.querySelector(".sidebar");
+          if (sidebar && sidebar.classList.contains("active")) {
+            sidebar.classList.remove("active");
+            if (menuToggle) {
+              menuToggle.setAttribute("aria-expanded", "false");
+              menuToggle.innerHTML = '<i class="bi bi-list"></i>';
+            }
+          }
+        }
+      });
+    });
+  }
+
+  // Handle window resize
+  let resizeTimer;
+  window.addEventListener("resize", function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      if (window.innerWidth > 768) {
+        const sidebar = document.querySelector(".sidebar");
+        if (sidebar) {
+          sidebar.classList.remove("active");
+        }
+        if (menuToggle) {
+          menuToggle.setAttribute("aria-expanded", "false");
+          menuToggle.innerHTML = '<i class="bi bi-list"></i>';
+        }
+      }
+    }, 250);
+  });
+};
+
+// Custom logout confirmation modal
+window.showLogoutConfirm = function (onConfirm) {
+  // Create modal backdrop
+  const backdrop = document.createElement("div");
+  backdrop.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.2s ease;
+  `;
+
+  // Create modal
+  const modal = document.createElement("div");
+  modal.style.cssText = `
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    animation: slideIn 0.3s ease;
+  `;
+
+  modal.innerHTML = `
+    <style>
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes slideIn {
+        from { transform: translateY(-20px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+    </style>
+    <div style="text-align: center;">
+      <div style="font-size: 48px; margin-bottom: 15px;">
+        <i class="bi bi-box-arrow-right" style="color: #dc3545;"></i>
+      </div>
+      <h3 style="margin: 0 0 10px 0; color: #2c3e50; font-weight: 600;">Confirm Logout</h3>
+      <p style="color: #6c757d; margin: 0 0 25px 0;">Are you sure you want to logout?</p>
+      <div style="display: flex; gap: 10px; justify-content: center;">
+        <button id="cancelLogout" style="
+          padding: 10px 24px;
+          border: 2px solid #6c757d;
+          background: white;
+          color: #6c757d;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 600;
+          transition: all 0.2s;
+        ">Cancel</button>
+        <button id="confirmLogout" style="
+          padding: 10px 24px;
+          border: none;
+          background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+          color: white;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 600;
+          transition: all 0.2s;
+          box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
+        ">Logout</button>
+      </div>
+    </div>
+  `;
+
+  backdrop.appendChild(modal);
+  document.body.appendChild(backdrop);
+
+  // Add hover effects
+  const cancelBtn = modal.querySelector("#cancelLogout");
+  const confirmBtn = modal.querySelector("#confirmLogout");
+
+  cancelBtn.addEventListener("mouseenter", function () {
+    this.style.background = "#6c757d";
+    this.style.color = "white";
+  });
+  cancelBtn.addEventListener("mouseleave", function () {
+    this.style.background = "white";
+    this.style.color = "#6c757d";
+  });
+
+  confirmBtn.addEventListener("mouseenter", function () {
+    this.style.transform = "translateY(-2px)";
+    this.style.boxShadow = "0 4px 12px rgba(220, 53, 69, 0.4)";
+  });
+  confirmBtn.addEventListener("mouseleave", function () {
+    this.style.transform = "translateY(0)";
+    this.style.boxShadow = "0 2px 8px rgba(220, 53, 69, 0.3)";
+  });
+
+  // Handle buttons
+  const closeModal = () => {
+    backdrop.style.animation = "fadeIn 0.2s ease reverse";
+    setTimeout(() => backdrop.remove(), 200);
+  };
+
+  cancelBtn.addEventListener("click", closeModal);
+  backdrop.addEventListener("click", function (e) {
+    if (e.target === backdrop) closeModal();
+  });
+
+  confirmBtn.addEventListener("click", function () {
+    closeModal();
+    onConfirm();
+  });
+
+  // ESC key to close
+  const escHandler = (e) => {
+    if (e.key === "Escape") {
+      closeModal();
+      document.removeEventListener("keydown", escHandler);
+    }
+  };
+  document.addEventListener("keydown", escHandler);
+};
+
+// Logout function - explicitly attach to window for onclick handlers
+window.logout = async function (skipConfirm = false) {
+  if (!skipConfirm) {
+    window.showLogoutConfirm(async () => {
+      await performLogout();
+    });
+    return;
+  }
+
+  await performLogout();
+};
+
+// CRITICAL: Global function for inline onclick="logout()" handlers
+// This must be at global scope so inline onclick can find it
+function logout(skipConfirm = false) {
+  window.logout(skipConfirm);
 }

-// Logout function
-async function logout() {
+// Actual logout logic
+async function performLogout() {
  try {
    const response = await fetch("/api/admin/logout", {
      method: "POST",
@@ -58,15 +294,20 @@ async function logout() {
      window.adminAuth.user = null;
      window.adminAuth.isAuthenticated = false;
      window.location.href = "/admin/login.html";
+    } else {
+      console.error("Logout failed with status:", response.status);
+      // Still redirect to login even if logout fails
+      window.location.href = "/admin/login.html";
    }
  } catch (error) {
-    console.error("Logout failed:", error);
+    console.error("Logout error:", error);
+    // Still redirect to login even if logout fails
    window.location.href = "/admin/login.html";
  }
 }

 // Show success notification
-function showSuccess(message) {
+window.showSuccess = function (message) {
  const alert = document.createElement("div");
  alert.className =
    "alert alert-success alert-dismissible fade show position-fixed";
@@ -78,10 +319,10 @@ function showSuccess(message) {
  `;
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), 5000);
-}
+};

 // Show error notification
-function showError(message) {
+window.showError = function (message) {
  const alert = document.createElement("div");
  alert.className =
    "alert alert-danger alert-dismissible fade show position-fixed";
@@ -93,12 +334,29 @@ function showError(message) {
  `;
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), 5000);
-}
+};

 // Auto-check authentication when this script loads
 // Only run if we're not on the login page
 if (window.location.pathname !== "/admin/login.html") {
  document.addEventListener("DOMContentLoaded", function () {
-    checkAuth();
+    window.checkAuth();
+
+    // Attach logout event listeners to all logout buttons
+    const logoutButtons = document.querySelectorAll(
+      '.btn-logout, [data-logout], [onclick*="logout"]'
+    );
+    logoutButtons.forEach((button) => {
+      // Remove inline onclick if it exists
+      button.removeAttribute("onclick");
+
+      // Add proper event listener
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        window.logout();
+      });
+    });
  });
 }
--- a/website/admin/logout-debug.html
+++ b/website/admin/logout-debug.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logout Debug Tool</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <script src="/admin/js/auth.js"></script>
+    <style>
+      body {
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        color: white;
+      }
+      .card {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 15px;
+        padding: 30px;
+        margin-bottom: 20px;
+        color: #333;
+      }
+      .test-result {
+        padding: 10px;
+        border-radius: 5px;
+        margin: 10px 0;
+        font-family: monospace;
+      }
+      .success {
+        background: #d4edda;
+        border: 1px solid #c3e6cb;
+        color: #155724;
+      }
+      .error {
+        background: #f8d7da;
+        border: 1px solid #f5c6cb;
+        color: #721c24;
+      }
+      .info {
+        background: #d1ecf1;
+        border: 1px solid #bee5eb;
+        color: #0c5460;
+      }
+      .btn-test {
+        margin: 10px 5px;
+        padding: 10px 20px;
+        font-size: 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="text-center mb-4">🔍 Logout Function Debug Tool</h1>
+
+      <div class="card">
+        <h3>📊 Function Availability Test</h3>
+        <div id="availabilityResults"></div>
+        <button class="btn btn-primary btn-test" onclick="checkAvailability()">
+          Run Availability Check
+        </button>
+      </div>
+
+      <div class="card">
+        <h3>🎯 Logout Button Tests</h3>
+        <p>Test different methods of calling the logout function:</p>
+
+        <!-- Method 1: Direct onclick (like in admin pages) -->
+        <button class="btn btn-danger btn-test" onclick="logout()">
+          Test 1: onclick="logout()" (Skip Confirm)
+        </button>
+
+        <!-- Method 2: Via window object -->
+        <button class="btn btn-warning btn-test" onclick="window.logout(true)">
+          Test 2: onclick="window.logout(true)"
+        </button>
+
+        <!-- Method 3: Via JavaScript function -->
+        <button class="btn btn-info btn-test" id="test3">
+          Test 3: addEventListener
+        </button>
+
+        <div id="testResults" class="mt-3"></div>
+      </div>
+
+      <div class="card">
+        <h3>🌐 API Direct Test</h3>
+        <button class="btn btn-success btn-test" onclick="testLogoutAPI()">
+          Test Logout API Directly
+        </button>
+        <div id="apiResults"></div>
+      </div>
+
+      <div class="card">
+        <h3>📝 Console Logs</h3>
+        <p class="text-muted">Check browser console (F12) for detailed logs</p>
+        <div
+          id="consoleOutput"
+          class="test-result info"
+          style="max-height: 200px; overflow-y: auto"
+        ></div>
+      </div>
+    </div>
+
+    <script>
+      // Capture console logs
+      const consoleDiv = document.getElementById("consoleOutput");
+      const originalLog = console.log;
+      const originalError = console.error;
+
+      function addToConsoleOutput(msg, isError = false) {
+        const timestamp = new Date().toLocaleTimeString();
+        const line = document.createElement("div");
+        line.textContent = `[${timestamp}] ${msg}`;
+        line.style.color = isError ? "red" : "black";
+        consoleDiv.appendChild(line);
+        consoleDiv.scrollTop = consoleDiv.scrollHeight;
+      }
+
+      console.log = function (...args) {
+        originalLog.apply(console, args);
+        addToConsoleOutput(args.join(" "));
+      };
+
+      console.error = function (...args) {
+        originalError.apply(console, args);
+        addToConsoleOutput("ERROR: " + args.join(" "), true);
+      };
+
+      // Check availability
+      function checkAvailability() {
+        const results = document.getElementById("availabilityResults");
+        results.innerHTML = "";
+
+        const tests = [
+          { name: "typeof logout", value: typeof logout },
+          { name: "typeof window.logout", value: typeof window.logout },
+          {
+            name: "logout === window.logout",
+            value: typeof logout !== "undefined" && logout === window.logout,
+          },
+          {
+            name: "window.adminAuth exists",
+            value: typeof window.adminAuth !== "undefined",
+          },
+          {
+            name: "window.checkAuth exists",
+            value: typeof window.checkAuth === "function",
+          },
+          {
+            name: "window.showSuccess exists",
+            value: typeof window.showSuccess === "function",
+          },
+          {
+            name: "window.showError exists",
+            value: typeof window.showError === "function",
+          },
+        ];
+
+        tests.forEach((test) => {
+          const div = document.createElement("div");
+          div.className =
+            "test-result " +
+            (test.value === "function" || test.value === true
+              ? "success"
+              : "error");
+          div.textContent = `${test.name}: ${test.value}`;
+          results.appendChild(div);
+        });
+
+        console.log("Availability check completed");
+      }
+
+      // Test 3: Using addEventListener
+      document
+        .getElementById("test3")
+        .addEventListener("click", async function () {
+          const resultsDiv = document.getElementById("testResults");
+          resultsDiv.innerHTML =
+            '<div class="test-result info">Test 3: Calling logout via addEventListener...</div>';
+          console.log("Test 3: Calling window.logout(true)");
+
+          try {
+            if (typeof window.logout === "function") {
+              await window.logout(true);
+              resultsDiv.innerHTML +=
+                '<div class="test-result success">✓ Logout called successfully!</div>';
+            } else {
+              resultsDiv.innerHTML +=
+                '<div class="test-result error">✗ window.logout is not a function!</div>';
+            }
+          } catch (error) {
+            resultsDiv.innerHTML += `<div class="test-result error">✗ Error: ${error.message}</div>`;
+            console.error("Test 3 error:", error);
+          }
+        });
+
+      // Test logout API directly
+      async function testLogoutAPI() {
+        const resultsDiv = document.getElementById("apiResults");
+        resultsDiv.innerHTML =
+          '<div class="test-result info">Testing API endpoint...</div>';
+        console.log("Testing /api/admin/logout endpoint");
+
+        try {
+          const response = await fetch("/api/admin/logout", {
+            method: "POST",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+
+          const data = await response.json();
+
+          if (response.ok) {
+            resultsDiv.innerHTML += `<div class="test-result success">✓ API Response: ${JSON.stringify(
+              data
+            )}</div>`;
+            console.log("API test successful:", data);
+          } else {
+            resultsDiv.innerHTML += `<div class="test-result error">✗ API Error: ${
+              response.status
+            } - ${JSON.stringify(data)}</div>`;
+            console.error("API test failed:", response.status, data);
+          }
+        } catch (error) {
+          resultsDiv.innerHTML += `<div class="test-result error">✗ Fetch Error: ${error.message}</div>`;
+          console.error("API test error:", error);
+        }
+      }
+
+      // Override logout temporarily to prevent redirect during testing
+      const originalLogout = window.logout;
+      window.logout = async function (skipConfirm = false) {
+        const resultsDiv = document.getElementById("testResults");
+        console.log("logout() called with skipConfirm:", skipConfirm);
+
+        resultsDiv.innerHTML =
+          '<div class="test-result info">Logout function called...</div>';
+
+        try {
+          // Call original function
+          await originalLogout(true); // Always skip confirm for testing
+
+          resultsDiv.innerHTML +=
+            '<div class="test-result success">✓ Logout executed! Should redirect to login...</div>';
+        } catch (error) {
+          resultsDiv.innerHTML += `<div class="test-result error">✗ Logout failed: ${error.message}</div>`;
+          console.error("Logout error:", error);
+        }
+      };
+
+      // Run availability check on load
+      window.addEventListener("DOMContentLoaded", function () {
+        console.log("Page loaded - running initial checks...");
+        checkAvailability();
+      });
+    </script>
+  </body>
+</html>
--- a/website/admin/media-library.html
+++ b/website/admin/media-library.html
@@ -14,82 +14,193 @@
    />
    <link rel="stylesheet" href="/admin/css/admin-style.css" />
    <style>
+      .media-container {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      .toolbar {
+        background: #fff;
+        padding: 15px 20px;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 15px;
+      }
+
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .toolbar-right {
+        display: flex;
+        gap: 10px;
+      }
+
+      .breadcrumb {
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        font-size: 14px;
+      }
+
+      .breadcrumb-item a {
+        color: #7c3aed;
+        text-decoration: none;
+      }
+
+      .breadcrumb-item a:hover {
+        text-decoration: underline;
+      }
+
+      .selected-count {
+        background: #7c3aed;
+        color: white;
+        padding: 6px 16px;
+        border-radius: 20px;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
      .media-grid {
        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        padding: 20px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        min-height: 400px;
      }
+
      .media-item {
        position: relative;
-        border: 2px solid #dee2e6;
+        border: 2px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
-        transition: all 0.3s;
+        transition: all 0.2s;
+        background: #fff;
      }
+
      .media-item:hover {
        border-color: #7c3aed;
-        transform: translateY(-5px);
-        box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
      }
+
      .media-item.selected {
        border-color: #7c3aed;
        border-width: 3px;
+        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
      }
-      .media-item img {
-        width: 100%;
-        height: 200px;
-        object-fit: cover;
-      }
-      .media-item-name {
-        padding: 10px;
-        background: #f8f9fa;
-        font-size: 12px;
-        word-break: break-all;
-      }
-      .media-item-actions {
+
+      .media-checkbox {
        position: absolute;
-        top: 5px;
-        right: 5px;
-        display: none;
+        top: 8px;
+        left: 8px;
+        z-index: 10;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
      }
-      .media-item:hover .media-item-actions {
+
+      .folder-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        height: 150px;
+        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+      }
+
+      .folder-item i {
+        font-size: 48px;
+        color: #7c3aed;
+        margin-bottom: 10px;
+      }
+
+      .folder-name {
+        font-size: 13px;
+        font-weight: 500;
+        text-align: center;
+        word-break: break-word;
+        color: #374151;
+      }
+
+      .file-item img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
        display: block;
      }
+
+      .file-name {
+        padding: 8px;
+        background: #f9fafb;
+        font-size: 11px;
+        text-align: center;
+        word-break: break-all;
+        color: #6b7280;
+        border-top: 1px solid #e5e7eb;
+      }
+
      .upload-zone {
-        border: 3px dashed #dee2e6;
+        border: 3px dashed #d1d5db;
        border-radius: 10px;
-        padding: 60px;
+        padding: 40px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
-        background: #f8f9fa;
+        background: #f9fafb;
+        margin-bottom: 20px;
      }
+
      .upload-zone:hover,
      .upload-zone.dragover {
        border-color: #7c3aed;
        background: #f3f0ff;
      }
+
      .upload-zone i {
        font-size: 48px;
        color: #7c3aed;
+        margin-bottom: 15px;
      }
-      .toolbar {
-        background: #fff;
-        padding: 15px;
-        border-bottom: 1px solid #dee2e6;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+
+      .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        color: #9ca3af;
+      }
+
+      .empty-state i {
+        font-size: 64px;
        margin-bottom: 20px;
+        opacity: 0.5;
      }
-      .selected-count {
-        background: #7c3aed;
-        color: white;
-        padding: 5px 15px;
-        border-radius: 20px;
-        font-size: 14px;
+
+      .progress-container {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 350px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        padding: 20px;
+        z-index: 1000;
+      }
+
+      .modal-content {
+        border-radius: 12px;
      }
    </style>
  </head>
@@ -157,8 +268,18 @@
      </div>

      <div class="container-fluid">
+        <!-- Toolbar -->
        <div class="toolbar">
-          <div>
+          <div class="toolbar-left">
+            <nav aria-label="breadcrumb">
+              <ol class="breadcrumb" id="breadcrumb">
+                <li class="breadcrumb-item">
+                  <a href="#" onclick="navigateToFolder(null); return false;"
+                    ><i class="bi bi-house-door"></i> Root</a
+                  >
+                </li>
+              </ol>
+            </nav>
            <span
              class="selected-count"
              id="selectedCount"
@@ -166,30 +287,40 @@
              >0 selected</span
            >
          </div>
-          <div class="d-flex gap-2">
-            <button class="btn btn-primary" id="uploadBtn">
+          <div class="toolbar-right">
+            <button
+              class="btn btn-sm btn-success"
+              onclick="showCreateFolderModal()"
+            >
+              <i class="bi bi-folder-plus"></i> New Folder
+            </button>
+            <button class="btn btn-sm btn-primary" onclick="showUploadZone()">
              <i class="bi bi-cloud-upload"></i> Upload Files
            </button>
            <button
-              class="btn btn-success"
-              id="selectBtn"
+              class="btn btn-sm btn-danger"
+              id="deleteSelectedBtn"
              style="display: none"
+              onclick="handleDeleteSelected()"
            >
-              <i class="bi bi-check-lg"></i> Select
-            </button>
-            <button class="btn btn-outline-secondary" id="closeBtn">
-              <i class="bi bi-x-lg"></i> Close
+              <i class="bi bi-trash"></i> Delete Selected
            </button>
          </div>
        </div>
-      </div>

-      <div class="container-fluid p-4">
-        <!-- Upload Zone -->
-        <div class="upload-zone mb-4" id="uploadZone" style="display: none">
-          <i class="bi bi-cloud-arrow-up"></i>
-          <h4 class="mt-3">Drop files here or click to browse</h4>
-          <p class="text-muted">
+        <!-- Upload Zone (hidden by default) -->
+        <div
+          class="upload-zone"
+          id="uploadZone"
+          style="display: none"
+          ondrop="handleDrop(event)"
+          ondragover="event.preventDefault(); event.currentTarget.classList.add('dragover');"
+          ondragleave="event.currentTarget.classList.remove('dragover');"
+          onclick="document.getElementById('fileInput').click()"
+        >
+          <i class="bi bi-cloud-arrow-up d-block"></i>
+          <h5>Drop files here or click to browse</h5>
+          <p class="text-muted mb-0">
            Supported: JPG, PNG, GIF, WebP (Max 5MB each)
          </p>
          <input
@@ -198,247 +329,296 @@
            multiple
            accept="image/*"
            style="display: none"
+            onchange="handleFileSelect(event)"
          />
        </div>

-        <!-- Upload Progress -->
-        <div id="uploadProgress" style="display: none" class="mb-4">
-          <div class="progress" style="height: 30px">
+        <!-- Progress Bar -->
+        <div
+          class="progress-container"
+          id="uploadProgress"
+          style="display: none"
+        >
+          <h6 class="mb-3">Uploading files...</h6>
+          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated"
-              role="progressbar"
-              style="width: 0%"
              id="progressBar"
+              style="width: 0%"
            >
              0%
            </div>
          </div>
        </div>

-        <!-- Search and Filter -->
-        <div class="row mb-3">
-          <div class="col-md-6">
-            <input
-              type="text"
-              class="form-control"
-              id="searchInput"
-              placeholder="Search files..."
-            />
-          </div>
-          <div class="col-md-3">
-            <select class="form-select" id="filterType">
-              <option value="all">All Types</option>
-              <option value="image">Images</option>
-              <option value="recent">Recently Uploaded</option>
-            </select>
-          </div>
-          <div class="col-md-3">
-            <button
-              class="btn btn-outline-danger w-100"
-              id="deleteSelectedBtn"
-              style="display: none"
-            >
-              <i class="bi bi-trash"></i> Delete Selected
-            </button>
-          </div>
-        </div>
-
        <!-- Media Grid -->
        <div class="media-grid" id="mediaGrid">
-          <!-- Media items will be loaded here -->
-        </div>
-
-        <!-- Empty State -->
-        <div id="emptyState" style="display: none" class="text-center py-5">
-          <i class="bi bi-images" style="font-size: 64px; color: #dee2e6"></i>
-          <h4 class="mt-3 text-muted">No files yet</h4>
-          <p class="text-muted">Upload your first image to get started</p>
+          <div class="empty-state">
+            <i class="bi bi-folder-x d-block"></i>
+            <h5>No files yet</h5>
+            <p>Upload files or create folders to get started</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Folder Modal -->
+    <div class="modal fade" id="createFolderModal" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Create New Folder</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label class="form-label">Folder Name</label>
+              <input
+                type="text"
+                class="form-control"
+                id="folderNameInput"
+                placeholder="Enter folder name"
+              />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-bs-dismiss="modal"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="btn btn-primary"
+              onclick="createFolder()"
+            >
+              Create Folder
+            </button>
+          </div>
        </div>
      </div>
    </div>
-    <!-- End Main Content -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/admin/js/auth.js"></script>
    <script>
-      let selectedFiles = [];
+      let currentFolderId = null;
+      let allFolders = [];
      let allFiles = [];
-      let allowMultiple = false;
+      let selectedItems = new Set(); // Store IDs: 'f-{id}' for folders, 'u-{id}' for files
+      let folderPath = [];

-      // Initialize
-      document.addEventListener("DOMContentLoaded", function () {
-        checkAuth().then((authenticated) => {
-          if (authenticated) {
-            init();
-          }
-        });
-      });
-
-      function init() {
-        // Get parameters from URL
-        const urlParams = new URLSearchParams(window.location.search);
-        allowMultiple = urlParams.get("multiple") === "true";
-        const callback = urlParams.get("callback");
-
-        // Setup event listeners
-        document
-          .getElementById("uploadBtn")
-          .addEventListener("click", showUploadZone);
-        document
-          .getElementById("uploadZone")
-          .addEventListener("click", () =>
-            document.getElementById("fileInput").click()
-          );
-        document
-          .getElementById("fileInput")
-          .addEventListener("change", handleFileSelect);
-        document
-          .getElementById("selectBtn")
-          .addEventListener("click", handleSelect);
-        document
-          .getElementById("closeBtn")
-          .addEventListener("click", () => window.close());
-        document
-          .getElementById("deleteSelectedBtn")
-          .addEventListener("click", handleDeleteSelected);
-        document
-          .getElementById("searchInput")
-          .addEventListener("input", handleSearch);
-        document
-          .getElementById("filterType")
-          .addEventListener("change", handleFilter);
-
-        // Drag and drop
-        const uploadZone = document.getElementById("uploadZone");
-        uploadZone.addEventListener("dragover", (e) => {
-          e.preventDefault();
-          uploadZone.classList.add("dragover");
-        });
-        uploadZone.addEventListener("dragleave", () => {
-          uploadZone.classList.remove("dragover");
-        });
-        uploadZone.addEventListener("drop", handleDrop);
-
-        loadFiles();
+      async function init() {
+        await Promise.all([loadFolders(), loadFiles()]);
      }

-      function showUploadZone() {
-        document.getElementById("uploadZone").style.display = "block";
-      }
-
-      async function loadFiles() {
+      async function loadFolders() {
        try {
-          const response = await fetch("/api/admin/uploads", {
+          const response = await fetch("/api/admin/folders", {
+            credentials: "include",
+          });
+          const data = await response.json();
+
+          if (data.success) {
+            allFolders = data.folders;
+          }
+        } catch (error) {
+          console.error("Failed to load folders:", error);
+        }
+      }
+
+      async function loadFiles(folderId = null) {
+        try {
+          currentFolderId = folderId;
+          let url = "/api/admin/uploads";
+
+          if (folderId !== null) {
+            url += `?folder_id=${folderId}`;
+          } else {
+            url += "?folder_id=null";
+          }
+
+          const response = await fetch(url, {
            credentials: "include",
          });
          const data = await response.json();

          if (data.success) {
            allFiles = data.files;
-            renderFiles(allFiles);
+            renderMedia();
+            updateBreadcrumb();
          }
        } catch (error) {
          console.error("Failed to load files:", error);
+          alert("Failed to load media library");
        }
      }

-      function renderFiles(files) {
+      function renderMedia() {
        const grid = document.getElementById("mediaGrid");
-        const emptyState = document.getElementById("emptyState");

-        if (files.length === 0) {
-          grid.style.display = "none";
-          emptyState.style.display = "block";
+        // Get subfolders of current folder
+        const subfolders = allFolders.filter(
+          (f) => f.parentId === currentFolderId
+        );
+
+        if (subfolders.length === 0 && allFiles.length === 0) {
+          grid.innerHTML = `
+            <div class="empty-state">
+              <i class="bi bi-folder-x d-block"></i>
+              <h5>No files yet</h5>
+              <p>Upload files or create folders to get started</p>
+            </div>
+          `;
          return;
        }

-        grid.style.display = "grid";
-        emptyState.style.display = "none";
+        let html = "";

-        grid.innerHTML = files
-          .map(
-            (file) => `
-                <div class="media-item" data-file="${file.filename}" onclick="toggleSelect('${file.filename}')">
-                    <img src="/uploads/${file.filename}" alt="${file.filename}">
-                    <div class="media-item-name">${file.filename}</div>
-                    <div class="media-item-actions">
-                        <button class="btn btn-sm btn-danger" onclick="deleteFile(event, '${file.filename}')">
-                            <i class="bi bi-trash"></i>
-                        </button>
-                    </div>
-                </div>
-            `
-          )
-          .join("");
-      }
-
-      function toggleSelect(filename) {
-        const item = document.querySelector(`[data-file="${filename}"]`);
-
-        if (!allowMultiple) {
-          // Clear other selections
-          document.querySelectorAll(".media-item.selected").forEach((el) => {
-            if (el.dataset.file !== filename) {
-              el.classList.remove("selected");
-            }
-          });
-          selectedFiles = [];
+        // Render folders first
+        for (const folder of subfolders) {
+          const isSelected = selectedItems.has(`f-${folder.id}`);
+          html += `
+            <div class="media-item ${
+              isSelected ? "selected" : ""
+            }" data-type="folder" data-id="${folder.id}">
+              <input type="checkbox" class="media-checkbox form-check-input" 
+                     ${isSelected ? "checked" : ""}
+                     onclick="toggleSelection('f-${folder.id}', event)" />
+              <div class="folder-item" ondblclick="navigateToFolder(${
+                folder.id
+              })">
+                <i class="bi bi-folder-fill"></i>
+                <div class="folder-name">${escapeHtml(folder.name)}</div>
+                <small class="text-muted">${folder.fileCount} files</small>
+              </div>
+            </div>
+          `;
        }

-        const index = selectedFiles.indexOf(filename);
-        if (index > -1) {
-          selectedFiles.splice(index, 1);
-          item.classList.remove("selected");
+        // Render files
+        for (const file of allFiles) {
+          const isSelected = selectedItems.has(`u-${file.id}`);
+          html += `
+            <div class="media-item ${
+              isSelected ? "selected" : ""
+            }" data-type="file" data-id="${file.id}">
+              <input type="checkbox" class="media-checkbox form-check-input" 
+                     ${isSelected ? "checked" : ""}
+                     onclick="toggleSelection('u-${file.id}', event)" />
+              <div class="file-item">
+                <img src="${file.path}" alt="${escapeHtml(file.originalName)}" 
+                     onerror="this.src='/assets/images/placeholder.jpg'" />
+                <div class="file-name" title="${escapeHtml(
+                  file.originalName
+                )}">${escapeHtml(file.originalName)}</div>
+              </div>
+            </div>
+          `;
+        }
+
+        grid.innerHTML = html;
+      }
+
+      function toggleSelection(itemId, event) {
+        event.stopPropagation();
+
+        if (selectedItems.has(itemId)) {
+          selectedItems.delete(itemId);
        } else {
-          selectedFiles.push(filename);
-          item.classList.add("selected");
+          selectedItems.add(itemId);
        }

-        updateSelection();
+        updateSelectionUI();
      }

-      function updateSelection() {
+      function updateSelectionUI() {
        const countEl = document.getElementById("selectedCount");
-        const selectBtn = document.getElementById("selectBtn");
        const deleteBtn = document.getElementById("deleteSelectedBtn");

-        if (selectedFiles.length > 0) {
-          countEl.textContent = `${selectedFiles.length} selected`;
-          countEl.style.display = "block";
-          selectBtn.style.display = "block";
-          deleteBtn.style.display = "block";
+        if (selectedItems.size > 0) {
+          countEl.textContent = `${selectedItems.size} selected`;
+          countEl.style.display = "inline-block";
+          deleteBtn.style.display = "inline-block";
        } else {
          countEl.style.display = "none";
-          selectBtn.style.display = "none";
          deleteBtn.style.display = "none";
        }
+
+        renderMedia();
      }

-      function handleSelect() {
-        if (window.opener && window.opener.receiveMediaFiles) {
-          const files = selectedFiles.map((f) => `/uploads/${f}`);
-          window.opener.receiveMediaFiles(allowMultiple ? files : files[0]);
-          window.close();
+      function navigateToFolder(folderId) {
+        selectedItems.clear();
+        updateSelectionUI();
+
+        if (folderId === null) {
+          folderPath = [];
+        } else {
+          // Build path
+          folderPath = [];
+          let currentId = folderId;
+
+          while (currentId !== null) {
+            const folder = allFolders.find((f) => f.id === currentId);
+            if (!folder) break;
+
+            folderPath.unshift({ id: folder.id, name: folder.name });
+            currentId = folder.parentId;
+          }
        }
+
+        loadFiles(folderId);
      }

-      async function handleFileSelect(e) {
-        const files = Array.from(e.target.files);
+      function updateBreadcrumb() {
+        const breadcrumb = document.getElementById("breadcrumb");
+        let html =
+          '<li class="breadcrumb-item"><a href="#" onclick="navigateToFolder(null); return false;"><i class="bi bi-house-door"></i> Root</a></li>';
+
+        for (const folder of folderPath) {
+          html += `<li class="breadcrumb-item"><a href="#" onclick="navigateToFolder(${
+            folder.id
+          }); return false;">${escapeHtml(folder.name)}</a></li>`;
+        }
+
+        breadcrumb.innerHTML = html;
+      }
+
+      function showUploadZone() {
+        const zone = document.getElementById("uploadZone");
+        zone.style.display = zone.style.display === "none" ? "block" : "none";
+      }
+
+      async function handleFileSelect(event) {
+        const files = Array.from(event.target.files);
        await uploadFiles(files);
+        event.target.value = ""; // Reset input
      }

-      async function handleDrop(e) {
-        e.preventDefault();
-        e.currentTarget.classList.remove("dragover");
+      async function handleDrop(event) {
+        event.preventDefault();
+        event.currentTarget.classList.remove("dragover");

-        const files = Array.from(e.dataTransfer.files);
+        const files = Array.from(event.dataTransfer.files);
        await uploadFiles(files);
      }

      async function uploadFiles(files) {
+        if (files.length === 0) return;
+
        const formData = new FormData();
        files.forEach((file) => formData.append("files", file));

+        if (currentFolderId !== null) {
+          formData.append("folder_id", currentFolderId);
+        }
+
        const progressBar = document.getElementById("progressBar");
        const progressContainer = document.getElementById("uploadProgress");
        progressContainer.style.display = "block";
@@ -460,10 +640,17 @@
              if (data.success) {
                setTimeout(() => {
                  progressContainer.style.display = "none";
+                  progressBar.style.width = "0%";
                  document.getElementById("uploadZone").style.display = "none";
-                  loadFiles();
+                  loadFiles(currentFolderId);
                }, 500);
+              } else {
+                alert("Upload failed: " + data.message);
+                progressContainer.style.display = "none";
              }
+            } else {
+              alert("Upload failed");
+              progressContainer.style.display = "none";
            }
          });

@@ -477,58 +664,109 @@
        }
      }

-      async function deleteFile(event, filename) {
-        event.stopPropagation();
+      function showCreateFolderModal() {
+        const modal = new bootstrap.Modal(
+          document.getElementById("createFolderModal")
+        );
+        document.getElementById("folderNameInput").value = "";
+        modal.show();
+      }

-        if (!confirm("Delete this file?")) return;
+      async function createFolder() {
+        const nameInput = document.getElementById("folderNameInput");
+        const name = nameInput.value.trim();
+
+        if (!name) {
+          alert("Please enter a folder name");
+          return;
+        }

        try {
-          const response = await fetch(`/api/admin/uploads/${filename}`, {
-            method: "DELETE",
+          const response = await fetch("/api/admin/folders", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
            credentials: "include",
+            body: JSON.stringify({
+              name: name,
+              parent_id: currentFolderId,
+            }),
          });

          const data = await response.json();
+
          if (data.success) {
-            loadFiles();
+            bootstrap.Modal.getInstance(
+              document.getElementById("createFolderModal")
+            ).hide();
+            await loadFolders();
+            loadFiles(currentFolderId);
+          } else {
+            alert("Failed to create folder: " + data.error);
          }
        } catch (error) {
-          console.error("Failed to delete file:", error);
+          console.error("Failed to create folder:", error);
+          alert("Failed to create folder");
        }
      }

      async function handleDeleteSelected() {
-        if (!confirm(`Delete ${selectedFiles.length} files?`)) return;
+        if (selectedItems.size === 0) return;

-        for (const filename of selectedFiles) {
-          await deleteFile(new Event("click"), filename);
+        const folderIds = Array.from(selectedItems)
+          .filter((id) => id.startsWith("f-"))
+          .map((id) => parseInt(id.substring(2)));
+
+        const fileIds = Array.from(selectedItems)
+          .filter((id) => id.startsWith("u-"))
+          .map((id) => parseInt(id.substring(2)));
+
+        const confirmMsg = `Delete ${selectedItems.size} item(s)?`;
+        if (!confirm(confirmMsg)) return;
+
+        try {
+          // Delete files
+          if (fileIds.length > 0) {
+            const response = await fetch("/api/admin/uploads/bulk-delete", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({ file_ids: fileIds }),
+            });
+
+            const data = await response.json();
+            if (!data.success) {
+              alert("Failed to delete some files: " + data.error);
+            }
+          }
+
+          // Delete folders
+          for (const folderId of folderIds) {
+            await fetch(`/api/admin/folders/${folderId}?delete_contents=true`, {
+              method: "DELETE",
+              credentials: "include",
+            });
+          }
+
+          selectedItems.clear();
+          await loadFolders();
+          loadFiles(currentFolderId);
+        } catch (error) {
+          console.error("Failed to delete items:", error);
+          alert("Failed to delete items");
        }
-
-        selectedFiles = [];
-        updateSelection();
      }

-      function handleSearch(e) {
-        const query = e.target.value.toLowerCase();
-        const filtered = allFiles.filter((f) =>
-          f.filename.toLowerCase().includes(query)
-        );
-        renderFiles(filtered);
+      function escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
      }

-      function handleFilter(e) {
-        const filter = e.target.value;
-        let filtered = allFiles;
-
-        if (filter === "recent") {
-          filtered = allFiles
-            .slice()
-            .sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate))
-            .slice(0, 20);
-        }
-
-        renderFiles(filtered);
-      }
+      // Initialize after authentication is confirmed
+      document.addEventListener("DOMContentLoaded", async function () {
+        // Wait a bit for auth.js to check authentication
+        setTimeout(init, 100);
+      });
    </script>
    <script src="/admin/js/auth.js"></script>
  </body>
--- a/website/admin/media-library.html.old
+++ b/website/admin/media-library.html.old
@@ -0,0 +1,535 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Media Library - Sky Art Shop</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+    <link rel="stylesheet" href="/admin/css/admin-style.css" />
+    <style>
+      .media-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 15px;
+        padding: 20px;
+      }
+      .media-item {
+        position: relative;
+        border: 2px solid #dee2e6;
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.3s;
+      }
+      .media-item:hover {
+        border-color: #7c3aed;
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);
+      }
+      .media-item.selected {
+        border-color: #7c3aed;
+        border-width: 3px;
+      }
+      .media-item img {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+      }
+      .media-item-name {
+        padding: 10px;
+        background: #f8f9fa;
+        font-size: 12px;
+        word-break: break-all;
+      }
+      .media-item-actions {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        display: none;
+      }
+      .media-item:hover .media-item-actions {
+        display: block;
+      }
+      .upload-zone {
+        border: 3px dashed #dee2e6;
+        border-radius: 10px;
+        padding: 60px;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s;
+        background: #f8f9fa;
+      }
+      .upload-zone:hover,
+      .upload-zone.dragover {
+        border-color: #7c3aed;
+        background: #f3f0ff;
+      }
+      .upload-zone i {
+        font-size: 48px;
+        color: #7c3aed;
+      }
+      .toolbar {
+        background: #fff;
+        padding: 15px;
+        border-bottom: 1px solid #dee2e6;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+      .selected-count {
+        background: #7c3aed;
+        color: white;
+        padding: 5px 15px;
+        border-radius: 20px;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-brand">🛍️ Sky Art Shop</div>
+      <ul class="sidebar-menu">
+        <li>
+          <a href="/admin/dashboard.html"
+            ><i class="bi bi-speedometer2"></i> Dashboard</a
+          >
+        </li>
+        <li>
+          <a href="/admin/homepage.html"
+            ><i class="bi bi-house"></i> Homepage Editor</a
+          >
+        </li>
+        <li>
+          <a href="/admin/products.html"><i class="bi bi-box"></i> Products</a>
+        </li>
+        <li>
+          <a href="/admin/portfolio.html"
+            ><i class="bi bi-easel"></i> Portfolio</a
+          >
+        </li>
+        <li>
+          <a href="/admin/blog.html"><i class="bi bi-newspaper"></i> Blog</a>
+        </li>
+        <li>
+          <a href="/admin/pages.html"
+            ><i class="bi bi-file-text"></i> Custom Pages</a
+          >
+        </li>
+        <li>
+          <a href="/admin/media-library.html" class="active"
+            ><i class="bi bi-images"></i> Media Library</a
+          >
+        </li>
+        <li>
+          <a href="/admin/menu.html"><i class="bi bi-list"></i> Menu</a>
+        </li>
+        <li>
+          <a href="/admin/settings.html"><i class="bi bi-gear"></i> Settings</a>
+        </li>
+        <li>
+          <a href="/admin/users.html"><i class="bi bi-people"></i> Users</a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+      <!-- Top Bar -->
+      <div class="top-bar">
+        <div>
+          <h3>Media Library</h3>
+          <p class="mb-0 text-muted">Manage your images and media files</p>
+        </div>
+        <div>
+          <button class="btn-logout" onclick="logout()">
+            <i class="bi bi-box-arrow-right"></i> Logout
+          </button>
+        </div>
+      </div>
+
+      <div class="container-fluid">
+        <div class="toolbar">
+          <div>
+            <span
+              class="selected-count"
+              id="selectedCount"
+              style="display: none"
+              >0 selected</span
+            >
+          </div>
+          <div class="d-flex gap-2">
+            <button class="btn btn-primary" id="uploadBtn">
+              <i class="bi bi-cloud-upload"></i> Upload Files
+            </button>
+            <button
+              class="btn btn-success"
+              id="selectBtn"
+              style="display: none"
+            >
+              <i class="bi bi-check-lg"></i> Select
+            </button>
+            <button class="btn btn-outline-secondary" id="closeBtn">
+              <i class="bi bi-x-lg"></i> Close
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-fluid p-4">
+        <!-- Upload Zone -->
+        <div class="upload-zone mb-4" id="uploadZone" style="display: none">
+          <i class="bi bi-cloud-arrow-up"></i>
+          <h4 class="mt-3">Drop files here or click to browse</h4>
+          <p class="text-muted">
+            Supported: JPG, PNG, GIF, WebP (Max 5MB each)
+          </p>
+          <input
+            type="file"
+            id="fileInput"
+            multiple
+            accept="image/*"
+            style="display: none"
+          />
+        </div>
+
+        <!-- Upload Progress -->
+        <div id="uploadProgress" style="display: none" class="mb-4">
+          <div class="progress" style="height: 30px">
+            <div
+              class="progress-bar progress-bar-striped progress-bar-animated"
+              role="progressbar"
+              style="width: 0%"
+              id="progressBar"
+            >
+              0%
+            </div>
+          </div>
+        </div>
+
+        <!-- Search and Filter -->
+        <div class="row mb-3">
+          <div class="col-md-6">
+            <input
+              type="text"
+              class="form-control"
+              id="searchInput"
+              placeholder="Search files..."
+            />
+          </div>
+          <div class="col-md-3">
+            <select class="form-select" id="filterType">
+              <option value="all">All Types</option>
+              <option value="image">Images</option>
+              <option value="recent">Recently Uploaded</option>
+            </select>
+          </div>
+          <div class="col-md-3">
+            <button
+              class="btn btn-outline-danger w-100"
+              id="deleteSelectedBtn"
+              style="display: none"
+            >
+              <i class="bi bi-trash"></i> Delete Selected
+            </button>
+          </div>
+        </div>
+
+        <!-- Media Grid -->
+        <div class="media-grid" id="mediaGrid">
+          <!-- Media items will be loaded here -->
+        </div>
+
+        <!-- Empty State -->
+        <div id="emptyState" style="display: none" class="text-center py-5">
+          <i class="bi bi-images" style="font-size: 64px; color: #dee2e6"></i>
+          <h4 class="mt-3 text-muted">No files yet</h4>
+          <p class="text-muted">Upload your first image to get started</p>
+        </div>
+      </div>
+    </div>
+    <!-- End Main Content -->
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/admin/js/auth.js"></script>
+    <script>
+      let selectedFiles = [];
+      let allFiles = [];
+      let allowMultiple = false;
+
+      // Initialize
+      document.addEventListener("DOMContentLoaded", function () {
+        checkAuth().then((authenticated) => {
+          if (authenticated) {
+            init();
+          }
+        });
+      });
+
+      function init() {
+        // Get parameters from URL
+        const urlParams = new URLSearchParams(window.location.search);
+        allowMultiple = urlParams.get("multiple") === "true";
+        const callback = urlParams.get("callback");
+
+        // Setup event listeners
+        document
+          .getElementById("uploadBtn")
+          .addEventListener("click", showUploadZone);
+        document
+          .getElementById("uploadZone")
+          .addEventListener("click", () =>
+            document.getElementById("fileInput").click()
+          );
+        document
+          .getElementById("fileInput")
+          .addEventListener("change", handleFileSelect);
+        document
+          .getElementById("selectBtn")
+          .addEventListener("click", handleSelect);
+        document
+          .getElementById("closeBtn")
+          .addEventListener("click", () => window.close());
+        document
+          .getElementById("deleteSelectedBtn")
+          .addEventListener("click", handleDeleteSelected);
+        document
+          .getElementById("searchInput")
+          .addEventListener("input", handleSearch);
+        document
+          .getElementById("filterType")
+          .addEventListener("change", handleFilter);
+
+        // Drag and drop
+        const uploadZone = document.getElementById("uploadZone");
+        uploadZone.addEventListener("dragover", (e) => {
+          e.preventDefault();
+          uploadZone.classList.add("dragover");
+        });
+        uploadZone.addEventListener("dragleave", () => {
+          uploadZone.classList.remove("dragover");
+        });
+        uploadZone.addEventListener("drop", handleDrop);
+
+        loadFiles();
+      }
+
+      function showUploadZone() {
+        document.getElementById("uploadZone").style.display = "block";
+      }
+
+      async function loadFiles() {
+        try {
+          const response = await fetch("/api/admin/uploads", {
+            credentials: "include",
+          });
+          const data = await response.json();
+
+          if (data.success) {
+            allFiles = data.files;
+            renderFiles(allFiles);
+          }
+        } catch (error) {
+          console.error("Failed to load files:", error);
+        }
+      }
+
+      function renderFiles(files) {
+        const grid = document.getElementById("mediaGrid");
+        const emptyState = document.getElementById("emptyState");
+
+        if (files.length === 0) {
+          grid.style.display = "none";
+          emptyState.style.display = "block";
+          return;
+        }
+
+        grid.style.display = "grid";
+        emptyState.style.display = "none";
+
+        grid.innerHTML = files
+          .map(
+            (file) => `
+                <div class="media-item" data-file="${file.filename}" onclick="toggleSelect('${file.filename}')">
+                    <img src="/uploads/${file.filename}" alt="${file.filename}">
+                    <div class="media-item-name">${file.filename}</div>
+                    <div class="media-item-actions">
+                        <button class="btn btn-sm btn-danger" onclick="deleteFile(event, '${file.filename}')">
+                            <i class="bi bi-trash"></i>
+                        </button>
+                    </div>
+                </div>
+            `
+          )
+          .join("");
+      }
+
+      function toggleSelect(filename) {
+        const item = document.querySelector(`[data-file="${filename}"]`);
+
+        if (!allowMultiple) {
+          // Clear other selections
+          document.querySelectorAll(".media-item.selected").forEach((el) => {
+            if (el.dataset.file !== filename) {
+              el.classList.remove("selected");
+            }
+          });
+          selectedFiles = [];
+        }
+
+        const index = selectedFiles.indexOf(filename);
+        if (index > -1) {
+          selectedFiles.splice(index, 1);
+          item.classList.remove("selected");
+        } else {
+          selectedFiles.push(filename);
+          item.classList.add("selected");
+        }
+
+        updateSelection();
+      }
+
+      function updateSelection() {
+        const countEl = document.getElementById("selectedCount");
+        const selectBtn = document.getElementById("selectBtn");
+        const deleteBtn = document.getElementById("deleteSelectedBtn");
+
+        if (selectedFiles.length > 0) {
+          countEl.textContent = `${selectedFiles.length} selected`;
+          countEl.style.display = "block";
+          selectBtn.style.display = "block";
+          deleteBtn.style.display = "block";
+        } else {
+          countEl.style.display = "none";
+          selectBtn.style.display = "none";
+          deleteBtn.style.display = "none";
+        }
+      }
+
+      function handleSelect() {
+        if (window.opener && window.opener.receiveMediaFiles) {
+          const files = selectedFiles.map((f) => `/uploads/${f}`);
+          window.opener.receiveMediaFiles(allowMultiple ? files : files[0]);
+          window.close();
+        }
+      }
+
+      async function handleFileSelect(e) {
+        const files = Array.from(e.target.files);
+        await uploadFiles(files);
+      }
+
+      async function handleDrop(e) {
+        e.preventDefault();
+        e.currentTarget.classList.remove("dragover");
+
+        const files = Array.from(e.dataTransfer.files);
+        await uploadFiles(files);
+      }
+
+      async function uploadFiles(files) {
+        const formData = new FormData();
+        files.forEach((file) => formData.append("files", file));
+
+        const progressBar = document.getElementById("progressBar");
+        const progressContainer = document.getElementById("uploadProgress");
+        progressContainer.style.display = "block";
+
+        try {
+          const xhr = new XMLHttpRequest();
+
+          xhr.upload.addEventListener("progress", (e) => {
+            if (e.lengthComputable) {
+              const percentComplete = (e.loaded / e.total) * 100;
+              progressBar.style.width = percentComplete + "%";
+              progressBar.textContent = Math.round(percentComplete) + "%";
+            }
+          });
+
+          xhr.addEventListener("load", function () {
+            if (xhr.status === 200) {
+              const data = JSON.parse(xhr.responseText);
+              if (data.success) {
+                setTimeout(() => {
+                  progressContainer.style.display = "none";
+                  document.getElementById("uploadZone").style.display = "none";
+                  loadFiles();
+                }, 500);
+              }
+            }
+          });
+
+          xhr.open("POST", "/api/admin/upload");
+          xhr.withCredentials = true;
+          xhr.send(formData);
+        } catch (error) {
+          console.error("Upload failed:", error);
+          alert("Upload failed: " + error.message);
+          progressContainer.style.display = "none";
+        }
+      }
+
+      async function deleteFile(event, filename) {
+        event.stopPropagation();
+
+        if (!confirm("Delete this file?")) return;
+
+        try {
+          const response = await fetch(`/api/admin/uploads/${filename}`, {
+            method: "DELETE",
+            credentials: "include",
+          });
+
+          const data = await response.json();
+          if (data.success) {
+            loadFiles();
+          }
+        } catch (error) {
+          console.error("Failed to delete file:", error);
+        }
+      }
+
+      async function handleDeleteSelected() {
+        if (!confirm(`Delete ${selectedFiles.length} files?`)) return;
+
+        for (const filename of selectedFiles) {
+          await deleteFile(new Event("click"), filename);
+        }
+
+        selectedFiles = [];
+        updateSelection();
+      }
+
+      function handleSearch(e) {
+        const query = e.target.value.toLowerCase();
+        const filtered = allFiles.filter((f) =>
+          f.filename.toLowerCase().includes(query)
+        );
+        renderFiles(filtered);
+      }
+
+      function handleFilter(e) {
+        const filter = e.target.value;
+        let filtered = allFiles;
+
+        if (filter === "recent") {
+          filtered = allFiles
+            .slice()
+            .sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate))
+            .slice(0, 20);
+        }
+
+        renderFiles(filtered);
+      }
+    </script>
+    <script src="/admin/js/auth.js"></script>
+  </body>
+</html>
--- a/website/admin/menu.html
+++ b/website/admin/menu.html
@@ -402,18 +402,6 @@
          alert("Failed to save menu");
        }
      }
-
-      async function logout() {
-        try {
-          const response = await fetch("/api/admin/logout", {
-            method: "POST",
-            credentials: "include",
-          });
-          if (response.ok) window.location.href = "/admin/login.html";
-        } catch (error) {
-          console.error("Logout failed:", error);
-        }
-      }
    </script>
    <script src="/admin/js/auth.js"></script>
  </body>
--- a/website/admin/test-all-logout.html
+++ b/website/admin/test-all-logout.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test All Logout Buttons</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <script src="/admin/js/auth.js"></script>
+    <style>
+        body { padding: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
+        .test-card { background: white; border-radius: 15px; padding: 30px; margin-bottom: 20px; }
+        .btn-logout { 
+            background: #dc3545; 
+            color: white; 
+            border: none; 
+            padding: 10px 20px; 
+            border-radius: 8px; 
+            cursor: pointer;
+            margin: 10px;
+            font-size: 16px;
+        }
+        .btn-logout:hover { background: #c82333; }
+        .status { padding: 15px; border-radius: 8px; margin: 10px 0; }
+        .success { background: #d4edda; color: #155724; }
+        .info { background: #d1ecf1; color: #0c5460; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="test-card">
+            <h1>🧪 Logout Button Test - All Scenarios</h1>
+            <p class="lead">Test that ALL logout buttons trigger the custom modal popup</p>
+            
+            <div class="status info" id="status">
+                <strong>Status:</strong> Page loaded. Click any button below...
+            </div>
+            
+            <hr>
+            
+            <h3>Test Buttons:</h3>
+            <p>Each button simulates the logout button from different pages:</p>
+            
+            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                <button class="btn-logout" data-page="homepage">
+                    <i class="bi bi-box-arrow-right"></i> Homepage Editor
+                </button>
+                
+                <button class="btn-logout" data-page="products">
+                    <i class="bi bi-box-arrow-right"></i> Products
+                </button>
+                
+                <button class="btn-logout" data-page="portfolio">
+                    <i class="bi bi-box-arrow-right"></i> Portfolio
+                </button>
+                
+                <button class="btn-logout" data-page="blog">
+                    <i class="bi bi-box-arrow-right"></i> Blog
+                </button>
+                
+                <button class="btn-logout" data-page="pages">
+                    <i class="bi bi-box-arrow-right"></i> Pages
+                </button>
+                
+                <button class="btn-logout" data-page="media-library">
+                    <i class="bi bi-box-arrow-right"></i> Media Library
+                </button>
+                
+                <button class="btn-logout" data-page="menu">
+                    <i class="bi bi-box-arrow-right"></i> Menu
+                </button>
+                
+                <button class="btn-logout" data-page="users">
+                    <i class="bi bi-box-arrow-right"></i> Users
+                </button>
+                
+                <button class="btn-logout" data-page="settings">
+                    <i class="bi bi-box-arrow-right"></i> Settings
+                </button>
+                
+                <button class="btn-logout" data-page="dashboard">
+                    <i class="bi bi-box-arrow-right"></i> Dashboard
+                </button>
+            </div>
+            
+            <hr>
+            
+            <h3>✅ What Should Happen:</h3>
+            <ol>
+                <li>Click any button above</li>
+                <li><strong>Custom modal appears</strong> (NOT browser confirm)</li>
+                <li>Modal shows: Red logout icon, "Confirm Logout" heading</li>
+                <li>Two buttons: Gray "Cancel" (left) and Red "Logout" (right)</li>
+                <li>Click "Cancel" → Modal closes, status updates</li>
+                <li>Click "Logout" → Redirects to login page</li>
+                <li>Press ESC → Modal closes</li>
+                <li>Click outside modal → Modal closes</li>
+            </ol>
+            
+            <div id="log" style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; margin-top: 20px;">
+                <strong>Console Log:</strong><br>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        const statusDiv = document.getElementById('status');
+        const logDiv = document.getElementById('log');
+        
+        function updateStatus(msg, type = 'info') {
+            statusDiv.className = `status ${type}`;
+            statusDiv.innerHTML = `<strong>Status:</strong> ${msg}`;
+            addLog(msg);
+        }
+        
+        function addLog(msg) {
+            const time = new Date().toLocaleTimeString();
+            logDiv.innerHTML += `[${time}] ${msg}<br>`;
+            logDiv.scrollTop = logDiv.scrollHeight;
+        }
+        
+        // Track button clicks
+        document.addEventListener('DOMContentLoaded', function() {
+            addLog('Page loaded - auth.js loaded');
+            addLog('Checking if window.logout exists: ' + (typeof window.logout === 'function' ? 'YES' : 'NO'));
+            addLog('Checking if window.showLogoutConfirm exists: ' + (typeof window.showLogoutConfirm === 'function' ? 'YES' : 'NO'));
+            
+            // Add tracking to all buttons
+            const buttons = document.querySelectorAll('.btn-logout');
+            addLog(`Found ${buttons.length} logout buttons`);
+            
+            buttons.forEach((btn, index) => {
+                const page = btn.getAttribute('data-page');
+                btn.addEventListener('click', function() {
+                    addLog(`Button clicked: ${page}`);
+                    updateStatus(`Testing logout from: ${page}`, 'info');
+                });
+            });
+            
+            // Override performLogout temporarily to prevent actual redirect during testing
+            if (window.logout) {
+                const originalLogout = window.logout;
+                window.logout = function(skipConfirm) {
+                    addLog(`window.logout() called with skipConfirm=${skipConfirm}`);
+                    if (!skipConfirm) {
+                        addLog('Showing custom modal...');
+                        window.showLogoutConfirm(async () => {
+                            addLog('User clicked LOGOUT button in modal');
+                            updateStatus('User confirmed logout! (Redirect disabled for testing)', 'success');
+                            // Don't actually logout in test mode
+                            // await performLogout();
+                        });
+                    }
+                };
+            }
+        });
+    </script>
+</body>
+</html>
--- a/website/admin/test-inline-logout.html
+++ b/website/admin/test-inline-logout.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test Inline Logout</title>
+    <script src="/admin/js/auth.js"></script>
+</head>
+<body>
+    <h1>Testing inline onclick="logout()"</h1>
+    
+    <button class="btn-logout" onclick="logout()">
+        Test Inline onclick Logout
+    </button>
+    
+    <div id="result" style="margin-top: 20px; font-family: monospace;"></div>
+    
+    <script>
+        const resultDiv = document.getElementById('result');
+        
+        function log(msg) {
+            resultDiv.innerHTML += msg + '<br>';
+            console.log(msg);
+        }
+        
+        window.addEventListener('load', function() {
+            log('Page loaded');
+            log('typeof logout: ' + typeof logout);
+            log('typeof window.logout: ' + typeof window.logout);
+            log('typeof window.showLogoutConfirm: ' + typeof window.showLogoutConfirm);
+            
+            if (typeof logout === 'function') {
+                log('✅ logout() function exists at global scope');
+            } else {
+                log('❌ logout() function NOT found at global scope');
+            }
+        });
+    </script>
+</body>
+</html>
--- a/website/admin/test-logout-click.html
+++ b/website/admin/test-logout-click.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Logout Click Test</title>
+    <script src="/admin/js/auth.js"></script>
+</head>
+<body>
+    <h1>Testing Logout Button Click</h1>
+    <p>This page simulates the exact button setup from admin pages</p>
+    
+    <button class="btn-logout" id="test1">Test Button 1 (class only)</button>
+    <button class="btn-logout" onclick="logout()">Test Button 2 (with onclick)</button>
+    <button data-logout id="test3">Test Button 3 (data attribute)</button>
+    
+    <div id="results" style="margin-top: 20px; font-family: monospace;"></div>
+    
+    <script>
+        function log(msg) {
+            const div = document.getElementById('results');
+            div.innerHTML += msg + '<br>';
+            console.log(msg);
+        }
+        
+        window.addEventListener('DOMContentLoaded', function() {
+            log('Page loaded');
+            log('typeof window.logout: ' + typeof window.logout);
+            
+            // Check if event listeners were attached
+            setTimeout(() => {
+                const buttons = document.querySelectorAll('.btn-logout, [data-logout]');
+                log('Found ' + buttons.length + ' logout buttons');
+                
+                buttons.forEach((btn, i) => {
+                    log('Button ' + (i+1) + ': ' + btn.outerHTML);
+                });
+            }, 500);
+        });
+    </script>
+</body>
+</html>
--- a/website/admin/test-logout-simple.html
+++ b/website/admin/test-logout-simple.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Logout Test</title>
+    <script src="/admin/js/auth.js"></script>
+</head>
+<body>
+    <h1>Simple Logout Test</h1>
+    <button onclick="testLogout()">Test Logout</button>
+    <div id="output"></div>
+    
+    <script>
+        function log(msg) {
+            const output = document.getElementById('output');
+            output.innerHTML += msg + '<br>';
+            console.log(msg);
+        }
+        
+        async function testLogout() {
+            log('Starting logout test...');
+            log('typeof window.logout: ' + typeof window.logout);
+            log('typeof logout: ' + typeof logout);
+            
+            if (typeof window.logout === 'function') {
+                log('Calling window.logout(true)...');
+                try {
+                    await window.logout(true);
+                    log('Logout succeeded!');
+                } catch (err) {
+                    log('Logout error: ' + err.message);
+                }
+            } else {
+                log('ERROR: window.logout is not a function!');
+            }
+        }
+    </script>
+</body>
+</html>
--- a/website/admin/test-logout.html
+++ b/website/admin/test-logout.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Logout Button</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            padding: 50px;
+            font-family: Arial, sans-serif;
+        }
+        .test-result {
+            margin: 20px 0;
+            padding: 15px;
+            border-radius: 8px;
+        }
+        .success { background: #d4edda; border: 1px solid #c3e6cb; }
+        .info { background: #d1ecf1; border: 1px solid #bee5eb; }
+        .btn-logout {
+            background: #dc3545;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .btn-logout:hover {
+            background: #c82333;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔓 Logout Button Test Page</h1>
+        <p class="lead">This page tests the logout functionality</p>
+        
+        <div class="test-result info" id="loadStatus">
+            ⏳ Loading auth.js...
+        </div>
+        
+        <div class="test-result success" id="functionCheck" style="display: none;">
+            ✓ window.logout function is available!
+        </div>
+        
+        <div class="mt-4">
+            <h3>Click the button to test logout:</h3>
+            <button class="btn-logout" onclick="logout()">
+                🚪 Logout
+            </button>
+        </div>
+        
+        <div class="mt-4">
+            <h4>What should happen:</h4>
+            <ol>
+                <li>Confirmation dialog appears: "Are you sure you want to logout?"</li>
+                <li>If you click OK, the logout API is called</li>
+                <li>You are redirected to /admin/login.html</li>
+            </ol>
+        </div>
+        
+        <div class="mt-4">
+            <h4>Debug Info:</h4>
+            <pre id="debugInfo"></pre>
+        </div>
+    </div>
+    
+    <script src="/admin/js/auth.js"></script>
+    <script>
+        window.addEventListener('load', function() {
+            const loadStatus = document.getElementById('loadStatus');
+            const functionCheck = document.getElementById('functionCheck');
+            const debugInfo = document.getElementById('debugInfo');
+            
+            let debug = [];
+            
+            // Check if window.logout exists
+            if (typeof window.logout === 'function') {
+                loadStatus.style.display = 'none';
+                functionCheck.style.display = 'block';
+                debug.push('✓ window.logout is defined');
+            } else {
+                loadStatus.innerHTML = '✗ window.logout NOT found!';
+                loadStatus.className = 'test-result alert alert-danger';
+                debug.push('✗ window.logout is NOT defined');
+            }
+            
+            // Check other functions
+            ['checkAuth', 'showSuccess', 'showError', 'redirectToLogin'].forEach(func => {
+                if (typeof window[func] === 'function') {
+                    debug.push(`✓ window.${func} is defined`);
+                } else {
+                    debug.push(`✗ window.${func} is NOT defined`);
+                }
+            });
+            
+            // Check auth state
+            debug.push(`\nAuth State:`);
+            debug.push(`  isAuthenticated: ${window.adminAuth?.isAuthenticated || false}`);
+            debug.push(`  user: ${window.adminAuth?.user ? JSON.stringify(window.adminAuth.user) : 'null'}`);
+            
+            debugInfo.textContent = debug.join('\n');
+        });
+    </script>
+</body>
+</html>