Thai PW Hub — Mobile Mockup Part 0 · ให้เจ๊ตรวจท่าก่อนลงโค้ด

ทางเลือก C — mobile kit กลาง + โหมดเอกสาร A4 · ทุกปุ่ม ≥ 44px · ฟอนต์เนื้อหา ≥ 14px · ไม่มีอะไรหลุดจอ

📱 390 × 844 (iPhone 14) 🎨 โทน burgundy / ทอง / ครีม (ตาม design-tokens.css เดิม) 🖨️ A4 ยังพิมพ์ถูกต้อง
1 · Hub หน้าแรก — 1 คอลัมน์ + bottom nav + KPI นำ
9:41
Thai PW Hubกลุ่มสาระการเรียนรู้ภาษาไทย
🔍
สวัสดีค่ะ
ครูรามิล ปัญญพัทธ์
18แอปใช้งาน
54สอนแทน
151คาบสะสม
🔍 ค้นหาแอป เช่น “ปกข้อสอบ”
ทั้งหมด
หลักสูตร
วิชาการ
สารบรรณ
กิจกรรม
🗓️
ระบบจัดครูสอนแทนจัดสรรอัตโนมัติ · 54 รายการ
›
📝
บันทึกข้อความราชการพิมพ์ A4 · บันทึก D1
›
📊
ตรวจ ปพ.5ตรวจความถูกต้อง · 151 คาบ
›
🧠
แผนการสอนอัจฉริยะAI · แผน 12 ส่วน
›
🏠Hub 🗓️สอนแทน 📝บันทึก 🔍ค้นหา
2 · จัดสอนแทน — แท็บเลื่อนได้ + การ์ดคาบ + ปุ่มบันทึกติดล่าง
9:41
‹
จัดครูสอนแทนภาคเรียนที่ 1/2569 · พร้อมทำงาน
⤢
📅 จัดสอนแทนใหม่
📝 ประวัติ 54
📋 สรุป
📊 ภาระงาน
🏫 ตารางสอน

📝 ข้อมูลการลา

31 / 10 / 2569▾

ตรงกับ วันเสาร์ · ใช้ตารางสอน 1/2569

ครูกมลวรรณ สังข์ทอง▾
ลาป่วย
ลากิจฉุกเฉิน
ไปราชการ

📅 ต้องจัดสอนแทน 2 คาบ

1
ท23101 ภาษาไทยพื้นฐาน ม.3/12 · ห้อง 447 · 08:30–09:20
ครูวนิชญา เชียงน้อยว่าง ✓
2
ท23101 ภาษาไทยพื้นฐาน ม.3/12 · ห้อง 447 · 09:20–10:10
ครูชื่นฤดี หรับหลีว่าง ✓
3 · บันทึกข้อความ — โหมดฟอร์ม — ช่องกรอกเรียงเดี่ยว 48px
9:41
‹
บันทึกข้อความกลุ่มสาระการเรียนรู้ภาษาไทย
⋯

1 · ข้อมูลบันทึก

กลุ่มสาระการเรียนรู้ภาษาไทย
เช่น ท. 12/2569
31 ตุลาคม 2569▾

2 · เรื่อง

ขออนุมัติจัดกิจกรรมวันสุนทรภู่ ประจำปี 2569

3 · เนื้อความ

ด้วยกลุ่มสาระการเรียนรู้ภาษาไทย มีกำหนดจัดกิจกรรมวันสุนทรภู่ ในวันที่ 26 มิถุนายน 2569 ณ หอประชุมโรงเรียน…
4 · โหมดเอกสาร A4 — ย่อพอดีจอ · พิมพ์ออกมาเท่าเดิม
9:41
‹
ตัวอย่างเอกสารA4 · ย่อ 42% พอดีจอ
⤢
บันทึกข้อความ
ส่วนราชการกลุ่มสาระการเรียนรู้ภาษาไทย โรงเรียนพูลเจริญวิทยาคม
ที่ท. 12/2569วันที่ 31 ตุลาคม 2569
เรื่องขออนุมัติจัดกิจกรรมวันสุนทรภู่ ประจำปีการศึกษา 2569
เรียนผู้อำนวยการโรงเรียนพูลเจริญวิทยาคม

ด้วยกลุ่มสาระการเรียนรู้ภาษาไทย กำหนดจัดกิจกรรมวันสุนทรภู่ ประจำปีการศึกษา 2569 ในวันที่ 26 มิถุนายน 2569 ณ หอประชุมโรงเรียน เพื่อส่งเสริมทักษะภาษาไทยและเชิดชูเกียรติกวีเอกของไทย

จึงเรียนมาเพื่อโปรดพิจารณาอนุมัติ และขอเชิญเข้าร่วมกิจกรรมในวันและเวลาดังกล่าว

(นายรามิล ปัญญพัทธ์)
หัวหน้ากลุ่มสาระการเรียนรู้ภาษาไทย

บีบสองนิ้วเพื่อซูมได้ · เอกสารไม่ถูกตัดขอบ

ทำไมต้อง kit กลาง
CSS ปัจจุบันกระจาย 19 ชุด · 9 แอปไม่มี media query เลย — kit เดียวทำให้แก้ครั้งเดียวได้ทุกแอป และตรวจรับด้วยสคริปต์เดิมได้
โหมดเอกสาร
A4 794px ย่อด้วย transform scale ให้พอดีจอ (ไม่แก้ layout เอกสาร) → พิมพ์ออกมายังได้ระยะขอบและขนาดตัวอักษรเดิม 100%
ปุ่มติดท้ายจอ
แทน preview-actions 474–497px ที่หลุดจอ: ปุ่ม บันทึก/พิมพ์ อยู่ในระยะนิ้วโป้งทุกจอ + รองรับ safe-area ของ iPhone
ต่อไป (P1)
ถ้าเจ๊อนุมัติท่าทางนี้ หนูจะทำ mobile-kit.css/js แล้วลง Hub ก่อนเป็นส่วนแรก จากนั้นไล่ thai-memo → จัดสอนแทน → คู่ A4