File manager

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

Back
<?php // index.php - Catalog homepage showing product items and quick actions ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL); require_once 'includes/helper.php'; require_once 'classes/Product.php'; require_once 'classes/Cart.php'; start_secure_session(); $productObj = new Product(); $products = $productObj->getAll(); $message = ''; $error = ''; $csrfToken = generate_csrf_token(); // Handle add-to-cart request if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'add_to_cart') { // Force Login to purchase if (!isset($_SESSION['user_id'])) { header("Location: login.php"); exit(); } $token = $_POST['csrf_token'] ?? ''; $productId = (int)($_POST['product_id'] ?? 0); $quantity = (int)($_POST['quantity'] ?? 1); $size = trim($_POST['size'] ?? 'Free Size'); if (!validate_csrf_token($token)) { $error = "ระบบความปลอดภัย: CSRF Token ไม่ถูกต้อง"; } else if ($productId <= 0 \|\| $quantity <= 0) { $error = "ข้อมูลสินค้าไม่ถูกต้อง"; } else { $cartObj = new Cart(); if ($cartObj->add($_SESSION['user_id'], $productId, $quantity, $size)) { $message = "เพิ่มสินค้าลงในตะกร้าสำเร็จแล้ว! 🛒"; // Refresh counts in header header("Location: index.php?success=" . urlencode($message)); exit(); } else { $error = "ไม่สามารถเพิ่มสินค้าได้ (สต็อกไม่เพียงพอหรือไม่มีสินค้านี้)"; } } } if (isset($_GET['success'])) { $message = $_GET['success']; } function get_product_emoji($name) { $name = mb_strtolower($name, 'UTF-8'); if (strpos($name, 'เสื้อ') !== false \|\| strpos($name, 'shirt') !== false \|\| strpos($name, 'hoodie') !== false) { return '👕'; } else if (strpos($name, 'กางเกง') !== false \|\| strpos($name, 'jeans') !== false) { return '👖'; } else if (strpos($name, 'หมวก') !== false \|\| strpos($name, 'cap') !== false) { return '🧢'; } else if (strpos($name, 'รองเท้า') !== false \|\| strpos($name, 'sneakers') !== false) { return '👟'; } else if (strpos($name, 'กระเป๋า') !== false \|\| strpos($name, 'backpack') !== false) { return '🎒'; } else if (strpos($name, 'แว่น') !== false \|\| strpos($name, 'sunglasses') !== false) { return '🕶️'; } return '🛍️'; } require_once 'includes/header.php'; ?> <!-- Hero Banner --> <div class="mb-8 sm:mb-10 rounded-2xl sm:rounded-3xl relative overflow-hidden group border border-amber-500/20 shadow-2xl bg-black" style="min-height: 320px;"> <!-- Background Image with Couple on the Right --> <img src="assets/banner/hero.jpg" alt="CMTC SHOP Banner" class="absolute inset-0 w-full h-full object-cover object-right sm:object-center transition-transform duration-700 group-hover:scale-105" onerror="if(!this.dataset.tried){ this.dataset.tried='1'; this.src='รูป/banner/hero.jpg'; }"> <!-- Smooth Left Vignette & Gradient Overlay --> <div class="absolute inset-0 bg-gradient-to-r from-black via-black/75 via-50% to-transparent"></div> <!-- Outer Gold Framing Line --> <div class="absolute inset-0 rounded-2xl sm:rounded-3xl border border-amber-400/25 pointer-events-none m-2 sm:m-3"></div> <!-- Content Section --> <div class="relative z-10 p-6 sm:p-10 lg:p-14 flex flex-col justify-center" style="min-height: 320px;"> <div class="max-w-xl"> <!-- Badge --> <div class="inline-flex items-center gap-1.5 px-3.5 py-1 bg-amber-950/60 text-amber-300 border border-amber-500/40 rounded-full text-xs font-semibold uppercase tracking-wider mb-4 shadow-lg backdrop-blur-md"> <span class="text-amber-300">✦</span> คอลเลกชันใหม่ </div> <!-- Headline --> <h1 class="text-2xl sm:text-4xl lg:text-5xl font-black tracking-tight mt-1 mb-3 leading-tight text-transparent bg-clip-text bg-gradient-to-b from-[#fff5db] via-[#edd08a] to-[#c59a3f] drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)]"> แต่งตัวอย่างมีสไตล์ในทุกวัน </h1> <!-- Subtitle --> <p class="text-[#cfc2a9] text-xs sm:text-sm md:text-base leading-relaxed mb-6 max-w-lg font-normal drop-shadow"> เลือกซื้อเสื้อผ้าแฟชั่นและเครื่องประดับพรีเมียม สั่งซื้อง่าย รวดเร็ว ปลอดภัย พร้อมระบบชำระเงินนับถอยหลัง 20 นาที </p> <!-- CTA Buttons --> <div class="flex flex-wrap items-center gap-3"> <a href="#products" class="inline-flex items-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 text-xs sm:text-sm font-bold rounded-xl transition-all duration-300 active:scale-95 shadow-xl bg-gradient-to-r from-[#e3b865] via-[#cda24e] to-[#b3832d] text-[#1c1200] hover:brightness-110 hover:shadow-amber-500/20"> ดูสินค้าทั้งหมด <span>↓</span> </a> <a href="cart.php" class="inline-flex items-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 text-xs sm:text-sm font-semibold rounded-xl transition-all duration-300 active:scale-95 backdrop-blur-md bg-black/40 border border-amber-500/40 text-amber-200 hover:bg-amber-500/10 hover:border-amber-400"> ตะกร้า 🛒 </a> </div> </div> </div> </div> <?php if ($message): ?> <div class="bg-emerald-950/60 border border-emerald-800 text-emerald-300 p-4 rounded-2xl text-sm mb-8"> 🎉 <?= escape($message) ?> </div> <?php endif; ?> <?php if ($error): ?> <div class="bg-red-950/60 border border-red-800 text-red-300 p-4 rounded-2xl text-sm mb-8 animate-pulse"> ⚠️ <?= escape($error) ?> </div> <?php endif; ?> <!-- Floating Manual Button --> <button onclick="document.getElementById('manualModal').classList.remove('hidden')" class="fixed bottom-6 right-6 z-50 bg-amber-500 hover:bg-amber-400 text-slate-900 w-12 h-12 sm:w-14 sm:h-14 rounded-full shadow-[0_0_15px_rgba(245,158,11,0.5)] flex items-center justify-center transition-transform hover:scale-110 active:scale-95 group border-2 border-amber-300"> <span class="text-2xl sm:text-3xl drop-shadow-md">📖</span> <span class="absolute right-16 bg-black/90 text-amber-300 text-xs sm:text-sm px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-amber-500/50 shadow-lg backdrop-blur-sm pointer-events-none">คู่มือการใช้งาน</span> </button> <!-- User Manual Modal --> <div id="manualModal" class="fixed inset-0 z-[60] hidden bg-black/75 backdrop-blur-md flex items-center justify-center p-4 opacity-0 transition-opacity duration-300" style="display: none;"> <div class="bg-slate-900 border border-amber-500/30 rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto relative transform scale-95 transition-transform duration-300" id="manualModalContent"> <!-- Close Button --> <button onclick="closeManualModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white bg-slate-800 hover:bg-slate-700 hover:rotate-90 transition-all rounded-full w-8 h-8 flex items-center justify-center border border-slate-700 shadow-md z-10"> ✕ </button> <!-- Modal Content --> <div class="p-5 sm:p-8"> <h2 class="text-xl sm:text-2xl font-bold text-amber-400 mb-4 sm:mb-6 tracking-tight flex items-center gap-2 border-b border-slate-800 pb-4"> <span class="text-2xl">📖</span> คู่มือการใช้งานสำหรับลูกค้า </h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6"> <!-- Step 1 --> <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors"> <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2"> <span class="text-lg">1️⃣</span> การเข้าสู่ระบบ / สมัครสมาชิก </h3> <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside"> <li><strong class="text-slate-200">เข้าสู่ระบบ:</strong> กรอกชื่อผู้ใช้และรหัสผ่านเพื่อเข้าใช้งาน<br><span class="text-[10px] sm:text-xs text-amber-200/70 ml-4 inline-block mt-1 bg-amber-900/20 px-2 py-0.5 rounded border border-amber-900/30">(บัญชีทดสอบ: <code>69319090044</code> หรือ <code>somchai_dev</code> รหัสผ่าน <code>password123</code>)</span></li> <li><strong class="text-slate-200">สมัครสมาชิก:</strong> กรอกข้อมูลพื้นฐานเพื่อสร้างบัญชีใหม่</li> </ul> </div> <!-- Step 2 --> <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors"> <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2"> <span class="text-lg">2️⃣</span> การเลือกดูและสั่งซื้อสินค้า </h3> <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside"> <li>เข้าสู่หน้าหลักเพื่อเลือกดูสินค้าแนะนำ</li> <li>เลือกระบุ <strong class="text-slate-200">ขนาด (Size)</strong> ที่ต้องการในหน้าแรก</li> <li>กดปุ่ม <strong class="text-slate-200">"หยิบใส่ตะกร้า 🛒"</strong> สินค้าจะถูกบันทึกลงตะกร้าทันที</li> </ul> </div> <!-- Step 3 --> <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors"> <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2"> <span class="text-lg">3️⃣</span> การจัดการตะกร้าสินค้า </h3> <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside"> <li><strong class="text-slate-200">ปรับจำนวนสินค้า:</strong> เพิ่ม/ลดจำนวนชิ้น หรือลบรายการสินค้าได้</li> <li><strong class="text-slate-200">สรุปยอดเงิน:</strong> ระบบคำนวณยอดรวมสุทธิพร้อมส่งฟรีให้อัตโนมัติ</li> <li><strong class="text-slate-200">ยืนยันสั่งซื้อ:</strong> กดปุ่ม "สั่งซื้อและดำเนินการชำระเงิน →"</li> </ul> </div> <!-- Step 4 --> <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors"> <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2"> <span class="text-lg">4️⃣</span> การชำระเงิน </h3> <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside"> <li>ระบบจะเริ่ม <strong class="text-amber-400">นับเวลาถอยหลัง 20 นาที</strong> แบบ Real-time</li> <li>รองรับการชำระเงินผ่าน <strong class="text-slate-200">PromptPay</strong> และ <strong class="text-slate-200">บัตรเครดิต</strong></li> <li>กด <strong class="text-slate-200">"ยืนยันการชำระเงินสำเร็จ"</strong> เพื่อเสร็จสิ้น</li> <li class="text-red-400 text-[10px] sm:text-xs pt-1">⚠️ หากไม่ชำระภายในเวลา ระบบจะตัดออเดอร์อัตโนมัติ</li> </ul> </div> </div> <div class="mt-8 text-center"> <button onclick="closeManualModal()" class="px-8 py-2.5 bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 text-slate-900 font-bold rounded-xl transition-all shadow-lg hover:shadow-amber-500/30 active:scale-95"> เข้าใจแล้ว ปิดหน้าต่าง </button> </div> </div> </div> </div> <!-- Add JS for closing modal on backdrop click and opening it smoothly --> <script> const manualModal = document.getElementById('manualModal'); const manualModalContent = document.getElementById('manualModalContent'); // Override the open button onclick document.querySelector('button[onclick="document.getElementById(\\\'manualModal\\\').classList.remove(\\\'hidden\\\')"]').onclick = function() { manualModal.style.display = 'flex'; setTimeout(() => { manualModal.classList.remove('hidden'); manualModal.classList.remove('opacity-0'); manualModal.classList.add('opacity-100'); manualModalContent.classList.remove('scale-95'); manualModalContent.classList.add('scale-100'); }, 10); }; function closeManualModal() { manualModal.classList.remove('opacity-100'); manualModal.classList.add('opacity-0'); manualModalContent.classList.remove('scale-100'); manualModalContent.classList.add('scale-95'); setTimeout(() => { manualModal.style.display = 'none'; }, 300); // Wait for transition } manualModal.addEventListener('click', function(e) { if (e.target === this) { closeManualModal(); } }); </script> <!-- Products Grid Layout --> <h2 id="products" class="text-xl sm:text-2xl font-bold text-white mb-4 sm:mb-6 tracking-tight scroll-mt-20">สินค้าแนะนำ</h2> <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-5"> <?php foreach ($products as $product): ?> <div class="glass rounded-2xl sm:rounded-3xl p-3 sm:p-5 flex flex-col justify-between hover:scale-[1.02] transition-transform duration-300 shadow-xl group cursor-default"> <div> <?php $imgSrc = get_product_image_url($product['image_url'] ?? $product['image'] ?? '', $product['name'] ?? ''); ?> <div class="aspect-square bg-slate-900 border border-slate-800 rounded-xl overflow-hidden flex items-center justify-center relative"> <?php if (!empty($imgSrc)): ?> <img src="<?= escape($imgSrc) ?>" alt="<?= escape($product['name']) ?>" class="w-full h-full object-cover" onerror="if(!this.dataset.tried){ this.dataset.tried='1'; this.src=(this.src.indexOf('assets/')!==-1 ? this.src.replace('assets/','รูป/') : this.src.replace('รูป/','assets/')); } else { this.style.display='none'; if(this.nextElementSibling) this.nextElementSibling.style.display='flex'; }"> <div class="w-full h-full hidden items-center justify-center bg-slate-900"> <span class="text-3xl sm:text-5xl">📦</span> </div> <?php else: ?> <span class="text-3xl sm:text-5xl">📦</span> <?php endif; ?> </div> <!-- Detail --> <h3 class="text-xs sm:text-sm font-bold text-slate-100 group-hover:text-violet-400 transition-colors line-clamp-2 leading-snug" title="<?= escape($product['name']) ?>"><?= escape($product['name']) ?></h3> <p class="text-[10px] sm:text-xs text-slate-400 line-clamp-2 mt-1 mb-3 sm:mb-4 leading-relaxed hidden sm:block"><?= escape($product['description']) ?></p> </div> <div class="mt-3 sm:mt-0"> <div class="flex items-center justify-between mb-2.5 sm:mb-4"> <span class="text-sm sm:text-lg font-black text-violet-400"><?= format_price($product['price']) ?></span> </div> <!-- Add to Cart Form --> <form action="index.php" method="POST"> <input type="hidden" name="csrf_token" value="<?= escape($csrfToken) ?>"> <input type="hidden" name="action" value="add_to_cart"> <input type="hidden" name="product_id" value="<?= $product['id'] ?>"> <input type="hidden" name="quantity" value="1"> <!-- Size Selector --> <div class="mb-2"> <select name="size" class="w-full px-2.5 py-1.5 bg-slate-900 border border-slate-800 focus:border-violet-500 rounded-lg text-[10px] sm:text-xs text-slate-200 outline-none transition-all"> <?php $sizes = ['Free Size', 'XS', 'S', 'M', 'L', 'XL', 'XXL']; $defaultSize = $product['size'] ?? 'Free Size'; foreach ($sizes as $s): ?> <option value="<?= escape($s) ?>" <?= $defaultSize === $s ? 'selected' : '' ?>><?= escape($s) ?></option> <?php endforeach; ?> </select> </div> <button type="submit" <?= $product['stock'] <= 0 ? 'disabled' : '' ?> class="w-full py-2 sm:py-2.5 bg-slate-900 border border-slate-800 text-[10px] sm:text-sm font-semibold rounded-xl text-slate-200 transition-all duration-200 <?= $product['stock'] > 0 ? 'hover:bg-violet-600 hover:border-violet-500 hover:text-white cursor-pointer active:scale-95 shadow-md shadow-violet-600/5' : 'opacity-40 cursor-not-allowed' ?>"> <?= $product['stock'] > 0 ? 'หยิบใส่ตะกร้า 🛒' : 'หมดชั่วคราว' ?> </button> </form> </div> </div> <?php endforeach; ?> </div> <?php require_once 'includes/footer.php'; ?>

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