คุณคือผู้เชี่ยวชาญด้านการออกแบบหน้าเว็บ (Frontend Developer) ที่เก่งทั้ง HTML และ CSS และเข้าใจการสร้างเว็บสำหรับ Google Apps Script
ฉันต้องการสร้าง Web App สำหรับให้บุคลากรทางการแพทย์ใช้บันทึกความคลาดเคลื่อนทางยา โปรดสร้างโค้ดสำหรับไฟล์ HTML หลักที่ชื่อ `Index.html` โดยมีรายละเอียดดังนี้:
โครงสร้างและขั้นตอนการใช้งาน:
เว็บจะต้องมีลักษณะเป็นขั้นตอน 3 หน้าจอ เพื่อนำทางผู้ใช้ ไม่ใช่ฟอร์มยาวๆ หน้าเดียว
1. หน้าจอที่ 1: เลือกประเภทผู้ป่วย
* มีหัวข้อว่า "เลือกประเภทผู้ป่วย"
* มี "การ์ด" สวยงาม 2 ใบให้เลือก คือ "ผู้ป่วยนอก (OPD)" และ "ผู้ป่วยใน (IPD)"
* แต่ละการ์ดให้มีไอคอนที่สื่อความหมาย (เช่น ไอคอนคนเดินสำหรับ OPD, ไอคอนเตียงนอนสำหรับ IPD)
2. หน้าจอที่ 2: เลือกประเภทความคลาดเคลื่อน**
* มีหัวข้อว่า "เลือกประเภทความคลาดเคลื่อน"
* มีปุ่มใหญ่ๆ 5 ปุ่มให้เลือก: Prescribing, Transcribing, Pre-Dispensing, Dispensing, และ Administration Error
* มีปุ่ม "ย้อนกลับ" เพื่อกลับไปหน้าจอที่ 1
3. หน้าจอที่ 3: กรอกรายละเอียด
* เป็นฟอร์มสำหรับกรอกข้อมูล โดยมีช่องต่างๆ ดังนี้:
* วันที่เกิดเหตุการณ์: เป็นช่องเลือกวันที่
* ระดับความรุนแรง (A-I): เป็น Dropdown ที่มีคำอธิบายของแต่ละระดับ เช่น "A: เหตุการณ์ที่อาจนำไปสู่ความคลาดเคลื่อน", "B: เกิดขึ้น แต่ยังไม่ถึงตัวผู้ป่วย" ไปจนถึง I
* ประเภทความคลาดเคลื่อนย่อย: เป็น Dropdown ที่มีตัวเลือก เช่น "ยาผิดชนิด", "ยาผิดขนาด", "ผู้ป่วยผิดคน" ฯลฯ
* รายละเอียดเหตุการณ์: เป็นกล่องข้อความขนาดใหญ่
* ส่วนพิเศษ: มีส่วนสำหรับกรอก "ชื่อ-สกุล" และ "HN" ของผู้ป่วย ซึ่งส่วนนี้จะแสดงขึ้นมาเมื่อผู้ใช้เลือกระดับความรุนแรงตั้งแต่ D ขึ้นไปเท่านั้น ถ้าเลือก A, B, C ส่วนนี้ต้องซ่อนไว้
* มีปุ่ม "ย้อนกลับ" เพื่อกลับไปหน้าจอที่ 2 และปุ่ม "บันทึกข้อมูล"
การออกแบบและหน้าตา (CSS):
* ใช้ฟอนต์ "Prompt" จาก Google Fonts
* ใช้ชุดสีนี้เป็นหลัก:
* สีหลัก (Primary): สีน้ำเงินเข้มอมเทา `#496580`
* สีรอง (Accent): สีฟ้าอ่อน `#BADDFF`
* สีพื้นหลังไล่ระดับ: จากสีฟ้าอ่อนไปสีส้มอ่อนพีช `#FFDBBB`
* ออกแบบให้ดูสะอาดตา เป็นมิตร ทันสมัย และใช้งานง่ายบนมือถือ (Responsive)
* ใช้ไอคอนจาก "Font Awesome" ในส่วนต่างๆ เช่น หัวข้อ, การ์ด, และปุ่ม เพื่อความสวยงาม
* มีส่วนหัว (Header) ที่แสดงชื่อระบบ "Medication Error" และชื่อโรงพยาบาล
* มีส่วนท้าย (Footer) ที่แสดงข้อมูลติดต่อและปีลิขสิทธิ์ปัจจุบัน
ขอโค้ด HTML ที่สมบูรณ์พร้อม CSS ภายใน `<style>` tag และขอแค่โค้ด HTML เท่านั้น *ส่วน Javascript จะสร้างในภายหลังไม่ต้องใส่มาในโค้ด HTML นี้*