updateweb

website/public/assets/js/api-client.js

@@ -0,0 +1,111 @@
+/**
+ * API Client
+ * Centralized API communication with error handling
+ */
+
+(function () {
+  "use strict";
+
+  class APIClient {
+    constructor(baseURL = "") {
+      this.baseURL = baseURL;
+      this.defaultHeaders = {
+        "Content-Type": "application/json",
+      };
+    }
+
+    async request(endpoint, options = {}) {
+      const url = `${this.baseURL}${endpoint}`;
+      const config = {
+        ...options,
+        headers: {
+          ...this.defaultHeaders,
+          ...options.headers,
+        },
+      };
+
+      try {
+        const response = await fetch(url, config);
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const contentType = response.headers.get("content-type");
+        if (contentType && contentType.includes("application/json")) {
+          return await response.json();
+        }
+
+        return await response.text();
+      } catch (error) {
+        console.error(`API Error (${endpoint}):`, error);
+        throw error;
+      }
+    }
+
+    async get(endpoint, params = {}) {
+      const queryString = new URLSearchParams(params).toString();
+      const url = queryString ? `${endpoint}?${queryString}` : endpoint;
+      return this.request(url, { method: "GET" });
+    }
+
+    async post(endpoint, data = {}) {
+      return this.request(endpoint, {
+        method: "POST",
+        body: JSON.stringify(data),
+      });
+    }
+
+    async put(endpoint, data = {}) {
+      return this.request(endpoint, {
+        method: "PUT",
+        body: JSON.stringify(data),
+      });
+    }
+
+    async delete(endpoint) {
+      return this.request(endpoint, { method: "DELETE" });
+    }
+
+    // Product endpoints
+    async getProducts(params = {}) {
+      return this.get("/api/products", params);
+    }
+
+    async getProduct(id) {
+      return this.get(`/api/products/${id}`);
+    }
+
+    async getCategories() {
+      return this.get("/api/categories");
+    }
+
+    // Menu endpoints
+    async getMenu() {
+      return this.get("/api/menu");
+    }
+
+    // Homepage endpoints
+    async getHomepageSettings() {
+      return this.get("/api/homepage-settings");
+    }
+  }
+
+  // Create global instance
+  window.API = window.API || new APIClient();
+
+  // Helper function for loading states
+  window.withLoading = async function (element, asyncFn) {
+    if (!element) return asyncFn();
+
+    element.classList.add("loading");
+    element.setAttribute("aria-busy", "true");
+
+    try {
+      return await asyncFn();
+    } finally {
+      element.classList.remove("loading");
+      element.setAttribute("aria-busy", "false");
+    }
+  };
+})();

website/public/assets/js/back-button-control.js

@@ -0,0 +1,62 @@
+/**
+ * Back Button Navigation Control - SIMPLIFIED & FIXED
+ *
+ * Problem: History manipulation (replaceState/pushState) changes URL without reloading page
+ * Solution: Let browser handle navigation naturally, only intercept when necessary
+ *
+ * Requirements:
+ * 1. Natural browser back/forward navigation (URL changes = page loads)
+ * 2. Prevent going back past home page
+ * 3. Ensure page is always interactive after navigation
+ */
+
+(function () {
+  "use strict";
+
+  // Configuration
+  const HOME_PAGES = ["/", "/home.html", "/index.html"];
+  const HOME_URL = "/home.html";
+
+  /**
+   * Handle popstate (back/forward button) events
+   * This fires AFTER the browser has already navigated (URL changed)
+   */
+  function handlePopState(event) {
+    // Get the NEW current path (browser already changed it)
+    const currentPath = window.location.pathname;
+
+    // Ensure page is always interactive after back/forward
+    document.body.classList.remove("page-transitioning");
+    document.body.style.opacity = "1";
+    sessionStorage.removeItem("page-transitioning");
+
+    // If we're on home page after a back navigation
+    // prevent going back further by adding home to history
+    if (HOME_PAGES.includes(currentPath)) {
+      // Use setTimeout to avoid interfering with current popstate
+      setTimeout(() => {
+        window.history.pushState({ page: "home" }, "", HOME_URL);
+      }, 0);
+    }
+  }
+
+  /**
+   * Prevent going back past home page
+   * Add an extra entry so back button stays on home
+   */
+  function preventBackPastHome() {
+    const currentPath = window.location.pathname;
+    if (HOME_PAGES.includes(currentPath)) {
+      // Add an extra home entry
+      window.history.pushState({ page: "home", initial: true }, "", HOME_URL);
+    }
+  }
+
+  // Initialize: Add home history entry if on home page
+  preventBackPastHome();
+
+  // Listen for popstate (back/forward button)
+  // NOTE: Browser handles the actual navigation (page reload)
+  // We just ensure interactivity and prevent going back past home
+  window.addEventListener("popstate", handlePopState);
+})();

website/public/assets/js/cart-functions.js

