Project

General

Profile

Download (56.2 KB)

3.Defect #3713 » malaria-bednet-mudblazor (1).html

Pattanan Kaewkaew, 21/04/2026 08:52 AM

 
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>บันทึกการชุบมุ้ง | Malaria Control</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=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* ========= MudBlazor-inspired tokens ========= */
:root {
--mud-primary: #0d7a5f;
--mud-primary-hover: #095842;
--mud-primary-lighten: rgba(13, 122, 95, 0.08);
--mud-primary-lighten-2: rgba(13, 122, 95, 0.16);
--mud-secondary: #ff4081;
--mud-success: #00c853;
--mud-error: #e53935;
--mud-error-lighten: #fdecea;
--mud-warning: #ff9800;
--mud-info: #2196f3;
--mud-surface: #ffffff;
--mud-appbar-bg: #ffffff;
--mud-drawer-bg: #ffffff;
--mud-background: #f5f7f9;
--mud-text-primary: rgba(0, 0, 0, 0.87);
--mud-text-secondary: rgba(0, 0, 0, 0.6);
--mud-text-disabled: rgba(0, 0, 0, 0.38);
--mud-divider: rgba(0, 0, 0, 0.12);
--mud-divider-light: rgba(0, 0, 0, 0.08);
--mud-action-hover: rgba(0, 0, 0, 0.04);
--mud-action-active: rgba(0, 0, 0, 0.08);
--mud-input-border: rgba(0, 0, 0, 0.42);
--mud-elevation-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
--mud-elevation-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
--mud-elevation-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
--mud-elevation-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
--mud-radius: 4px;
--mud-radius-lg: 8px;
--transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
margin: 0; padding: 0;
font-family: 'IBM Plex Sans Thai', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--mud-background);
color: var(--mud-text-primary);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

.material-icons { font-family: 'Material Icons'; font-size: 20px; vertical-align: middle; user-select: none; }

/* ========= APP LAYOUT ========= */
.mud-layout {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}

/* ========= DRAWER ========= */
.mud-drawer {
background: var(--mud-drawer-bg);
border-right: 1px solid var(--mud-divider);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}

.mud-drawer-header {
padding: 20px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--mud-divider);
min-height: 64px;
}
.mud-brand-logo {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--mud-primary) 0%, var(--mud-primary-hover) 100%);
display: grid; place-items: center;
color: white; font-weight: 700; font-size: 18px;
flex-shrink: 0;
}
.mud-brand-title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.mud-brand-sub { font-size: 11px; color: var(--mud-text-secondary); margin-top: 2px; }

.mud-nav-group-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mud-text-secondary);
padding: 20px 20px 8px;
font-weight: 600;
}

.mud-nav-link {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 20px;
color: var(--mud-text-primary);
cursor: pointer;
text-decoration: none;
font-size: 14px;
transition: background var(--transition);
border-left: 3px solid transparent;
}
.mud-nav-link:hover { background: var(--mud-action-hover); }
.mud-nav-link.active {
background: var(--mud-primary-lighten);
color: var(--mud-primary);
border-left-color: var(--mud-primary);
font-weight: 500;
}
.mud-nav-link .material-icons { font-size: 20px; color: inherit; opacity: 0.8; }
.mud-nav-link.active .material-icons { opacity: 1; }

/* ========= APP BAR ========= */
.mud-appbar {
background: var(--mud-appbar-bg);
box-shadow: var(--mud-elevation-1);
padding: 0 24px;
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 10;
}
.mud-breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--mud-text-secondary);
}
.mud-breadcrumbs a {
color: var(--mud-text-secondary);
text-decoration: none;
transition: color var(--transition);
}
.mud-breadcrumbs a:hover { color: var(--mud-primary); }
.mud-breadcrumbs .sep { color: var(--mud-text-disabled); }
.mud-breadcrumbs .current { color: var(--mud-text-primary); font-weight: 500; }

.mud-appbar-actions { display: flex; align-items: center; gap: 12px; }

.mud-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px 4px 4px;
background: var(--mud-action-hover);
border-radius: 999px;
font-size: 13px;
}
.mud-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mud-primary) 0%, var(--mud-primary-hover) 100%);
color: white;
display: grid; place-items: center;
font-size: 12px; font-weight: 600;
}

/* ========= MAIN ========= */
.mud-main { display: flex; flex-direction: column; min-width: 0; }
.mud-container {
padding: 24px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}

/* ========= PAGE HEADER ========= */
.page-header {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
}
.page-title {
font-size: 24px;
font-weight: 500;
margin: 0 0 4px;
color: var(--mud-text-primary);
}
.page-sub { color: var(--mud-text-secondary); font-size: 14px; }

.mud-badge-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: #fff3e0;
color: #e65100;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.mud-badge-status .material-icons { font-size: 14px; }

