| Server IP : 182.53.201.61 / Your IP : 216.73.217.175 Web Server : Apache/2.2.15 (Fedora) System : Linux km10.dyndns.org 2.6.31.5-127.fc12.i686.PAE #1 SMP Sat Nov 7 21:25:57 EST 2009 i686 User : apache ( 48) PHP Version : 5.3.3 Disable Function : NONE MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/tel/ |
Upload File : |
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>หมายเลขโทรศัพท์ภายในโรงพยาบาลสัตหีบ กม.10</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="index_tel-style.css" />
</head>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Sarabun', Tahoma, sans-serif;
background-color: #f0f4f8;
color: #1a2d42;
}
/* ===== Page Layout ===== */
.page {
max-width: 760px;
margin: 0 auto;
padding: 28px 20px 48px;
}
/* ===== Hero ===== */
.hero {
background-color: #0e4f8c;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 16px;
}
.hero-icon {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero-icon svg {
width: 26px;
height: 26px;
color: #0e4f8c;
}
.hero-text h1 {
font-size: 32px;
font-weight: 600;
color: #fff;
line-height: 1.4;
}
.hero-text p {
font-size: 24px;
color: #b5d4f4;
margin-top: 3px;
}
/* ===== Search ===== */
.search-wrap {
position: relative;
margin-bottom: 20px;
}
.search-wrap .search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: #6b7e96;
pointer-events: none;
}
#searchInput {
width: 100%;
padding: 10px 16px 10px 44px;
font-size: 15px;
font-family: 'Sarabun', Tahoma, sans-serif;
border-radius: 8px;
border: 0.5px solid #c5cfd9;
background-color: #fff;
color: #1a2d42;
}
#searchInput:focus {
outline: none;
border-color: #185fa5;
box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.15);
}
/* ===== Section label ===== */
.sec-label {
font-size: 12px;
font-weight: 600;
color: #4a6580;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
/* ===== Hotline cards ===== */
.hotline-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 24px;
}
.hcard {
background-color: #fff;
border: 0.5px solid #d0dae6;
border-radius: 10px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
}
.iwrap {
width: 36px;
height: 36px;
background-color: #e6f1fb;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.iwrap svg {
width: 18px;
height: 18px;
color: #185fa5;
}
.hnum {
font-size: 15px;
font-weight: 600;
color: #0e4f8c;
}
.hlbl {
font-size: 11px;
color: #6b7e96;
margin-top: 2px;
}
.badge-fax {
display: inline-block;
background-color: #fff8e6;
color: #854f0b;
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 20px;
border: 0.5px solid #fac775;
margin-left: 3px;
vertical-align: middle;
}
/* ===== Accordion list ===== */
.acc-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.acc-item {
background-color: #fff;
border: 0.5px solid #d0dae6;
border-radius: 12px;
overflow: hidden;
}
/* trigger button */
.acc-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
cursor: pointer;
border: none;
background: transparent;
text-align: left;
transition: background-color 0.15s ease;
}
.acc-trigger:hover {
background-color: #f5f8fc;
}
.acc-color-bar {
width: 4px;
height: 28px;
border-radius: 2px;
flex-shrink: 0;
}
.acc-trigger-icon {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.acc-trigger-icon svg {
width: 17px;
height: 17px;
}
.acc-name {
flex: 1;
font-size: 20px;
font-weight: 400;
color: #1a2d42;
}
.acc-count {
font-size: 12px;
color: #6b7e96;
margin-right: 4px;
}
.acc-chevron {
width: 18px;
height: 18px;
color: #6b7e96;
transition: transform 0.25s ease;
flex-shrink: 0;
}
.acc-item.open .acc-chevron {
transform: rotate(180deg);
}
/* body */
.acc-body {
display: none;
border-top: 0.5px solid #d0dae6;
}
.acc-item.open .acc-body {
display: block;
}
/* ===== Table ===== */
table {
width: 100%;
border-collapse: collapse;
}
thead th {
padding: 8px 16px;
font-size: 11px;
font-weight: 600;
color: #4a6580;
background-color: #f5f8fc;
border-bottom: 0.5px solid #d0dae6;
text-align: left;
}
thead th:last-child {
text-align: right;
}
tbody tr {
border-bottom: 0.5px solid #edf0f4;
transition: background-color 0.1s ease;
}
tbody tr:last-child {
border-bottom: none;
}
tbody tr:not(.fr):hover {
background-color: #f8fafc;
}
tbody td {
padding: 9px 16px;
font-size: 13px;
color: #1a2d42;
}
tbody td:last-child {
text-align: right;
font-weight: 600;
}
/* ===== Floor divider row ===== */
.fr td {
padding: 7px 16px;
border-top: 2px solid;
border-bottom: 0.5px solid;
}
.floor-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
}
.floor-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
/* ===== Per-color theming ===== */
[data-color="blue"] .acc-color-bar { background-color: #185fa5; }
[data-color="blue"] .acc-trigger-icon { background-color: #e6f1fb; }
[data-color="blue"] .acc-trigger-icon svg { color: #185fa5; }
[data-color="blue"] tbody td:last-child { color: #0e4f8c; }
[data-color="blue"] .fr td { background-color: #dbeafe; border-top-color: #185fa5; border-bottom-color: #93c5fd; }
[data-color="blue"] .floor-label { color: #1e40af; }
[data-color="blue"] .floor-num { background-color: #185fa5; }
[data-color="teal"] .acc-color-bar { background-color: #0F6E56; }
[data-color="teal"] .acc-trigger-icon { background-color: #E1F5EE; }
[data-color="teal"] .acc-trigger-icon svg { color: #0F6E56; }
[data-color="teal"] tbody td:last-child { color: #0F6E56; }
[data-color="teal"] .fr td { background-color: #E1F5EE; border-top-color: #0F6E56; border-bottom-color: #9FE1CB; }
[data-color="teal"] .floor-label { color: #085041; }
[data-color="teal"] .floor-num { background-color: #0F6E56; }
[data-color="purple"] .acc-color-bar { background-color: #534AB7; }
[data-color="purple"] .acc-trigger-icon { background-color: #EEEDFE; }
[data-color="purple"] .acc-trigger-icon svg { color: #534AB7; }
[data-color="purple"] tbody td:last-child { color: #534AB7; }
[data-color="purple"] .fr td { background-color: #EEEDFE; border-top-color: #534AB7; border-bottom-color: #AFA9EC; }
[data-color="purple"] .floor-label { color: #3C3489; }
[data-color="purple"] .floor-num { background-color: #534AB7; }
[data-color="coral"] .acc-color-bar { background-color: #993C1D; }
[data-color="coral"] .acc-trigger-icon { background-color: #FAECE7; }
[data-color="coral"] .acc-trigger-icon svg { color: #993C1D; }
[data-color="coral"] tbody td:last-child { color: #993C1D; }
[data-color="coral"] .fr td { background-color: #FAECE7; border-top-color: #993C1D; border-bottom-color: #F0997B; }
[data-color="coral"] .floor-label { color: #712B13; }
[data-color="coral"] .floor-num { background-color: #993C1D; }
[data-color="amber"] .acc-color-bar { background-color: #854F0B; }
[data-color="amber"] .acc-trigger-icon { background-color: #FAEEDA; }
[data-color="amber"] .acc-trigger-icon svg { color: #854F0B; }
[data-color="amber"] tbody td:last-child { color: #854F0B; }
[data-color="amber"] .fr td { background-color: #FAEEDA; border-top-color: #854F0B; border-bottom-color: #FAC775; }
[data-color="amber"] .floor-label { color: #633806; }
[data-color="amber"] .floor-num { background-color: #854F0B; }
/* ===== Search highlight ===== */
mark.hl {
background-color: #fef08a;
border-radius: 2px;
padding: 0 1px;
color: inherit;
}
/* ===== No result ===== */
#noResult {
display: none;
text-align: center;
padding: 40px;
font-size: 14px;
color: #6b7e96;
}
#noResult svg {
width: 36px;
height: 36px;
margin: 0 auto 10px;
display: block;
color: #a0b0c0;
}
/* ===== Responsive ===== */
@media (max-width: 520px) {
.hero {
flex-direction: column;
text-align: center;
padding: 18px;
}
.hero-text h1 {
font-size: 16px;
}
.hotline-grid {
grid-template-columns: 1fr;
}
tbody td,
thead th {
padding: 8px 12px;
font-size: 13px;
}
}
</style>
<body>
<div class="page">
<!-- Hero Header -->
<header class="hero">
<div class="hero-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</div>
<div class="hero-text">
<h1>หมายเลขโทรศัพท์ภายในโรงพยาบาลสัตหีบ</h1>
<p>ข้อมูลการติดต่อแผนกต่าง ๆ ภายในโรงพยาบาล</p>
</div>
</header>
<!-- Search -->
<div class="search-wrap">
<svg class="search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input type="text" id="searchInput" placeholder="ค้นหาแผนก หรืออาคาร เช่น ER, ทันตกรรม..." autocomplete="off" />
</div>
<!-- เบอร์โทรศัพท์ส่วนกลาง -->
<p class="sec-label" id="hotlineLabel">เบอร์โทรศัพท์ส่วนกลาง</p>
<div class="hotline-grid" id="hotlineSection">
<div class="hcard">
<div class="iwrap">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
</svg>
</div>
<div>
<div class="hnum">038 245 051</div>
<div class="hlbl">สายตรงโรงพยาบาล</div>
</div>
</div>
<div class="hcard">
<div class="iwrap">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3" />
</svg>
</div>
<div>
<div class="hnum">066 005 6082</div>
<div class="hlbl">เบอร์มือถือสำรอง</div>
</div>
</div>
<div class="hcard">
<div class="iwrap">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" />
</svg>
</div>
<div>
<div class="hnum">ต่อ 409 <span class="badge-fax">โทรสาร</span></div>
<div class="hlbl">038 245 051 ต่อ 409</div>
</div>
</div>
</div>
<!-- ต่อเบอร์โทรศัพท์ภายใน -->
<p class="sec-label" id="buildingLabel">ต่อเบอร์โทรศัพท์ภายใน</p>
<div class="acc-list" id="buildingsGrid">
<!-- ตึกพลูตาหลวง -->
<div class="acc-item" data-color="blue" data-building="ตึกพลูตาหลวง">
<button class="acc-trigger" aria-expanded="false">
<span class="acc-color-bar" aria-hidden="true"></span>
<span class="acc-trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</span>
<span class="acc-name">ตึกพลูตาหลวง</span>
<span class="acc-count">14 รายการ</span>
<svg class="acc-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="acc-body">
<table>
<thead><tr><th>แผนก / จุดให้บริการ</th><th>เบอร์ภายใน</th></tr></thead>
<tbody>
<tr><td>เวรเปล OPD</td><td>154</td></tr>
<tr><td>ซักประวัติ (OPD)</td><td>120</td></tr>
<tr><td>ก่อน / หลังพบแพทย์ (OPD)</td><td>172</td></tr>
<tr><td>ห้องตรวจ 1 (OPD)</td><td>191</td></tr>
<tr><td>ห้องตรวจ 2 (OPD)</td><td>192</td></tr>
<tr><td>สอบถามการตรวจ ATK</td><td>061 273 0472</td></tr>
<tr><td>ห้องบัตร (พลูตาหลวง)</td><td>1093</td></tr>
<tr><td>ห้องการเงิน (พลูตาหลวง)</td><td>1093</td></tr>
<tr><td>หน้าห้องตรวจ PCU พลูตาหลวง</td><td>171</td></tr>
<tr><td>PCU พลูตาหลวง</td><td>114</td></tr>
<tr><td>สุขภาพจิตและยาเสพติด</td><td>1074</td></tr>
<tr><td>คลินิกพิเศษ ARV</td><td>1072</td></tr>
<tr><td>ห้องเจาะเลือด</td><td>119</td></tr>
<tr><td>ศูนย์ส่งต่อ (Refer)</td><td>112</td></tr>
</tbody>
</table>
</div>
</div>
<!-- อาคารใหญ่ 4 ชั้น -->
<div class="acc-item" data-color="teal" data-building="อาคารใหญ่ 4 ชั้น ตึกอุบัติเหตุฉุกเฉิน">
<button class="acc-trigger" aria-expanded="false">
<span class="acc-color-bar" aria-hidden="true"></span>
<span class="acc-trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</span>
<span class="acc-name">อาคารใหญ่ 4 ชั้น (ตึกอุบัติเหตุฉุกเฉิน)</span>
<span class="acc-count">23 รายการ</span>
<svg class="acc-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="acc-body">
<table>
<thead><tr><th>แผนก / จุดให้บริการ</th><th>เบอร์ภายใน</th></tr></thead>
<tbody>
<tr class="fr"><td colspan="2"><span class="floor-label"><span class="floor-num">1</span>ชั้นที่ 1 และบริเวณโดยรอบ</span></td></tr>
<tr><td>โอเปอเรเตอร์ (Operator)</td><td>0</td></tr>
<tr><td>ประชาสัมพันธ์</td><td>101</td></tr>
<tr><td>เวรเปล (ER)</td><td>153</td></tr>
<tr><td>หัวหน้า ER</td><td>111</td></tr>
<tr><td>อุบัติเหตุฉุกเฉิน (ER)</td><td>110, 113</td></tr>
<tr><td>ห้องงานประกัน</td><td>131, 133</td></tr>
<tr><td>ห้องบัตร (หน้าลิฟต์)</td><td>132</td></tr>
<tr><td>ห้องการเงิน (หน้าลิฟต์)</td><td>151</td></tr>
<tr><td>หัวหน้าพยาบาล OPD</td><td>171</td></tr>
<tr><td>ห้อง LAB</td><td>118</td></tr>
<tr><td>หัวหน้าเภสัชกรรม</td><td>103</td></tr>
<tr><td>ห้องจ่ายยา OPD</td><td>104</td></tr>
<tr><td>ห้องจ่ายยา IPD</td><td>105</td></tr>
<tr><td>คลินิกทางเดินหายใจ ARI</td><td>1088</td></tr>
<tr><td>คลินิกพิเศษ TB</td><td>161</td></tr>
<tr><td>คลินิกโรคเรื้อรัง NCD</td><td>700</td></tr>
<tr class="fr"><td colspan="2"><span class="floor-label"><span class="floor-num">2</span>ชั้นที่ 2</span></td></tr>
<tr><td>เลขาแพทย์</td><td>231</td></tr>
<tr><td>ศูนย์คุณภาพ</td><td>234</td></tr>
<tr><td>กายภาพบำบัด</td><td>232</td></tr>
<tr><td>หัวหน้าทันตกรรม</td><td>222</td></tr>
<tr><td>ทันตกรรม</td><td>251</td></tr>
<tr><td>X-RAY</td><td>241</td></tr>
<tr><td>ศูนย์ CT</td><td>200</td></tr>
<tr class="fr"><td colspan="2"><span class="floor-label"><span class="floor-num">3</span>ชั้นที่ 3</span></td></tr>
<tr><td>หัวหน้า LR</td><td>333</td></tr>
<tr><td>ห้องคลอด (LR)</td><td>331, 332</td></tr>
<tr class="fr"><td colspan="2"><span class="floor-label"><span class="floor-num">4</span>ชั้นที่ 4</span></td></tr>
<tr><td>บริหารทั่วไป</td><td>401</td></tr>
<tr><td>การเงิน</td><td>402</td></tr>
</tbody>
</table>
</div>
</div>
<!-- ตึกผู้ป่วยใน -->
<div class="acc-item" data-color="purple" data-building="ตึกผู้ป่วยใน">
<button class="acc-trigger" aria-expanded="false">
<span class="acc-color-bar" aria-hidden="true"></span>
<span class="acc-trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</span>
<span class="acc-name">ตึกผู้ป่วยใน</span>
<span class="acc-count">3 รายการ</span>
<svg class="acc-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="acc-body">
<table>
<thead><tr><th>แผนก / จุดให้บริการ</th><th>เบอร์ภายใน</th></tr></thead>
<tbody>
<tr><td>หัวหน้าผู้ป่วยใน (Ward)</td><td>313</td></tr>
<tr><td>ผู้ป่วยใน 1 (Ward 1)</td><td>311, 312</td></tr>
<tr><td>ผู้ป่วยใน 2</td><td>502</td></tr>
<tr><td>ผู้ป่วยใน 3 (Ward 3)</td><td>601</td></tr>
</tbody>
</table>
</div>
</div>
<!-- อาคารพัสดุ -->
<div class="acc-item" data-color="coral" data-building="อาคารพัสดุ">
<button class="acc-trigger" aria-expanded="false">
<span class="acc-color-bar" aria-hidden="true"></span>
<span class="acc-trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</span>
<span class="acc-name">อาคารพัสดุ</span>
<span class="acc-count">2 รายการ</span>
<svg class="acc-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="acc-body">
<table>
<thead><tr><th>แผนก / จุดให้บริการ</th><th>เบอร์ภายใน</th></tr></thead>
<tbody>
<tr><td>คลังยา</td><td>621</td></tr>
<tr><td>ห้องพัสดุ</td><td>403</td></tr>
</tbody>
</table>
</div>
</div>
<!-- อาคารอื่น ๆ -->
<div class="acc-item" data-color="amber" data-building="อาคารอื่นๆ">
<button class="acc-trigger" aria-expanded="false">
<span class="acc-color-bar" aria-hidden="true"></span>
<span class="acc-trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
</span>
<span class="acc-name">อาคารอื่น ๆ</span>
<span class="acc-count">8 รายการ</span>
<svg class="acc-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="acc-body">
<table>
<thead><tr><th>แผนก / จุดให้บริการ</th><th>เบอร์ภายใน</th></tr></thead>
<tbody>
<tr><td>โรงครัว</td><td>600</td></tr>
<tr><td>จ่ายกลาง</td><td>611</td></tr>
<tr><td>ห้องยานพาหนะ (พขร.)</td><td>400</td></tr>
<tr><td>ห้องช่าง</td><td>408</td></tr>
<tr><td>แพทย์แผนไทย / แพทย์แผนจีน</td><td>644</td></tr>
<tr><td>ศูนย์คอมพิวเตอร์</td><td>999</td></tr>
<tr><td>สาธารณสุขอำเภอ</td><td>777</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="noResult">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.182 16.318A4.486 4.486 0 0012.016 15a4.486 4.486 0 00-3.198 1.318M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
</svg>
ไม่พบข้อมูลที่ค้นหา
</div>
</div>
<script>
const input = document.getElementById('searchInput');
const noResult = document.getElementById('noResult');
const hotlineSection = document.getElementById('hotlineSection');
const hotlineLabel = document.getElementById('hotlineLabel');
const buildingLabel = document.getElementById('buildingLabel');
const buildingsGrid = document.getElementById('buildingsGrid');
const items = Array.from(document.querySelectorAll('.acc-item'));
const origTbody = items.map(it => it.querySelector('tbody').innerHTML);
/* accordion toggle */
items.forEach(item => {
const trigger = item.querySelector('.acc-trigger');
trigger.addEventListener('click', () => {
const isOpen = item.classList.contains('open');
item.classList.toggle('open', !isOpen);
trigger.setAttribute('aria-expanded', String(!isOpen));
});
});
function esc(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
function hlStr(text, re) { return text.replace(re, m => `<mark class="hl">${m}</mark>`); }
input.addEventListener('input', function () {
const q = this.value.trim();
items.forEach((item, i) => { item.querySelector('tbody').innerHTML = origTbody[i]; });
if (!q) {
items.forEach(item => {
item.style.display = '';
item.classList.remove('open');
item.querySelector('.acc-trigger').setAttribute('aria-expanded', 'false');
});
hotlineSection.style.display = '';
hotlineLabel.style.display = '';
buildingLabel.style.display = '';
buildingsGrid.style.display = '';
noResult.style.display = 'none';
return;
}
const re = new RegExp(esc(q), 'gi');
let anyMatch = false;
items.forEach((item, i) => {
const tbody = item.querySelector('tbody');
const allRows = Array.from(tbody.querySelectorAll('tr'));
const groups = [];
let cur = { floorRow: null, dataRows: [] };
allRows.forEach(row => {
if (row.classList.contains('fr')) {
groups.push(cur);
cur = { floorRow: row, dataRows: [] };
} else {
cur.dataRows.push(row);
}
});
groups.push(cur);
let cardMatch = false;
const result = [];
groups.forEach(g => {
const matched = g.dataRows.filter(r => { re.lastIndex = 0; return re.test(r.textContent); });
if (matched.length) {
cardMatch = true;
if (g.floorRow) result.push(g.floorRow);
matched.forEach(row => {
row.querySelectorAll('td').forEach(td => {
td.innerHTML = hlStr(td.textContent, new RegExp(esc(q), 'gi'));
});
result.push(row);
});
}
});
if (cardMatch) {
anyMatch = true;
item.style.display = '';
item.classList.add('open');
item.querySelector('.acc-trigger').setAttribute('aria-expanded', 'true');
tbody.innerHTML = '';
result.forEach(r => tbody.appendChild(r));
} else {
item.style.display = 'none';
}
});
hotlineSection.style.display = 'none';
hotlineLabel.style.display = 'none';
buildingLabel.style.display = anyMatch ? '' : 'none';
buildingsGrid.style.display = anyMatch ? '' : 'none';
noResult.style.display = anyMatch ? 'none' : 'block';
});
</script>
</body>
</html>