880 lines
66 KiB
PHP
880 lines
66 KiB
PHP
<?php
|
||
// เชื่อมต่อฐานข้อมูล
|
||
require_once 'config.php';
|
||
|
||
// ==========================================
|
||
// 1. รับข้อมูลจากฟอร์มความคิดเห็น (AJAX POST)
|
||
// ==========================================
|
||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'submit_feedback') {
|
||
$name = !empty($_POST['name']) ? $_POST['name'] : 'ไม่ระบุนาม';
|
||
$topic = $_POST['topic'] ?? '';
|
||
$message = $_POST['message'] ?? '';
|
||
|
||
$stmt = $pdo->prepare("INSERT INTO feedbacks (name, topic, message) VALUES (?, ?, ?)");
|
||
if ($stmt->execute([$name, $topic, $message])) {
|
||
|
||
// ส่งแจ้งเตือนเข้า Telegram
|
||
$stmtSet = $pdo->query("SELECT setting_key, setting_value FROM settings WHERE setting_key IN ('telegram_bot_token', 'telegram_chat_id')");
|
||
$tgSettings = [];
|
||
while ($row = $stmtSet->fetch()) $tgSettings[$row['setting_key']] = $row['setting_value'];
|
||
|
||
$token = $tgSettings['telegram_bot_token'] ?? '';
|
||
$chat_id = $tgSettings['telegram_chat_id'] ?? '';
|
||
|
||
if (!empty($token) && !empty($chat_id)) {
|
||
$text = "📢 <b>มีข้อเสนอแนะ/ความคิดเห็นใหม่!</b>\n\n";
|
||
$text .= "<b>หัวข้อ:</b> {$topic}\n";
|
||
$text .= "<b>จาก:</b> {$name}\n";
|
||
$text .= "<b>รายละเอียด:</b>\n{$message}";
|
||
|
||
$url = "https://api.telegram.org/bot{$token}/sendMessage";
|
||
$data = ['chat_id' => $chat_id, 'text' => $text, 'parse_mode' => 'HTML'];
|
||
|
||
$ch = curl_init();
|
||
curl_setopt($ch, CURLOPT_URL, $url);
|
||
curl_setopt($ch, CURLOPT_POST, 1);
|
||
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
|
||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
|
||
curl_exec($ch);
|
||
curl_close($ch);
|
||
}
|
||
|
||
echo json_encode(['status' => 'success']);
|
||
} else {
|
||
echo json_encode(['status' => 'error']);
|
||
}
|
||
exit;
|
||
}
|
||
|
||
// ==========================================
|
||
// 2. ดึงข้อมูล Settings ทั้งหมด (โครงสร้างเว็บ)
|
||
// ==========================================
|
||
$stmtSet = $pdo->query("SELECT setting_key, setting_value FROM settings");
|
||
$settings = [];
|
||
while ($row = $stmtSet->fetch()) {
|
||
$settings[$row['setting_key']] = $row['setting_value'];
|
||
}
|
||
|
||
$hospitalName = $settings['hospital_name'] ?? 'โรงพยาบาลเกาะสมุย';
|
||
$hospitalAddress = $settings['hospital_address'] ?? "2 หมู่ 1 ต.อ่างทอง อ.เกาะสมุย\nจ.สุราษฎร์ธานี 84140";
|
||
$contactPhone = $settings['contact_phone'] ?? '077-421-239';
|
||
$systemVersion = $settings['system_version'] ?? '2569.2.5';
|
||
|
||
$heroTitle = $settings['hero_title'] ?? 'ดูแลสุขภาพคุณ';
|
||
$heroSubtitle = $settings['hero_subtitle'] ?? 'ด้วยมาตรฐานระดับสากล';
|
||
$heroPhoto = $settings['hero_photo_url'] ?? 'https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&q=80&w=1200';
|
||
$directorName = $settings['director_name'] ?? 'นายแพทย์ ชำนาญ สมุยรักษ์';
|
||
$directorMessage = $settings['director_message'] ?? 'มุ่งมั่นที่จะยกระดับคุณภาพชีวิตและสุขภาพของพี่น้องประชาชนบนเกาะสมุยและพื้นที่ใกล้เคียง รวมถึงนักท่องเที่ยวจากทั่วโลก ด้วยเทคโนโลยีทางการแพทย์ที่ทันสมัย ระบบความปลอดภัยของข้อมูลสูงสุด และหัวใจที่พร้อมให้บริการ';
|
||
$directorPhoto = $settings['director_photo_url'] ?? 'https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&q=80&w=600';
|
||
$donatePromptpay = $settings['donate_promptpay'] ?? '099-999-9999';
|
||
$donateQrcode = $settings['donate_qrcode_url'] ?? '';
|
||
$enableGrayscale = $settings['enable_grayscale'] ?? '0';
|
||
|
||
$logoUrl = "assets/img/logo_MOPH.png";
|
||
|
||
// ==========================================
|
||
// 3. ฟังก์ชันดึงข้อมูลตามหมวดหมู่
|
||
// ==========================================
|
||
function formatThaiDate($timestamp)
|
||
{
|
||
if (!$timestamp) return '-';
|
||
$months = ['', 'ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'];
|
||
$time = strtotime($timestamp);
|
||
return sprintf("%02d %s %d", date('d', $time), $months[date('n', $time)], date('Y', $time) + 543);
|
||
}
|
||
|
||
function getCategoryContents($slug, $limit = 10)
|
||
{
|
||
global $pdo;
|
||
if (!isset($pdo)) return [];
|
||
$stmt = $pdo->prepare("SELECT * FROM contents WHERE category_slug = ? AND status = 'published' ORDER BY id ASC LIMIT ?");
|
||
$stmt->bindValue(1, $slug, PDO::PARAM_STR);
|
||
$stmt->bindValue(2, $limit, PDO::PARAM_INT);
|
||
$stmt->execute();
|
||
return $stmt->fetchAll();
|
||
}
|
||
|
||
function getCategoryContentsDesc($slug, $limit = 5)
|
||
{
|
||
global $pdo;
|
||
$stmt = $pdo->prepare("SELECT * FROM contents WHERE category_slug = ? AND status = 'published' ORDER BY created_at DESC LIMIT ?");
|
||
$stmt->bindValue(1, $slug, PDO::PARAM_STR);
|
||
$stmt->bindValue(2, $limit, PDO::PARAM_INT);
|
||
$stmt->execute();
|
||
return $stmt->fetchAll();
|
||
}
|
||
|
||
// ดึงข้อมูลเมนูและบริการ
|
||
$headerMenus = getCategoryContents('header_menu');
|
||
$clinics = getCategoryContents('clinic');
|
||
$eServices = getCategoryContents('eservices');
|
||
$packages = getCategoryContents('packages', 3);
|
||
|
||
// ดึงข้อมูลข่าวสารและประกาศ
|
||
$prNews = getCategoryContentsDesc('pr_news');
|
||
$jobs = getCategoryContentsDesc('jobs', 20);
|
||
$procurementSupplies = getCategoryContentsDesc('procurement_supplies', 20);
|
||
$procurementMeds = getCategoryContentsDesc('procurement_meds', 20);
|
||
$plans = getCategoryContentsDesc('plan', 20);
|
||
$finances = getCategoryContentsDesc('finance', 20);
|
||
$academicWorks = getCategoryContentsDesc('academic');
|
||
$laws = getCategoryContentsDesc('laws');
|
||
$galleryAlbums = getCategoryContentsDesc('gallery', 8);
|
||
$downloads = getCategoryContentsDesc('download');
|
||
$infographics = getCategoryContentsDesc('infographic');
|
||
$itaDocs = getCategoryContentsDesc('ita', 10);
|
||
|
||
// ดึงข้อมูลลิงก์
|
||
$internalSystems = getCategoryContents('internal_systems', 8);
|
||
$relatedAgencies = getCategoryContents('related_agencies', 8);
|
||
|
||
// ดึงสถิติ
|
||
$statOnline = rand(15, 45);
|
||
$stmtToday = $pdo->query("SELECT views FROM visitor_stats WHERE visit_date = CURDATE()");
|
||
$statToday = $stmtToday->fetchColumn() ?: 0;
|
||
$stmtMonth = $pdo->query("SELECT SUM(views) FROM visitor_stats WHERE MONTH(visit_date) = MONTH(CURDATE()) AND YEAR(visit_date) = YEAR(CURDATE())");
|
||
$statMonth = $stmtMonth->fetchColumn() ?: 0;
|
||
$stmtTotal = $pdo->query("SELECT SUM(views) FROM visitor_stats");
|
||
$statTotal = $stmtTotal->fetchColumn() ?: 0;
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="th">
|
||
|
||
<head>
|
||
<meta name="referrer" content="no-referrer" />
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#056839">
|
||
<link rel="manifest" href="manifest.json">
|
||
<title><?= htmlspecialchars($hospitalName) ?></title>
|
||
<link rel="icon" href="<?= $logoUrl ?>">
|
||
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
}
|
||
</script>
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
||
<style>
|
||
:root{--navy:#073b4c;--teal:#007f78;--mint:#dff7f3;--lime:#b8e56b;--ink:#14343e;--muted:#587078;--cream:#f7f6f1;--white:#fff;--line:#d9e5e3}
|
||
*{box-sizing:border-box} body{margin:0;background:var(--cream);color:var(--ink);font-family:"Sarabun",sans-serif;scroll-behavior:smooth;} a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}
|
||
.emergency{background:#e7563e;color:white;font:600 13px "Sarabun",sans-serif;letter-spacing:.02em}.emergency .wrap{min-height:39px;display:flex;align-items:center;justify-content:space-between;gap:12px}.emergency strong{font-size:15px}.emergency a{text-decoration:underline;text-underline-offset:3px}
|
||
header{background:rgba(255,255,255,.94);position:sticky;top:0;z-index:10;border-bottom:1px solid #edf1ef;backdrop-filter:blur(16px)}.bar{height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.seal{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;position:relative;overflow:hidden;filter:drop-shadow(0 3px 5px rgba(0,88,55,.18));isolation:isolate}.seal img{width:100%;height:100%;object-fit:contain}.seal:after{content:"";position:absolute;z-index:2;inset:-45%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.93) 49%,rgba(255,255,255,.1) 54%,transparent 61%);transform:translateX(-120%) rotate(4deg);animation:logo-shine 4.8s ease-in-out infinite;pointer-events:none}.brand b{display:block;font-size:18px;line-height:1.2}.brand span{display:block;font:500 11px "Sarabun";letter-spacing:.09em;color:var(--teal);margin-top:2px}.nav{display:flex;gap:25px;align-items:center;font-size:14px;font-weight:600}.nav a{padding:8px 0}.nav a:hover{color:var(--teal)}.nav .active{color:var(--teal);border-bottom:2px solid var(--teal)}.menu{display:none;border:0;background:none;font-size:25px;color:var(--navy)}@keyframes logo-shine{0%,60%,100%{transform:translateX(-120%) rotate(4deg)}18%,35%{transform:translateX(120%) rotate(4deg)}}
|
||
.hero{padding:42px 0 54px;overflow:hidden}.hero-box{background:var(--navy);border-radius:26px;min-height:475px;color:white;position:relative;overflow:hidden;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;padding:48px 7%}.hero-box:before{content:"";position:absolute;width:520px;height:520px;background:#0d6f71;border-radius:50%;right:-220px;top:-175px}.hero-box:after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-25px;bottom:-260px}.magic-grid{background-image:linear-gradient(rgba(160,235,221,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(160,235,221,.1) 1px,transparent 1px);background-size:34px 34px;animation:grid-drift 16s linear infinite}.eyebrow{font:600 12px "Sarabun";letter-spacing:.13em;text-transform:uppercase;color:var(--lime);margin:0 0 17px}.hero h1{font-size:clamp(35px,4vw,56px);line-height:1.22;margin:0 0 18px;letter-spacing:-.04em}.hero p{font-size:17px;line-height:1.8;color:#d8eeec;max-width:520px;margin:0 0 28px}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;padding:13px 20px;font-weight:700;font-size:14px;border:1px solid transparent;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--lime);color:#163833;position:relative;overflow:hidden}.btn-primary:after{content:"";position:absolute;inset:0;transform:translateX(-140%);background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);animation:shimmer 3.4s ease-in-out infinite}.btn-ghost{border-color:#84b9b5;color:white}.clinical-card{z-index:1;justify-self:end;width:min(100%,396px);height:335px;border-radius:22px;position:relative;background:linear-gradient(145deg,#dbf5ef,#9adbd0);overflow:hidden;color:var(--navy);box-shadow:0 24px 45px rgba(0,0,0,.18)}.clinical-card:before{content:"";width:258px;height:258px;border-radius:50%;background:#6fbfb4;position:absolute;right:-80px;top:-54px}.clinical-card:after{content:"✚";position:absolute;right:30px;top:15px;font-size:185px;color:rgba(255,255,255,.25);font-family:Arial;font-weight:bold}.doctor{position:absolute;bottom:0;left:39px;width:190px;height:254px;background:linear-gradient(#f5c6a7 0 14%,#263b45 14% 19%,#fff 19%);border-radius:98px 98px 0 0;box-shadow:inset 0 -12px 0 #e6f1f0}.doctor:before{content:"";position:absolute;top:30px;left:43px;width:106px;height:88px;background:#f0b995;border-radius:44% 44% 45% 45%}.doctor:after{content:"";position:absolute;top:11px;left:35px;width:124px;height:67px;background:#243945;border-radius:52px 52px 32px 32px}.card-copy{position:absolute;z-index:2;top:25px;left:24px;width:200px}.card-copy span{background:white;border-radius:100px;padding:6px 10px;font-size:11px;font-weight:700}.card-copy h3{margin:14px 0 4px;font-size:21px;line-height:1.25}.card-copy p{margin:0;font-size:12px;color:#43656a}.floating{position:absolute;z-index:3;right:18px;bottom:20px;background:#fff;border-radius:13px;padding:11px 14px;box-shadow:0 8px 20px rgba(19,67,67,.15);font-size:12px}.floating b{display:block;color:var(--teal);font:700 20px "Sarabun"}@keyframes grid-drift{to{background-position:34px 34px}}@keyframes shimmer{25%,100%{transform:translateX(140%)}}
|
||
.quick{margin-top:-28px;position:relative;z-index:2}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(25,61,61,.1);overflow:hidden}.quick a{padding:21px 20px;border-right:1px solid var(--line);display:flex;gap:13px;align-items:center;font-size:14px;font-weight:700}.quick a:last-child{border:0}.quick i{font-style:normal;color:var(--teal);font-size:23px;background:#e9f8f5;border-radius:10px;width:40px;height:40px;display:grid;place-items:center}.quick small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:2px}
|
||
section{padding:76px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:27px}.section-head h2{font-size:32px;letter-spacing:-.04em;line-height:1.25;margin:0}.section-head p{margin:7px 0 0;color:var(--muted);font-size:14px}.text-link{color:var(--teal);font-weight:700;font-size:14px;white-space:nowrap}.services{background:white}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service{border:1px solid var(--line);border-radius:16px;padding:23px 19px;min-height:180px;transition:.2s}.service:hover{border-color:var(--teal);box-shadow:0 10px 25px rgba(0,90,85,.08);transform:translateY(-3px)}.service .icon{font-size:26px;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:var(--mint);margin-bottom:20px}.service h3{font-size:16px;margin:0 0 8px}.service p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}.service:nth-child(2) .icon{background:#fff0d8}.service:nth-child(3) .icon{background:#e6edff}.service:nth-child(4) .icon{background:#f5e7f8}
|
||
.agency-news{padding:16px 0;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}.news-ticker{display:flex;align-items:center;gap:17px;white-space:nowrap}.ticker-label{background:var(--navy);color:#fff;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:700;z-index:1}.ticker-track{display:flex;gap:42px;align-items:center;min-width:max-content;animation:marquee 28s linear infinite;font-size:13px;color:#35575a}.ticker-track span:before{content:"✦";color:var(--teal);margin-right:9px}@keyframes marquee{to{transform:translateX(-35%)}}
|
||
.info-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:23px}.notice{background:var(--teal);color:white;border-radius:20px;padding:34px;position:relative;overflow:hidden}.notice:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.22);right:-100px;bottom:-100px}.notice h2{font-size:29px;margin:0 0 9px}.notice>p{margin:0 0 23px;color:#c8ebe6;font-size:14px}.notice-list{position:relative;z-index:1;display:grid;gap:9px}.notice-list a{background:rgba(255,255,255,.12);padding:12px 14px;border-radius:10px;font-size:13px;display:flex;justify-content:space-between;gap:15px}.notice-list time{color:#b6e6dc;white-space:nowrap;font:500 11px "Sarabun"}.hours{background:#f1eee5;border-radius:20px;padding:31px}.hours h3{font-size:22px;margin:0 0 10px}.hours>p{color:var(--muted);font-size:13px;margin:0 0 17px}.time-row{padding:13px 0;border-top:1px solid #d9dbd1;display:flex;justify-content:space-between;font-size:13px}.time-row span:last-child{font-family:"Sarabun";font-weight:700}.map-tag{background:white;border-radius:10px;padding:13px;margin-top:19px;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
|
||
.director{background:#fff;padding:54px 0}.director-box{background:linear-gradient(115deg,#e7f5f1,#f9fbf7);border:1px solid #d9ebe6;border-radius:22px;display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;padding:28px 34px}.director-photo{height:150px;border-radius:50%;background:linear-gradient(#eff2ef 0 30%,#6d8790 30% 42%,#f9fbf8 42%);position:relative;overflow:hidden}.director-photo:after{content:"";position:absolute;width:73px;height:73px;border-radius:50%;background:#e6b391;left:39px;top:27px}.director-copy h2{margin:0 0 9px;font-size:27px}.director-copy blockquote{margin:0 0 12px;color:#426469;line-height:1.8;font-size:15px}.director-copy b{font-size:14px}.director-copy small{display:block;color:var(--teal);margin-top:2px}.department-news{background:#edf8f6}.department-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.department-card{background:rgba(255,255,255,.78);border:1px solid rgba(0,127,120,.12);border-radius:18px;padding:22px;position:relative;overflow:hidden;transition:.2s}.department-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,86,81,.1)}.department-card:after{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:rgba(184,229,107,.25);right:-24px;bottom:-28px}.dept{display:inline-flex;border-radius:99px;background:#e2f5f1;color:var(--teal);padding:5px 10px;font-size:11px;font-weight:700}.department-card h3{font-size:18px;line-height:1.4;margin:16px 0 8px;max-width:290px}.department-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}.department-card time{display:block;margin-top:18px;color:var(--teal);font-size:12px;font-weight:700}.official{background:#fff}.tabs{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.tab-list{display:flex;gap:5px;padding:10px;border-bottom:1px solid var(--line);background:#f5faf8;overflow-x:auto}.tab{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:10px 16px;font:700 14px "Sarabun";white-space:nowrap;cursor:pointer}.tab:hover{color:var(--teal)}.tab[aria-selected="true"]{background:var(--teal);color:#fff;box-shadow:0 3px 9px rgba(0,127,120,.2)}.tab-panel{padding:7px 25px;max-height:380px;overflow-y:auto}.tab-panel[hidden]{display:none}.official-list{list-style:none;padding:0;margin:0}.official-list li{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;border-bottom:1px solid var(--line);padding:17px 0}.official-list li:last-child{border-bottom:0}.document-mark{width:35px;height:35px;border-radius:9px;background:#e1f5f1;color:var(--teal);display:grid;place-items:center;font-weight:700}.official-list b{font-size:14px;display:block}.official-list small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.official-list time{color:var(--teal);font-size:12px;font-weight:700;white-space:nowrap}.knowledge{padding-top:0;background:#fff}.knowledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.knowledge-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fbfdfc}.knowledge-card .mini-icon{font-size:23px;display:block;margin-bottom:11px}.knowledge-card h3{font-size:15px;margin:0 0 7px}.knowledge-card p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}
|
||
footer{background:#052f3b;color:#d7e4e2;padding:42px 0 20px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:45px;padding-bottom:32px}.footer-brand{display:flex;align-items:center;gap:12px;color:white}.footer-brand .seal{width:48px;height:48px}.footer-brand b{font-size:16px}.footer-grid p,.footer-grid a{font-size:12px;line-height:1.8;color:#b6ccca}.footer-grid h4{color:white;margin:3px 0 10px;font-size:13px}.footer-grid a{display:block}.copyright{border-top:1px solid rgba(255,255,255,.12);padding-top:17px;color:#8eaba9;font:11px "Sarabun";display:flex;justify-content:space-between;gap:10px}
|
||
@media(max-width:820px){.nav{display:none}.menu{display:block}.hero-box{grid-template-columns:1fr;gap:28px;padding:38px 8%;min-height:auto}.clinical-card{justify-self:center}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick a:nth-child(2){border-right:0}.quick a:nth-child(-n+2){border-bottom:1px solid var(--line)}.service-grid{grid-template-columns:repeat(2,1fr)}.info-grid,.official-grid{grid-template-columns:1fr}.department-grid{grid-template-columns:1fr}.knowledge-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.emergency .wrap{font-size:11px}.emergency strong{font-size:13px}}
|
||
@media(max-width:520px){.wrap{width:min(100% - 28px,1160px)}.bar{height:72px}.brand b{font-size:15px}.brand span{font-size:9px}.seal{width:40px;height:40px;font-size:18px}.hero{padding:24px 0 44px}.hero-box{border-radius:18px;padding:31px 25px}.hero h1{font-size:35px}.hero p{font-size:14px}.clinical-card{height:280px}.doctor{transform:scale(.85);transform-origin:bottom left}.quick{margin-top:-20px}.quick a{padding:15px 12px;font-size:12px;gap:8px}.quick i{width:34px;height:34px;font-size:18px}.section-head{align-items:start;flex-direction:column}.section-head h2{font-size:27px}section{padding:57px 0}.service-grid,.knowledge-grid{grid-template-columns:1fr}.service{min-height:140px}.director-box{grid-template-columns:1fr;padding:25px;gap:17px}.director-photo{width:120px;height:120px}.director-photo:after{left:23px;top:21px}.tab-panel{padding:4px 16px}.official-list li{grid-template-columns:auto 1fr}.official-list time{grid-column:2}.footer-grid{grid-template-columns:1fr;gap:21px}.emergency .wrap{min-height:45px}.emergency a{display:none}.copyright{flex-direction:column}.notice,.hours{padding:25px}}
|
||
|
||
/* Preserve modal styles if they rely on tailwind classes */
|
||
.tab-panel::-webkit-scrollbar { width: 6px; }
|
||
.tab-panel::-webkit-scrollbar-track { background: #f5faf8; border-radius: 10px; }
|
||
.tab-panel::-webkit-scrollbar-thumb { background: #b6ccca; border-radius: 10px; }
|
||
.tab-panel::-webkit-scrollbar-thumb:hover { background: #007f78; }
|
||
/* --- Ticker Mask --- */
|
||
.ticker-mask {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
|
||
-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
|
||
}
|
||
|
||
/* --- Magic UI --- */
|
||
.bg-dot-pattern {
|
||
background-image: radial-gradient(rgba(0, 127, 120, 0.1) 1px, transparent 1px);
|
||
background-size: 24px 24px;
|
||
}
|
||
.magic-shiny-text {
|
||
background: linear-gradient(120deg, var(--navy) 40%, var(--teal) 50%, var(--navy) 60%);
|
||
background-size: 200% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
animation: shine 3s infinite linear;
|
||
}
|
||
@keyframes shine {
|
||
0% { background-position: 100% 50%; }
|
||
100% { background-position: -100% 50%; }
|
||
}
|
||
.magic-card-beam {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.magic-card-beam::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -2px;
|
||
border-radius: inherit;
|
||
background: conic-gradient(from 0deg, transparent 70%, rgba(0, 127, 120, 0.8) 100%);
|
||
z-index: -2;
|
||
animation: spin-beam 4s linear infinite;
|
||
}
|
||
.magic-card-beam::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0px;
|
||
border-radius: inherit;
|
||
background: inherit;
|
||
backdrop-filter: blur(16px);
|
||
z-index: -1;
|
||
}
|
||
@keyframes spin-beam {
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
</head>
|
||
<body class="<?= $enableGrayscale == '1' ? 'grayscale' : '' ?>">
|
||
<div class="emergency"><div class="wrap"><span>กรณีฉุกเฉิน โปรดโทร <strong>1669</strong> ตลอด 24 ชั่วโมง</span><a href="#contact">ดูข้อมูลการรับบริการฉุกเฉิน →</a></div></div>
|
||
<header>
|
||
<div class="wrap bar">
|
||
<a class="brand" href="#top">
|
||
<span class="seal"><img src="<?= $logoUrl ?>" alt="ตรากระทรวงสาธารณสุข"></span>
|
||
<span><b><?= htmlspecialchars($hospitalName) ?></b><span>MUEANG SUK HOSPITAL</span></span>
|
||
</a>
|
||
<nav class="nav">
|
||
<a class="active" href="#top">หน้าหลัก</a>
|
||
<a href="#contact">ติดต่อเรา</a>
|
||
<a href="#services">บริการคลินิก</a>
|
||
<a href="#about">เกี่ยวกับเรา</a>
|
||
<a href="#official">ITA</a>
|
||
<a href="admin.php">ระบบเจ้าหน้าที่</a>
|
||
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-sm p-2.5">
|
||
<i id="theme-toggle-dark-icon" data-lucide="moon" class="w-5 h-5 hidden"></i>
|
||
<i id="theme-toggle-light-icon" data-lucide="sun" class="w-5 h-5 hidden"></i>
|
||
</button>
|
||
</nav>
|
||
<button class="menu" aria-label="เปิดเมนู">☰</button>
|
||
</div>
|
||
</header>
|
||
<main id="top" class="bg-dot-pattern">
|
||
<!-- News Ticker -->
|
||
<div class="agency-news">
|
||
<div class="wrap news-ticker">
|
||
<span class="ticker-label">ประกาศหน่วยงาน</span>
|
||
<div class="ticker-mask"><div class="ticker-track">
|
||
<?php foreach ($prNews as $news): ?>
|
||
<span><?= htmlspecialchars($news['title']) ?></span>
|
||
<?php endforeach; ?>
|
||
<?php if(empty($prNews)): ?>
|
||
<span>ยินดีต้อนรับสู่เว็บไซต์ <?= htmlspecialchars($hospitalName) ?></span>
|
||
<?php endif; ?>
|
||
</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero -->
|
||
<div class="hero">
|
||
<div class="wrap">
|
||
<div class="hero-box magic-grid">
|
||
<div>
|
||
<p class="eyebrow">#1 มาตรฐานการแพทย์เพื่อทุกชีวิต</p>
|
||
<h1><?= htmlspecialchars($heroTitle) ?><br><?= htmlspecialchars($heroSubtitle) ?></h1>
|
||
<p><?= htmlspecialchars($hospitalName) ?> มุ่งมั่นให้บริการทางการแพทย์ที่ปลอดภัย ทันสมัย และใส่ใจดุจญาติมิตร พร้อมเทคโนโลยีการรักษาที่เข้าถึงได้</p>
|
||
<div class="actions">
|
||
<a class="btn btn-primary" href="#services">นัดหมายแพทย์ →</a>
|
||
<a class="btn btn-ghost" href="tel:1669">ฉุกเฉิน 1669</a>
|
||
</div>
|
||
</div>
|
||
<div class="clinical-card" aria-label="ภาพประกอบบุคลากรทางการแพทย์">
|
||
<div class="card-copy">
|
||
<span>THE CARE TEAM</span>
|
||
<h3>ใกล้ชิด เข้าใจ<br>และพร้อมดูแล</h3>
|
||
<p>ทีมบุคลากรของเรา</p>
|
||
</div>
|
||
<div class="doctor"></div>
|
||
<div class="floating"><b>24 / 7</b>เปิดให้บริการ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links -->
|
||
<div class="wrap quick">
|
||
<div class="quick-grid">
|
||
<a href="#services"><i>▣</i><span>แพ็คเกจตรวจสุขภาพ<small>คลิกเพื่อดูแพ็คเกจทั้งหมด</small></span></a>
|
||
<a href="javascript:void(0)" onclick="openModal('donate-modal')"><i>♡</i><span>ร่วมบริจาคสมทบทุน<small>ลดหย่อนภาษี 2 เท่า</small></span></a>
|
||
<a href="javascript:void(0)" onclick="openModal('feedback-modal')"><i>▤</i><span>แสดงความคิดเห็น<small>ข้อเสนอแนะ / ร้องเรียน</small></span></a>
|
||
<a href="#services"><i>⌖</i><span>บริการคลินิก<small>ค้นหาแผนกและแพทย์</small></span></a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Director -->
|
||
<section class="director" id="about">
|
||
<div class="wrap">
|
||
<div class="director-box">
|
||
<div class="director-photo" style="background-image: url('<?= htmlspecialchars($directorPhoto) ?>'); background-size: cover; background-position: top center;" aria-label="ภาพประกอบผู้อำนวยการโรงพยาบาล"></div>
|
||
<div class="director-copy">
|
||
<h2>สารจากผู้อำนวยการ</h2>
|
||
<blockquote>“<?= nl2br(htmlspecialchars($directorMessage)) ?>”</blockquote>
|
||
<b><?= htmlspecialchars($directorName) ?></b>
|
||
<small>ผู้อำนวยการ<?= htmlspecialchars($hospitalName) ?></small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section class="services" id="services">
|
||
<div class="wrap">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2 class="magic-shiny-text">บริการออนไลน์ (e‑Services)</h2>
|
||
<p>ระบบบริการดิจิทัลสำหรับประชาชน ใช้งานสะดวกได้ทุกที่</p>
|
||
</div>
|
||
<a class="text-link" href="#contact">ดูบริการทั้งหมด →</a>
|
||
</div>
|
||
<div class="service-grid">
|
||
<?php foreach ($eServices as $index => $service): ?>
|
||
<?php
|
||
// Assigning mock icons based on index since custom template uses specific background colors
|
||
$icons = ['🗓', '♡', '▥', '☏', '⌖', '▣'];
|
||
$icon = $icons[$index % count($icons)];
|
||
?>
|
||
<a class="service" href="<?= htmlspecialchars($service['link_url'] ?? '#') ?>" <?= !empty($service['link_url']) ? 'target="_blank"' : '' ?>>
|
||
<div class="icon"><?= $icon ?></div>
|
||
<h3><?= htmlspecialchars($service['title']) ?></h3>
|
||
<p><?= htmlspecialchars(mb_substr(strip_tags($service['content']), 0, 50)) ?>...</p>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Department News -->
|
||
<section class="department-news" id="news">
|
||
<div class="wrap">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2 class="magic-shiny-text">ข่าวสารและประกาศ</h2>
|
||
<p>ความเคลื่อนไหวและข้อมูลสำคัญจากทุกภารกิจของโรงพยาบาล</p>
|
||
</div>
|
||
<a class="text-link" href="#news">ดูข่าวทั้งหมด →</a>
|
||
</div>
|
||
<h3 style="margin:0 0 17px;font-size:20px">ข่าวประชาสัมพันธ์ล่าสุด</h3>
|
||
<div class="department-grid">
|
||
<?php foreach (array_slice($prNews, 0, 3) as $news): ?>
|
||
<a href="<?= htmlspecialchars($news['link_url'] ?? '#') ?>" style="text-decoration:none; color:inherit; display:block;">
|
||
<article class="department-card">
|
||
<span class="dept">ข่าวประชาสัมพันธ์</span>
|
||
<h3><?= htmlspecialchars($news['title']) ?></h3>
|
||
<p><?= htmlspecialchars(mb_substr(strip_tags($news['content']), 0, 80)) ?>...</p>
|
||
<time><?= formatThaiDate($news['created_at']) ?> →</time>
|
||
</article>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Official Announcements -->
|
||
<section class="official" id="official">
|
||
<div class="wrap">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2 class="magic-shiny-text">ข่าวประกาศจากหน่วยงาน</h2>
|
||
</div>
|
||
</div>
|
||
<div class="tabs">
|
||
<div class="tab-list" role="tablist" aria-label="หมวดประกาศทางราชการ">
|
||
<button class="tab" role="tab" id="tab-jobs" aria-selected="true" aria-controls="panel-jobs">สมัครงาน</button>
|
||
<button class="tab" role="tab" id="tab-procurement" aria-selected="false" aria-controls="panel-procurement">จัดซื้อจัดจ้าง</button>
|
||
<button class="tab" role="tab" id="tab-plan" aria-selected="false" aria-controls="panel-plan">แผนปฏิบัติการ</button>
|
||
<button class="tab" role="tab" id="tab-finance" aria-selected="false" aria-controls="panel-finance">งบทดลอง</button>
|
||
</div>
|
||
|
||
<div class="tab-panel" role="tabpanel" id="panel-jobs" aria-labelledby="tab-jobs">
|
||
<ul class="official-list">
|
||
<?php foreach ($jobs as $job): ?>
|
||
<li style="display: block;">
|
||
<a href="<?= htmlspecialchars($job['link_url'] ?? '#') ?>" target="_blank" style="display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; transition: 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||
<span class="document-mark">PDF</span>
|
||
<span><b><?= htmlspecialchars($job['title']) ?></b><small>ประกาศสมัครงาน</small></span>
|
||
<time><?= formatThaiDate($job['created_at']) ?> <span style="display:inline-block; margin-left:8px; background:var(--teal); color:#fff; padding:3px 8px; border-radius:4px; font-size:10px;">เปิดอ่าน ↗</span></time>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-panel" role="tabpanel" id="panel-procurement" aria-labelledby="tab-procurement" hidden>
|
||
<ul class="official-list">
|
||
<?php foreach ($procurementSupplies as $item): ?>
|
||
<li style="display: block;">
|
||
<a href="<?= htmlspecialchars($item['link_url'] ?? '#') ?>" target="_blank" style="display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; transition: 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||
<span class="document-mark">PDF</span>
|
||
<span><b><?= htmlspecialchars($item['title']) ?></b><small>พัสดุ</small></span>
|
||
<time><?= formatThaiDate($item['created_at']) ?> <span style="display:inline-block; margin-left:8px; background:var(--teal); color:#fff; padding:3px 8px; border-radius:4px; font-size:10px;">เปิดอ่าน ↗</span></time>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
<?php foreach ($procurementMeds as $item): ?>
|
||
<li style="display: block;">
|
||
<a href="<?= htmlspecialchars($item['link_url'] ?? '#') ?>" target="_blank" style="display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; transition: 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||
<span class="document-mark">PDF</span>
|
||
<span><b><?= htmlspecialchars($item['title']) ?></b><small>ยาและเวชภัณฑ์</small></span>
|
||
<time><?= formatThaiDate($item['created_at']) ?> <span style="display:inline-block; margin-left:8px; background:var(--teal); color:#fff; padding:3px 8px; border-radius:4px; font-size:10px;">เปิดอ่าน ↗</span></time>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-panel" role="tabpanel" id="panel-plan" aria-labelledby="tab-plan" hidden>
|
||
<ul class="official-list">
|
||
<?php foreach ($plans as $plan): ?>
|
||
<li style="display: block;">
|
||
<a href="<?= htmlspecialchars($plan['link_url'] ?? '#') ?>" target="_blank" style="display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; transition: 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||
<span class="document-mark">PDF</span>
|
||
<span><b><?= htmlspecialchars($plan['title']) ?></b><small>แผนปฏิบัติการ</small></span>
|
||
<time><?= formatThaiDate($plan['created_at']) ?> <span style="display:inline-block; margin-left:8px; background:var(--teal); color:#fff; padding:3px 8px; border-radius:4px; font-size:10px;">เปิดอ่าน ↗</span></time>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-panel" role="tabpanel" id="panel-finance" aria-labelledby="tab-finance" hidden>
|
||
<ul class="official-list">
|
||
<?php foreach ($finances as $finance): ?>
|
||
<li style="display: block;">
|
||
<a href="<?= htmlspecialchars($finance['link_url'] ?? '#') ?>" target="_blank" style="display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; transition: 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||
<span class="document-mark">PDF</span>
|
||
<span><b><?= htmlspecialchars($finance['title']) ?></b><small>งบทดลอง</small></span>
|
||
<time><?= formatThaiDate($finance['created_at']) ?> <span style="display:inline-block; margin-left:8px; background:var(--teal); color:#fff; padding:3px 8px; border-radius:4px; font-size:10px;">เปิดอ่าน ↗</span></time>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Info Grid (Notice + Hours) -->
|
||
<section>
|
||
<div class="wrap">
|
||
<div class="info-grid">
|
||
<article class="notice magic-card-beam">
|
||
<h2>เกร็ดความรู้สุขภาพ</h2>
|
||
<p>สาระน่ารู้เพื่อการดูแลตัวเอง</p>
|
||
<div class="notice-list">
|
||
<?php foreach (array_slice($infographics, 0, 3) as $info): ?>
|
||
<a href="<?= htmlspecialchars($info['link_url'] ?? '#') ?>" <?= !empty($info['link_url']) ? 'target="_blank"' : '' ?>>
|
||
<span><?= htmlspecialchars($info['title']) ?></span>
|
||
<time><?= formatThaiDate($info['created_at']) ?></time>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</article>
|
||
<aside class="hours" id="contact">
|
||
<h3>เวลาให้บริการ</h3>
|
||
<p>อาคารผู้ป่วยนอก และจุดลงทะเบียน</p>
|
||
<div class="time-row"><span>จันทร์ — ศุกร์</span><span>08:00 — 16:00</span></div>
|
||
<div class="time-row"><span>คลินิกนอกเวลา</span><span>16:00 — 20:00</span></div>
|
||
<div class="time-row"><span>เสาร์ — อาทิตย์</span><span>08:00 — 12:00</span></div>
|
||
<div class="time-row"><span>ห้องฉุกเฉิน</span><span>เปิด 24 ชั่วโมง</span></div>
|
||
<div class="map-tag">⌖ <span><?= nl2br(htmlspecialchars($hospitalAddress)) ?></span></div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Knowledge & Staff Systems -->
|
||
<section class="knowledge" id="staff">
|
||
<div class="wrap">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2 class="magic-shiny-text">ข้อมูลและระบบสนับสนุน</h2>
|
||
<p>ระบบงานสำหรับเจ้าหน้าที่และประชาชน</p>
|
||
</div>
|
||
</div>
|
||
<div class="knowledge-grid">
|
||
<?php foreach ($internalSystems as $sys): ?>
|
||
<article class="knowledge-card">
|
||
<a href="<?= htmlspecialchars($sys['link_url'] ?? '#') ?>" <?= !empty($sys['link_url']) ? 'target="_blank"' : '' ?>>
|
||
<span class="mini-icon">▣</span>
|
||
<h3><?= htmlspecialchars($sys['title']) ?></h3>
|
||
<p><?= htmlspecialchars(mb_substr(strip_tags($sys['content']), 0, 60)) ?></p>
|
||
</a>
|
||
</article>
|
||
<?php endforeach; ?>
|
||
<article class="knowledge-card">
|
||
<span class="mini-icon">◌</span>
|
||
<h3>สถิติการเยี่ยมชมเว็บไซต์</h3>
|
||
<p>วันนี้: <?= number_format($statToday) ?> <br>เดือนนี้: <?= number_format($statMonth) ?> <br>รวมทั้งหมด: <?= number_format($statTotal) ?></p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="wrap">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<div class="footer-brand">
|
||
<span class="seal"><img src="<?= $logoUrl ?>" alt="ตรากระทรวงสาธารณสุข"></span>
|
||
<span><b><?= htmlspecialchars($hospitalName) ?></b><br><small>MUEANG SUK HOSPITAL</small></span>
|
||
</div>
|
||
<p>หน่วยงานภาครัฐที่มุ่งมั่นสร้างระบบสุขภาพ<br>ที่เท่าเทียม เข้าถึงได้ และยั่งยืน</p>
|
||
</div>
|
||
<div>
|
||
<h4>ติดต่อเรา</h4>
|
||
<a href="tel:<?= htmlspecialchars($contactPhone) ?>"><?= htmlspecialchars($contactPhone) ?></a>
|
||
<a href="mailto:contact@hospital.go.th">contact@hospital.go.th</a>
|
||
<a href="#contact">แผนที่และการเดินทาง</a>
|
||
</div>
|
||
<div>
|
||
<h4>ข้อมูลสำคัญ</h4>
|
||
<a href="#news">ประกาศโรงพยาบาล</a>
|
||
<a href="#services">สิทธิและการรับบริการ</a>
|
||
<a href="#top">นโยบายคุ้มครองข้อมูลส่วนบุคคล</a>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
<span>© 2026 <?= htmlspecialchars($hospitalName) ?>. All rights reserved.</span>
|
||
<span>ออกแบบเพื่อประชาชนทุกคน</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<div id="donate-modal" class="hidden fixed inset-0 z-50 items-center justify-center bg-slate-900/70 backdrop-blur-md p-4 animate-fade-in">
|
||
<div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-md overflow-hidden relative mx-auto">
|
||
<button onclick="closeModal('donate-modal')" class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 bg-gray-100 rounded-full transition-colors z-10"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
<div class="p-8 md:p-10 text-center max-h-[90vh] overflow-y-auto custom-scrollbar">
|
||
<div class="w-20 h-20 bg-teal-50 rounded-[2rem] flex items-center justify-center mx-auto mb-6 text-teal-600 shadow-inner">
|
||
<i data-lucide="gift" class="w-10 h-10"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-extrabold text-gray-900 mb-2">ร่วมบริจาคสมทบทุน</h2>
|
||
<p class="text-gray-500 text-sm mb-8 font-medium">เพื่อจัดซื้อเครื่องมือแพทย์ โรงพยาบาลเกาะสมุย <br /><span class="text-teal-600 font-bold mt-1 block">(ลดหย่อนภาษี 2 เท่าผ่าน e-Donation)</span></p>
|
||
<div class="bg-slate-50 p-6 rounded-3xl border border-slate-200 mb-6">
|
||
<div class="bg-white p-4 rounded-2xl border border-slate-200 inline-block mb-5 shadow-sm">
|
||
<?php if ($donateQrcode): ?>
|
||
<img src="<?= htmlspecialchars($donateQrcode) ?>" class="w-40 h-40 object-contain">
|
||
<?php else: ?>
|
||
<i data-lucide="qr-code" class="w-40 h-40 text-slate-800"></i>
|
||
<?php endif; ?>
|
||
</div>
|
||
<p class="font-extrabold text-teal-700 text-lg mb-1">PromptPay QR Code</p>
|
||
<p class="text-sm font-bold text-gray-800 bg-white py-2 rounded-xl border border-slate-200 mt-3 inline-block px-6 tracking-widest"><?= htmlspecialchars($donatePromptpay) ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Feedback Modal -->
|
||
<div id="feedback-modal" class="hidden fixed inset-0 z-50 items-center justify-center bg-slate-900/70 backdrop-blur-md p-4 animate-fade-in overflow-y-auto pt-10 pb-10">
|
||
<div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-lg overflow-hidden relative my-auto mx-auto border border-white/20">
|
||
<button onclick="closeModal('feedback-modal')" class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 bg-gray-100 rounded-full transition-colors z-10"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
<div class="p-8 md:p-10 max-h-[85vh] overflow-y-auto custom-scrollbar">
|
||
<div class="flex items-center mb-8">
|
||
<div class="bg-amber-100 p-4 rounded-2xl mr-5 shrink-0 shadow-inner"><i data-lucide="message-square" class="w-8 h-8 text-amber-600"></i></div>
|
||
<div>
|
||
<h2 class="text-2xl font-extrabold text-gray-900">รับฟังความคิดเห็น</h2>
|
||
<p class="text-gray-500 text-sm mt-1 font-medium">ข้อมูลของคุณจะถูกเก็บเป็นความลับ</p>
|
||
</div>
|
||
</div>
|
||
<form id="feedback-form" onsubmit="submitFeedback(event)" class="space-y-5">
|
||
<div>
|
||
<label class="block text-sm font-extrabold text-gray-700 mb-2">ชื่อ-นามสกุล (ไม่ระบุได้)</label>
|
||
<input type="text" name="name" id="fb_name" class="w-full px-5 py-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white outline-none transition-all font-medium" placeholder="ไม่ต้องระบุก็ได้">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-extrabold text-gray-700 mb-2">หัวข้อ <span class="text-red-500">*</span></label>
|
||
<select name="topic" id="fb_topic" class="w-full px-5 py-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white outline-none transition-all font-bold text-gray-700 appearance-none">
|
||
<option>ชื่นชมการให้บริการ</option>
|
||
<option>เสนอแนะการให้บริการ</option>
|
||
<option>แจ้งปัญหา / ร้องเรียน</option>
|
||
<option>สอบถามข้อมูลทั่วไป</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-extrabold text-gray-700 mb-2">รายละเอียด <span class="text-red-500">*</span></label>
|
||
<textarea name="message" id="fb_message" rows="4" required class="w-full px-5 py-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:bg-white outline-none transition-all font-medium" placeholder="กรุณาพิมพ์รายละเอียดที่นี่..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" id="feedback-submit-btn" class="w-full py-4 rounded-xl font-extrabold mt-6 transition-all duration-300 bg-[#056839] hover:bg-[#04522b] text-white shadow-lg shadow-emerald-900/20 text-lg flex justify-center items-center">
|
||
<i data-lucide="send" class="w-5 h-5 mr-2"></i> ส่งความคิดเห็น
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gallery Modal -->
|
||
<div id="gallery-modal" class="hidden fixed inset-0 z-[60] items-center justify-center bg-slate-900/95 backdrop-blur-sm p-4 animate-fade-in overflow-y-auto">
|
||
<div class="bg-transparent w-full max-w-6xl overflow-hidden relative my-4 md:my-8 flex flex-col mx-auto h-[90vh]">
|
||
<div class="flex justify-between items-center mb-4 shrink-0 px-2">
|
||
<div class="text-white">
|
||
<h2 id="gallery-modal-title" class="text-xl md:text-3xl font-extrabold drop-shadow-md">Title</h2>
|
||
<p id="gallery-modal-meta" class="text-emerald-300 text-sm md:text-base mt-2 flex items-center font-bold drop-shadow-md"><i data-lucide="calendar" class="w-4 h-4 mr-2"></i> Date</p>
|
||
</div>
|
||
<button onclick="closeModal('gallery-modal')" class="p-3 bg-white/10 hover:bg-white/30 backdrop-blur-md rounded-full transition-colors shrink-0 text-white border border-white/20">
|
||
<i data-lucide="x" class="w-6 h-6"></i>
|
||
</button>
|
||
</div>
|
||
<div class="overflow-y-auto custom-scrollbar flex-1 bg-black/40 rounded-3xl p-6 border border-white/10 backdrop-blur-md">
|
||
<div id="gallery-modal-grid" class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||
<!-- Images injected here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cookie Consent (แถบยอมรับคุกกี้) -->
|
||
<div id="cookie-banner" class="fixed bottom-0 left-0 right-0 z-[100] bg-white border-t border-slate-200 shadow-[0_-20px_40px_rgba(0,0,0,0.1)] p-4 md:p-6 animate-slide-up">
|
||
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-4 md:gap-6">
|
||
<div class="flex items-start md:items-center w-full lg:w-auto">
|
||
<div class="bg-emerald-100 p-3 rounded-full mr-4 shrink-0 hidden md:flex">
|
||
<i data-lucide="cookie" class="w-6 h-6 text-[#056839]"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-base md:text-lg font-bold text-gray-900 mb-1 flex items-center">
|
||
<i data-lucide="cookie" class="w-4 h-4 md:hidden text-[#056839] mr-2 shrink-0"></i> การใช้คุกกี้ (Cookies)
|
||
</h4>
|
||
<p class="text-xs md:text-sm text-gray-600 leading-relaxed text-justify md:text-left">
|
||
เว็บไซต์โรงพยาบาลเกาะสมุยใช้คุกกี้เพื่อมอบประสบการณ์การใช้งานที่ดียิ่งขึ้น รวมถึงวิเคราะห์สถิติการเข้าชม และปรับปรุงประสิทธิภาพของเว็บไซต์
|
||
ตามมาตรฐาน PDPA ท่านสามารถศึกษารายละเอียดเพิ่มเติมได้ที่ <a href="#" class="text-[#056839] hover:underline font-medium">นโยบายความเป็นส่วนตัว</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col sm:flex-row items-center w-full lg:w-auto gap-2 sm:gap-3 shrink-0">
|
||
<button onclick="hideCookieBanner()" class="w-full sm:w-auto px-4 py-2 md:px-6 md:py-2.5 rounded-xl border border-gray-200 text-gray-600 font-medium hover:bg-gray-50 transition-colors text-xs md:text-sm">ปฏิเสธทั้งหมด</button>
|
||
<button onclick="hideCookieBanner()" class="w-full sm:w-auto px-4 py-2 md:px-6 md:py-2.5 rounded-xl border-2 border-[#056839] text-[#056839] font-bold hover:bg-emerald-50 transition-colors text-xs md:text-sm whitespace-nowrap">ตั้งค่าคุกกี้</button>
|
||
<button onclick="acceptCookies()" class="w-full sm:w-auto px-4 py-2 md:px-6 md:py-2.5 rounded-xl bg-[#056839] text-white font-bold hover:bg-[#04522b] shadow-md shadow-emerald-500/20 transition-all text-xs md:text-sm whitespace-nowrap">ยอมรับทั้งหมด</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast Notification -->
|
||
<div id="toast-msg" class="hidden fixed bottom-6 left-1/2 transform -translate-x-1/2 items-center p-4 pr-6 rounded-full shadow-2xl z-50 transition-all duration-500 bg-white border border-emerald-100 animate-slide-up">
|
||
<div class="bg-emerald-500 rounded-full p-1.5 mr-3 shadow-md shadow-emerald-500/30">
|
||
<i data-lucide="check" class="text-white w-4 h-4"></i>
|
||
</div>
|
||
<p id="toast-text" class="text-gray-800 font-bold text-sm">ข้อความแจ้งเตือน</p>
|
||
</div>
|
||
|
||
<!-- ==========================================
|
||
JAVASCRIPT LOGIC
|
||
========================================== -->
|
||
<script>
|
||
// 1. Initialize Icons
|
||
lucide.createIcons();
|
||
|
||
// 2. Mobile Menu Logic
|
||
function toggleMobileMenu() {
|
||
const menu = document.getElementById('mobile-menu');
|
||
const icon = document.getElementById('menu-icon');
|
||
if (menu.classList.contains('max-h-0')) {
|
||
menu.classList.remove('max-h-0');
|
||
menu.classList.add('max-h-[85vh]');
|
||
icon.setAttribute('data-lucide', 'x');
|
||
} else {
|
||
menu.classList.remove('max-h-[85vh]');
|
||
menu.classList.add('max-h-0');
|
||
icon.setAttribute('data-lucide', 'menu');
|
||
}
|
||
btn.classList.add('bg-amber-500', 'text-white', 'shadow-md', 'shadow-amber-500/30');
|
||
}
|
||
|
||
// 4. Procurement Sub-Tabs Logic
|
||
function switchProcurement(type) {
|
||
document.getElementById('procurement-supplies').classList.add('hidden');
|
||
document.getElementById('procurement-meds').classList.add('hidden');
|
||
document.getElementById('btn-supplies').className = "shrink-0 px-4 py-1.5 rounded-full text-xs font-bold transition-all bg-white/60 text-slate-600 hover:bg-white";
|
||
document.getElementById('btn-meds').className = "shrink-0 px-4 py-1.5 rounded-full text-xs font-bold transition-all bg-white/60 text-slate-600 hover:bg-white";
|
||
document.getElementById('procurement-' + type).classList.remove('hidden');
|
||
document.getElementById('btn-' + type).className = "shrink-0 px-4 py-1.5 rounded-full text-xs font-bold transition-all bg-teal-500 text-white shadow-md shadow-teal-500/30";
|
||
}
|
||
|
||
// 5. Modal Logic
|
||
function openModal(id) {
|
||
const modal = document.getElementById(id);
|
||
modal.classList.remove('hidden');
|
||
modal.classList.add('flex');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeModal(id) {
|
||
const modal = document.getElementById(id);
|
||
modal.classList.add('hidden');
|
||
modal.classList.remove('flex');
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
// 6. Gallery Logic
|
||
const galleryContainer = document.getElementById('gallery-container');
|
||
|
||
function slideGallery(direction) {
|
||
if (!galleryContainer) return;
|
||
const scrollAmt = galleryContainer.clientWidth / 1.5;
|
||
galleryContainer.scrollBy({
|
||
left: direction === 'left' ? -scrollAmt : scrollAmt,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
|
||
function openGalleryModal(album) {
|
||
document.getElementById('gallery-modal-title').innerText = album.title;
|
||
const metaText = album.images && album.images.length > 1 ?
|
||
`${album.date} • ${album.images.length} รูปภาพ` :
|
||
album.date;
|
||
document.getElementById('gallery-modal-meta').innerHTML = `<i data-lucide="calendar" class="w-4 h-4 mr-2"></i> ${metaText}`;
|
||
|
||
const grid = document.getElementById('gallery-modal-grid');
|
||
grid.innerHTML = '';
|
||
|
||
if (album.images && album.images.length === 1) {
|
||
grid.className = "grid gap-6 grid-cols-1 max-w-3xl mx-auto";
|
||
} else {
|
||
grid.className = "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
|
||
}
|
||
|
||
album.images.forEach((img) => {
|
||
grid.innerHTML += `
|
||
<div class="relative rounded-2xl overflow-hidden group shadow-lg ${album.images.length === 1 ? 'aspect-auto' : 'aspect-square md:h-80'} bg-black/50 border border-white/10">
|
||
<img src="${img}" class="w-full h-full ${album.images.length === 1 ? 'object-contain' : 'object-cover'} transform group-hover:scale-105 transition-transform duration-500" loading="lazy" />
|
||
</div>`;
|
||
});
|
||
|
||
lucide.createIcons();
|
||
openModal('gallery-modal');
|
||
}
|
||
|
||
// 7. AJAX Feedback Form Submission
|
||
function submitFeedback(e) {
|
||
e.preventDefault();
|
||
const btn = document.getElementById('feedback-submit-btn');
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<i data-lucide="loader" class="w-5 h-5 mr-2 animate-spin"></i> กำลังส่งข้อมูล...';
|
||
lucide.createIcons();
|
||
|
||
const formData = new FormData();
|
||
formData.append('action', 'submit_feedback');
|
||
formData.append('name', document.getElementById('fb_name').value);
|
||
formData.append('topic', document.getElementById('fb_topic').value);
|
||
formData.append('message', document.getElementById('fb_message').value);
|
||
|
||
fetch('index.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
closeModal('feedback-modal');
|
||
Swal.fire({ title: 'สำเร็จ!', text: 'ส่งความคิดเห็นเรียบร้อยแล้ว ขอบคุณสำหรับข้อเสนอแนะครับ', icon: 'success', confirmButtonColor: '#007f78' });
|
||
document.getElementById('feedback-form').reset();
|
||
} else {
|
||
Swal.fire({ title: 'เกิดข้อผิดพลาด', text: 'ไม่สามารถส่งข้อมูลได้ กรุณาลองใหม่อีกครั้ง', icon: 'error', confirmButtonColor: '#007f78' });
|
||
}
|
||
}).catch(err => {
|
||
console.error(err);
|
||
Swal.fire({ title: 'เกิดข้อผิดพลาด', text: 'ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์ได้', icon: 'error', confirmButtonColor: '#007f78' });
|
||
}).finally(() => {
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i data-lucide="send" class="w-5 h-5 mr-2"></i> ส่งความคิดเห็น';
|
||
lucide.createIcons();
|
||
});
|
||
}
|
||
|
||
// 8. Toast Message
|
||
function showToast(msg) {
|
||
const toast = document.getElementById('toast-msg');
|
||
document.getElementById('toast-text').innerText = msg;
|
||
toast.classList.remove('hidden');
|
||
toast.classList.add('flex');
|
||
setTimeout(() => {
|
||
toast.classList.remove('flex');
|
||
toast.classList.add('hidden');
|
||
}, 4000);
|
||
}
|
||
|
||
// 9. Cookie Banner Logic
|
||
function hideCookieBanner() {
|
||
document.getElementById('cookie-banner').style.display = 'none';
|
||
}
|
||
|
||
function acceptCookies() {
|
||
localStorage.setItem('cookie_accepted', 'true');
|
||
hideCookieBanner();
|
||
showToast('คุณได้ยอมรับการใช้งานคุกกี้เรียบร้อยแล้ว');
|
||
}
|
||
|
||
// ตรวจสอบการกดยอมรับคุกกี้ก่อนหน้านี้
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
if (localStorage.getItem('cookie_accepted') === 'true') {
|
||
hideCookieBanner();
|
||
}
|
||
});
|
||
|
||
// 10. Theme Toggle
|
||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||
const darkIcon = document.getElementById('theme-toggle-dark-icon');
|
||
const lightIcon = document.getElementById('theme-toggle-light-icon');
|
||
|
||
if (themeToggleBtn && darkIcon && lightIcon) {
|
||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
lightIcon.classList.remove('hidden');
|
||
} else {
|
||
darkIcon.classList.remove('hidden');
|
||
}
|
||
|
||
themeToggleBtn.addEventListener('click', function() {
|
||
darkIcon.classList.toggle('hidden');
|
||
lightIcon.classList.toggle('hidden');
|
||
|
||
if (localStorage.getItem('color-theme')) {
|
||
if (localStorage.getItem('color-theme') === 'light') {
|
||
document.documentElement.classList.add('dark');
|
||
localStorage.setItem('color-theme', 'dark');
|
||
} else {
|
||
document.documentElement.classList.remove('dark');
|
||
localStorage.setItem('color-theme', 'light');
|
||
}
|
||
} else {
|
||
if (document.documentElement.classList.contains('dark')) {
|
||
document.documentElement.classList.remove('dark');
|
||
localStorage.setItem('color-theme', 'light');
|
||
} else {
|
||
document.documentElement.classList.add('dark');
|
||
localStorage.setItem('color-theme', 'dark');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 11. PWA Service Worker Registration
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', () => {
|
||
navigator.serviceWorker.register('./sw.js').catch(() => {});
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
document.querySelector('.menu').addEventListener('click',()=>{
|
||
const n=document.querySelector('.nav');
|
||
n.style.display=n.style.display==='flex'?'none':'flex';
|
||
n.style.position='absolute';n.style.top='72px';n.style.right='14px';
|
||
n.style.background='#fff';n.style.padding='14px 18px';
|
||
n.style.flexDirection='column';n.style.boxShadow='0 8px 20px #0002';
|
||
n.style.borderRadius='12px';
|
||
});
|
||
|
||
document.querySelectorAll('.tab').forEach(tab=>
|
||
tab.addEventListener('click',()=>{
|
||
document.querySelectorAll('.tab').forEach(t=>t.setAttribute('aria-selected','false'));
|
||
document.querySelectorAll('.tab-panel').forEach(p=>p.hidden=true);
|
||
tab.setAttribute('aria-selected','true');
|
||
document.getElementById(tab.getAttribute('aria-controls')).hidden=false;
|
||
})
|
||
);
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|