/* ========= TABS ========= */
.mud-tabs {
background: var(--mud-surface);
border-radius: var(--mud-radius) var(--mud-radius) 0 0;
border-bottom: 1px solid var(--mud-divider);
display: flex;
padding: 0 8px;
margin-bottom: 16px;
box-shadow: var(--mud-elevation-1);
}
.mud-tab {
padding: 14px 20px;
font-size: 14px;
font-weight: 500;
color: var(--mud-text-secondary);
cursor: pointer;
border: none;
background: none;
font-family: inherit;
position: relative;
transition: color var(--transition), background var(--transition);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.04em;
min-height: 48px;
}
.mud-tab:hover { background: var(--mud-action-hover); color: var(--mud-text-primary); }
.mud-tab::after {
content: '';
position: absolute;
left: 12px; right: 12px; bottom: -1px;
height: 2px;
background: transparent;
transition: background var(--transition);
}
.mud-tab.active { color: var(--mud-primary); }
.mud-tab.active::after { background: var(--mud-primary); }
.mud-tab-icon {
display: inline-grid; place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--mud-action-active);
color: var(--mud-text-secondary);
font-size: 12px; font-weight: 600;
transition: all var(--transition);
}
.mud-tab.active .mud-tab-icon { background: var(--mud-primary); color: white; }

/* ========= PAPER ========= */
.mud-paper {
background: var(--mud-surface);
border-radius: var(--mud-radius);
box-shadow: var(--mud-elevation-1);
padding: 24px;
margin-bottom: 16px;
}
.mud-paper-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--mud-divider-light);
}
.mud-paper-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 500;
}
.mud-paper-title-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--mud-primary-lighten);
color: var(--mud-primary);
display: grid; place-items: center;
}
.mud-paper-title-icon .material-icons { font-size: 20px; }
.mud-paper-subtitle {
font-size: 12px;
color: var(--mud-text-secondary);
font-weight: 400;
margin-top: 2px;
}

/* ========= GRID ========= */
.mud-grid { display: grid; gap: 20px; }
.mud-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mud-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mud-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mud-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 960px) {
.mud-grid.cols-6, .mud-grid.cols-4, .mud-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.mud-grid.cols-6, .mud-grid.cols-4, .mud-grid.cols-3, .mud-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ========= TEXT FIELD ========= */
.mud-field { position: relative; padding-top: 6px; }
.mud-input-root { position: relative; width: 100%; }
.mud-input {
width: 100%;
padding: 14px 12px 10px;
border: 1px solid var(--mud-input-border);
border-radius: var(--mud-radius);
background: var(--mud-surface);
font-family: inherit;
font-size: 14px;
color: var(--mud-text-primary);
outline: none;
transition: border-color var(--transition);
min-height: 44px;
}
.mud-input:hover:not(:disabled) { border-color: var(--mud-text-primary); }
.mud-input:focus {
border: 2px solid var(--mud-primary);
padding: 13px 11px 9px;
}
.mud-input:disabled {
background: transparent;
color: var(--mud-text-disabled);
border-color: var(--mud-divider);
cursor: not-allowed;
}

.mud-label {
position: absolute;
left: 10px;
top: -7px;
padding: 0 4px;
background: var(--mud-surface);
font-size: 12px;
color: var(--mud-text-secondary);
pointer-events: none;
transition: color var(--transition);
z-index: 1;
}
.mud-input:focus ~ .mud-label { color: var(--mud-primary); }
.mud-label .req { color: var(--mud-error); margin-left: 2px; }

.mud-input-helper {
font-size: 11px;
color: var(--mud-text-secondary);
margin-top: 3px;
margin-left: 12px;
}

.mud-select {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-opacity='.54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 36px !important;
cursor: pointer;
}

.mud-input-adornment-end {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--mud-text-secondary);
display: grid; place-items: center;
pointer-events: none;
}
.mud-input-adornment-end.clickable { pointer-events: auto; cursor: pointer; }
.mud-input-adornment-end .material-icons { font-size: 20px; }

textarea.mud-input {
resize: vertical;
min-height: 80px;
font-family: inherit;
}

/* ========= RADIO GROUP ========= */
.mud-radio-group-label {
font-size: 13px;
font-weight: 500;
color: var(--mud-text-secondary);
margin-bottom: 8px;
display: block;
}
.mud-radio-group-label .req { color: var(--mud-error); margin-left: 2px; }

.mud-radio-group {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
}

.mud-radio {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 6px;
cursor: pointer;
user-select: none;
border-radius: 999px;
transition: background var(--transition);
}
.mud-radio:hover { background: var(--mud-action-hover); }

