/* ============================================================================ WAR ROOM P4 — หน้า "ค้นหาประวัติบุคคลจากภาพถ่าย" (face-search.html) ศูนย์ปราบปรามยาเสพติด ตำรวจภูธรภาค 4 ---------------------------------------------------------------------------- กติกาของไฟล์นี้ 1) ห้าม hardcode ค่าสีเป็นเลขฐานสิบหก — ใช้ตัวแปรของระบบเท่านั้น · โทนกลาง : --wr-* (css/warroom-theme.css) · โหมดมืด : --wr-d-* (css/dark-mode.css) · ชั้นตกแต่ง luxury: --tc-* (css/warroom-tactical.css) เมื่อสลับธีม ไฟล์ธีมจะเปลี่ยนค่าตัวแปรให้เอง หน้านี้จึงไม่ต้องเขียนสีซ้ำ 2) พื้นสีอ่อน (tint) ทุกจุดทำด้วย ::before + background: currentColor + opacity เพื่อให้ได้เฉดจางของสีเดียวกับกรอบ โดยไม่ต้องประกาศค่าสีใหม่ 3) ต้องแสดงผลได้ทั้งจอคอมพิวเตอร์ในห้องปฏิบัติการและโทรศัพท์ของชุดปฏิบัติการ (การ์ดเทียบภาพ 2 คอลัมน์ ยุบเหลือ 1 คอลัมน์บนมือถือ) ============================================================================ */ /* ─── 1. ตัวแปรระดับหน้า — จับคู่ความหมายเข้ากับตัวแปรของระบบ ───────────── */ :root { /* ระดับความเข้าข่าย 3 ระดับ ตามฟิลด์ band ของสัญญา API */ --fs-high: var(--wr-red); /* สูง — ควรตรวจสอบเป็นลำดับแรก */ --fs-mid: var(--wr-gold); /* ปานกลาง — ต้องดูหลักฐานอื่นประกอบ */ --fs-low: var(--wr-muted); /* ต่ำ — ความคล้ายต่ำ อาจเป็นคนละบุคคล */ /* สีเตือน / สีเน้น ที่ใช้ซ้ำในหน้านี้ */ --fs-danger: var(--wr-red); --fs-accent: var(--wr-blue-lt); --fs-ok: var(--wr-gold); } body.wr-dark { --fs-high: var(--wr-d-danger); --fs-mid: var(--wr-d-warning); --fs-low: var(--wr-d-text-dim); --fs-danger: var(--wr-d-danger); --fs-accent: var(--wr-d-blue); --fs-ok: var(--wr-d-success); } body.tactical { --fs-high: var(--tc-red); --fs-mid: var(--tc-orange); --fs-low: var(--tc-muted); --fs-danger: var(--tc-red); --fs-accent: var(--tc-cyan); --fs-ok: var(--tc-green); } /* หน้านี้ซ่อน/แสดงส่วนต่าง ๆ ตามวิธีค้นหาที่เลือก ด้วยแอตทริบิวต์ hidden ประกาศกฎนี้ไว้เองด้วย เพื่อให้ทำงานถูกต้องแม้โหลด bootstrap จาก CDN ไม่สำเร็จ */ [hidden] { display: none !important; } /* ─── 2. โครงหน้า ───────────────────────────────────────────────────────── */ /* ★ ล้างระยะสำรองที่ธีมตั้งไว้ที่ css/warroom-theme.css:30-32 ตั้ง body { padding-top:64px; padding-left:220px } ไว้เป็น "ค่าสำรอง" สำหรับหน้าที่ไม่มี .wr-main-content หน้าที่มี .wr-main-content (ซึ่งตั้ง margin-left:220px และ padding-top:64px ของตัวเองอยู่แล้ว) ต้องล้างทิ้ง มิฉะนั้นระยะถูกนับสองรอบ — ขอบซ้ายกลายเป็น 440px และเนื้อหาเริ่มที่ 128px ทำให้พื้นที่ใช้งานหายไป 220px และเนื้อหาไม่อยู่กึ่งกลาง (กติกาเดียวกับที่ css/warroom-table.css:57-64 อธิบายไว้ และที่ css/psych-dashboard.css:6 ทำ) ไฟล์นี้ถูกโหลดเฉพาะ 3 หน้าของโมดูลนี้ กฎนี้จึงไม่กระทบหน้าอื่นของระบบ */ body { padding-top: 0 !important; padding-left: 0 !important; } /* คอนเทนเนอร์หลักของหน้า — จัดกึ่งกลางและกว้างเท่าหน้าอื่นของระบบ (เทียบ .rf-main ใน css/referral.css = 1680px และ .dash-main ในหน้า dashboard = 1600px) ⚠️ margin-inline: auto จำเป็น มิฉะนั้นเนื้อหาจะชิดซ้ายเมื่อจอกว้างกว่า max-width ระยะขอบซ้าย-ขวามาจาก .wr-main-content (2rem) อยู่แล้ว จึงไม่ใส่ padding ซ้ำ */ .fs-main { max-width: 1680px; margin-inline: auto; padding: 1.25rem 0 2.5rem; } /* หัวเรื่องหน้า — ใช้คลาส .page-header/.icon-box ร่วมกับหน้าอื่นของระบบ (ชั้น luxury ใน warroom-tactical.css จะตกแต่งให้เองอัตโนมัติ) */ .fs-main .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; padding: 0.9rem 1.1rem; background: var(--wr-card-bg); border: 1px solid var(--wr-border); border-radius: var(--wr-radius); box-shadow: var(--wr-shadow); } .fs-main .page-header h1 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--wr-text); display: flex; align-items: center; gap: 0.6rem; } .fs-main .page-header .icon-box { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; color: var(--fs-accent); border: 1px solid var(--wr-border); position: relative; } .fs-main .page-header .icon-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .14; pointer-events: none; } /* ยกไอคอนขึ้นเหนือแผ่นสีจาง ไม่ให้ถูกทับ */ .fs-main .page-header .icon-box i { position: relative; } .fs-main .page-header .subtitle { margin-top: 0.15rem; font-size: .8rem; color: var(--wr-muted); } /* ─── 3. แถบเตือนสีแดงถาวร — ปิดไม่ได้ ไม่มีปุ่มปิด ไม่จำสถานะ ─────────── */ .fs-alert-danger { position: relative; color: var(--fs-danger); border: 1px solid currentColor; border-left-width: 5px; border-radius: var(--wr-radius); padding: 0.95rem 1.15rem; margin-bottom: 1.1rem; display: flex; align-items: flex-start; gap: 0.75rem; box-shadow: var(--wr-shadow); } .fs-alert-danger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .12; pointer-events: none; } .fs-alert-danger > * { position: relative; } .fs-alert-danger .fs-alert-icon { font-size: 1.5rem; line-height: 1.3; flex-shrink: 0; } .fs-alert-danger .fs-alert-text { font-size: .85rem; line-height: 1.75; color: var(--wr-text); margin: 0; } /* ข้อความที่ต้องเน้น — "ข้อควรระวัง" และประโยคห้ามใช้เป็นเหตุจับกุม */ .fs-alert-danger .fs-alert-text strong { color: var(--fs-danger); } /* ─── 4. แผงเนื้อหา ─────────────────────────────────────────────────────── */ .fs-panel { background: var(--wr-card-bg); border: 1px solid var(--wr-border); border-radius: var(--wr-radius); box-shadow: var(--wr-shadow); margin-bottom: 1.1rem; overflow: hidden; } /* ชั้น luxury ใช้แผงกึ่งโปร่งแสงทั้งระบบ — ปรับให้เข้าชุดกับหน้าอื่น */ body.tactical .fs-panel { background: var(--tc-panel); border-color: var(--tc-border); backdrop-filter: blur(12px); } .fs-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--wr-border); } .fs-panel-title { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--wr-text); display: flex; align-items: center; gap: 0.45rem; } .fs-panel-title i { color: var(--fs-accent); } .fs-panel-body { padding: 1.1rem; } /* หมายเลขลำดับขั้นตอนหน้าหัวข้อ (๑ ภาพ · ๒ เหตุผล · ๓ ทางเลือกที่สอง) */ .fs-step { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; position: relative; color: var(--fs-accent); border: 1px solid currentColor; } .fs-step::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .16; } .fs-step span { position: relative; } /* คำอธิบายกำกับช่องกรอก */ .fs-hint { display: block; font-size: .75rem; line-height: 1.6; color: var(--wr-muted); margin-top: 0.3rem; } .fs-hint i { margin-right: 0.25rem; } .fs-required { color: var(--fs-danger); font-weight: 700; } /* ─── คำอธิบายส่วนขยาย "อ่านเพิ่ม" ──────────────────────────────────────── เจตนา: หน้านี้มีข้อความกำกับตามกฎหมายและคำเตือนเรื่องการตีความค่าคะแนน ซึ่ง "ห้ามตัดทิ้ง" แต่ถ้าแสดงเต็มทุกบรรทัดพร้อมกัน เจ้าหน้าที่จะกวาดตาหา ช่องที่ต้องกรอกไม่เจอ จึงคงใจความสำคัญไว้ให้เห็นเสมอ แล้วพับรายละเอียด ที่เหลือไว้ใต้ปุ่ม "อ่านเพิ่ม" ซึ่งกดเปิดได้ทุกเมื่อ ใช้

ล้วน ไม่ต้องพึ่ง JavaScript — ถ้าสคริปต์ของหน้าพัง ข้อความตามกฎหมายก็ยังเปิดอ่านได้อยู่ */ .fs-more { display: inline; } .fs-more > summary { display: inline; cursor: pointer; color: var(--wr-blue-lt); font-weight: 600; text-decoration: underline dotted; list-style: none; } .fs-more > summary::-webkit-details-marker { display: none; } .fs-more > summary::marker { content: ''; } .fs-more > summary::after { content: ' \25be'; } /* ▾ ปิดอยู่ */ .fs-more[open] > summary::after { content: ' \25b4'; } /* ▴ เปิดแล้ว */ .fs-more[open] > summary { margin-bottom: 0.25rem; } /* เนื้อหาที่พับไว้ — ต้องเป็นบล็อกเต็มบรรทัด ไม่งั้นจะไหลต่อท้ายคำว่า "อ่านเพิ่ม" */ .fs-more-body { display: block; margin-top: 0.3rem; padding-left: 0.7rem; border-left: 2px solid var(--wr-border); } /* ─── 5. ส่วนภาพที่จะค้น — กล่องเลือกไฟล์ / ถ่ายรูป + พรีวิว ──────────── */ .fs-pick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .fs-upload-area { border: 2px dashed var(--wr-border); border-radius: var(--wr-radius); padding: 1.5rem 1rem; text-align: center; color: var(--wr-muted); transition: border-color .2s, color .2s; } .fs-upload-area:hover, .fs-upload-area:focus-within { border-color: var(--fs-accent); color: var(--wr-text); } .fs-upload-icon { font-size: 2rem; color: var(--fs-accent); display: block; margin-bottom: 0.4rem; } .fs-upload-title { font-size: .9375rem; font-weight: 700; color: var(--wr-text); margin-bottom: 0.15rem; } /* ปุ่มเลือกไฟล์ / ถ่ายรูป วางคู่กัน ยุบเป็นแนวตั้งบนจอแคบ */ .fs-pick-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.85rem; } .fs-pick-btns .btn { min-width: 150px; } /* พรีวิวรูปที่จะใช้ค้น — ต้องใหญ่พอให้เจ้าหน้าที่ตรวจสอบเองก่อนส่งค้น */ .fs-preview { border: 1px solid var(--wr-border); border-radius: var(--wr-radius); overflow: hidden; display: flex; flex-direction: column; } .fs-preview-frame { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .fs-preview-frame::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .06; color: var(--wr-muted); pointer-events: none; } .fs-preview-frame img { position: relative; max-width: 100%; max-height: 320px; min-height: 180px; object-fit: contain; display: block; } .fs-preview-empty { position: relative; color: var(--wr-muted); font-size: .85rem; text-align: center; padding: 1.5rem 1rem; line-height: 1.7; } .fs-preview-empty i { display: block; font-size: 2rem; margin-bottom: 0.4rem; opacity: .7; } .fs-preview-meta { border-top: 1px solid var(--wr-border); padding: 0.55rem 0.8rem; font-size: .75rem; color: var(--wr-muted); display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; } /* ค่า dHash — ต้องเป็นตัวพิมพ์คงความกว้าง อ่านทีละหลักได้ */ .fs-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--fs-accent); } /* ─── 6. ฟอร์มบังคับก่อนค้น ─────────────────────────────────────────────── */ .fs-field { margin-bottom: 0.95rem; } .fs-field:last-child { margin-bottom: 0; } .fs-label { display: block; font-size: .85rem; font-weight: 700; color: var(--wr-text); margin-bottom: 0.3rem; } /* ตัวนับตัวอักษรของช่อง "เหตุผลการสืบค้น" */ .fs-counter { font-size: .75rem; font-weight: 600; color: var(--wr-muted); white-space: nowrap; } .fs-counter--bad { color: var(--fs-danger); } .fs-counter--ok { color: var(--fs-ok); } /* แถบเลื่อน "ระยะความคล้าย" */ .fs-slider-row { display: flex; align-items: center; gap: 0.8rem; } .fs-slider-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--fs-accent); } .fs-slider-value { min-width: 3.2rem; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--fs-accent); border: 1px solid var(--wr-border); border-radius: 8px; padding: 0.15rem 0.4rem; } .fs-slider-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--wr-muted); margin-top: 0.2rem; } /* แถวปุ่มค้นหา */ .fs-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.25rem; } .fs-actions .btn { min-width: 170px; } /* เส้นคั่น "หรือ" ระหว่างการค้นด้วยภาพกับการค้นด้วยเลขบัตร */ .fs-divider-or { display: flex; align-items: center; gap: 0.8rem; margin: 1.1rem 0; color: var(--wr-muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; } .fs-divider-or::before, .fs-divider-or::after { content: ""; flex: 1; height: 1px; background: var(--wr-border); } /* ─── 7. แถบความครอบคลุมของคลังรูป ────────────────────────────────────── */ .fs-coverage { position: relative; border: 1px solid currentColor; border-radius: var(--wr-radius); padding: 0.75rem 1rem; margin-bottom: 1.1rem; color: var(--fs-accent); display: flex; align-items: flex-start; gap: 0.65rem; } .fs-coverage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .10; pointer-events: none; } .fs-coverage > * { position: relative; } .fs-coverage i { font-size: 1.05rem; flex-shrink: 0; } .fs-coverage-text { font-size: .85rem; line-height: 1.7; color: var(--wr-text); margin: 0; } .fs-coverage-text b { color: currentColor; } /* กรณีคลังรูปยังว่าง — ต้องบอกตรง ๆ ไม่กลบเกลื่อน */ .fs-coverage--empty { color: var(--fs-mid); } .fs-coverage a { color: currentColor; font-weight: 700; } /* แถบวัดสัดส่วนความครอบคลุม */ .fs-coverage-bar { height: 6px; border-radius: 999px; overflow: hidden; margin-top: 0.4rem; position: relative; border: 1px solid var(--wr-border); } .fs-coverage-bar > span { display: block; height: 100%; background: currentColor; border-radius: inherit; } /* ─── 8. ผลลัพธ์ — "รายการที่ควรตรวจสอบ" ──────────────────────────────── */ .fs-results-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; } .fs-results-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--wr-text); display: flex; align-items: center; gap: 0.45rem; } .fs-results-head h2 i { color: var(--fs-accent); } .fs-results-count { font-size: 0.8rem; color: var(--wr-muted); } /* กริดรายการผล — ไหลตามความกว้างที่มีจริง ขั้นต่ำ 520px เลือกจากพื้นที่ใช้งานจริง: จอ 1440px หักเมนู 220px และระยะขอบ 64px เหลือ 1156px จึงวางได้ 2 คอลัมน์ (คอลัมน์ละ ~570px) ซึ่งยังกว้างพอให้ภาพเทียบ ซ้าย-ขวาไม่ต่ำกว่า 180px ตามข้อกำหนด · จอกว้างกว่านี้จะได้ 3 คอลัมน์เอง min(520px, 100%) กันไม่ให้คอลัมน์ล้นออกนอกจอเมื่อจอแคบกว่า 520px */ .fs-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 1rem; align-items: start; } /* ── การ์ดเทียบภาพรายบุคคล ── */ .fs-match-card { background: var(--wr-card-bg); border: 1px solid var(--wr-border); border-radius: var(--wr-radius); box-shadow: var(--wr-shadow); overflow: hidden; } body.tactical .fs-match-card { background: var(--tc-panel); border-color: var(--tc-border); backdrop-filter: blur(12px); } .fs-match-body { padding: 1rem; } /* ภาพที่ค้น (ซ้าย) คู่กับภาพในฐาน (ขวา) — ยุบเหลือคอลัมน์เดียวบนมือถือ */ .fs-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.85rem; margin-bottom: 0.9rem; } .fs-compare-col { border: 1px solid var(--wr-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .fs-compare-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--wr-muted); padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--wr-border); text-align: center; } .fs-compare-frame { position: relative; flex: 1; min-height: 180px; /* ข้อกำหนด: ภาพเทียบต้องไม่เล็กกว่า 180px */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .fs-compare-frame::before { content: ""; position: absolute; inset: 0; background: currentColor; color: var(--wr-muted); opacity: .06; pointer-events: none; } .fs-compare-frame img { position: relative; width: 100%; height: 240px; min-height: 180px; object-fit: contain; /* ไม่ครอบตัด — กันการตัดส่วนใบหน้าที่ใช้ตรวจสอบทิ้ง */ display: block; } /* กรณีโหลดรูปในฐานไม่สำเร็จ */ .fs-compare-missing { position: relative; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: var(--wr-muted); font-size: .8rem; text-align: center; padding: 1rem; } .fs-compare-missing i { font-size: 1.75rem; opacity: .7; } /* กริดรูปทั่วไป (ใช้แสดงรูปหลายใบต่อ 1 ราย) — ช่องละอย่างน้อย 180px */ .fs-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .fs-photo-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid var(--wr-border); display: block; } /* ── ข้อมูลบุคคล ── */ .fs-person-name { font-size: 1.05rem; font-weight: 800; color: var(--wr-text); margin: 0 0 0.35rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } .fs-person-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--wr-muted); margin-bottom: 0.75rem; } .fs-meta-item { display: inline-flex; align-items: center; gap: 0.3rem; } .fs-meta-item b { color: var(--wr-text); font-weight: 600; } .fs-meta-item i { opacity: .75; } /* ป้าย MOST WANTED */ .fs-badge-mw { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; color: var(--fs-danger); white-space: nowrap; } .fs-badge-mw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .16; } .fs-badge-mw > * { position: relative; } /* ── แถบระดับความเข้าข่าย 3 สี ── ⛔ ห้ามแสดงเป็นร้อยละความน่าจะเป็น — ค่าที่ได้เป็นระยะแฮมมิง ไม่ใช่ความน่าจะเป็น */ .fs-band { position: relative; display: flex; align-items: center; gap: 0.6rem; border: 1px solid currentColor; border-left-width: 5px; border-radius: 10px; padding: 0.5rem 0.75rem; margin-bottom: 0.85rem; } .fs-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .12; pointer-events: none; } .fs-band > * { position: relative; } .fs-band i { font-size: 1.05rem; flex-shrink: 0; } .fs-band-title { font-size: 0.85rem; font-weight: 800; color: currentColor; line-height: 1.4; } .fs-band-desc { font-size: .75rem; color: var(--wr-text); line-height: 1.5; } .fs-band-dist { margin-left: auto; font-size: .7rem; font-weight: 700; color: currentColor; white-space: nowrap; text-align: right; } .fs-band--high { color: var(--fs-high); } .fs-band--mid { color: var(--fs-mid); } .fs-band--low { color: var(--fs-low); } /* ── แถวปุ่มวินิจฉัยด้วยสายตา + ลิงก์เปิดแฟ้มประวัติ ── */ .fs-verdict { border-top: 1px solid var(--wr-border); padding-top: 0.8rem; } .fs-verdict-label { font-size: .8rem; font-weight: 700; color: var(--wr-text); margin-bottom: 0.45rem; } .fs-verdict-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .fs-verdict-btn { position: relative; flex: 1 1 auto; min-width: 120px; border: 1px solid currentColor; border-radius: 10px; padding: 0.42rem 0.8rem; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; background: transparent; transition: box-shadow .15s, transform .12s; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } .fs-verdict-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .10; transition: opacity .15s; } .fs-verdict-btn > * { position: relative; } .fs-verdict-btn:hover:not(:disabled)::before { opacity: .2; } .fs-verdict-btn:disabled { opacity: .5; cursor: not-allowed; } .fs-verdict-btn--yes { color: var(--fs-ok); } .fs-verdict-btn--no { color: var(--fs-danger); } .fs-verdict-btn--maybe { color: var(--fs-mid); } /* ปุ่มที่ถูกเลือกแล้ว */ .fs-verdict-btn.is-active { box-shadow: 0 0 0 2px currentColor inset; transform: translateY(-1px); } .fs-verdict-btn.is-active::before { opacity: .26; } /* ผลการบันทึกคำวินิจฉัย */ .fs-verdict-saved { font-size: .8rem; font-weight: 700; color: var(--fs-ok); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.3rem; } /* ปุ่มเปิดแฟ้มประวัติ — ปิดไว้จนกว่าจะกดวินิจฉัยก่อน */ .fs-openfile { position: relative; border: 1px solid currentColor; border-radius: 10px; padding: 0.42rem 0.9rem; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; background: transparent; color: var(--fs-accent); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .fs-openfile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .10; transition: opacity .15s; } .fs-openfile > * { position: relative; } .fs-openfile:hover:not(:disabled)::before { opacity: .22; } .fs-openfile:disabled { color: var(--wr-muted); opacity: .6; cursor: not-allowed; } /* ─── 9. สถานะว่าง / กำลังทำงาน ────────────────────────────────────────── */ .fs-empty { border: 1px dashed var(--wr-border); border-radius: var(--wr-radius); padding: 2rem 1.25rem; text-align: center; color: var(--wr-muted); font-size: .85rem; line-height: 1.8; } .fs-empty i { display: block; font-size: 2.5rem; margin-bottom: 0.5rem; opacity: .55; } .fs-empty-title { font-size: .9375rem; font-weight: 700; color: var(--wr-text); margin-bottom: 0.3rem; } .fs-empty a { color: var(--fs-accent); font-weight: 700; } .fs-busy { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 2rem 1rem; color: var(--wr-muted); font-size: .85rem; } /* ─── 10. Full page loader (โครงเดียวกับหน้าอื่นของระบบ) ─────────────── */ .full-page-loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; z-index: 9999; transition: opacity .4s; background: var(--wr-bg); } .loader-badge { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; } .loader-bar-track { width: 220px; height: 4px; border-radius: 2px; overflow: hidden; border: 1px solid var(--wr-border); } .loader-bar-fill { width: 40%; height: 100%; border-radius: 2px; background: var(--wr-gold); animation: fsLoaderSlide 1.5s ease-in-out infinite; } @keyframes fsLoaderSlide { 0% { width: 10%; margin-left: 0; } 50% { width: 50%; margin-left: 25%; } 100% { width: 10%; margin-left: 90%; } } .loader-text { color: var(--wr-text); font-size: .9375rem; font-weight: 500; margin: 0; } .loader-subtext { color: var(--wr-muted); font-size: .8rem; margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ 10.5 โหมดการค้นหา 3 แบบ + ส่วนประกอบของโหมด "เทียบใบหน้า" --------------------------------------------------------------------- เพิ่มในเฟส 2 — ยังใช้ตัวแปรสีของระบบเหมือนเดิมทุกจุด ไม่มีค่าสีตายตัว ═══════════════════════════════════════════════════════════════════════ */ /* ─── 10.5.1 บัตรเลือกวิธีค้นหา ───────────────────────────────────────── */ .fs-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .fs-mode-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--wr-border); border-radius: var(--wr-radius); cursor: pointer; color: var(--wr-muted); transition: border-color .18s, box-shadow .18s; } .fs-mode-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .18s; pointer-events: none; } .fs-mode-card > * { position: relative; } .fs-mode-card:hover { border-color: var(--fs-accent); } /* กรอบโฟกัสของแป้นพิมพ์ — ต้องเห็นชัดสำหรับการใช้งานด้วยคีย์บอร์ดล้วน */ .fs-mode-card:focus-within { box-shadow: 0 0 0 2px var(--fs-accent); } /* โหมดที่กำลังเลือกอยู่ (คลาสถูกสลับด้วย JS ไม่ใช้ :has() เพื่อรองรับเบราว์เซอร์เก่า) */ .fs-mode-card.is-active { color: var(--fs-accent); border-color: currentColor; } .fs-mode-card.is-active::before { opacity: .12; } .fs-mode-head { display: flex; align-items: center; gap: 0.5rem; } .fs-mode-radio { flex-shrink: 0; margin: 0; } .fs-mode-title { font-size: .9375rem; font-weight: 800; color: var(--wr-text); display: inline-flex; align-items: center; gap: 0.35rem; } .fs-mode-card.is-active .fs-mode-title { color: currentColor; } /* ป้ายสั้น ๆ บอกว่าโหมดนี้เหมาะกับกรณีใด */ .fs-mode-tag { font-size: .7rem; font-weight: 700; letter-spacing: .03em; border: 1px solid currentColor; border-radius: 999px; padding: 0.05rem 0.5rem; white-space: nowrap; } .fs-mode-desc { font-size: .75rem; line-height: 1.65; color: var(--wr-muted); } /* ─── 10.5.2 แถบความคืบหน้าการโหลดแบบจำลองเทียบใบหน้า ────────────────── */ .fs-model-load { position: relative; border: 1px solid currentColor; border-radius: var(--wr-radius); padding: 0.7rem 0.9rem; margin-bottom: 0.95rem; color: var(--fs-accent); } .fs-model-load::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .10; pointer-events: none; } .fs-model-load > * { position: relative; } .fs-model-load.is-done { color: var(--fs-ok); } .fs-model-load.is-bad { color: var(--fs-danger); } .fs-model-head { display: flex; align-items: center; gap: 0.5rem; font-size: .85rem; font-weight: 700; } .fs-model-head i { font-size: 1.05rem; flex-shrink: 0; } .fs-model-head span { color: var(--wr-text); } .fs-model-bar { height: 8px; border-radius: 999px; overflow: hidden; border: 1px solid var(--wr-border); margin-top: 0.45rem; } .fs-model-bar > span { display: block; height: 100%; width: 0; background: currentColor; border-radius: inherit; transition: width .2s; } .fs-model-note { font-size: .75rem; line-height: 1.65; color: var(--wr-muted); margin-top: 0.35rem; } /* ─── 10.5.3 สถานะการตรวจหาใบหน้าในภาพที่จะใช้ค้น ──────────────────── */ .fs-face-status { position: relative; display: flex; align-items: flex-start; gap: 0.6rem; border: 1px solid currentColor; border-left-width: 5px; border-radius: 10px; padding: 0.6rem 0.8rem; margin-top: 0.95rem; color: var(--fs-low); } .fs-face-status::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .12; pointer-events: none; } .fs-face-status > * { position: relative; } .fs-face-status > i { font-size: 1.25rem; flex-shrink: 0; } .fs-face-status-title { font-size: 0.85rem; font-weight: 800; color: currentColor; line-height: 1.45; } .fs-face-status-desc { font-size: .75rem; line-height: 1.7; color: var(--wr-text); margin-top: 0.1rem; } .fs-face-status--ok { color: var(--fs-ok); } .fs-face-status--warn { color: var(--fs-mid); } .fs-face-status--bad { color: var(--fs-danger); } /* ปุ่มทางเลือกในกล่องสถานะ (เช่น "สลับไปโหมดค้นรูปซ้ำ") */ .fs-face-status-actions { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } /* ─── 10.5.4 คำกำกับความหมายของค่าคะแนน (ห้ามละ) ───────────────────── */ .fs-score-note { border: 1px dashed var(--fs-mid); border-radius: 10px; padding: 0.55rem 0.85rem; margin-bottom: 0.85rem; font-size: .8rem; line-height: 1.7; color: var(--wr-text); } .fs-score-note > i { color: var(--fs-mid); margin-right: 0.3rem; } .fs-score-note b { color: var(--fs-mid); } /* ค่าคะแนนความคล้าย — ตัวพิมพ์คงความกว้าง อ่านทีละหลักได้ */ .fs-score-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9375rem; letter-spacing: .04em; } /* คำกำกับใต้ค่าคะแนนในแถบระดับความเข้าข่าย — ต้องขึ้นบรรทัดใหม่ได้ */ .fs-band-dist--wrap { white-space: normal; max-width: 17rem; } .fs-band-dist-cap { display: block; font-size: .7rem; font-weight: 600; line-height: 1.5; color: var(--wr-muted); margin-top: 0.1rem; } /* ─── 10.5.5 กล่องแจ้งเหตุ (เช่น โหมดเทียบใบหน้ายังไม่เปิดใช้งาน) ───── */ .fs-notice { position: relative; display: flex; align-items: flex-start; gap: 0.7rem; border: 1px solid currentColor; border-left-width: 5px; border-radius: var(--wr-radius); padding: 0.95rem 1.1rem; color: var(--fs-mid); } .fs-notice::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .10; pointer-events: none; } .fs-notice > * { position: relative; } .fs-notice > i { font-size: 1.5rem; flex-shrink: 0; } .fs-notice-title { font-size: .9375rem; font-weight: 800; color: currentColor; margin-bottom: 0.25rem; } .fs-notice-text { font-size: .85rem; line-height: 1.8; color: var(--wr-text); margin: 0; } .fs-notice-text + .fs-notice-text { margin-top: 0.45rem; } .fs-notice-actions { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ─── 11. Responsive ───────────────────────────────────────────────────── */ /* หมายเหตุ: การจัดคอลัมน์ของ .fs-results ใช้ auto-fill ที่นิยามไว้ด้านบนแล้ว จึงไม่ต้องมี media query บังคับจำนวนคอลัมน์ตายตัวอีก (เดิมบังคับ 2 คอลัมน์ ที่ 1400px ซึ่งขัดกับความกว้างจริงที่เหลือหลังหักเมนูด้านข้าง) */ @media (max-width: 991px) { .fs-main { padding-top: 1rem; } .fs-pick-grid { grid-template-columns: 1fr; } /* บัตรเลือกวิธีค้นหา: 3 คอลัมน์ → 1 คอลัมน์ (อ่านคำอธิบายแต่ละโหมดได้ครบ) */ .fs-mode-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .fs-main .page-header { padding: 0.8rem 0.9rem; } .fs-main .page-header h1 { font-size: 1.05rem; } .fs-panel-body { padding: 0.9rem; } .fs-alert-danger { padding: 0.8rem 0.9rem; } .fs-alert-danger .fs-alert-text { font-size: .85rem; } /* การ์ดเทียบภาพ: 2 คอลัมน์ → 1 คอลัมน์ (ภาพยังต้องไม่เล็กกว่า 180px) */ .fs-compare { grid-template-columns: 1fr; gap: 0.6rem; } .fs-compare-frame img { height: 220px; } .fs-actions .btn, .fs-pick-btns .btn { width: 100%; min-width: 0; } .fs-verdict-btn { flex: 1 1 100%; } .fs-openfile { width: 100%; justify-content: center; } .fs-band { flex-wrap: wrap; } .fs-band-dist { margin-left: 0; width: 100%; text-align: left; } .fs-band-dist--wrap { max-width: none; } } @media (max-width: 480px) { .fs-photo-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .fs-preview-frame img { max-height: 260px; } } /* ─── 12. พิมพ์ ────────────────────────────────────────────────────────── เวอร์ชันนี้ไม่มีปุ่มพิมพ์/ส่งออกผลการค้นหาโดยเจตนา แต่ถ้าผู้ใช้สั่งพิมพ์จากเบราว์เซอร์เอง ต้องให้แถบเตือนติดไปกับกระดาษด้วยเสมอ */ @media print { .wr-topbar, .wr-sidebar, .wr-sidebar-overlay, .full-page-loader, .fs-verdict-row, .fs-openfile { display: none !important; } .fs-alert-danger { break-inside: avoid; page-break-inside: avoid; } .fs-match-card { break-inside: avoid; page-break-inside: avoid; } } /* ═══════════════════════════════════════════════════════════════════════════ 13. หน้าประมวลผลรูปเข้าดัชนีใบหน้า (face-enroll.html) — คลาสขึ้นต้น .fe- --------------------------------------------------------------------------- ใช้ตัวแปรของระบบเท่านั้น (--wr-* / --fs-*) เพื่อให้โหมดมืดและธีม tactical ทำงานเองโดยไม่ต้องเขียนกฎซ้ำ — ห้าม hardcode ค่าสีในไฟล์นี้ ═══════════════════════════════════════════════════════════════════════════ */ /* ── แถบแจ้งเตือนก่อนเริ่มงาน ─────────────────────────────────────────── */ .fe-notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; margin-bottom: 1.25rem; border: 1px solid var(--wr-border); border-left: 4px solid var(--fs-accent); border-radius: var(--wr-radius); background: var(--wr-card-bg); } .fe-notice-icon { font-size: 1.25rem; color: var(--fs-accent); line-height: 1.2; flex-shrink: 0; } .fe-notice-body { flex: 1; min-width: 0; } .fe-notice-title { margin: 0 0 .5rem; font-weight: 700; color: var(--wr-text); } .fe-notice-list { margin: 0; padding-left: 1.1rem; } .fe-notice-list li { margin-bottom: .35rem; color: var(--wr-text); line-height: 1.65; } .fe-notice-list li:last-child { margin-bottom: 0; } /* ── คำอธิบายของแต่ละขั้น ─────────────────────────────────────────────── */ .fe-step-desc { color: var(--wr-muted); line-height: 1.7; margin-bottom: 1rem; } .fe-muted { color: var(--wr-muted); margin: 0; } /* ── แผ่นตัวเลขสถานะคลังรูป ───────────────────────────────────────────── */ .fe-stats-wrap { min-height: 3rem; } .fe-tiles { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .fe-tile { padding: .9rem 1rem; border: 1px solid var(--wr-border); border-radius: var(--wr-radius); background: var(--wr-card-bg); text-align: center; } .fe-tile-icon { font-size: 1.05rem; color: var(--fs-accent); display: block; margin-bottom: .35rem; } .fe-tile-value { font-size: 1.5rem; font-weight: 800; color: var(--wr-text); line-height: 1.2; } .fe-tile-label { font-size: .85rem; color: var(--wr-muted); margin-top: .2rem; } .fe-tile-sub { font-size: .8rem; color: var(--wr-muted); margin-top: .3rem; opacity: .85; } .fe-table-title { font-weight: 700; color: var(--wr-text); margin: 0 0 .5rem; font-size: .9375rem; } .fe-table { margin: 0; } .fe-table td { padding: .4rem .6rem; border-color: var(--wr-border); color: var(--wr-text); } /* ── กล่องผลลัพธ์การนำเข้า ────────────────────────────────────────────── */ .fe-result-box { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--wr-border); border-radius: var(--wr-radius); background: var(--wr-card-bg); line-height: 1.7; color: var(--wr-text); } .fe-result-box--ok { border-left: 4px solid var(--fs-ok); } .fe-result-box--error { border-left: 4px solid var(--fs-danger); } .fe-result-warn { margin-top: .5rem; color: var(--fs-mid); } .fe-result-next { margin-top: .5rem; color: var(--wr-muted); } /* ── แถวปุ่มควบคุมการประมวลผล ─────────────────────────────────────────── */ .fe-run-controls { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .fe-backend { color: var(--wr-muted); font-size: .85rem; } /* ── สถานะแบบจำลอง ───────────────────────────────────────────────────── */ .fe-model-status { padding: .75rem 1rem; margin-bottom: 1rem; line-height: 1.65; border: 1px solid var(--wr-border); border-radius: var(--wr-radius); background: var(--wr-card-bg); color: var(--wr-text); } .fe-model-status--loading { border-left: 4px solid var(--fs-accent); } .fe-model-status--ok { border-left: 4px solid var(--fs-ok); } .fe-model-status--warn { border-left: 4px solid var(--fs-mid); } .fe-model-status--error { border-left: 4px solid var(--fs-danger); } /* ── แถบความคืบหน้า ──────────────────────────────────────────────────── */ .fe-progress-track { height: 10px; border-radius: 999px; overflow: hidden; background: var(--wr-border); margin-bottom: .5rem; } .fe-progress-fill { height: 100%; width: 0%; background: var(--fs-accent); transition: width .3s ease; } .fe-progress-meta { color: var(--wr-muted); font-size: .9375rem; margin-bottom: 1rem; } /* ── สรุปผลแยกตามสถานะ ───────────────────────────────────────────────── */ .fe-summary { margin-bottom: 1rem; } .fe-sum-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .fe-sum-item { padding: .75rem .5rem; text-align: center; border: 1px solid var(--wr-border); border-top: 3px solid var(--wr-muted); border-radius: var(--wr-radius); background: var(--wr-card-bg); } .fe-sum-item--ok { border-top-color: var(--fs-ok); } .fe-sum-item--warn { border-top-color: var(--fs-mid); } .fe-sum-item--bad { border-top-color: var(--fs-danger); } .fe-sum-value { font-size: 1.25rem; font-weight: 800; color: var(--wr-text); } .fe-sum-label { font-size: .8rem; color: var(--wr-muted); margin-top: .15rem; } .fe-sum-pct { font-size: .8rem; color: var(--wr-muted); opacity: .85; } /* ── ตัวเฝ้าดูหน่วยความจำแบบจำลอง ─────────────────────────────────────── */ .fe-memory { font-size: .85rem; color: var(--wr-muted); margin-bottom: 1rem; } .fe-memory--warn { color: var(--fs-danger); } /* ── รายการล่าสุด ────────────────────────────────────────────────────── */ .fe-log-title { font-weight: 700; color: var(--wr-text); margin: 0 0 .5rem; font-size: .9375rem; } .fe-log { list-style: none; margin: 0; padding: 0; } .fe-log-item { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .45rem .65rem; margin-bottom: .3rem; font-size: .85rem; border-left: 3px solid var(--wr-muted); border-radius: 4px; background: var(--wr-card-bg); } .fe-log-item--ok { border-left-color: var(--fs-ok); } .fe-log-item--warn { border-left-color: var(--fs-mid); } .fe-log-item--bad { border-left-color: var(--fs-danger); } .fe-log-status { font-weight: 700; color: var(--wr-text); white-space: nowrap; } .fe-log-url { color: var(--wr-muted); word-break: break-all; flex: 1; min-width: 0; } .fe-log-note { color: var(--fs-danger); font-size: .8rem; } /* ── สรุปท้ายงาน ─────────────────────────────────────────────────────── */ .fe-final { padding: 1rem 1.1rem; margin-top: 1rem; line-height: 1.75; border: 1px solid var(--wr-border); border-radius: var(--wr-radius); background: var(--wr-card-bg); color: var(--wr-text); } .fe-final--warn { border-left: 4px solid var(--fs-danger); } .fe-final--info { border-left: 4px solid var(--fs-accent); } .fe-final-title { font-weight: 700; margin: 0 0 .5rem; } .fe-final p { margin: 0 0 .5rem; } .fe-final p:last-child { margin-bottom: 0; } .fe-final code { padding: .1rem .35rem; border-radius: 3px; background: var(--wr-border); color: var(--wr-text); } /* ── จอเล็ก ──────────────────────────────────────────────────────────── */ @media (max-width: 576px) { .fe-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .fe-sum-grid { grid-template-columns: repeat(2, 1fr); } .fe-run-controls .btn { flex: 1 1 auto; } }