halohalo

<?php if (session_status() === PHP_SESSION_NONE) { session_start(); } include("admin/config.php"); // Detect current page for active menu highlighting $currentPage = basename($_SERVER['PHP_SELF'], '.php'); function navLink($page, $label, $href, $current) { $isActive = ($page === $current); $activeClass = $isActive ? 'text-white font-medium' : 'hover:text-white'; return '<a href="' . $href . '" class="' . $activeClass . ' transition">' . $label . '</a>'; } ?> <!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <?php if (isset($meta_title) && !empty($meta_title)) { echo htmlspecialchars($meta_title); } elseif (isset($pageTitle) && !empty($pageTitle)) { echo htmlspecialchars($pageTitle) . ' | STANJO'; } else { echo 'STANJO | Modern LED Lighting Solutions'; } ?> </title> <meta name="description" content="<?php echo isset($meta_description) ? htmlspecialchars($meta_description) : 'Discover modern LED lighting solutions at STANJO. Premium quality bulbs, panels, and lighting fixtures for your home and office.'; ?>"> <meta name="keywords" content="<?php echo isset($meta_keywords) ? htmlspecialchars($meta_keywords) : 'LED lighting, STANJO, modern lighting, energy efficient bulbs, LED panels'; ?>"> <!-- Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.cdnfonts.com/css/venus-rising" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { 'stanjo-black': '#000000', 'stanjo-dark': '#0B0B0B', 'stanjo-gray': '#18181B', 'stanjo-zinc': '#A1A1AA', 'stanjo-yellow': '#FFFFFF', 'stanjo-white': '#676767', 'stanjo-bg': '#1B1B1D', 'stanjo-border': '#434343', brand: { black: '#000000', dark: '#0B0B0B', gray: '#111111', zinc: '#A1A1AA', border: '#27272A', accent: '#FFFFFF' } }, gridTemplateColumns: { 'footer': '2fr 1fr 1fr 1fr', }, fontFamily: { sans: ['Inter', 'sans-serif'], heading: ['Venus Rising', 'sans-serif'] }, maxWidth: { 'container': '1320px', }, fontSize: { 'hero': '72px', } } } } </script> <style type="text/css"> * { font-family: 'Inter', sans-serif; } html, body { overflow-x: hidden; width: 100%; } body { background-color: #000000; color: #D1D5DB; } h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { color: #FFFFFF !important; } h1, h2, h4, h6, .font-heading { font-family: 'Venus Rising', sans-serif !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-weight: 300 !important; } /* Standardize text color for common tags */ p, li { color: #D1D5DB !important; } p { max-width: none !important; } .text-gray-400, .text-zinc-400, .text-stanjo-zinc { color: #D1D5DB !important; } .header-glass { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .container-custom { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .transition-base { transition: all 0.3s ease-in-out; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #111; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } </style> <?php if (isset($extraHead)) echo $extraHead; ?> </head> <body class="font-sans antialiased text-white bg-black"> <!-- Header --> <header class="fixed top-0 left-0 w-full h-[80px] bg-[#0a0a0a]/90 backdrop-blur-md border-b border-[#1a1a1a] z-50"> <div class="max-w-[1400px] mx-auto px-6 lg:px-10 h-full flex items-center justify-between"> <!-- Logo --> <div class="flex items-center gap-3"> <a href="index.php"> <img src="/assets/logo.png" class="h-12 md:h-16" alt="Stanjo Logo" onerror="this.src=''"> </a> </div> <!-- Desktop Navigation --> <nav class="hidden lg:flex items-center gap-12 text-[#e5e5e5] text-[13px] tracking-wide font-light"> <?php echo navLink('index', 'Home', 'index.php', $currentPage); ?> <?php echo navLink('about', 'About', 'about.php', $currentPage); ?> <!-- Mega Menu: Products --> <div class="group h-full flex items-center"> <a href="shop.php" class="hover:text-white transition py-8 flex items-center gap-1"> Products <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 group-hover:rotate-180 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </a> <!-- Mega Dropdown --> <div class="absolute top-[80px] left-0 w-screen bg-[#0d0d0d]/95 backdrop-blur-xl border-y border-white/5 opacity-0 invisible translate-y-4 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-300 z-50 py-12 px-6 lg:px-10"> <div class="max-w-[1400px] mx-auto"> <div class="grid grid-cols-5 gap-8 items-start"> <?php $menuCats = mysqli_query($conn, "SELECT * FROM categories WHERE status = 1 ORDER BY title ASC"); $allCats = []; while($c = mysqli_fetch_assoc($menuCats)) $allCats[] = $c; $chunks = array_chunk($allCats, ceil(count($allCats) / 4) ?: 1); for ($i = 0; $i < 4; $i++): $chunk = $chunks[$i] ?? []; ?> <div> <h4 class="text-white text-[11px] font-bold uppercase tracking-[2px] mb-6 border-b border-white/5 pb-3"> <?= $i == 0 ? 'Indoor Lights' : ($i == 1 ? 'Outdoor Lights' : ($i == 2 ? 'Decorative' : 'Industrial')) ?></h4> <ul class="space-y-4"> <?php foreach ($chunk as $cat): ?> <li><a href="shop.php?category=<?= htmlspecialchars($cat['slug']) ?>" class="text-stanjo-zinc hover:text-white transition text-sm font-light flex items-center gap-2 group/link"> <div class="w-1 h-1 rounded-none bg-white opacity-0 group-hover/link:opacity-100 transition-opacity"> </div><?= htmlspecialchars($cat['title']) ?> </a></li> <?php endforeach; ?> </ul> </div> <?php endfor; ?> <!-- Promotion Column --> <div class="flex flex-col items-center justify-center border-l border-white/5 pl-8 pr-4 min-h-[200px]"> <img src="assets/images/123.JPG" alt="10 Year Warranty" class="w-full max-w-[110px] object-contain"> </div> </div> </div> </div> </div> <?php echo navLink('blog', 'Blog', 'blog.php', $currentPage); ?> <?php echo navLink('contact', 'Contact Us', 'contact.php', $currentPage); ?> <!-- Search --> <div class="flex items-center mr-2"> <form action="shop.php" method="GET" class="relative group"> <input type="text" name="search" placeholder="Search..." class="bg-white/5 border border-white/10 py-1.5 pl-4 pr-10 text-[12px] w-[150px] focus:w-[200px] focus:outline-none focus:border-white/20 transition-all duration-300 placeholder:text-white/20"> <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white transition-colors"> <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </button> </form> </div> <!-- Account / Login --> <?php if (isset($_SESSION['customer_id'])): ?> <div class="relative group"> <button class="flex items-center gap-2 hover:text-white transition"> <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> </svg> <span class="max-w-[100px] truncate"> <?= htmlspecialchars(explode(' ', $_SESSION['customer_name'])[0] ?? 'Account') ?> </span> </button> <!-- Dropdown --> <div class="absolute right-0 mt-2 w-48 bg-[#1a1a1a] border border-white/10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> <a href="account.php" class="block px-4 py-3 hover:bg-white/5 transition">My Account</a> <a href="logout.php" class="block px-4 py-3 hover:bg-white/5 transition text-red-500">Logout</a> </div> </div> <?php else: ?> <a href="login.php" class="flex items-center gap-2 hover:text-white transition"> <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> </svg> <span>Login</span> </a> <?php endif; ?> <!-- Cart --> <?php $cartCount = 0; if (isset($_COOKIE['stnjo_cart'])) { $cartData = json_decode($_COOKIE['stnjo_cart'], true); if (is_array($cartData)) { $cartCount = array_sum(array_column($cartData, 'quantity')); } } ?> <a href="cart.php" class="<?php echo ($currentPage === 'cart') ? 'text-white' : 'hover:text-white'; ?> transition relative flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> </svg> <span id="cart-count" class="absolute -top-2 -right-2 bg-white text-black text-[10px] font-bold w-4 h-4 rounded-none flex items-center justify-center <?= $cartCount == 0 ? 'hidden' : '' ?>"> <?php echo $cartCount; ?> </span> </a> </nav> <!-- Mobile Cart & Menu Controls --> <div class="lg:hidden flex items-center gap-6"> <!-- Mobile Cart Icon --> <a href="cart.php" class="relative text-[#e5e5e5] hover:text-white transition"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> </svg> <span class="absolute -top-1.5 -right-1.5 bg-white text-black text-[10px] font-bold w-4 h-4 rounded-none flex items-center justify-center mobile-cart-count <?= $cartCount == 0 ? 'hidden' : '' ?>"> <?= $cartCount ?> </span> </a> <!-- Hamburger Button --> <button id="mobile-menu-btn" class="text-[#e5e5e5] hover:text-white transition"> <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </header> <!-- Search Overlay Removed --> <!-- Mobile Menu Drawer --> <div id="mobile-menu" class="fixed inset-0 bg-black/95 z-[60] transition-transform duration-500 translate-x-full lg:hidden overflow-y-auto overscroll-y-contain"> <button id="close-menu-btn" class="absolute top-6 right-6 text-white p-2"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="flex flex-col items-start justify-start pt-32 pl-10 pb-40 gap-8 text-2xl font-light tracking-widest w-full"> <!-- Mobile Search --> <div class="w-full pr-10 mb-4"> <form action="shop.php" method="GET" class="relative"> <input type="text" name="search" placeholder="Search products..." class="w-full bg-white/5 border border-white/10 py-3 px-4 text-sm text-white focus:outline-none focus:border-white/20"> <button type="submit" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/30"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </button> </form> </div> <a href="index.php" class="hover:text-stanjo-yellow transition">Home</a> <a href="about.php" class="hover:text-stanjo-yellow transition">About</a> <!-- Products Accordion for Mobile --> <div class="w-full"> <div class="flex items-center justify-between w-full pr-10"> <a href="shop.php" class="hover:text-stanjo-yellow transition">Products</a> <button id="mobile-products-toggle" class="p-2 text-white/50 hover:text-white transition"> <svg id="products-icon" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9l-7 7-7-7" /> </svg> </button> </div> <div id="mobile-products-submenu" class="hidden flex flex-col gap-8 pl-4 mt-8 border-l border-white/10 text-[18px]"> <?php // Group categories for mobile as well for ($i = 0; $i < 4; $i++): $chunk = $chunks[$i] ?? []; if(empty($chunk)) continue; ?> <div class="flex flex-col gap-4"> <span class="text-white font-medium uppercase text-sm tracking-[2px]"><?= $i == 0 ? 'Indoor Lights' : ($i == 1 ? 'Outdoor Lights' : ($i == 2 ? 'Decorative' : 'Industrial')) ?></span> <div class="flex flex-col gap-3 pl-2"> <?php foreach ($chunk as $cat): ?> <a href="shop.php?category=<?= htmlspecialchars($cat['slug']) ?>" class="text-stanjo-zinc hover:text-white transition"><?= htmlspecialchars($cat['title']) ?></a> <?php endforeach; ?> </div> </div> <?php endfor; ?> </div> </div> <a href="blog.php" class="hover:text-stanjo-yellow transition">Blog</a> <a href="contact.php" class="hover:text-stanjo-yellow transition">Contact Us</a> <!-- Mobile Account Links --> <div class="mt-8 pt-8 border-t border-white/10 w-full pr-10"> <?php if (isset($_SESSION['customer_id'])): ?> <div class="flex flex-col gap-6"> <span class="text-white/50 text-sm uppercase tracking-widest">Account</span> <a href="account.php" class="text-white hover:text-stanjo-yellow transition"><?= $_SESSION['customer_name'] ?></a> <a href="logout.php" class="text-red-500 hover:text-red-400 transition">Logout</a> </div> <?php else: ?> <a href="login.php" class="hover:text-stanjo-yellow transition flex items-center gap-3"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> </svg> Login </a> <?php endif; ?> </div> </div> </div> <script> const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const closeMenuBtn = document.getElementById('close-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.remove('translate-x-full'); document.body.style.overflow = 'hidden'; // Stop body scroll when menu is open }); closeMenuBtn.addEventListener('click', () => { mobileMenu.classList.add('translate-x-full'); document.body.style.overflow = ''; // Restore body scroll // Reset submenu on close if (document.getElementById('mobile-products-submenu')) { document.getElementById('mobile-products-submenu').classList.add('hidden'); document.getElementById('products-icon').classList.remove('rotate-180'); } }); // Toggle Products Submenu const productsToggle = document.getElementById('mobile-products-toggle'); const productsSubmenu = document.getElementById('mobile-products-submenu'); const productsIcon = document.getElementById('products-icon'); if (productsToggle) { productsToggle.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); productsSubmenu.classList.toggle('hidden'); productsIcon.classList.toggle('rotate-180'); }); } // Close menu on link click mobileMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('translate-x-full'); document.body.style.overflow = ''; }); }); </script> <!-- Global Cart JS --> <script> function addToCart(productId, quantity = 1, variantInfo = '') { const formData = new FormData(); formData.append('product_id', productId); formData.append('quantity', quantity); formData.append('variant_info', variantInfo); fetch('ajax/add_to_cart.php', { method: 'POST', body: formData }) .then(res => res.json()) .then(data => { if (data.success) { const cartCountElement = document.getElementById('cart-count'); const mobileCartCounts = document.querySelectorAll('.mobile-cart-count'); cartCountElement.innerText = data.cart_count; if (data.cart_count > 0) { cartCountElement.classList.remove('hidden'); } else { cartCountElement.classList.add('hidden'); } mobileCartCounts.forEach(el => { el.innerText = data.cart_count; if (data.cart_count > 0) { el.classList.remove('hidden'); } else { el.classList.add('hidden'); } }); // Optional: show a mini toast/alert const toast = document.createElement('div'); toast.className = 'fixed bottom-4 right-4 bg-stanjo-yellow text-black px-6 py-3 rounded shadow-lg z-50 font-medium transition-opacity duration-300'; toast.innerText = 'Added to cart successfully!'; document.body.appendChild(toast); setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 2000); } else { alert(data.message || 'Error adding to cart'); } }) .catch(err => { console.error(err); alert('An error occurred. Please try again.'); }); } </script>