.mud-radio-circle {
width: 20px; height: 20px;
border: 2px solid var(--mud-text-secondary);
border-radius: 50%;
position: relative;
transition: border-color var(--transition);
flex-shrink: 0;
}
.mud-radio.checked .mud-radio-circle { border-color: var(--mud-primary); }
.mud-radio.checked .mud-radio-circle::after {
content: '';
position: absolute;
inset: 3px;
background: var(--mud-primary);
border-radius: 50%;
animation: radioGrow 180ms ease-out;
}
@keyframes radioGrow { from { transform: scale(0); } to { transform: scale(1); } }

.mud-radio-label { font-size: 14px; color: var(--mud-text-primary); }

/* ========= BUTTON ========= */
.mud-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--mud-radius);
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
border: none;
letter-spacing: 0.04em;
transition: all var(--transition);
min-height: 36px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.mud-button .material-icons { font-size: 18px; }

.mud-button-filled {
background: var(--mud-primary);
color: white;
box-shadow: var(--mud-elevation-2);
}
.mud-button-filled:hover {
background: var(--mud-primary-hover);
box-shadow: var(--mud-elevation-4);
}

.mud-button-outlined {
background: transparent;
color: var(--mud-primary);
border: 1px solid rgba(13, 122, 95, 0.5);
}
.mud-button-outlined:hover {
background: var(--mud-primary-lighten);
border-color: var(--mud-primary);
}

.mud-button-text {
background: transparent;
color: var(--mud-primary);
padding: 8px 12px;
}
.mud-button-text:hover { background: var(--mud-primary-lighten); }
.mud-button-text-default { color: var(--mud-text-secondary); }
.mud-button-text-default:hover { background: var(--mud-action-hover); }

/* ========= ICON BUTTON ========= */
.mud-icon-button {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
color: var(--mud-text-secondary);
display: grid; place-items: center;
transition: background var(--transition), color var(--transition);
}
.mud-icon-button:hover { background: var(--mud-action-hover); color: var(--mud-text-primary); }
.mud-icon-button.danger:hover { background: var(--mud-error-lighten); color: var(--mud-error); }
.mud-icon-button.primary-color { color: var(--mud-primary); }
.mud-icon-button.primary-color:hover { background: var(--mud-primary-lighten); }
.mud-icon-button .material-icons { font-size: 20px; }

/* ========= CHIP ========= */
.mud-chip-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
border: 1px solid transparent;
}
.mud-chip-status .material-icons { font-size: 14px; }
.mud-chip-success { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.mud-chip-error { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }

/* ========= TABLE ========= */
.mud-table-container {
background: var(--mud-surface);
border-radius: var(--mud-radius);
box-shadow: var(--mud-elevation-1);
overflow: hidden;
}
.mud-table-toolbar {
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
border-bottom: 1px solid var(--mud-divider-light);
}
.mud-table-title {
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.mud-table-count {
background: var(--mud-action-active);
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--mud-text-secondary);
}

.mud-table-search {
position: relative;
max-width: 260px;
flex: 1;
}
.mud-table-search .material-icons {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
color: var(--mud-text-secondary);
font-size: 18px;
pointer-events: none;
}
.mud-table-search input {
width: 100%;
padding: 8px 12px 8px 40px;
border: 1px solid var(--mud-divider);
border-radius: var(--mud-radius);
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color var(--transition);
}
.mud-table-search input:focus { border-color: var(--mud-primary); }

table.mud-table {
width: 100%;
border-collapse: collapse;
}
.mud-table th {
text-align: left;
padding: 12px 16px;
font-weight: 500;
color: var(--mud-text-secondary);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
background: #fafafa;
border-bottom: 1px solid var(--mud-divider);
white-space: nowrap;
}
.mud-table th.num, .mud-table td.num { text-align: right; }
.mud-table th.center, .mud-table td.center { text-align: center; }
.mud-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--mud-divider-light);
font-size: 14px;
}
.mud-table tbody tr { transition: background var(--transition); cursor: pointer; }
.mud-table tbody tr:hover { background: var(--mud-action-hover); }
.mud-table tbody tr:last-child td { border-bottom: none; }
.mud-table tbody tr.selected { background: var(--mud-primary-lighten); }

.row-actions { display: flex; gap: 2px; justify-content: flex-end; }

