File manager - Edit - /home/webapp69.cm.in.th/u69319090028/Shop/views/home/index.php
Back
<!-- Hero Showcase & Product Discovery Header --> <div class="p-4 p-md-5 mb-5 bg-white rounded-4 border shadow-sm"> <div class="row align-items-center g-4"> <div class="col-lg-7"> <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill mb-3 fw-semibold"> <i class="bi bi-shield-check me-1"></i> Official Multi-Vendor Marketplace </span> <h1 class="display-6 fw-bold text-dark mb-3"> ตลาดออนไลน์สินค้าคุณภาพ ช้อปมั่นใจที่ <span class="text-primary">CARGOO</span> </h1> <p class="lead text-secondary fs-6 mb-4"> ศูนย์รวมร้านค้าและสินค้าคุณภาพจากผู้ขายที่ผ่านการตรวจสอบ การันตีความปลอดภัยทุกคำสั่งซื้อ </p> <!-- Search Input in Hero Area --> <form action="<?= url('/search') ?>" method="GET" class="mb-2" style="max-width: 520px;"> <div class="input-group input-group-lg"> <span class="input-group-text bg-white border-end-0 ps-3 text-muted"> <i class="bi bi-search"></i> </span> <input type="text" name="q" class="form-control border-start-0 ps-2" placeholder="<?= __('search_placeholder') ?>" aria-label="Search Products"> <button class="btn btn-cargoo-primary px-4 fw-semibold" type="submit"> <?= __('search_products') ?> </button> </div> </form> </div> <div class="col-lg-5 text-center"> <div class="p-4 bg-light rounded-4 border"> <!-- Official Brand Logo (Vertical Blue) --> <img src="<?= asset('/assets/images/brand/logo1-blue.png') ?>" alt="CARGOO Online Shopping" style="max-height: 170px; width: auto;" class="img-fluid mb-3"> <div class="d-flex justify-content-center flex-wrap gap-2"> <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1"><i class="bi bi-shield-check me-1"></i> ปลอดภัย 100%</span> <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1"><i class="bi bi-patch-check me-1"></i> ร้านค้าทางการ</span> <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle px-2 py-1"><i class="bi bi-truck me-1"></i> จัดส่งทั่วไทย</span> </div> </div> </div> </div> </div> <!-- 1. Categories 2-Row Horizontal Carousel --> <?php if (!empty($categories)): ?> <div class="mb-5 category-carousel-section"> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="fw-bold mb-0 text-dark"> <i class="bi bi-grid-fill me-2 text-primary"></i> <?= __('all_categories') ?> </h5> <div class="d-flex align-items-center gap-2"> <button type="button" class="btn btn-sm btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center p-0" id="catHeaderPrev" style="width: 32px; height: 32px;" aria-label="Previous" title="หมวดหมู่ก่อนหน้า" disabled> <i class="bi bi-chevron-left"></i> </button> <button type="button" class="btn btn-sm btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center p-0" id="catHeaderNext" style="width: 32px; height: 32px;" aria-label="Next" title="หมวดหมู่ถัดไป"> <i class="bi bi-chevron-right"></i> </button> <a href="<?= url('/search') ?>" class="text-primary text-decoration-none small fw-semibold ms-2"> ดูทั้งหมด <i class="bi bi-arrow-right"></i> </a> </div> </div> <div class="cargoo-cat-carousel-outer position-relative"> <!-- Left Floating Navigation Arrow --> <button type="button" class="cargoo-cat-arrow-btn cargoo-cat-arrow-prev" id="catSidePrev" aria-label="Previous categories" title="หมวดหมู่ก่อนหน้า" disabled> <i class="bi bi-chevron-left"></i> </button> <!-- 2-Row Horizontal Grid Container --> <div class="cargoo-cat-2rows-grid" id="categoryScrollTrack"> <?php foreach ($categories as $cat): ?> <a href="<?= url('/category/' . $cat['slug']) ?>" class="cargoo-cat-card text-decoration-none"> <div class="cargoo-cat-icon"> <i class="bi <?= !empty($cat['icon']) ? e($cat['icon']) : 'bi-box-seam' ?>"></i> </div> <span class="cargoo-cat-name"><?= e($cat['name']) ?></span> <span class="cargoo-cat-count"><?= (int)$cat['product_count'] ?> <?= __('pieces') ?></span> </a> <?php endforeach; ?> </div> <!-- Right Floating Navigation Arrow --> <button type="button" class="cargoo-cat-arrow-btn cargoo-cat-arrow-next" id="catSideNext" aria-label="Next categories" title="หมวดหมู่ถัดไป"> <i class="bi bi-chevron-right"></i> </button> </div> </div> <style> /* 2-Row Horizontal Category Grid Carousel */ .category-carousel-section { position: relative; width: 100%; } .cargoo-cat-carousel-outer { position: relative; width: 100%; } .cargoo-cat-2rows-grid { display: grid !important; grid-template-rows: repeat(2, 108px) !important; grid-auto-flow: column !important; grid-auto-columns: calc((100% - 5 * 12px) / 6) !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; padding: 4px 2px !important; box-sizing: border-box !important; width: 100% !important; } .cargoo-cat-2rows-grid::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .cargoo-cat-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 8px 6px !important; text-align: center !important; height: 108px !important; min-height: 108px !important; max-height: 108px !important; width: 100% !important; box-sizing: border-box !important; scroll-snap-align: start !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; text-decoration: none !important; user-select: none !important; } .cargoo-cat-card:hover { border-color: #1877f2 !important; background-color: rgba(24, 119, 242, 0.04) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 14px rgba(24, 119, 242, 0.12) !important; } .cargoo-cat-icon { height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 4px !important; } .cargoo-cat-icon i { font-size: 1.65rem !important; color: #1877f2 !important; transition: transform 0.2s ease !important; } .cargoo-cat-card:hover .cargoo-cat-icon i { transform: scale(1.12) !important; } .cargoo-cat-name { font-size: 0.775rem !important; font-weight: 600 !important; color: #1e293b !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; width: 100% !important; margin-bottom: 2px !important; } .cargoo-cat-card:hover .cargoo-cat-name { color: #1877f2 !important; } .cargoo-cat-count { font-size: 0.675rem !important; color: #64748b !important; } /* Floating Side Navigation Arrows */ .cargoo-cat-arrow-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; color: #334155 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; } .cargoo-cat-arrow-btn:hover:not(:disabled) { background-color: #1877f2 !important; border-color: #1877f2 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35) !important; } .cargoo-cat-arrow-btn:disabled { opacity: 0 !important; pointer-events: none !important; } .cargoo-cat-arrow-prev { left: -16px !important; } .cargoo-cat-arrow-next { right: -16px !important; } /* Responsive Columns (Strict 2-Rows Always) */ @media (min-width: 1200px) { .cargoo-cat-2rows-grid { grid-auto-columns: calc((100% - 5 * 12px) / 6) !important; /* 6 cols */ } } @media (min-width: 992px) and (max-width: 1199.98px) { .cargoo-cat-2rows-grid { grid-auto-columns: calc((100% - 4 * 12px) / 5) !important; /* 5 cols */ } .cargoo-cat-arrow-prev { left: -10px !important; } .cargoo-cat-arrow-next { right: -10px !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .cargoo-cat-2rows-grid { grid-auto-columns: calc((100% - 3 * 10px) / 4) !important; /* 4 cols */ gap: 10px !important; grid-template-rows: repeat(2, 102px) !important; } .cargoo-cat-card { height: 102px !important; min-height: 102px !important; max-height: 102px !important; } .cargoo-cat-arrow-prev { left: -8px !important; } .cargoo-cat-arrow-next { right: -8px !important; } } @media (min-width: 576px) and (max-width: 767.98px) { .cargoo-cat-2rows-grid { grid-auto-columns: calc((100% - 2 * 8px) / 3) !important; /* 3 cols */ gap: 8px !important; grid-template-rows: repeat(2, 98px) !important; } .cargoo-cat-card { height: 98px !important; min-height: 98px !important; max-height: 98px !important; padding: 6px 4px !important; } .cargoo-cat-icon { height: 26px !important; } .cargoo-cat-icon i { font-size: 1.35rem !important; } .cargoo-cat-name { font-size: 0.725rem !important; } .cargoo-cat-arrow-btn { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; } .cargoo-cat-arrow-prev { left: -6px !important; } .cargoo-cat-arrow-next { right: -6px !important; } } @media (max-width: 575.98px) { .cargoo-cat-2rows-grid { grid-auto-columns: calc((100% - 1.5 * 8px) / 2.5) !important; /* 2.5 cols */ gap: 8px !important; grid-template-rows: repeat(2, 95px) !important; } .cargoo-cat-card { height: 95px !important; min-height: 95px !important; max-height: 95px !important; padding: 6px 4px !important; } .cargoo-cat-icon { height: 24px !important; } .cargoo-cat-icon i { font-size: 1.3rem !important; } .cargoo-cat-name { font-size: 0.7rem !important; } .cargoo-cat-arrow-btn { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; } .cargoo-cat-arrow-prev { left: -4px !important; } .cargoo-cat-arrow-next { right: -4px !important; } } </style> <script> document.addEventListener('DOMContentLoaded', function() { const track = document.getElementById('categoryScrollTrack'); const prevBtns = [document.getElementById('catHeaderPrev'), document.getElementById('catSidePrev')]; const nextBtns = [document.getElementById('catHeaderNext'), document.getElementById('catSideNext')]; if (!track) return; function updateNavButtons() { const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth); const current = track.scrollLeft; const atStart = current <= 4; const atEnd = current >= maxScroll - 4; prevBtns.forEach(btn => { if (btn) btn.disabled = atStart; }); nextBtns.forEach(btn => { if (btn) btn.disabled = atEnd; }); } function getScrollStep() { // Scroll by ~80% of visible container width return track.clientWidth * 0.8; } prevBtns.forEach(btn => { if (btn) { btn.addEventListener('click', function() { track.scrollBy({ left: -getScrollStep(), behavior: 'smooth' }); }); } }); nextBtns.forEach(btn => { if (btn) { btn.addEventListener('click', function() { track.scrollBy({ left: getScrollStep(), behavior: 'smooth' }); }); } }); track.addEventListener('scroll', updateNavButtons, { passive: true }); window.addEventListener('resize', updateNavButtons, { passive: true }); // Initial check setTimeout(updateNavButtons, 60); }); </script> <?php endif; ?> <!-- 2. Product Recommendations (Featured Products) --> <?php if (!empty($featured_products)): ?> <div class="mb-5"> <div class="d-flex justify-content-between align-items-center mb-3"> <div> <h5 class="fw-bold mb-0 text-dark"> <i class="bi bi-stars me-2 text-primary"></i> สินค้าแนะนำยอดนิยม (Featured Products) </h5> </div> <a href="<?= url('/search?sort=popular') ?>" class="text-primary text-decoration-none small fw-semibold"> ดูทั้งหมด <i class="bi bi-arrow-right"></i> </a> </div> <!-- Responsive Product Grid: 2 cols Mobile, 3-4 cols Tablet, 4-6 cols Desktop --> <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3"> <?php foreach ($featured_products as $p): ?> <?php $product = $p; require __DIR__ . '/../components/product_card.php'; ?> <?php endforeach; ?> </div> </div> <?php endif; ?> <!-- 3. Featured Stores --> <?php if (!empty($stores)): ?> <div class="mb-5"> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="fw-bold mb-0 text-dark"> <i class="bi bi-shop me-2 text-primary"></i> ร้านค้าแนะนำ (Featured Stores) </h5> </div> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3"> <?php foreach ($stores as $store): ?> <div class="col"> <div class="cargoo-card p-3 h-100 d-flex flex-column justify-content-between"> <div class="d-flex align-items-center gap-3 mb-2"> <?php if (!empty($store['logo'])): ?> <img src="<?= asset('/uploads/stores/' . e($store['logo'])) ?>" alt="<?= e($store['store_name']) ?>" class="rounded-circle border" style="width: 46px; height: 46px; object-fit: cover;"> <?php else: ?> <div class="rounded-circle bg-primary-subtle text-primary d-flex align-items-center justify-content-center fw-bold" style="width: 46px; height: 46px;"> <i class="bi bi-shop fs-5"></i> </div> <?php endif; ?> <div class="overflow-hidden"> <h6 class="fw-bold text-dark mb-0 text-truncate"><?= e($store['store_name']) ?></h6> <?php if (!empty($store['verified_at'])): ?> <span class="badge bg-primary-subtle text-primary border border-primary-subtle small px-2 py-0" style="font-size: 0.65rem;"> <i class="bi bi-patch-check-fill"></i> Official </span> <?php endif; ?> </div> </div> <p class="text-muted small mb-3 text-truncate-2" style="font-size: 0.8rem; min-height: 2.4em;"> <?= e($store['description'] ?? 'ร้านค้าคุณภาพบน CARGOO Marketplace') ?> </p> <div class="d-flex justify-content-between align-items-center pt-2 border-top"> <small class="text-muted"><?= (int)$store['total_products'] ?> สินค้า</small> <a href="<?= url('/shop/' . $store['store_slug']) ?>" class="btn btn-outline-primary btn-sm px-3 py-1"> <?= __('visit_store') ?> </a> </div> </div> </div> <?php endforeach; ?> </div> </div> <?php endif; ?> <!-- 4. Latest Arrivals Product Grid --> <?php if (!empty($latest_products)): ?> <div class="mb-5"> <div class="d-flex justify-content-between align-items-center mb-3"> <div> <h5 class="fw-bold mb-0 text-dark"> <i class="bi bi-box-seam me-2 text-primary"></i> สินค้ามาใหม่ล่าสุด (Latest Arrivals) </h5> </div> <a href="<?= url('/search?sort=latest') ?>" class="text-primary text-decoration-none small fw-semibold"> ดูทั้งหมด <i class="bi bi-arrow-right"></i> </a> </div> <!-- Responsive Product Grid: 2 cols Mobile, 3-4 cols Tablet, 4-6 cols Desktop --> <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3"> <?php foreach ($latest_products as $p): ?> <?php $product = $p; require __DIR__ . '/../components/product_card.php'; ?> <?php endforeach; ?> </div> </div> <?php endif; ?>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.23 |
proxy
|
phpinfo
|
Settings