@@ -0,0 +1,155 @@
+/**
+ * Shared Cart and Wishlist Functions
+ * Simple localStorage-based implementation that works on all pages
+ */
+
+(function () {
+  "use strict";
+
+  // Cart Functions
+  window.addToCart = function (productId, name, price, imageurl) {
+    try {
+      const cart = JSON.parse(localStorage.getItem("cart") || "[]");
+      const existingItem = cart.find((item) => item.id === productId);
+
+      if (existingItem) {
+        existingItem.quantity = (existingItem.quantity || 1) + 1;
+      } else {
+        cart.push({
+          id: productId,
+          name,
+          price: parseFloat(price),
+          imageurl,
+          quantity: 1,
+        });
+      }
+
+      localStorage.setItem("cart", JSON.stringify(cart));
+      updateCartBadge();
+      showNotification(`${name} added to cart!`, "success");
+    } catch (e) {
+      console.error("Cart error:", e);
+      showNotification("Added to cart!", "success");
+    }
+  };
+
+  // Wishlist Functions
+  window.addToWishlist = function (productId, name, price, imageurl) {
+    try {
+      const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
+      const exists = wishlist.find((item) => item.id === productId);
+
+      if (!exists) {
+        wishlist.push({
+          id: productId,
+          name,
+          price: parseFloat(price),
+          imageurl,
+        });
+        localStorage.setItem("wishlist", JSON.stringify(wishlist));
+        updateWishlistBadge();
+        showNotification(`${name} added to wishlist!`, "success");
+      } else {
+        showNotification("Already in wishlist!", "info");
+      }
+    } catch (e) {
+      console.error("Wishlist error:", e);
+      showNotification("Added to wishlist!", "success");
+    }
+  };
+
+  // Update Badge Functions
+  function updateCartBadge() {
+    try {
+      const cart = JSON.parse(localStorage.getItem("cart") || "[]");
+      const badge = document.querySelector(".cart-badge");
+      if (badge) {
+        const total = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
+        badge.textContent = total;
+        badge.style.display = total > 0 ? "flex" : "none";
+      }
+    } catch (e) {
+      console.error("Badge update error:", e);
+    }
+  }
+
+  function updateWishlistBadge() {
+    try {
+      const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
+      const badge = document.querySelector(".wishlist-badge");
+      if (badge) {
+        badge.textContent = wishlist.length;
+        badge.style.display = wishlist.length > 0 ? "flex" : "none";
+      }
+    } catch (e) {
+      console.error("Badge update error:", e);
+    }
+  }
+
+  // Notification Function
+  function showNotification(message, type = "info") {
+    // Remove existing notifications
+    document.querySelectorAll(".cart-notification").forEach((n) => n.remove());
+
+    const notification = document.createElement("div");
+    notification.className = `cart-notification notification-${type}`;
+    notification.textContent = message;
+    notification.style.cssText = `
+      position: fixed;
+      top: 80px;
+      right: 20px;
+      background: ${
+        type === "success"
+          ? "#10b981"
+          : type === "error"
+          ? "#ef4444"
+          : "#3b82f6"
+      };
+      color: white;
+      padding: 12px 24px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      z-index: 10000;
+      animation: slideInFromRight 0.3s ease;
+    `;
+
+    // Add animation styles if not already present
+    if (!document.getElementById("notification-animations")) {
+      const style = document.createElement("style");
+      style.id = "notification-animations";
+      style.textContent = `
+        @keyframes slideInFromRight {
+          from { transform: translateX(400px); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slideOutToRight {
+          from { transform: translateX(0); opacity: 1; }
+          to { transform: translateX(400px); opacity: 0; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+      notification.style.animation = "slideOutToRight 0.3s ease";
+      setTimeout(() => notification.remove(), 300);
+    }, 3000);
+  }
+
+  // Initialize badges on page load
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      updateCartBadge();
+      updateWishlistBadge();
+    });
+  } else {
+    updateCartBadge();
+    updateWishlistBadge();
+  }
+
+  // Expose update functions globally
+  window.updateCartBadge = updateCartBadge;
+  window.updateWishlistBadge = updateWishlistBadge;
+})();

website/public/assets/js/cart.js

@@ -0,0 +1,319 @@
+/**
+ * Shopping Cart Component
+ * Handles cart dropdown, updates, and interactions
+ */
+
+(function () {
+  "use strict";
+
+  class ShoppingCart {
+    constructor() {
+      this.cartToggle = document.getElementById("cartToggle");
+      this.cartPanel = document.getElementById("cartPanel");
+      this.cartContent = document.getElementById("cartContent");
+      this.cartClose = document.getElementById("cartClose");
+      this.isOpen = false;
+
+      this.init();
+    }
+
+    init() {
+      this.setupEventListeners();
+      this.render();
+    }
+
+    setupEventListeners() {
+      if (this.cartToggle) {
+        this.cartToggle.addEventListener("click", () => this.toggle());
+      }
+
+      if (this.cartClose) {
+        this.cartClose.addEventListener("click", () => this.close());
+      }
+
+      // Close when clicking outside
+      document.addEventListener("click", (e) => {
+        if (this.isOpen && !e.target.closest(".cart-dropdown-wrapper")) {
+          this.close();
+        }
+      });
+
+      // Listen for cart updates
+      window.addEventListener("cart-updated", () => this.render());
+    }
+
+    toggle() {
+      this.isOpen ? this.close() : this.open();
+    }
+
+    open() {
+      if (this.cartPanel) {
+        this.cartPanel.classList.add("active");
+        this.cartPanel.setAttribute("aria-hidden", "false");
+        this.isOpen = true;
+        this.render();
+      }
+    }
+
+    close() {
+      if (this.cartPanel) {
+        this.cartPanel.classList.remove("active");
+        this.cartPanel.setAttribute("aria-hidden", "true");
+        this.isOpen = false;
+      }
+    }
+
+    render() {
+      if (!this.cartContent) return;
+
+      const cart = window.AppState.cart;
+
+      if (cart.length === 0) {
+        this.cartContent.innerHTML =
+          '<p class="empty-state">Your cart is empty</p>';
+        this.updateFooter(null);
+        return;
+      }
+
+      const html = cart.map((item) => this.renderCartItem(item)).join("");
+      this.cartContent.innerHTML = html;
+
+      // Add event listeners to cart items
+      this.setupCartItemListeners();
+
+      // Update footer with total
+      this.updateFooter(window.AppState.getCartTotal());
+    }
+
+    renderCartItem(item) {
+      const imageUrl =
+        item.imageUrl || item.image_url || "/assets/images/placeholder.jpg";
+      const title = window.Utils.escapeHtml(
+        item.title || item.name || "Product"
+      );
+      const price = window.Utils.formatCurrency(item.price || 0);
+      const subtotal = window.Utils.formatCurrency(
+        (item.price || 0) * item.quantity
+      );
+
+      return `
+        <div class="cart-item" data-id="${item.id}">
+          <img src="${imageUrl}" alt="${title}" class="cart-item-image" loading="lazy">
+          <div class="cart-item-details">
+            <h4 class="cart-item-title">${title}</h4>
+            <p class="cart-item-price">${price}</p>
+            <div class="cart-item-quantity">
+              <button class="quantity-btn quantity-minus" data-id="${item.id}" aria-label="Decrease quantity">
+                <i class="bi bi-dash"></i>
+              </button>
+              <span class="quantity-value">${item.quantity}</span>
+              <button class="quantity-btn quantity-plus" data-id="${item.id}" aria-label="Increase quantity">
+                <i class="bi bi-plus"></i>
+              </button>
+            </div>
+            <p class="cart-item-subtotal">${subtotal}</p>
+          </div>
+          <button class="cart-item-remove" data-id="${item.id}" aria-label="Remove from cart">
+            <i class="bi bi-x-lg"></i>
+          </button>
+        </div>
+      `;
+    }
+
+    setupCartItemListeners() {
+      // Remove buttons
+      this.cartContent.querySelectorAll(".cart-item-remove").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const id = parseInt(e.currentTarget.dataset.id);
+          window.AppState.removeFromCart(id);
+          this.render();
+        });
+      });
+
+      // Quantity buttons
+      this.cartContent.querySelectorAll(".quantity-minus").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const id = parseInt(e.currentTarget.dataset.id);
+          const item = window.AppState.cart.find((item) => item.id === id);
+          if (item && item.quantity > 1) {
+            window.AppState.updateCartQuantity(id, item.quantity - 1);
+            this.render();
+          }
+        });
+      });
+
+      this.cartContent.querySelectorAll(".quantity-plus").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const id = parseInt(e.currentTarget.dataset.id);
+          const item = window.AppState.cart.find((item) => item.id === id);
+          if (item) {
+            window.AppState.updateCartQuantity(id, item.quantity + 1);
+            this.render();
+          }
+        });
+      });
+    }
+
+    updateFooter(total) {
+      const footer = this.cartPanel?.querySelector(".dropdown-foot");
+      if (!footer) return;
+
+      if (total === null) {
+        footer.innerHTML =
+          '<a href="/shop" class="btn-outline">Continue Shopping</a>';
+      } else {
+        footer.innerHTML = `
+          <div class="cart-total">
+            <span>Total:</span>
+            <strong>${window.Utils.formatCurrency(total)}</strong>
+          </div>
+          <a href="/shop" class="btn-text">Continue Shopping</a>
+          <button class="btn-primary-full" onclick="alert('Checkout coming soon!')">
+            Proceed to Checkout
+          </button>
+        `;
+      }
+    }
+  }
+
+  // Wishlist Component
+  class Wishlist {
+    constructor() {
+      this.wishlistToggle = document.getElementById("wishlistToggle");
+      this.wishlistPanel = document.getElementById("wishlistPanel");
+      this.wishlistContent = document.getElementById("wishlistContent");
+      this.wishlistClose = document.getElementById("wishlistClose");
+      this.isOpen = false;
+
+      this.init();
+    }
+
+    init() {
+      this.setupEventListeners();
+      this.render();
+    }
+
+    setupEventListeners() {
+      if (this.wishlistToggle) {
+        this.wishlistToggle.addEventListener("click", () => this.toggle());
+      }
+
+      if (this.wishlistClose) {
+        this.wishlistClose.addEventListener("click", () => this.close());
+      }
+
+      // Close when clicking outside
+      document.addEventListener("click", (e) => {
+        if (this.isOpen && !e.target.closest(".wishlist-dropdown-wrapper")) {
+          this.close();
+        }
+      });
+
+      // Listen for wishlist updates
+      window.addEventListener("wishlist-updated", () => this.render());
+    }
+
+    toggle() {
+      this.isOpen ? this.close() : this.open();
+    }
+
+    open() {
+      if (this.wishlistPanel) {
+        this.wishlistPanel.classList.add("active");
+        this.wishlistPanel.setAttribute("aria-hidden", "false");
+        this.isOpen = true;
+        this.render();
+      }
+    }
+
+    close() {
+      if (this.wishlistPanel) {
+        this.wishlistPanel.classList.remove("active");
+        this.wishlistPanel.setAttribute("aria-hidden", "true");
+        this.isOpen = false;
+      }
+    }
+
+    render() {
+      if (!this.wishlistContent) return;
+
+      const wishlist = window.AppState.wishlist;
+
+      if (wishlist.length === 0) {
+        this.wishlistContent.innerHTML =
+          '<p class="empty-state">Your wishlist is empty</p>';
+        return;
+      }
+
+      const html = wishlist
+        .map((item) => this.renderWishlistItem(item))
+        .join("");
+      this.wishlistContent.innerHTML = html;
+
+      // Add event listeners
+      this.setupWishlistItemListeners();
+    }
+
+    renderWishlistItem(item) {
+      const imageUrl =
+        item.imageUrl || item.image_url || "/assets/images/placeholder.jpg";
+      const title = window.Utils.escapeHtml(
+        item.title || item.name || "Product"
+      );
+      const price = window.Utils.formatCurrency(item.price || 0);
+
+      return `
+        <div class="wishlist-item" data-id="${item.id}">
+          <img src="${imageUrl}" alt="${title}" class="wishlist-item-image" loading="lazy">
+          <div class="wishlist-item-details">
+            <h4 class="wishlist-item-title">${title}</h4>
+            <p class="wishlist-item-price">${price}</p>
+            <button class="btn-add-to-cart" data-id="${item.id}">Add to Cart</button>
+          </div>
+          <button class="wishlist-item-remove" data-id="${item.id}" aria-label="Remove from wishlist">
+            <i class="bi bi-x-lg"></i>
+          </button>
+        </div>
+      `;
+    }
+
+    setupWishlistItemListeners() {
+      // Remove buttons
+      this.wishlistContent
+        .querySelectorAll(".wishlist-item-remove")
+        .forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            const id = parseInt(e.currentTarget.dataset.id);
+            window.AppState.removeFromWishlist(id);
+            this.render();
+          });
+        });
+
+      // Add to cart buttons
+      this.wishlistContent
+        .querySelectorAll(".btn-add-to-cart")
+        .forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            const id = parseInt(e.currentTarget.dataset.id);
+            const item = window.AppState.wishlist.find(
+              (item) => item.id === id
+            );
+            if (item) {
+              window.AppState.addToCart(item);
+            }
+          });
+        });
+    }
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      new ShoppingCart();
+      new Wishlist();
+    });
+  } else {
+    new ShoppingCart();
+    new Wishlist();
+  }
+})();

website/public/assets/js/lazy-load.js

@@ -0,0 +1,72 @@
+/**
+ * Lazy Loading Images Script
+ * Optimizes image loading for better performance
+ */
+(function () {
+  "use strict";
+
+  // Check for Intersection Observer support
+  if (!("IntersectionObserver" in window)) {
+    // Fallback: load all images immediately
+    document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
+      if (img.dataset.src) {
+        img.src = img.dataset.src;
+      }
+    });
+    return;
+  }
+
+  // Configure intersection observer
+  const imageObserver = new IntersectionObserver(
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const img = entry.target;
+
+          // Load the image
+          if (img.dataset.src) {
+            img.src = img.dataset.src;
+            img.removeAttribute("data-src");
+          }
+
+          // Optional: load srcset
+          if (img.dataset.srcset) {
+            img.srcset = img.dataset.srcset;
+            img.removeAttribute("data-srcset");
+          }
+
+          // Add loaded class for fade-in effect
+          img.classList.add("loaded");
+
+          // Stop observing this image
+          observer.unobserve(img);
+        }
+      });
+    },
+    {
+      // Start loading when image is 50px from viewport
+      rootMargin: "50px 0px",
+      threshold: 0.01,
+    }
+  );
+
+  // Observe all lazy images
+  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
+  lazyImages.forEach((img) => imageObserver.observe(img));
+
+  // Add CSS for fade-in effect if not already present
+  if (!document.getElementById("lazy-load-styles")) {
+    const style = document.createElement("style");
+    style.id = "lazy-load-styles";
+    style.textContent = `
+      img[loading="lazy"] {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+      }
+      img[loading="lazy"].loaded {
+        opacity: 1;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+})();

website/public/assets/js/main.js

@@ -0,0 +1,350 @@
+/**
+ * Main Application JavaScript
+ * Handles global state management, API integration, and core functionality
+ */
+
+(function () {
+  "use strict";
+
+  // Global state management
+  window.AppState = {
+    cart: [],
+    wishlist: [],
+    products: [],
+    settings: null,
+    user: null,
+
+    // Initialize state from localStorage
+    init() {
+      this.loadCart();
+      this.loadWishlist();
+      this.updateUI();
+    },
+
+    // Cart management
+    loadCart() {
+      try {
+        const saved = localStorage.getItem("cart");
+        this.cart = saved ? JSON.parse(saved) : [];
+      } catch (error) {
+        console.error("Error loading cart:", error);
+        this.cart = [];
+      }
+    },
+
+    saveCart() {
+      try {
+        localStorage.setItem("cart", JSON.stringify(this.cart));
+        this.updateUI();
+      } catch (error) {
+        console.error("Error saving cart:", error);
+      }
+    },
+
+    addToCart(product, quantity = 1) {
+      const existing = this.cart.find((item) => item.id === product.id);
+      if (existing) {
+        existing.quantity += quantity;
+      } else {
+        this.cart.push({ ...product, quantity });
+      }
+      this.saveCart();
+      this.showNotification("Added to cart", "success");
+    },
+
+    removeFromCart(productId) {
+      this.cart = this.cart.filter((item) => item.id !== productId);
+      this.saveCart();
+      this.showNotification("Removed from cart", "info");
+    },
+
+    updateCartQuantity(productId, quantity) {
+      const item = this.cart.find((item) => item.id === productId);
+      if (item) {
+        item.quantity = Math.max(1, quantity);
+        this.saveCart();
+      }
+    },
+
+    getCartTotal() {
+      return this.cart.reduce(
+        (sum, item) => sum + item.price * item.quantity,
+        0
+      );
+    },
+
+    getCartCount() {
+      return this.cart.reduce((sum, item) => sum + item.quantity, 0);
+    },
+
+    // Wishlist management
+    loadWishlist() {
+      try {
+        const saved = localStorage.getItem("wishlist");
+        this.wishlist = saved ? JSON.parse(saved) : [];
+      } catch (error) {
+        console.error("Error loading wishlist:", error);
+        this.wishlist = [];
+      }
+    },
+
+    saveWishlist() {
+      try {
+        localStorage.setItem("wishlist", JSON.stringify(this.wishlist));
+        this.updateUI();
+      } catch (error) {
+        console.error("Error saving wishlist:", error);
+      }
+    },
+
+    addToWishlist(product) {
+      if (!this.wishlist.find((item) => item.id === product.id)) {
+        this.wishlist.push(product);
+        this.saveWishlist();
+        this.showNotification("Added to wishlist", "success");
+      }
+    },
+
+    removeFromWishlist(productId) {
+      this.wishlist = this.wishlist.filter((item) => item.id !== productId);
+      this.saveWishlist();
+      this.showNotification("Removed from wishlist", "info");
+    },
+
+    isInWishlist(productId) {
+      return this.wishlist.some((item) => item.id === productId);
+    },
+
+    // UI updates
+    updateUI() {
+      this.updateCartUI();
+      this.updateWishlistUI();
+    },
+
+    updateCartUI() {
+      const count = this.getCartCount();
+      const badge = document.getElementById("cartCount");
+      if (badge) {
+        badge.textContent = count;
+        badge.style.display = count > 0 ? "flex" : "none";
+      }
+    },
+
+    updateWishlistUI() {
+      const count = this.wishlist.length;
+      const badge = document.getElementById("wishlistCount");
+      if (badge) {
+        badge.textContent = count;
+        badge.style.display = count > 0 ? "flex" : "none";
+      }
+    },
+
+    // Notifications
+    showNotification(message, type = "info") {
+      const notification = document.createElement("div");
+      notification.className = `notification notification-${type}`;
+      notification.textContent = message;
+      notification.setAttribute("role", "alert");
+      notification.setAttribute("aria-live", "polite");
+
+      document.body.appendChild(notification);
+
+      setTimeout(() => notification.classList.add("show"), 10);
+      setTimeout(() => {
+        notification.classList.remove("show");
+        setTimeout(() => notification.remove(), 300);
+      }, 3000);
+    },
+  };
+
+  // API Client
+  window.API = {
+    baseURL: "/api",
+
+    async request(endpoint, options = {}) {
+      try {
+        const response = await fetch(this.baseURL + endpoint, {
+          ...options,
+          headers: {
+            "Content-Type": "application/json",
+            ...options.headers,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return await response.json();
+      } catch (error) {
+        console.error("API request failed:", error);
+        throw error;
+      }
+    },
+
+    // Product endpoints
+    async getProducts(filters = {}) {
+      const params = new URLSearchParams(filters);
+      return this.request(`/products?${params}`);
+    },
+
+    async getProduct(id) {
+      return this.request(`/products/${id}`);
+    },
+
+    async getFeaturedProducts() {
+      return this.request("/products/featured");
+    },
+
+    // Settings endpoint
+    async getSettings() {
+      return this.request("/settings");
+    },
+
+    // Homepage endpoint
+    async getHomepageSettings() {
+      return this.request("/homepage/settings");
+    },
+
+    // Menu endpoint
+    async getMenu() {
+      return this.request("/menu");
+    },
+
+    // Blog endpoints
+    async getBlogPosts() {
+      return this.request("/blog");
+    },
+
+    async getBlogPost(id) {
+      return this.request(`/blog/${id}`);
+    },
+
+    // Portfolio endpoints
+    async getPortfolioProjects() {
+      return this.request("/portfolio");
+    },
+
+    async getPortfolioProject(id) {
+      return this.request(`/portfolio/${id}`);
+    },
+
+    // Pages endpoints
+    async getPages() {
+      return this.request("/pages");
+    },
+
+    async getPage(slug) {
+      return this.request(`/pages/${slug}`);
+    },
+  };
+
+  // Utility functions
+  window.Utils = {
+    // Format currency
+    formatCurrency(amount) {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount);
+    },
+
+    // Format date
+    formatDate(date) {
+      return new Intl.DateTimeFormat("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      }).format(new Date(date));
+    },
+
+    // Debounce function
+    debounce(func, wait) {
+      let timeout;
+      return function executedFunction(...args) {
+        const later = () => {
+          clearTimeout(timeout);
+          func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    },
+
+    // Get URL parameter
+    getUrlParameter(name) {
+      const params = new URLSearchParams(window.location.search);
+      return params.get(name);
+    },
+
+    // Safe HTML encode
+    escapeHtml(text) {
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    },
+
+    // Show loading state
+    showLoading(element) {
+      if (element) {
+        element.classList.add("loading");
+        element.setAttribute("aria-busy", "true");
+      }
+    },
+
+    hideLoading(element) {
+      if (element) {
+        element.classList.remove("loading");
+        element.setAttribute("aria-busy", "false");
+      }
+    },
+  };
+
+  // Initialize on DOM ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      window.AppState.init();
+    });
+  } else {
+    window.AppState.init();
+  }
+
+  // Add notification styles if not exists
+  if (!document.getElementById("notification-styles")) {
+    const style = document.createElement("style");
+    style.id = "notification-styles";
+    style.textContent = `
+      .notification {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        padding: 15px 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        z-index: 10000;
+        opacity: 0;
+        transform: translateX(400px);
+        transition: all 0.3s ease;
+        max-width: 300px;
+      }
+      .notification.show {
+        opacity: 1;
+        transform: translateX(0);
+      }
+      .notification-success {
+        border-left: 4px solid #28a745;
+      }
+      .notification-error {
+        border-left: 4px solid #dc3545;
+      }
+      .notification-info {
+        border-left: 4px solid #17a2b8;
+      }
+      .notification-warning {
+        border-left: 4px solid #ffc107;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+})();

website/public/assets/js/navigation.js

@@ -0,0 +1,203 @@
+/**
+ * Navigation Component
+ * Handles mobile menu, dropdowns, and accessibility
+ */
+
+(function () {
+  "use strict";
+
+  class Navigation {
+    constructor() {
+      this.mobileMenuToggle = document.getElementById("mobileMenuToggle");
+      this.mobileMenu = document.getElementById("mobileMenu");
+      this.mobileMenuClose = document.getElementById("mobileMenuClose");
+      this.overlay = document.getElementById("mobileMenuOverlay");
+      this.body = document.body;
+
+      this.init();
+    }
+
+    init() {
+      this.setupMobileMenu();
+      this.setupAccessibility();
+      this.highlightCurrentPage();
+      this.setupKeyboardNavigation();
+    }
+
+    setupMobileMenu() {
+      // Open mobile menu
+      if (this.mobileMenuToggle) {
+        this.mobileMenuToggle.addEventListener("click", () =>
+          this.openMobileMenu()
+        );
+      }
+
+      // Close mobile menu
+      if (this.mobileMenuClose) {
+        this.mobileMenuClose.addEventListener("click", () =>
+          this.closeMobileMenu()
+        );
+      }
+
+      if (this.overlay) {
+        this.overlay.addEventListener("click", () => this.closeMobileMenu());
+      }
+
+      // Close on ESC key
+      document.addEventListener("keydown", (e) => {
+        if (
+          e.key === "Escape" &&
+          this.mobileMenu &&
+          this.mobileMenu.classList.contains("active")
+        ) {
+          this.closeMobileMenu();
+        }
+      });
+    }
+
+    openMobileMenu() {
+      if (this.mobileMenu) {
+        this.mobileMenu.classList.add("active");
+        this.mobileMenu.setAttribute("aria-hidden", "false");
+        this.body.style.overflow = "hidden";
+
+        if (this.overlay) {
+          this.overlay.classList.add("active");
+        }
+
+        // Focus first link
+        const firstLink = this.mobileMenu.querySelector("a");
+        if (firstLink) {
+          setTimeout(() => firstLink.focus(), 100);
+        }
+      }
+    }
+
+    closeMobileMenu() {
+      if (this.mobileMenu) {
+        this.mobileMenu.classList.remove("active");
+        this.mobileMenu.setAttribute("aria-hidden", "true");
+        this.body.style.overflow = "";
+
+        if (this.overlay) {
+          this.overlay.classList.remove("active");
+        }
+
+        // Return focus to toggle button
+        if (this.mobileMenuToggle) {
+          this.mobileMenuToggle.focus();
+        }
+      }
+    }
+
+    setupAccessibility() {
+      // Wait for body to exist
+      if (!document.body) return;
+
+      // Add ARIA labels to nav items
+      const navLinks = document.querySelectorAll(".nav-link");
+      navLinks.forEach((link) => {
+        if (!link.getAttribute("aria-label")) {
+          link.setAttribute(
+            "aria-label",
+            `Navigate to ${link.textContent.trim()}`
+          );
+        }
+      });
+
+      // Add skip to main content link
+      if (!document.getElementById("skip-to-main")) {
+        const skipLink = document.createElement("a");
+        skipLink.id = "skip-to-main";
+        skipLink.href = "#main-content";
+        skipLink.textContent = "Skip to main content";
+        skipLink.className = "skip-link";
+        document.body.insertBefore(skipLink, document.body.firstChild);
+
+        // Add styles for skip link
+        if (!document.getElementById("skip-link-styles")) {
+          const style = document.createElement("style");
+          style.id = "skip-link-styles";
+          style.textContent = `
+            .skip-link {
+              position: fixed;
+              top: -100px;
+              left: 0;
+              padding: 10px 20px;
+              background: #000;
+              color: #fff;
+              z-index: 10001;
+              text-decoration: none;
+              border-radius: 0 0 8px 0;
+            }
+            .skip-link:focus {
+              top: 0;
+            }
+          `;
+          document.head.appendChild(style);
+        }
+      }
+    }
+
+    highlightCurrentPage() {
+      const currentPath = window.location.pathname;
+      const navLinks = document.querySelectorAll(".nav-link, .mobile-link");
+
+      navLinks.forEach((link) => {
+        const href = link.getAttribute("href");
+        if (
+          href &&
+          (currentPath === href || currentPath.startsWith(href + "/"))
+        ) {
+          link.classList.add("active");
+          link.setAttribute("aria-current", "page");
+        } else {
+          link.classList.remove("active");
+          link.removeAttribute("aria-current");
+        }
+      });
+    }
+
+    setupKeyboardNavigation() {
+      // Tab trap in mobile menu when open
+      if (this.mobileMenu) {
+        const focusableElements = this.mobileMenu.querySelectorAll(
+          'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+
+        if (focusableElements.length > 0) {
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+
+          this.mobileMenu.addEventListener("keydown", (e) => {
+            if (
+              e.key === "Tab" &&
+              this.mobileMenu.classList.contains("active")
+            ) {
+              if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                  e.preventDefault();
+                  lastElement.focus();
+                }
+              } else {
+                if (document.activeElement === lastElement) {
+                  e.preventDefault();
+                  firstElement.focus();
+                }
+              }
+            }
+          });
+        }
+      }
+    }
+  }
+
+  // Initialize navigation when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      new Navigation();
+    });
+  } else {
+    new Navigation();
+  }
+})();

website/public/assets/js/notifications.js

@@ -0,0 +1,224 @@
+/**
+ * Notification System
+ * Accessible toast notifications
+ */
+
+(function () {
+  "use strict";
+
+  class NotificationManager {
+    constructor() {
+      this.container = null;
+      this.notifications = new Map();
+      this.init();
+    }
+
+    init() {
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () =>
+          this.createContainer()
+        );
+      } else {
+        this.createContainer();
+      }
+    }
+
+    createContainer() {
+      if (!document.body || this.container) return;
+
+      this.container = document.createElement("div");
+      this.container.id = "notification-container";
+      this.container.setAttribute("aria-live", "polite");
+      this.container.setAttribute("aria-atomic", "true");
+      this.container.className = "notification-container";
+
+      const style = document.createElement("style");
+      style.textContent = `
+        .notification-container {
+          position: fixed;
+          top: 80px;
+          right: 20px;
+          z-index: 10000;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          max-width: 400px;
+          pointer-events: none;
+        }
+        
+        .notification {
+          padding: 12px 20px;
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          color: white;
+          font-size: 14px;
+          font-weight: 500;
+          pointer-events: auto;
+          animation: slideInRight 0.3s ease;
+          min-width: 250px;
+        }
+        
+        .notification.removing {
+          animation: slideOutRight 0.3s ease;
+        }
+        
+        .notification-success {
+          background: #10b981;
+        }
+        
+        .notification-error {
+          background: #ef4444;
+        }
+        
+        .notification-info {
+          background: #3b82f6;
+        }
+        
+        .notification-warning {
+          background: #f59e0b;
+        }
+        
+        .notification-icon {
+          font-size: 18px;
+          flex-shrink: 0;
+        }
+        
+        .notification-message {
+          flex: 1;
+        }
+        
+        .notification-close {
+          background: transparent;
+          border: none;
+          color: white;
+          cursor: pointer;
+          padding: 4px;
+          opacity: 0.8;
+          transition: opacity 0.2s;
+        }
+        
+        .notification-close:hover {
+          opacity: 1;
+        }
+        
+        @keyframes slideInRight {
+          from {
+            transform: translateX(400px);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+        
+        @keyframes slideOutRight {
+          from {
+            transform: translateX(0);
+            opacity: 1;
+          }
+          to {
+            transform: translateX(400px);
+            opacity: 0;
+          }
+        }
+        
+        @media (max-width: 640px) {
+          .notification-container {
+            right: 10px;
+            left: 10px;
+            max-width: none;
+          }
+          
+          .notification {
+            min-width: auto;
+          }
+        }
+      `;
+
+      document.head.appendChild(style);
+      document.body.appendChild(this.container);
+    }
+
+    show(message, type = "info", duration = 3000) {
+      if (!this.container) this.createContainer();
+      if (!this.container) return;
+
+      const id = Date.now() + Math.random();
+      const notification = document.createElement("div");
+      notification.className = `notification notification-${type}`;
+      notification.setAttribute("role", "alert");
+
+      const icons = {
+        success: "✓",
+        error: "✕",
+        info: "ℹ",
+        warning: "⚠",
+      };
+
+      notification.innerHTML = `
+        <span class="notification-icon">${icons[type] || icons.info}</span>
+        <span class="notification-message">${this.escapeHtml(message)}</span>
+        <button class="notification-close" aria-label="Close notification">×</button>
+      `;
+
+      const closeBtn = notification.querySelector(".notification-close");
+      closeBtn.addEventListener("click", () => this.remove(id));
+
+      this.container.appendChild(notification);
+      this.notifications.set(id, notification);
+
+      if (duration > 0) {
+        setTimeout(() => this.remove(id), duration);
+      }
+
+      return id;
+    }
+
+    remove(id) {
+      const notification = this.notifications.get(id);
+      if (!notification) return;
+
+      notification.classList.add("removing");
+      setTimeout(() => {
+        if (notification.parentNode) {
+          notification.parentNode.removeChild(notification);
+        }
+        this.notifications.delete(id);
+      }, 300);
+    }
+
+    escapeHtml(text) {
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    success(message, duration) {
+      return this.show(message, "success", duration);
+    }
+
+    error(message, duration) {
+      return this.show(message, "error", duration);
+    }
+
+    info(message, duration) {
+      return this.show(message, "info", duration);
+    }
+
+    warning(message, duration) {
+      return this.show(message, "warning", duration);
+    }
+  }
+
+  // Create global instance
+  window.Notifications = window.Notifications || new NotificationManager();
+
+  // Legacy compatibility
+  window.showNotification = function (message, type = "info") {
+    window.Notifications.show(message, type);
+  };
+})();

website/public/assets/js/page-transitions.js

@@ -0,0 +1,555 @@
+/**
+ * Page Transitions and Smooth Navigation
+ * Handles page loading, transitions, and history management
+ */
+
+class PageTransitions {
+  constructor() {
+    this.transitionDuration = 300;
+    this.isTransitioning = false;
+    this.init();
+  }
+
+  init() {
+    // Wait for body to exist
+    if (!document.body) return;
+
+    // Add transition wrapper if it doesn't exist
+    if (!document.getElementById("page-transition")) {
+      const wrapper = document.createElement("div");
+      wrapper.id = "page-transition";
+      wrapper.className = "page-transition";
+
+      // Wrap main content
+      const main = document.querySelector("main") || document.body;
+      const parent = main.parentNode;
+      parent.insertBefore(wrapper, main);
+      wrapper.appendChild(main);
+    }
+
+    // Add fade-in on page load
+    this.fadeIn();
+
+    // Intercept navigation clicks
+    this.setupLinkInterception();
+
+    // Handle back/forward buttons
+    window.addEventListener("popstate", (e) => {
+      if (e.state && e.state.url) {
+        this.navigate(e.state.url, false);
+      }
+    });
+
+    // Add scroll restoration
+    if ("scrollRestoration" in history) {
+      history.scrollRestoration = "manual";
+    }
+  }
+
+  fadeIn() {
+    const wrapper = document.getElementById("page-transition");
+    if (wrapper) {
+      wrapper.classList.add("fade-in");
+      setTimeout(() => {
+        wrapper.classList.remove("fade-in");
+      }, this.transitionDuration);
+    }
+  }
+
+  fadeOut(callback) {
+    const wrapper = document.getElementById("page-transition");
+    if (wrapper) {
+      wrapper.classList.add("fade-out");
+      setTimeout(() => {
+        if (callback) callback();
+        wrapper.classList.remove("fade-out");
+      }, this.transitionDuration);
+    } else {
+      if (callback) callback();
+    }
+  }
+
+  setupLinkInterception() {
+    document.addEventListener("click", (e) => {
+      const link = e.target.closest("a");
+
+      // Check if it's a valid internal link
+      if (!link) return;
+      if (link.hasAttribute("data-no-transition")) return;
+      if (link.target === "_blank") return;
+      if (link.hasAttribute("download")) return;
+
+      const href = link.getAttribute("href");
+      if (
+        !href ||
+        href.startsWith("#") ||
+        href.startsWith("mailto:") ||
+        href.startsWith("tel:")
+      )
+        return;
+
+      // Check if it's an external link
+      const url = new URL(href, window.location.origin);
+      if (url.origin !== window.location.origin) return;
+
+      // Intercept the navigation
+      e.preventDefault();
+      this.navigate(href, true);
+    });
+  }
+
+  navigate(url, updateHistory = true) {
+    if (this.isTransitioning) return;
+    this.isTransitioning = true;
+
+    this.fadeOut(() => {
+      if (updateHistory) {
+        history.pushState({ url }, "", url);
+      }
+      window.location.href = url;
+    });
+  }
+
+  // Scroll to element with smooth animation
+  scrollTo(selector, offset = 0) {
+    const element = document.querySelector(selector);
+    if (!element) return;
+
+    const top =
+      element.getBoundingClientRect().top + window.pageYOffset - offset;
+
+    window.scrollTo({
+      top,
+      behavior: "smooth",
+    });
+  }
+
+  // Scroll to top
+  scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
+}
+
+/**
+ * Lazy Loading Images
+ * Improves performance by loading images only when they're visible
+ */
+class LazyLoader {
+  constructor() {
+    this.images = [];
+    this.observer = null;
+    this.init();
+  }
+
+  init() {
+    // Find all lazy images
+    this.images = document.querySelectorAll(
+      'img[data-src], img[loading="lazy"]'
+    );
+
+    // Set up Intersection Observer
+    if ("IntersectionObserver" in window) {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              this.loadImage(entry.target);
+            }
+          });
+        },
+        {
+          rootMargin: "50px",
+        }
+      );
+
+      this.images.forEach((img) => this.observer.observe(img));
+    } else {
+      // Fallback for older browsers
+      this.images.forEach((img) => this.loadImage(img));
+    }
+  }
+
+  loadImage(img) {
+    const src = img.getAttribute("data-src");
+    if (src) {
+      img.src = src;
+      img.removeAttribute("data-src");
+    }
+
+    // Add fade-in effect
+    img.addEventListener("load", () => {
+      img.classList.add("loaded");
+    });
+
+    if (this.observer) {
+      this.observer.unobserve(img);
+    }
+  }
+
+  // Add new images to observer
+  observe(images) {
+    if (!images) return;
+
+    const imageList = Array.isArray(images) ? images : [images];
+    imageList.forEach((img) => {
+      if (this.observer) {
+        this.observer.observe(img);
+      } else {
+        this.loadImage(img);
+      }
+    });
+  }
+}
+
+/**
+ * Smooth Scroll Handler
+ * Adds smooth scrolling to anchor links
+ */
+class SmoothScroll {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+      anchor.addEventListener("click", (e) => {
+        const href = anchor.getAttribute("href");
+        if (href === "#") return;
+
+        e.preventDefault();
+        const target = document.querySelector(href);
+
+        if (target) {
+          const offset = 80; // Account for fixed header
+          const top =
+            target.getBoundingClientRect().top + window.pageYOffset - offset;
+
+          window.scrollTo({
+            top,
+            behavior: "smooth",
+          });
+
+          // Update URL without scrolling
+          history.pushState(null, "", href);
+        }
+      });
+    });
+  }
+}
+
+/**
+ * Back to Top Button
+ * Shows/hides button based on scroll position
+ */
+class BackToTop {
+  constructor() {
+    this.button = null;
+    this.scrollThreshold = 300;
+    this.init();
+  }
+
+  init() {
+    // Wait for body to exist
+    if (!document.body) return;
+
+    // Create button if it doesn't exist
+    this.button = document.getElementById("back-to-top");
+    if (!this.button) {
+      this.button = document.createElement("button");
+      this.button.id = "back-to-top";
+      this.button.className = "back-to-top";
+      this.button.innerHTML = "↑";
+      this.button.setAttribute("aria-label", "Back to top");
+      document.body.appendChild(this.button);
+    }
+
+    // Handle scroll
+    window.addEventListener("scroll", () => {
+      if (window.pageYOffset > this.scrollThreshold) {
+        this.button.classList.add("visible");
+      } else {
+        this.button.classList.remove("visible");
+      }
+    });
+
+    // Handle click
+    this.button.addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    });
+  }
+}
+
+/**
+ * Loading Overlay
+ * Shows loading state during async operations
+ */
+class LoadingOverlay {
+  constructor() {
+    this.overlay = null;
+    this.activeOperations = 0;
+    this.init();
+  }
+
+  init() {
+    // Wait for body to exist
+    if (!document.body) return;
+
+    // Create overlay if it doesn't exist
+    this.overlay = document.getElementById("loading-overlay");
+    if (!this.overlay) {
+      this.overlay = document.createElement("div");
+      this.overlay.id = "loading-overlay";
+      this.overlay.className = "loading-overlay";
+      this.overlay.innerHTML = `
+        <div class="loading-spinner">
+          <div class="spinner"></div>
+          <p>Loading...</p>
+        </div>
+      `;
+      document.body.appendChild(this.overlay);
+    }
+  }
+
+  show() {
+    this.activeOperations++;
+    this.overlay.classList.add("active");
+    document.body.style.overflow = "hidden";
+  }
+
+  hide() {
+    this.activeOperations = Math.max(0, this.activeOperations - 1);
+
+    if (this.activeOperations === 0) {
+      this.overlay.classList.remove("active");
+      document.body.style.overflow = "";
+    }
+  }
+
+  // Force hide regardless of operation count
+  forceHide() {
+    this.activeOperations = 0;
+    this.overlay.classList.remove("active");
+    document.body.style.overflow = "";
+  }
+}
+
+/**
+ * Page Visibility Handler
+ * Handles actions when page becomes visible/hidden
+ */
+class PageVisibility {
+  constructor() {
+    this.callbacks = {
+      visible: [],
+      hidden: [],
+    };
+    this.init();
+  }
+
+  init() {
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) {
+        this.callbacks.hidden.forEach((cb) => cb());
+      } else {
+        this.callbacks.visible.forEach((cb) => cb());
+      }
+    });
+  }
+
+  onVisible(callback) {
+    this.callbacks.visible.push(callback);
+  }
+
+  onHidden(callback) {
+    this.callbacks.hidden.push(callback);
+  }
+}
+
+/**
+ * Network Status Handler
+ * Monitors online/offline status
+ */
+class NetworkStatus {
+  constructor() {
+    this.isOnline = navigator.onLine;
+    this.callbacks = {
+      online: [],
+      offline: [],
+    };
+    this.init();
+  }
+
+  init() {
+    window.addEventListener("online", () => {
+      this.isOnline = true;
+      this.callbacks.online.forEach((cb) => cb());
+      this.showNotification("Back online", "success");
+    });
+
+    window.addEventListener("offline", () => {
+      this.isOnline = false;
+      this.callbacks.offline.forEach((cb) => cb());
+      this.showNotification("No internet connection", "error");
+    });
+  }
+
+  onOnline(callback) {
+    this.callbacks.online.push(callback);
+  }
+
+  onOffline(callback) {
+    this.callbacks.offline.push(callback);
+  }
+
+  showNotification(message, type) {
+    if (window.Utils && window.Utils.notify) {
+      window.Utils.notify(message, type);
+    }
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initPageTransitions);
+} else {
+  initPageTransitions();
+}
+
+function initPageTransitions() {
+  // Initialize all modules
+  window.pageTransitions = new PageTransitions();
+  window.lazyLoader = new LazyLoader();
+  window.smoothScroll = new SmoothScroll();
+  window.backToTop = new BackToTop();
+  window.loadingOverlay = new LoadingOverlay();
+  window.pageVisibility = new PageVisibility();
+  window.networkStatus = new NetworkStatus();
+
+  console.log("Page transitions initialized");
+}
+
+// Add CSS if not already present
+if (!document.getElementById("page-transitions-styles")) {
+  const style = document.createElement("style");
+  style.id = "page-transitions-styles";
+  style.textContent = `
+    .page-transition {
+      opacity: 1;
+      transition: opacity 300ms ease;
+    }
+
+    .page-transition.fade-in {
+      opacity: 0;
+      animation: fadeIn 300ms ease forwards;
+    }
+
+    .page-transition.fade-out {
+      opacity: 1;
+      animation: fadeOut 300ms ease forwards;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+
+    img[data-src] {
+      opacity: 0;
+      transition: opacity 300ms ease;
+    }
+
+    img.loaded {
+      opacity: 1;
+    }
+
+    .back-to-top {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 50px;
+      height: 50px;
+      background: #667eea;
+      color: white;
+      border: none;
+      border-radius: 50%;
+      font-size: 24px;
+      cursor: pointer;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(20px);
+      transition: all 0.3s ease;
+      z-index: 999;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
+
+    .back-to-top.visible {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .back-to-top:hover {
+      background: #5568d3;
+      transform: translateY(-2px);
+    }
+
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(255,255,255,0.95);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+      z-index: 9999;
+    }
+
+    .loading-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .loading-spinner {
+      text-align: center;
+    }
+
+    .spinner {
+      width: 60px;
+      height: 60px;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #667eea;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 16px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .loading-spinner p {
+      color: #667eea;
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0;
+    }
+  `;
+  document.head.appendChild(style);
+}

website/public/assets/js/shopping.js

@@ -0,0 +1,306 @@
+/**
+ * Shopping/Products Component
+ * Handles product display, filtering, and interactions
+ */
+
+(function () {
+  "use strict";
+
+  class ShoppingPage {
+    constructor() {
+      this.productsContainer = document.getElementById("productsContainer");
+      this.loadingIndicator = document.getElementById("loadingIndicator");
+      this.errorContainer = document.getElementById("errorContainer");
+      this.currentCategory = window.Utils.getUrlParameter("category") || "all";
+      this.currentSort = "newest";
+      this.products = [];
+
+      this.init();
+    }
+
+    async init() {
+      this.setupEventListeners();
+      await this.loadProducts();
+    }
+
+    setupEventListeners() {
+      // Category filters
+      document.querySelectorAll("[data-category]").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.currentCategory = e.currentTarget.dataset.category;
+          this.filterProducts();
+        });
+      });
+
+      // Sort dropdown
+      const sortSelect = document.getElementById("sortSelect");
+      if (sortSelect) {
+        sortSelect.addEventListener("change", (e) => {
+          this.currentSort = e.target.value;
+          this.filterProducts();
+        });
+      }
+
+      // Search
+      const searchInput = document.getElementById("productSearch");
+      if (searchInput) {
+        searchInput.addEventListener(
+          "input",
+          window.Utils.debounce((e) => {
+            this.searchProducts(e.target.value);
+          }, 300)
+        );
+      }
+    }
+
+    async loadProducts() {
+      if (!this.productsContainer) return;
+
+      try {
+        this.showLoading();
+        const response = await window.API.getProducts();
+        this.products = response.products || response.data || [];
+        this.renderProducts(this.products);
+        this.hideLoading();
+      } catch (error) {
+        console.error("Error loading products:", error);
+        this.showError("Failed to load products. Please try again later.");
+        this.hideLoading();
+      }
+    }
+
+    filterProducts() {
+      let filtered = [...this.products];
+
+      // Filter by category
+      if (this.currentCategory && this.currentCategory !== "all") {
+        filtered = filtered.filter(
+          (p) =>
+            p.category?.toLowerCase() === this.currentCategory.toLowerCase()
+        );
+      }
+
+      // Sort products
+      filtered = this.sortProducts(filtered);
+
+      this.renderProducts(filtered);
+    }
+
+    sortProducts(products) {
+      switch (this.currentSort) {
+        case "price-low":
+          return products.sort((a, b) => (a.price || 0) - (b.price || 0));
+        case "price-high":
+          return products.sort((a, b) => (b.price || 0) - (a.price || 0));
+        case "name":
+          return products.sort((a, b) =>
+            (a.title || a.name || "").localeCompare(b.title || b.name || "")
+          );
+        case "newest":
+        default:
+          return products.sort(
+            (a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0)
+          );
+      }
+    }
+
+    searchProducts(query) {
+      if (!query.trim()) {
+        this.filterProducts();
+        return;
+      }
+
+      const searchTerm = query.toLowerCase();
+      const filtered = this.products.filter((p) => {
+        const title = (p.title || p.name || "").toLowerCase();
+        const description = (p.description || "").toLowerCase();
+        const category = (p.category || "").toLowerCase();
+
+        return (
+          title.includes(searchTerm) ||
+          description.includes(searchTerm) ||
+          category.includes(searchTerm)
+        );
+      });
+
+      this.renderProducts(filtered);
+    }
+
+    renderProducts(products) {
+      if (!this.productsContainer) return;
+
+      if (products.length === 0) {
+        this.productsContainer.innerHTML = `
+          <div class="no-products">
+            <i class="bi bi-inbox" style="font-size: 48px; opacity: 0.5;"></i>
+            <p>No products found</p>
+          </div>
+        `;
+        return;
+      }
+
+      const html = products
+        .map((product) => this.renderProductCard(product))
+        .join("");
+      this.productsContainer.innerHTML = html;
+
+      // Setup product card listeners
+      this.setupProductListeners();
+    }
+
+    renderProductCard(product) {
+      const id = product.id;
+      const title = window.Utils?.escapeHtml
+        ? window.Utils.escapeHtml(product.title || product.name || "Product")
+        : product.title || product.name || "Product";
+      const price = window.Utils?.formatCurrency
+        ? window.Utils.formatCurrency(product.price || 0)
+        : `$${parseFloat(product.price || 0).toFixed(2)}`;
+
+      // Get image URL from multiple possible sources
+      let imageUrl = "/assets/images/placeholder.jpg";
+      if (
+        product.images &&
+        Array.isArray(product.images) &&
+        product.images.length > 0
+      ) {
+        const primaryImg = product.images.find((img) => img.is_primary);
+        imageUrl = primaryImg
+          ? primaryImg.image_url
+          : product.images[0].image_url;
+      } else if (product.imageUrl) {
+        imageUrl = product.imageUrl;
+      } else if (product.image_url) {
+        imageUrl = product.image_url;
+      }
+
+      // Get description
+      const description =
+        product.shortdescription ||
+        (product.description
+          ? product.description.substring(0, 100) + "..."
+          : "");
+
+      const isInWishlist = window.AppState?.isInWishlist(id) || false;
+
+      return `
+        <article class="product-card" data-id="${id}">
+          <div class="product-image-wrapper">
+            <img src="${imageUrl}" alt="${title}" class="product-image" loading="lazy" onerror="this.src='/assets/images/placeholder.svg'">
+            <button 
+              class="wishlist-btn ${isInWishlist ? "active" : ""}" 
+              data-id="${id}"
+              aria-label="${
+                isInWishlist ? "Remove from wishlist" : "Add to wishlist"
+              }"
+            >
+              <i class="bi bi-heart${isInWishlist ? "-fill" : ""}"></i>
+            </button>
+          </div>
+          <div class="product-info">
+            <a href="/product?id=${id}" style="text-decoration: none; color: inherit;">
+              <h3 class="product-title">${title}</h3>
+            </a>
+            ${
+              description
+                ? `<div class="product-description">${description}</div>`
+                : ""
+            }
+            <p class="product-price">${price}</p>
+            <div class="product-actions">
+              <button class="btn-add-to-cart" data-id="${id}" style="flex: 1;">
+                <i class="bi bi-cart-plus"></i> Add to Cart
+              </button>
+            </div>
+          </div>
+        </article>
+      `;
+    }
+
+    setupProductListeners() {
+      // Add to cart buttons
+      this.productsContainer
+        .querySelectorAll(".btn-add-to-cart")
+        .forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            e.preventDefault();
+            const id = parseInt(e.currentTarget.dataset.id);
+            const product = this.products.find((p) => p.id === id);
+            if (product) {
+              window.AppState.addToCart(product);
+            }
+          });
+        });
+
+      // Wishlist buttons
+      this.productsContainer
+        .querySelectorAll(".wishlist-btn")
+        .forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            e.preventDefault();
+            const id = parseInt(e.currentTarget.dataset.id);
+            const product = this.products.find((p) => p.id === id);
+            if (product) {
+              if (window.AppState.isInWishlist(id)) {
+                window.AppState.removeFromWishlist(id);
+              } else {
+                window.AppState.addToWishlist(product);
+              }
+              this.renderProducts(this.products);
+            }
+          });
+        });
+    }
+
+    showLoading() {
+      if (this.loadingIndicator) {
+        this.loadingIndicator.style.display = "flex";
+      }
+      if (this.productsContainer) {
+        this.productsContainer.style.opacity = "0.5";
+      }
+    }
+
+    hideLoading() {
+      if (this.loadingIndicator) {
+        this.loadingIndicator.style.display = "none";
+      }
+      if (this.productsContainer) {
+        this.productsContainer.style.opacity = "1";
+      }
+    }
+
+    showError(message) {
+      if (this.errorContainer) {
+        this.errorContainer.innerHTML = `
+          <div class="error-message" role="alert">
+            <i class="bi bi-exclamation-triangle"></i>
+            <p>${window.Utils.escapeHtml(message)}</p>
+            <button onclick="location.reload()">Retry</button>
+          </div>
+        `;
+        this.errorContainer.style.display = "block";
+      }
+    }
+  }
+
+  // Initialize on shop/products pages
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      if (
+        window.location.pathname.includes("/shop") ||
+        window.location.pathname.includes("/products")
+      ) {
+        new ShoppingPage();
+      }
+    });
+  } else {
+    if (
+      window.location.pathname.includes("/shop") ||
+      window.location.pathname.includes("/products")
+    ) {
+      new ShoppingPage();
+    }
+  }
+})();

website/public/assets/js/state-manager.js

@@ -0,0 +1,236 @@
+/**
+ * Global State Management
+ * Centralized state for cart, wishlist, and user preferences
+ */
+
+(function () {
+  "use strict";
+
+  class StateManager {
+    constructor() {
+      this.state = {
+        cart: [],
+        wishlist: [],
+        user: null,
+        preferences: {},
+      };
+      this.listeners = {};
+      this.init();
+    }
+
+    init() {
+      this.loadFromStorage();
+      this.setupStorageSync();
+    }
+
+    loadFromStorage() {
+      try {
+        this.state.cart = JSON.parse(localStorage.getItem("cart") || "[]");
+        this.state.wishlist = JSON.parse(
+          localStorage.getItem("wishlist") || "[]"
+        );
+        this.state.preferences = JSON.parse(
+          localStorage.getItem("preferences") || "{}"
+        );
+      } catch (e) {
+        console.error("State load error:", e);
+      }
+    }
+
+    saveToStorage() {
+      try {
+        localStorage.setItem("cart", JSON.stringify(this.state.cart));
+        localStorage.setItem("wishlist", JSON.stringify(this.state.wishlist));
+        localStorage.setItem(
+          "preferences",
+          JSON.stringify(this.state.preferences)
+        );
+      } catch (e) {
+        console.error("State save error:", e);
+      }
+    }
+
+    setupStorageSync() {
+      window.addEventListener("storage", (e) => {
+        if (e.key === "cart" || e.key === "wishlist") {
+          this.loadFromStorage();
+          this.emit("stateChanged", { key: e.key });
+        }
+      });
+    }
+
+    // Cart methods
+    addToCart(product, quantity = 1) {
+      const existing = this.state.cart.find((item) => item.id === product.id);
+
+      if (existing) {
+        existing.quantity += quantity;
+      } else {
+        this.state.cart.push({
+          ...product,
+          quantity,
+          addedAt: Date.now(),
+        });
+      }
+
+      this.saveToStorage();
+      this.emit("cartUpdated", this.state.cart);
+      return this.state.cart;
+    }
+
+    removeFromCart(productId) {
+      this.state.cart = this.state.cart.filter((item) => item.id !== productId);
+      this.saveToStorage();
+      this.emit("cartUpdated", this.state.cart);
+      return this.state.cart;
+    }
+
+    updateCartQuantity(productId, quantity) {
+      const item = this.state.cart.find((item) => item.id === productId);
+      if (item) {
+        item.quantity = Math.max(0, quantity);
+        if (item.quantity === 0) {
+          return this.removeFromCart(productId);
+        }
+        this.saveToStorage();
+        this.emit("cartUpdated", this.state.cart);
+      }
+      return this.state.cart;
+    }
+
+    getCart() {
+      return this.state.cart;
+    }
+
+    getCartTotal() {
+      return this.state.cart.reduce(
+        (sum, item) => sum + item.price * item.quantity,
+        0
+      );
+    }
+
+    getCartCount() {
+      return this.state.cart.reduce((sum, item) => sum + item.quantity, 0);
+    }
+
+    clearCart() {
+      this.state.cart = [];
+      this.saveToStorage();
+      this.emit("cartUpdated", this.state.cart);
+    }
+
+    // Wishlist methods
+    addToWishlist(product) {
+      const exists = this.state.wishlist.find((item) => item.id === product.id);
+
+      if (!exists) {
+        this.state.wishlist.push({
+          ...product,
+          addedAt: Date.now(),
+        });
+        this.saveToStorage();
+        this.emit("wishlistUpdated", this.state.wishlist);
+        return true;
+      }
+      return false;
+    }
+
+    removeFromWishlist(productId) {
+      this.state.wishlist = this.state.wishlist.filter(
+        (item) => item.id !== productId
+      );
+      this.saveToStorage();
+      this.emit("wishlistUpdated", this.state.wishlist);
+      return this.state.wishlist;
+    }
+
+    getWishlist() {
+      return this.state.wishlist;
+    }
+
+    isInWishlist(productId) {
+      return this.state.wishlist.some((item) => item.id === productId);
+    }
+
+    // Event system
+    on(event, callback) {
+      if (!this.listeners[event]) {
+        this.listeners[event] = [];
+      }
+      this.listeners[event].push(callback);
+    }
+
+    off(event, callback) {
+      if (this.listeners[event]) {
+        this.listeners[event] = this.listeners[event].filter(
+          (cb) => cb !== callback
+        );
+      }
+    }
+
+    emit(event, data) {
+      if (this.listeners[event]) {
+        this.listeners[event].forEach((callback) => {
+          try {
+            callback(data);
+          } catch (e) {
+            console.error(`Error in ${event} listener:`, e);
+          }
+        });
+      }
+    }
+  }
+
+  // Create global instance
+  window.StateManager = window.StateManager || new StateManager();
+
+  // Expose helper functions for backward compatibility
+  window.addToCart = function (productId, name, price, imageurl) {
+    const product = { id: productId, name, price: parseFloat(price), imageurl };
+    window.StateManager.addToCart(product, 1);
+    if (window.showNotification) {
+      window.showNotification(`${name} added to cart!`, "success");
+    }
+  };
+
+  window.addToWishlist = function (productId, name, price, imageurl) {
+    const product = { id: productId, name, price: parseFloat(price), imageurl };
+    const added = window.StateManager.addToWishlist(product);
+    if (window.showNotification) {
+      window.showNotification(
+        added ? `${name} added to wishlist!` : "Already in wishlist!",
+        added ? "success" : "info"
+      );
+    }
+  };
+
+  // Update badges on state changes
+  window.StateManager.on("cartUpdated", () => {
+    const badge = document.querySelector(".cart-badge");
+    if (badge) {
+      const count = window.StateManager.getCartCount();
+      badge.textContent = count;
+      badge.style.display = count > 0 ? "flex" : "none";
+    }
+  });
+
+  window.StateManager.on("wishlistUpdated", () => {
+    const badge = document.querySelector(".wishlist-badge");
+    if (badge) {
+      const count = window.StateManager.getWishlist().length;
+      badge.textContent = count;
+      badge.style.display = count > 0 ? "flex" : "none";
+    }
+  });
+
+  // Initialize badges
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      window.StateManager.emit("cartUpdated");
+      window.StateManager.emit("wishlistUpdated");
+    });
+  } else {
+    window.StateManager.emit("cartUpdated");
+    window.StateManager.emit("wishlistUpdated");
+  }
+})();