File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090044/shop/includes/header.php

Back
<?php // includes/header.php - Responsive Navigation and layout setup require_once __DIR__ . '/helper.php'; require_once __DIR__ . '/../classes/Cart.php'; start_secure_session(); $cartCount = 0; if (isset($_SESSION['user_id'])) { $cartObj = new Cart(); $totals = $cartObj->getTotals($_SESSION['user_id']); $cartCount = $totals['total_items']; } ?> <!DOCTYPE html> <html lang="th" class="h-full bg-slate-950 text-slate-100"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="CMTC SHOP - ร้านค้าออนไลน์เสื้อผ้าแฟชั่นและไลฟ์สไตล์พรีเมียม จัดส่งรวดเร็ว ปลอดภัย ราคาดี"> <meta name="theme-color" content="#0f172a"> <title>CMTC SHOP - ร้านค้าเสื้อผ้าแฟชั่นออนไลน์พรีเมียม</title> <!-- Tailwind CSS Play CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { darkblue: { 900: '#0f172a', 950: '#020617' }, violet: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f59e0b', // Gold / Amber accent text highlight 500: '#ef4444', 600: '#b91c1c', // CMTC Crimson Red 700: '#991b1b', // Dark Red 800: '#7f1d1d', 900: '#450a0a', 950: '#180202' }, indigo: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', // Gold / Amber 500: '#f59e0b', 600: '#b45309', // Dark Gold for gradients 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#451a03' } }, keyframes: { slideDown: { '0%': { opacity: '0', transform: 'translateY(-8px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } }, fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } } }, animation: { slideDown: 'slideDown 0.2s ease-out', fadeIn: 'fadeIn 0.3s ease-out' } } } } </script> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Sarabun:wght@300;400;600;700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { font-family: 'Outfit', 'Sarabun', sans-serif; -webkit-tap-highlight-color: transparent; } .glass { background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); } /* Mobile menu slide animation / #mobile-menu { transition: max-height 0.3s ease, opacity 0.25s ease; max-height: 0; opacity: 0; overflow: hidden; } #mobile-menu.menu-open { max-height: 400px; opacity: 1; } / Smooth scroll / html { scroll-behavior: smooth; } / Touch-friendly tap targets / @media (max-width: 768px) { a, button { min-height: 44px; } .touch-target { min-height: 44px; display: flex; align-items: center; } } / Prevent horizontal overflow / body { overflow-x: hidden; } / Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #020617; } ::-webkit-scrollbar-thumb { background: #b91c1c; border-radius: 3px; } </style> </head> <body class="flex flex-col min-h-full bg-slate-950"> <!-- Navbar Header --> <header class="glass sticky top-0 z-50 w-full border-b border-slate-800 transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <!-- Logo --> <div class="flex-shrink-0"> <a href="index.php" class="flex items-center gap-3 text-xl font-black tracking-wide text-white"> <img src="assets/logo.svg" alt="CMTC Logo" class="h-10 w-10 object-contain rounded-xl shadow-md border border-amber-500/20" onerror="if(!this.dataset.tried){ this.dataset.tried='1'; this.src='รูป/logo.svg'; }"> <span class="bg-gradient-to-r from-violet-400 to-indigo-400 bg-clip-text text-transparent">CMTC SHOP</span> </a> </div> <!-- Desktop Navigation Links --> <div class="hidden md:flex items-center gap-6"> <a href="index.php" class="text-sm font-semibold hover:text-violet-400 transition-colors py-2">ร้านค้า</a> <!-- Cart Indicator --> <a href="cart.php" class="relative group p-2 hover:bg-slate-900 rounded-full transition-all duration-200"> <svg class="h-6 w-6 text-slate-300 group-hover:text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> <?php if ($cartCount > 0): ?> <span class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white ring-2 ring-slate-950 animate-pulse"> <?= $cartCount ?> </span> <?php endif; ?> </a> <!-- User Account / Logged in Info --> <?php if (isset($_SESSION['user_id'])): ?> <div class="flex items-center gap-3"> <?php if ($_SESSION['role'] === 'admin'): ?> <a href="admin.php" class="text-xs bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 hover:border-amber-500 text-amber-400 px-3 py-1.5 rounded-lg transition-all duration-200 font-medium"> จัดการร้านค้า 🛠️ </a> <?php endif; ?> <span class="text-sm text-slate-400"> สวัสดี, <span class="text-slate-200 font-semibold"><?= escape($_SESSION['first_name']) ?></span> </span> <a href="login.php?action=logout" class="text-xs bg-slate-900 hover:bg-red-950 hover:text-red-400 border border-slate-800 hover:border-red-900/40 text-slate-300 px-3 py-1.5 rounded-lg transition-all duration-200 font-medium"> ออกระบบ </a> </div> <?php else: ?> <a href="login.php" class="text-sm bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-xl transition-all duration-200 font-medium shadow-md shadow-violet-600/20"> เข้าสู่ระบบ </a> <?php endif; ?> </div> <!-- Mobile Header controls (Only cart and hamburger toggler) --> <div class="flex items-center gap-2 md:hidden"> <!-- Mobile Cart Indicator --> <a href="cart.php" class="relative group p-2 hover:bg-slate-900 rounded-full transition-all duration-200"> <svg class="h-6 w-6 text-slate-300 group-hover:text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> <?php if ($cartCount > 0): ?> <span class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white ring-2 ring-slate-950 animate-pulse"> <?= $cartCount ?> </span> <?php endif; ?> </a> <!-- Hamburger Button --> <button id="mobile-menu-btn" type="button" class="p-2 text-slate-400 hover:text-white focus:outline-none rounded-lg transition-colors"> <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path id="menu-icon-open" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> <path id="menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> </div> <!-- Mobile Drawer menu --> <div id="mobile-menu" class="md:hidden border-t border-slate-800 bg-slate-950/98 backdrop-blur-xl px-4 pb-4 pt-3 space-y-1"> <a href="index.php" class="flex items-center gap-3 text-sm font-semibold text-slate-200 hover:text-violet-400 hover:bg-slate-900/60 transition-all py-3 px-3 rounded-xl touch-target"> <span class="text-base">🛍️</span> ร้านค้า </a> <a href="cart.php" class="flex items-center gap-3 text-sm font-semibold text-slate-200 hover:text-violet-400 hover:bg-slate-900/60 transition-all py-3 px-3 rounded-xl touch-target"> <span class="text-base">🛒</span> ตะกร้าสินค้า <?php if ($cartCount > 0): ?> <span class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white"><?= $cartCount ?></span> <?php endif; ?> </a> <div class="border-t border-slate-800/60 my-2"></div> <?php if (isset($_SESSION['user_id'])): ?> <div class="px-3 py-2"> <div class="flex items-center gap-2 mb-3"> <div class="w-8 h-8 rounded-full bg-violet-600/30 border border-violet-500/30 flex items-center justify-center text-sm">👤</div> <div> <p class="text-xs text-slate-400 leading-none">สวัสดี,</p> <p class="text-sm text-slate-200 font-semibold"><?= escape($_SESSION['first_name']) ?></p> </div> </div> <?php if ($_SESSION['role'] === 'admin'): ?> <a href="admin.php" class="flex items-center justify-center gap-2 text-sm bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 hover:border-amber-500 text-amber-400 py-3 rounded-xl transition-all duration-200 font-medium w-full touch-target mb-2"> <span>🛠️</span> จัดการร้านค้า (Admin Panel) </a> <?php endif; ?> <a href="login.php?action=logout" class="flex items-center justify-center gap-2 text-sm bg-slate-900 hover:bg-red-950 hover:text-red-400 border border-slate-800 hover:border-red-900/40 text-slate-300 py-3 rounded-xl transition-all duration-200 font-medium w-full touch-target"> <span>🚪</span> ออกระบบ </a> </div> <?php else: ?> <div class="px-3 py-2 space-y-2"> <a href="login.php" class="flex items-center justify-center text-sm bg-violet-600 hover:bg-violet-500 text-white py-3 rounded-xl transition-all duration-200 font-semibold shadow-md shadow-violet-600/20 w-full touch-target"> เข้าสู่ระบบ </a> <a href="register.php" class="flex items-center justify-center text-sm bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-300 py-3 rounded-xl transition-all duration-200 font-medium w-full touch-target"> สมัครสมาชิก </a> </div> <?php endif; ?> </div> </header> <script> document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById('mobile-menu-btn'); const menu = document.getElementById('mobile-menu'); const openIcon = document.getElementById('menu-icon-open'); const closeIcon = document.getElementById('menu-icon-close'); if (btn && menu) { btn.addEventListener('click', () => { const isOpen = menu.classList.contains('menu-open'); if (!isOpen) { menu.classList.add('menu-open'); openIcon.classList.replace('inline-flex', 'hidden'); closeIcon.classList.replace('hidden', 'inline-flex'); btn.setAttribute('aria-expanded', 'true'); } else { menu.classList.remove('menu-open'); openIcon.classList.replace('hidden', 'inline-flex'); closeIcon.classList.replace('inline-flex', 'hidden'); btn.setAttribute('aria-expanded', 'false'); } }); // Close menu when clicking outside document.addEventListener('click', (e) => { if (!btn.contains(e.target) && !menu.contains(e.target)) { menu.classList.remove('menu-open'); openIcon.classList.remove('hidden'); openIcon.classList.add('inline-flex'); closeIcon.classList.remove('inline-flex'); closeIcon.classList.add('hidden'); btn.setAttribute('aria-expanded', 'false'); } }); } }); </script> <main class="flex-grow py-6 sm:py-8 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.22 | proxy | phpinfo | Settings