/* Net count badges in table */
.net-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 24px;
padding: 0 8px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
}
.net-count-neutral { background: #f5f5f5; color: var(--mud-text-primary); }
.net-count-success { background: #e8f5e9; color: #1b5e20; }
.net-count-error { background: #ffebee; color: #b71c1c; }

/* ========= SUMMARY PANEL (inline in table container) ========= */
.mud-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
padding: 16px 20px;
border-top: 1px solid var(--mud-divider-light);
background: #fafafa;
}
.summary-item {
display: flex;
flex-direction: column;
padding: 8px 12px;
border-radius: var(--mud-radius);
position: relative;
}
.summary-item::before {
content: '';
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 3px;
border-radius: 2px;
background: var(--item-color, var(--mud-divider));
}
.summary-item.group-nets { background: rgba(33, 150, 243, 0.04); }
.summary-label {
font-size: 11px;
color: var(--mud-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.summary-label .material-icons { font-size: 13px; color: var(--item-color, var(--mud-text-secondary)); }
.summary-value {
font-size: 22px;
font-weight: 600;
color: var(--mud-text-primary);
margin-top: 2px;
line-height: 1.2;
}
.summary-value small {
font-size: 12px;
color: var(--mud-text-secondary);
margin-left: 4px;
font-weight: 400;
}
.summary-divider {
width: 1px;
background: var(--mud-divider);
margin: 4px 6px;
}

/* ========= SUMMARY CARDS (KPI style) ========= */
.summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 20px;
}
@media (max-width: 960px) { .summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .summary-grid { grid-template-columns: 1fr; } }

.summary-card {
background: var(--mud-surface);
border-radius: var(--mud-radius);
padding: 20px;
box-shadow: var(--mud-elevation-1);
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
transition: all var(--transition);
}
.summary-card:hover {
box-shadow: var(--mud-elevation-4);
transform: translateY(-2px);
}
.summary-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--card-color);
}
.summary-card-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: var(--card-bg);
color: var(--card-color);
display: grid; place-items: center;
flex-shrink: 0;
}
.summary-card-icon .material-icons { font-size: 24px; }
.summary-card-body { flex: 1; min-width: 0; }
.summary-card-label {
font-size: 12px;
color: var(--mud-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
.summary-card-value {
font-size: 28px;
font-weight: 600;
color: var(--mud-text-primary);
line-height: 1.1;
margin-top: 4px;
}
.summary-card-sub {
font-size: 11px;
color: var(--mud-text-secondary);
margin-top: 2px;
}

.card-primary { --card-color: var(--mud-primary); --card-bg: var(--mud-primary-lighten); }
.card-success { --card-color: var(--mud-success); --card-bg: #e8f5e9; }
.card-warning { --card-color: #ef6c00; --card-bg: #fff3e0; }
.card-info { --card-color: var(--mud-info); --card-bg: #e3f2fd; }

/* ========= SECTION BOX ========= */
.section-box {
border: 1px solid var(--mud-divider);
border-radius: var(--mud-radius);
padding: 18px 20px;
background: #fafafa;
}
.section-box-label {
font-size: 12px;
font-weight: 600;
color: var(--mud-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.section-box-label .material-icons { font-size: 16px; color: var(--mud-primary); }

.mud-divider { height: 1px; background: var(--mud-divider); margin: 20px 0; border: none; }

/* ========= LAYOUT: HOUSEHOLDS ========= */
.households-layout {
display: grid;
grid-template-columns: 380px 1fr;
gap: 16px;
align-items: start;
}
@media (max-width: 1100px) {
.households-layout { grid-template-columns: 1fr; }
}

/* ========= ACTION BAR ========= */
.mud-action-bar {
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--mud-divider);
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin: 0 -24px -24px;
z-index: 5;
box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}
.action-status {
font-size: 13px;
color: var(--mud-text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.status-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--mud-warning);
}
.status-dot.saved { background: var(--mud-success); }
.action-btns { display: flex; gap: 8px; }

/* ========= MOBILE ========= */
.mobile-menu-btn { display: none; }

@media (max-width: 960px) {
.mud-layout { grid-template-columns: 1fr; }
.mud-drawer {
position: fixed;
top: 0; left: 0;
width: 260px;
z-index: 30;
transform: translateX(-100%);
transition: transform var(--transition);
box-shadow: var(--mud-elevation-8);
}
.mud-drawer.open { transform: translateX(0); }
.mobile-menu-btn { display: grid; place-items: center; }
.mud-appbar { padding: 0 16px; }
.mud-container { padding: 16px; }
.mud-action-bar { margin: 0 -16px -16px; padding: 12px 16px; }
.user-name { display: none; }
}

.overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 25;
}
.overlay.show { display: block; }

.tab-panel { display: none; animation: fadeIn 0.2s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}

/* Number-of-nets summary inline helper */
.nets-summary {
display: flex;
gap: 16px;
padding: 10px 14px;
background: var(--mud-primary-lighten);
border-radius: var(--mud-radius);
font-size: 13px;
margin-top: 12px;
}
.nets-summary-item { display: flex; align-items: center; gap: 6px; }
.nets-summary-item strong { color: var(--mud-primary); font-weight: 600; }
</style>
</head>
<body>

<div class="mud-layout">
<!-- ========= DRAWER ========= -->
<aside class="mud-drawer" id="drawer">
<div class="mud-drawer-header">
<div class="mud-brand-logo">M</div>
<div>
<div class="mud-brand-title">Malaria Control</div>
<div class="mud-brand-sub">กรมควบคุมโรค</div>
</div>
</div>

<div class="mud-nav-group-label">หน้าหลัก</div>
<a class="mud-nav-link"><span class="material-icons">dashboard</span>แดชบอร์ด</a>
<a class="mud-nav-link"><span class="material-icons">search</span>ค้นหาผู้ป่วย</a>

<div class="mud-nav-group-label">การควบคุมพาหะ</div>
<a class="mud-nav-link"><span class="material-icons">blur_on</span>การฉีดพ่นสารเคมี</a>
<a class="mud-nav-link active"><span class="material-icons">shield</span>มุ้งชุบสารเคมี</a>
<a class="mud-nav-link"><span class="material-icons">pest_control</span>สำรวจลูกน้ำยุง</a>

<div class="mud-nav-group-label">รายงาน</div>
<a class="mud-nav-link"><span class="material-icons">bar_chart</span>สรุปผลงาน</a>
<a class="mud-nav-link"><span class="material-icons">description</span>เอกสารส่งออก</a>

<div class="mud-nav-group-label">ระบบ</div>
<a class="mud-nav-link"><span class="material-icons">settings</span>ตั้งค่า</a>
</aside>

<div class="overlay" id="overlay" onclick="toggleDrawer()"></div>

<!-- ========= MAIN ========= -->
<div class="mud-main">
<div class="mud-appbar">
<div style="display:flex;align-items:center;gap:8px;">
<button class="mud-icon-button mobile-menu-btn" onclick="toggleDrawer()">
<span class="material-icons">menu</span>
</button>
<nav class="mud-breadcrumbs">
<a href="#">หน้าแรก</a>
<span class="sep">›</span>
<a href="#">การควบคุมพาหะ</a>
<span class="sep">›</span>
<span class="current">บันทึกการชุบมุ้ง</span>
</nav>
</div>
<div class="mud-appbar-actions">
<button class="mud-icon-button"><span class="material-icons">notifications</span></button>
<button class="mud-icon-button"><span class="material-icons">help_outline</span></button>
<div class="mud-chip">
<div class="mud-avatar">จท</div>
<span class="user-name">หน่วย คม.6.5.3 ไผ่เขียว</span>
</div>
</div>
</div>

<div class="mud-container">
<div class="page-header">
<div>
<h1 class="page-title">แก้ไขข้อมูลการชุบมุ้ง</h1>
<div class="page-sub">บันทึกและจัดการข้อมูลการชุบมุ้งสารเคมีในพื้นที่ควบคุมโรค</div>
</div>
<div style="display:flex;gap:12px;align-items:center;">
<span class="mud-badge-status">
<span class="material-icons">edit</span>
กำลังแก้ไข
</span>
<span style="font-size:13px;color:var(--mud-text-secondary);">
รหัสงาน: <strong style="color:var(--mud-text-primary);font-weight:500;">BND-2569-00045</strong>
</span>
</div>
</div>

<!-- TABS -->
<div class="mud-tabs">
<button class="mud-tab active" onclick="switchTab('basic')">
<span class="mud-tab-icon">1</span>
ข้อมูลพื้นที่
</button>
<button class="mud-tab" onclick="switchTab('household')">
<span class="mud-tab-icon">2</span>
ข้อมูลครัวเรือน
</button>
</div>

<!-- ============================== TAB 1: BASIC ============================== -->
<div class="tab-panel active" id="tab-basic">

<!-- AREA -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">place</span></div>
<div>
พื้นที่ปฏิบัติงาน
<div class="mud-paper-subtitle">ข้อมูลที่อยู่ของพื้นที่ที่จะทำการชุบมุ้ง</div>
</div>
</div>
</div>

<div class="mud-grid cols-6">
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>กรุงเทพมหานคร</option></select>
<label class="mud-label">จังหวัด<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>บึงกุ่ม</option></select>
<label class="mud-label">อำเภอ<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>นวมินทร์</option></select>
<label class="mud-label">ตำบล<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>หมู่ที่ 1</option></select>
<label class="mud-label">หมู่ที่<span class="req">*</span></label>
</div>
</div>
<div class="mud-field" style="grid-column: span 2;">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>หมู่บ้านสราญรมย์ ประเสริฐ</option></select>
<label class="mud-label">กลุ่มบ้าน</label>
</div>
</div>
</div>

<!-- ระยะพื้นที่ -->
<div class="section-box" style="margin-top: 20px;">
<label class="mud-radio-group-label">ระยะพื้นที่<span class="req">*</span></label>
<div class="mud-radio-group">
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">A1</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">A2</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">B1</span>
</label>
<label class="mud-radio checked" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">B2</span>
</label>
</div>
</div>
</div>

<!-- ACTIVITY + ครั้งที่ -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">event_available</span></div>
<div>
รายละเอียดกิจกรรม
<div class="mud-paper-subtitle">วันที่ ประเภท และครั้งที่ปฏิบัติงาน</div>
</div>
</div>
</div>

<!-- Date -->
<div class="mud-grid cols-4" style="margin-bottom: 20px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" value="31/03/2569">
<label class="mud-label">วันที่ปฏิบัติงาน<span class="req">*</span></label>
<span class="mud-input-adornment-end"><span class="material-icons">event</span></span>
</div>
</div>
</div>

<!-- Activity + ครั้งที่ -->
<div class="section-box">
<label class="mud-radio-group-label">กิจกรรม<span class="req">*</span></label>
<div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
<div class="mud-radio-group" style="flex: 0 1 auto;">
<label class="mud-radio checked" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">ชุบมุ้ง</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">ชุบมุ้งพิเศษ</span>
</label>
</div>
<div class="mud-field" style="padding-top: 0; width: 90px; flex-shrink: 0;">
<div class="mud-input-root">
<input type="number" class="mud-input" value="1" min="1" max="99" maxlength="2" style="text-align:center;">
<label class="mud-label">ครั้งที่</label>
</div>
</div>
</div>
</div>

<div class="mud-divider"></div>

<!-- Chemical source -->
<div class="section-box">
<label class="mud-radio-group-label">แหล่งสารเคมี<span class="req">*</span></label>
<div class="mud-radio-group">
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">งบปกติ</span>
</label>
<label class="mud-radio checked" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">กองทุนโลก</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">แหล่งทุนอื่น</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">RAI</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">RAI2E</span>
</label>
</div>
</div>
</div>

<!-- CHEMICAL -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">science</span></div>
<div>
การใช้สารเคมี
<div class="mud-paper-subtitle">ชนิดและปริมาณของสารเคมีที่ใช้ชุบมุ้ง</div>
</div>
</div>
</div>

<div class="mud-grid" style="grid-template-columns: 2fr 1.5fr 100px 140px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" value="เดลต้าเมทริน 25% ชนิดเม็ดละลายน้ำ" style="padding-right: 40px;">
<label class="mud-label">ชื่อสารเคมี<span class="req">*</span></label>
<span class="mud-input-adornment-end clickable"><span class="material-icons">search</span></span>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ระบุเพิ่มเติม">
<label class="mud-label">ชื่อสารเคมี (อื่นๆ)</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="4" style="text-align:center;">
<label class="mud-label">จำนวน<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select">
<option>เม็ด</option>
<option>ซอง</option>
<option>ขวด</option>
<option>ลิตร</option>
</select>
<label class="mud-label">หน่วยนับ</label>
</div>
</div>
</div>
</div>

<!-- TEAM -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">groups</span></div>
<div>
ทีมปฏิบัติงาน
<div class="mud-paper-subtitle">ผู้รับผิดชอบและจำนวนพนักงาน</div>
</div>
</div>
</div>

<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" value="จันทนาภรณ์ (pattanank@biophics.org)" style="padding-right:40px;">
<label class="mud-label">หัวหน้าทีม<span class="req">*</span></label>
<span class="mud-input-adornment-end clickable"><span class="material-icons">search</span></span>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ค้นหาผู้ควบคุม" style="padding-right:40px;">
<label class="mud-label">ผู้ควบคุม</label>
<span class="mud-input-adornment-end clickable"><span class="material-icons">search</span></span>
</div>
</div>
</div>

<div class="mud-grid cols-4" style="margin-top: 20px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="4" style="text-align:center;">
<label class="mud-label">จำนวนพนักงาน<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="1" style="text-align:center;">
<label class="mud-label">จำนวนหลังคาเรือน</label>
</div>
<div class="mud-input-helper">คำนวณอัตโนมัติจากครัวเรือน</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="2" style="text-align:center;">
<label class="mud-label">จำนวนประชากร</label>
</div>
<div class="mud-input-helper">คำนวณอัตโนมัติจากครัวเรือน</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ระบุชื่อ">
<label class="mud-label">ผู้ควบคุมอื่น</label>
</div>
</div>
</div>

<div class="mud-field" style="margin-top: 20px;">
<div class="mud-input-root">
<textarea class="mud-input" placeholder="บันทึกข้อสั่งการหรือคำแนะนำจากผู้บังคับบัญชา"></textarea>
<label class="mud-label">ข้อสั่งการ</label>
</div>
</div>
</div>
</div>

<!-- ============================== TAB 2: HOUSEHOLDS ============================== -->
<div class="tab-panel" id="tab-household">

<div class="households-layout">
<!-- LEFT: ADD FORM -->
<div class="mud-paper" style="margin-bottom: 0; position: sticky; top: 80px;">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">add_home</span></div>
เพิ่มครัวเรือน
</div>
</div>

<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="เช่น 45/2">
<label class="mud-label">บ้านเลขที่<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select">
<option>บ้าน</option>
<option>ศาสนสถาน</option>
<option>โรงเรียน</option>
<option>อื่นๆ</option>
</select>
<label class="mud-label">ประเภทบ้าน<span class="req">*</span></label>
</div>
</div>
</div>

<div class="mud-grid cols-2" style="margin-top: 16px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ชื่อ">
<label class="mud-label">ชื่อเจ้าบ้าน</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="นามสกุล">
<label class="mud-label">สกุลเจ้าบ้าน</label>
</div>
</div>
</div>

<div class="mud-field" style="margin-top: 16px;">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">จำนวนคนในบ้าน<span class="req">*</span></label>
</div>
</div>

<!-- Spray status -->
<div class="section-box" style="margin-top: 20px;">
<div class="section-box-label">
<span class="material-icons">shield</span>สถานะการชุบ
</div>
<div class="mud-radio-group" style="margin-bottom: 16px;">
<label class="mud-radio checked" onclick="setRadio(this); toggleDip(true)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">ได้ชุบ</span>
</label>
<label class="mud-radio" onclick="setRadio(this); toggleDip(false)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">ไม่ได้ชุบ</span>
</label>
</div>

<!-- Nets section (shown when ได้ชุบ) -->
<div id="dip-nets-section">
<div class="mud-grid cols-3">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="nets-total" style="text-align:center;" onchange="updateNetsSummary()">
<label class="mud-label">มุ้งที่มีในบ้าน</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="nets-dipped" style="text-align:center;" onchange="updateNetsSummary()">
<label class="mud-label">มุ้งที่ชุบ</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="nets-skipped" style="text-align:center;" disabled>
<label class="mud-label">มุ้งที่ไม่ได้ชุบ</label>
</div>
<div class="mud-input-helper">คำนวณอัตโนมัติ</div>
</div>
</div>
</div>

<!-- Reason (shown when ไม่ได้ชุบ) -->
<div class="mud-field" id="dip-reason-field" style="display:none;">
<div class="mud-input-root">
<select class="mud-input mud-select">
<option>ปิด</option>
<option>ปฏิเสธ</option>
<option>ไม่มีผู้อยู่อาศัย</option>
<option>ไม่มีมุ้ง</option>
<option>อื่นๆ</option>
</select>
<label class="mud-label">เหตุที่ไม่ได้ชุบ<span class="req">*</span></label>
</div>
</div>
</div>

<div class="mud-field" style="margin-top: 16px;">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ระบุวัสดุที่ใช้เพิ่มเติม">
<label class="mud-label">วัสดุอื่นๆ</label>
</div>
</div>

<div class="mud-field" style="margin-top: 16px;">
<div class="mud-input-root">
<textarea class="mud-input" placeholder="บันทึกเพิ่มเติม"></textarea>
<label class="mud-label">หมายเหตุ</label>
</div>
</div>

<div style="display:flex;gap:8px;margin-top:20px;">
<button class="mud-button mud-button-filled" style="flex:1;">
<span class="material-icons">add</span>
เพิ่มข้อมูล
</button>
<button class="mud-button mud-button-outlined">
<span class="material-icons">restart_alt</span>
ล้างฟอร์ม
</button>
</div>
</div>

<!-- RIGHT: TABLE + SUMMARY -->
<div>
<div class="mud-table-container">
<div class="mud-table-toolbar">
<div class="mud-table-title">
รายการครัวเรือน
<span class="mud-table-count">1 รายการ</span>
</div>
<div class="mud-table-search">
<span class="material-icons">search</span>
<input type="text" placeholder="ค้นหาบ้านเลขที่ / ชื่อ">
</div>
</div>

<div style="overflow-x:auto;">
<table class="mud-table">
<thead>
<tr>
<th class="num">#</th>
<th>บ้านเลขที่</th>
<th>ชื่อเจ้าบ้าน</th>
<th>ประเภท</th>
<th>สถานะ</th>
<th class="num">คนในบ้าน</th>
<th class="num">มุ้งที่มี</th>
<th class="num">มุ้งที่ชุบ</th>
<th class="num">มุ้งไม่ได้ชุบ</th>
<th class="center">จัดการ</th>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)">
<td class="num" style="color:var(--mud-text-disabled);">1</td>
<td><strong>30mar001</strong></td>
<td>ทดสอบ add บ้าน</td>
<td>บ้าน</td>
<td>
<span class="mud-chip-status mud-chip-success">
<span class="material-icons">check</span>ได้ชุบ
</span>
</td>
<td class="num">2</td>
<td class="num"><span class="net-count net-count-neutral">0</span></td>
<td class="num"><span class="net-count net-count-success">0</span></td>
<td class="num"><span class="net-count net-count-error">0</span></td>
<td>
<div class="row-actions">
<button class="mud-icon-button"><span class="material-icons">visibility</span></button>
<button class="mud-icon-button primary-color"><span class="material-icons">edit</span></button>
<button class="mud-icon-button danger"><span class="material-icons">delete</span></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- SUMMARY PANEL -->
<div class="mud-summary">
<div class="summary-item" style="--item-color: var(--mud-primary);">
<div class="summary-label">
<span class="material-icons">home</span>
ครัวเรือนทั้งหมด
</div>
<div class="summary-value">1<small>ครัวเรือน</small></div>
</div>
<div class="summary-item" style="--item-color: var(--mud-success);">
<div class="summary-label">ได้ชุบ</div>
<div class="summary-value" style="color: var(--mud-success);">1<small>ครัวเรือน</small></div>
</div>
<div class="summary-item" style="--item-color: var(--mud-error);">
<div class="summary-label">ไม่ได้ชุบ</div>
<div class="summary-value" style="color: var(--mud-error);">0<small>ครัวเรือน</small></div>
</div>
<div class="summary-item" style="--item-color: var(--mud-info);">
<div class="summary-label">ประชากรรวม</div>
<div class="summary-value">2<small>คน</small></div>
</div>
<div class="summary-item group-nets" style="--item-color: var(--mud-info);">
<div class="summary-label">
<span class="material-icons">shield</span>
มุ้งทั้งหมด
</div>
<div class="summary-value">0<small>หลัง</small></div>
</div>
<div class="summary-item group-nets" style="--item-color: var(--mud-success);">
<div class="summary-label">มุ้งที่ชุบ</div>
<div class="summary-value" style="color: var(--mud-success);">0<small>หลัง</small></div>
</div>
<div class="summary-item group-nets" style="--item-color: var(--mud-error);">
<div class="summary-label">มุ้งไม่ได้ชุบ</div>
<div class="summary-value" style="color: var(--mud-error);">0<small>หลัง</small></div>
</div>
</div>
</div>

</div>
</div>
</div>

<!-- ACTION BAR -->
<div class="mud-action-bar">
<div class="action-status">
<span class="status-dot"></span>
ยังไม่ได้บันทึก · แก้ไขล่าสุด 14:32 น.
</div>
<div class="action-btns">
<button class="mud-button mud-button-text mud-button-text-default">
ยกเลิก
</button>
<button class="mud-button mud-button-outlined" onclick="alert('บันทึกร่างเรียบร้อย')">
<span class="material-icons">save_as</span>
บันทึกร่าง
</button>
<button class="mud-button mud-button-filled" onclick="saveForm()">
<span class="material-icons">save</span>
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
</div>

<script>
function switchTab(id) {
document.querySelectorAll('.mud-tab').forEach((t, i) => {
t.classList.toggle('active', (id === 'basic' && i === 0) || (id === 'household' && i === 1));
});
document.querySelectorAll('.tab-panel').forEach(p => p.classList.toggle('active', p.id === 'tab-' + id));
window.scrollTo({top: 0, behavior: 'smooth'});
}

function setRadio(el) {
el.parentElement.querySelectorAll('.mud-radio').forEach(r => r.classList.remove('checked'));
el.classList.add('checked');
}

function toggleDip(didDip) {
document.getElementById('dip-nets-section').style.display = didDip ? '' : 'none';
document.getElementById('dip-reason-field').style.display = didDip ? 'none' : '';
}

function updateNetsSummary() {
const total = parseInt(document.getElementById('nets-total').value) || 0;
const dipped = parseInt(document.getElementById('nets-dipped').value) || 0;
const skipped = Math.max(0, total - dipped);
document.getElementById('nets-skipped').value = skipped;
}

function selectRow(row) {
row.parentElement.querySelectorAll('tr').forEach(r => r.classList.remove('selected'));
row.classList.add('selected');
}

function toggleDrawer() {
document.getElementById('drawer').classList.toggle('open');
document.getElementById('overlay').classList.toggle('show');
}

function saveForm() {
const status = document.querySelector('.action-status');
status.innerHTML = '<span class="status-dot saved"></span>บันทึกสำเร็จเมื่อ ' +
new Date().toLocaleTimeString('th-TH', {hour:'2-digit',minute:'2-digit'}) + ' น.';
setTimeout(() => {
status.innerHTML = '<span class="status-dot"></span>ยังไม่ได้บันทึก · แก้ไขล่าสุด ' +
new Date().toLocaleTimeString('th-TH', {hour:'2-digit',minute:'2-digit'}) + ' น.';
}, 4000);
}
</script>

</body>
</html>
(5-5/5)