File manager - Edit - /var/www/order.cmtc.ac.th/index_4.php
Back
<?php include('config/db.php'); $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"> <!-- ✅ Lightbox2 CSS --> <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); } .card-img-container { position: relative; overflow: hidden; } .card-img-container img { width: 100%; height: 200px; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; } .img-label { position: absolute; bottom: 8px; left: 10px; background: rgba(0,0,0,0.7); color: #fff; padding: 2px 8px; border-radius: 6px; 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; } .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; pointer-events: none; } /* 📱 รองรับมือถือ */ @media (max-width: 576px) { .product-image { width: 100%; } } </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> <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="ด้านหน้า" class="img-fluid rounded"> <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="ด้านหลัง" class="img-fluid rounded"> <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">สั่งจอง</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.43 |
proxy
|
phpinfo
|
Settings