File manager

File manager - Edit - /var/www/order.cmtc.ac.th/index4.php

Back
<?php include('config/db.php'); // ✅ ดึงสถานะระบบจองจากตาราง settings $setting = $conn->query("SELECT setting_value FROM settings WHERE setting_key='booking_status'")->fetch_assoc(); $booking_status = $setting['setting_value'] ?? 'on'; // ✅ ดึงรายการสินค้า $products = $conn->query("SELECT * FROM products ORDER BY id ASC"); ?> <!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <title><?=$system_name?> <?=$school_name?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Kanit', sans-serif; background-color: #faf7f2; } .navbar { background: linear-gradient(45deg, #6d4c41, #8d6e63); } .navbar-brand { font-weight: 600; color: #fff !important; font-size: 1.3rem; } .hero { background: url('images/temple_bg.jpg') center/cover no-repeat; color: white; text-align: center; padding: 100px 15px; position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.55); } .hero-content { position: relative; z-index: 2; } .hero h1 { font-size: 2.6rem; font-weight: 700; color: #ffd54f; text-shadow: 0 0 15px rgba(255,215,0,0.9); animation: glowText 3s infinite alternate; } @keyframes glowText { from { text-shadow: 0 0 10px rgba(255,215,0,0.5); } to { text-shadow: 0 0 25px rgba(255,235,59,1); } } .card { border: none; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform .3s, box-shadow .3s; } .card:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } .product-image { width: 48%; position: relative; overflow: hidden; } .product-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 0.4s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .product-image:hover img { transform: scale(1.06); box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .img-label { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; padding: 2px 8px; border-radius: 8px; font-size: 13px; } .btn-gold { background: linear-gradient(45deg, #c9a23f, #ffca28); color: #000; font-weight: 600; border: none; } .btn-gold:hover { background: linear-gradient(45deg, #ffca28, #d4af37); } footer { background-color: #3e2723; color: #f5f5f5; text-align: center; padding: 20px 10px; margin-top: 50px; } @media (max-width: 576px) { .product-image { width: 100%; } } .product-images { display: flex; justify-content: center; align-items: flex-start; gap: 10px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #d4af37 transparent; } .product-images::-webkit-scrollbar { height: 6px; } .product-images::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 10px; } .product-image { flex: 0 0 auto; width: 45%; scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 10px; } .product-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; transition: transform 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .product-image:hover img { transform: scale(1.05); } .img-label { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 13px; } /* 📱 บนมือถือ - ให้สามารถปัดดูได้ */ @media (max-width: 576px) { .product-images { overflow-x: scroll; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 5px; } .product-image { width: 70%; max-width: 200px; } } </style> </head> <body> <audio id="templeBell" preload="auto"> <source src="sounds/temple_bell.mp3" type="audio/mpeg"> </audio> <nav class="navbar navbar-expand-lg navbar-dark shadow-sm"> <div class="container"> <a class="navbar-brand" href="#">🪙 <?=$system_name?></a> <div class="ms-auto d-flex gap-2"> <a href="user/check_status.php" class="btn btn-outline-light btn-sm">ตรวจสอบสถานะ</a> <a href="admin/index.php" class="btn btn-outline-warning btn-sm">เข้าสู่ระบบผู้ดูแล</a> </div> </div> </nav> <section class="hero"> <div class="hero-content"> <img src="uploads/logo_cmtc.png" width="100" alt="โลโก้วิทยาลัย" class="mb-3"> <h1><?=$system_name?></h1> <p>“ร่วมเป็นส่วนหนึ่งแห่งบุญ กับวิทยาลัยเทคนิคเชียงใหม่”</p> <a href="#products" class="btn btn-gold mt-3 px-4 py-2">ดูรายการเหรียญ</a> </div> </section> <div class="container py-5" id="products"> <h3 class="text-center mb-4 text-brown">🪙 รายการเหรียญที่เปิดให้จอง</h3> <?php if($booking_status == 'off'): ?> <div class="alert alert-danger text-center fs-5 fw-bold mb-4"> ⛔ ขณะนี้ระบบปิดการจองเหรียญชั่วคราว<br>กรุณาติดต่อเจ้าหน้าที่หรือตรวจสอบภายหลัง </div> <?php endif; ?> <div class="row g-4"> <?php while($row = $products->fetch_assoc()): ?> <div class="col-md-4 col-sm-6"> <div class="card h-100 text-center p-2"> <h5 class="fw-bold mt-2 mb-3"><?=$row['name']?></h5> <div class="d-flex flex-wrap justify-content-center align-items-start gap-2"> <?php if($row['img1']): ?> <div class="position-relative product-image"> <a href="uploads/products/<?=$row['img1']?>" data-lightbox="product<?=$row['id']?>" data-title="ด้านหน้า: <?=$row['name']?>"> <img src="uploads/products/<?=$row['img1']?>" alt="ด้านหน้า"> <div class="img-label">ด้านหน้า</div> </a> </div> <?php endif; ?> <?php if($row['img2']): ?> <div class="position-relative product-image"> <a href="uploads/products/<?=$row['img2']?>" data-lightbox="product<?=$row['id']?>" data-title="ด้านหลัง: <?=$row['name']?>"> <img src="uploads/products/<?=$row['img2']?>" alt="ด้านหลัง"> <div class="img-label">ด้านหลัง</div> </a> </div> <?php endif; ?> </div> <div class="mt-3"> <p class="text-muted mb-1">ราคา <?=number_format($row['price'],2)?> บาท</p> <?php if($row['stock'] > 0): ?> <span class="badge bg-secondary mb-2">คงเหลือ <?=$row['stock']?> ชิ้น</span> <?php else: ?> <span class="badge bg-danger mb-2">Free Order</span> <?php endif; ?> </div> <div class="mt-auto mb-3"> <a href="user/index.php?pid=<?=$row['id']?>" class="btn btn-gold w-100 <?=($booking_status=='off'?'disabled':'')?>" <?=($booking_status=='off'?'onclick="return false;"':'')?>> <?=$booking_status=='off' ? 'ระบบปิดการจอง' : 'สั่งจอง'?> </a> </div> </div> </div> <?php endwhile; ?> </div> </div> <footer> <p class="mb-0">วิทยาลัยเทคนิคเชียงใหม่ \| การศึกษาเพื่ออาชีพและพัฒนาสังคม</p> <small>© <?=date('Y')?> Chiang Mai Technical College</small> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox-plus-jquery.min.js"></script> <script> window.addEventListener('load', () => { const bell = document.getElementById('templeBell'); setTimeout(() => bell.play().catch(()=>{}), 800); }); </script> </body> </html>

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