| Server IP : 104.21.73.108 / Your IP : 216.73.216.59 Web Server : Apache/2 System : Linux cat167-197.static.lnwhostname.com 5.10.0-20-amd64 #1 SMP Debian 5.10.158-2 (2022-12-13) x86_64 User : paphayomho ( 1042) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/paphayomho/domains/paphayomhospital.go.th/private_html/new/ |
Upload File : |
<?php
require 'db.php'; // เชื่อมต่อฐานข้อมูล
// ดึงข้อมูลกิจกรรมล่าสุด 3 รายการ
$result = $conn->query("SELECT * FROM hospital_activities ORDER BY id DESC LIMIT 3");
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ภาพกิจกรรมภายในโรงพยาบาล</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body { font-family: 'Sarabun', sans-serif; background-color: #f8f9fa; color: #333; }
.header-section { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
/* การตั้งค่า Grid ของการ์ด */
.activity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
/* ตกแต่งตัวการ์ด */
.news-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0;
}
/* ส่วนหัวของการ์ด (Gradient สีฟ้า) */
.card-top {
background: linear-gradient(135deg, #0056b3 0%, #00aaff 100%);
color: white;
padding: 20px;
text-align: center;
position: relative;
}
.card-top img.logo { width: 50px; margin-bottom: 10px; }
.card-top h5 { font-size: 1.1rem; margin-bottom: 5px; font-weight: 600; }
.card-top .date-box {
background: rgba(0,0,0,0.2);
padding: 5px 15px;
border-radius: 20px;
display: inline-block;
font-size: 0.8rem;
}
/* เนื้อหาภายในการ์ด */
.card-content { padding: 20px; flex-grow: 1; }
.card-content h6 { color: #0056b3; font-weight: 600; margin-bottom: 10px; }
.card-content p { font-size: 0.9rem; line-height: 1.5; color: #555; text-align: justify; }
/* การจัด Grid รูปภาพขนาดเล็ก */
.image-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-top: 15px;
}
.image-gallery img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 4px;
}
/* ส่วนท้ายของการ์ด */
.card-footer-custom {
padding: 15px;
background: #fff;
border-top: 1px dashed #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-label { font-size: 0.85rem; font-weight: 600; color: #2c3e50; }
.footer-date { font-size: 0.8rem; color: #7f8c8d; }
/* ปุ่มดูทั้งหมด */
.btn-view-all {
border: 1px solid #28a745;
color: #28a745;
padding: 5px 15px;
border-radius: 20px;
text-decoration: none;
font-size: 0.9rem;
}
.btn-view-all:hover { background: #28a745; color: white; }
</style>
</head>
<body>
<div class="container">
<div class="header-section">
<h4 class="m-0"><i class="fas fa-camera-retro text-success me-2"></i>ภาพกิจกรรมภายในโรงพยาบาล</h4>
<a href="#" class="btn-view-all">ดูภาพทั้งหมด »</a>
</div>
<div class="activity-grid">
<?php while($row = $result->fetch_assoc()):
$act_id = $row['id'];
// ดึงรูปภาพทั้งหมดของกิจกรรมนี้ (จำกัด 6 รูป)
$img_res = $conn->query("SELECT image_path FROM activity_images WHERE activity_id = $act_id LIMIT 6");
?>
<div class="news-card">
<div class="card-top">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Thai_Ministry_of_Public_Health_logo.png" class="logo" alt="Logo">
<h5>จดหมายข่าวประชาสัมพันธ์</h5>
<small>PAPHAYOM HOSPITAL</small><br>
<div class="date-box mt-2">ระหว่างวันที่ <?= $row['date_range'] ?></div>
</div>
<div class="card-content">
<h6><?= $row['title'] ?></h6>
<p><?= mb_strimwidth($row['description'], 0, 250, "...") ?></p>
<div class="image-gallery">
<?php while($img = $img_res->fetch_assoc()): ?>
<img src="uploads/<?= $img['image_path'] ?>" alt="Activity Photo">
<?php endwhile; ?>
</div>
</div>
<div class="card-footer-custom">
<div>
<div class="footer-label"><?= $row['footer_type'] ?></div>
<div class="footer-date"><i class="far fa-calendar-alt"></i> <?= $row['date_range'] ?></div>
</div>
<div class="qr-code">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=40x40&data=https://yourweb.com" alt="QR">
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
</body>
</html>