Prompt Library ครูนุ่มเดฟเทค

“สร้างระบบคลังรูปภาพออนไลน์ให้ผู้ใช้สามารถอัปโหลดรูปได้ไม่เกิน 10 ภาพต่อครั้ง รูปถูกเก็บใน Google Drive folder ที่ระบุ ข้อมูลเมตา (ชื่อไฟล์, ขนาด, MIME type, URL, uploader name, caption, timestamp) ถูกบันทึกลง Google Sheet หน้าเว็บแสดง Gallery แบบ responsive และมี lightbox สำหรับดูภาพขนาดใหญ่ ให้มีการตรวจสอบไฟล์ (เฉพาะ image/*) และแจ้งข้อความผิดพลาดถ้าเกิน 10 รูปหรือชนิดไฟล์ไม่ถูกต้อง ให้โค้ดพร้อมใช้งานเป็น Google Apps Script (HTML + Server-side Apps Script) และคำอธิบายการตั้งค่า Google Drive folder id และ Google Sheet header”

สร้างหน้าออกแบบ UI สำหรับ “กระดานข้อความสด (Live Sticky Notes Board)” ขนาด 1440×900 px สำหรับเว็บ/แท็บเล็ต — ออกแบบสไตล์ friendly, school/office friendly:
1) โครงหลัก:
- header บาง ๆ ตรงกลางโลโก้และชื่อ “Live Board”
- main grid: พื้นที่กว้างแสดง sticky notes แบบ draggable (3 คอลัมน์บน desktop, 1 คอลัมน์บน mobile)
- แต่ละ sticky note เป็นการ์ดมุมมน ขนาดเปลี่ยนได้ มีสีสลับ (เหลือง, ชมพูอ่อน, ฟ้าอ่อน, เขียวอ่อน) และเงาเบา ๆ
2) ช่องอินพุต:
- บาร์ด้านล่าง fixed: กล่องข้อความ (placeholder: “พิมพ์ข้อความของคุณ…”), ปุ่มแนบรูป, ปุ่มส่ง (ไอคอนส่ง)
- เมื่อส่ง ให้โน้ตใหม่ slide-in จากขวาและเด้งเบา ๆ
3) realtime UI:
- มุมขวาล่าง: small floating badge แสดง “ผู้ใช้งานออนไลน์: 12” (ห้ามบังเนื้อหา) — ทำเป็น bubble สีอ่อน พร้อมไอคอนคน
- ด้านบนมุมซ้ายแสดงแบนเนอร์เล็กเมื่อมีข้อความใหม่: “มีข้อความใหม่จาก [ชื่อ]”
4) อินเตอร์แอคชัน/แอนิเมชัน:
- note appear: slide + fade
- hover note: ยกขึ้นเล็กน้อย, show action icons (edit/delete/pin)
5) เสริม:
- ปุ่ม Export → PDF / ปุ่ม Clear Board (confirm)
- ให้รวมตัวอย่าง sticky notes 8 ข้อความ (ภาษาไทย) และ mock user avatars
ออกแบบไฟล์ให้พร้อมเป็นโพรโทไทป์ใน Canva (รวม layer แยกสำหรับ note, badge, header, input bar)

สร้างหน้าเว็บฟอร์มออนไลน์ “ระบบขออนุญาตไปราชการ”
โทนสีฟ้าขาว สะอาดตา ใช้ฟ้อนต์ Sarabun
มีส่วนหัว (Header) เขียนว่า “แบบขออนุญาตไปราชการออนไลน์”
ใต้หัวข้อให้มีคำอธิบายสั้นๆ ว่า “ระบบบันทึกคำขออนุญาตไปราชการสำหรับครูและบุคลากรทางการศึกษา”

🔹 ฟอร์มกรอกข้อมูลมีช่องดังนี้:
• เขียนที่ (โรงเรียน…)
• วันที่
• เรื่อง (ขออนุญาตไปราชการ)
• เรียน (ผู้อำนวยการ…)
• ชื่อ-สกุล
• ตำแหน่ง
• กลุ่ม/ฝ่าย
• โรงเรียน
• พร้อมด้วย (ถ้ามี)
• ขออนุญาตไปราชการเพื่อ… (กล่องข้อความหลายบรรทัด)
• สถานที่
• ตั้งแต่วันที่ - ถึงวันที่
• เวลาเริ่ม - เวลาสิ้นสุด
• รวมจำนวนวัน
• แหล่งงบประมาณ (ให้เลือกจากรายการ เช่น “งบประมาณแผ่นดิน”, “เงินอุดหนุน”, “อื่น ๆ”)
• การเดินทางโดย (ให้เลือก เช่น รถราชการ / รถส่วนตัว / รถโดยสาร)
• หมายเลขทะเบียนรถ (ถ้ามี)

🔹 ส่วนล่างของฟอร์ม:
• ปุ่ม “บันทึกคำขอ” (สีฟ้า)
• ปุ่ม “พิมพ์แบบฟอร์ม PDF”
• ช่องลายเซ็นอิเล็กทรอนิกส์ “ผู้ขออนุญาต”
• ช่องสำหรับ “ความคิดเห็นของรองผู้อำนวยการ”
• ช่องสำหรับ “ผู้อำนวยการอนุมัติ / ไม่อนุมัติ”

ให้จัดหน้าให้อ่านง่าย มีกรอบบาง ๆ สีฟ้าอ่อนล้อมรอบแต่ละส่วน
เพิ่มโลโก้โรงเรียนตัวอย่างด้านบนซ้าย
รองรับการกรอกข้อมูลแล้วส่งเข้า Google Sheet
ให้แสดงผลได้ทั้งบนคอมพิวเตอร์และมือถือ

ออกแบบหน้าเว็บเข้าสู่ระบบ (Login Page) โทนสีส้มทันสมัย ดูอบอุ่นและเป็นทางการ
มีโลโก้ด้านบน ชื่อเรื่อง “ระบบเข้าสู่เว็บไซต์”
ใต้ชื่อมีข้อความชื่อหน่วยงาน “โรงเรียนแม่จันวิทยาคม จังหวัดเชียงราย"
กลางหน้ามีฟอร์มเข้าสู่ระบบ ประกอบด้วยช่องกรอก
• ชื่อผู้ใช้ (Username)
• รหัสผ่าน (Password)
• ช่องใส่รหัสยืนยัน (Captcha)
ปุ่มเข้าสู่ระบบสีส้มเข้ม
ใต้ฟอร์มมีลิงก์ “ลืมรหัสผ่าน”
พื้นหลังเป็นลวดลายเรียบหรู มีแสงเฉียงหรือกราฟิกโค้งสีส้มอ่อน
ฟอนต์อ่านง่าย สไตล์ทันสมัย

🎓 สร้างระบบออนไลน์ “แบบฟอร์มทะเบียนประวัตินักเรียน”
เพื่อให้นักเรียนกรอกข้อมูลส่วนตัวและส่งเข้าฐานข้อมูลของครู
โทนสีฟ้า-ขาว ดูสะอาด เรียบง่าย ทางการ เหมาะกับงานโรงเรียน
📋 ฟอร์มที่นักเรียนกรอกประกอบด้วย:
• รูปถ่ายนักเรียน (อัปโหลดภาพได้)
• ชื่อ–สกุล
• ชั้นเรียน / เลขที่
• วันเดือนปีเกิด / อายุ
• ที่อยู่ปัจจุบัน
• เบอร์โทรศัพท์
• ชื่อบิดา / อาชีพบิดา
• ชื่อมารดา / อาชีพมารดา
• ผู้ปกครองที่ติดต่อได้
• การศึกษาของผู้ปกครอง
• ความสามารถพิเศษ / งานอดิเรก
• โรคประจำตัว (ถ้ามี)
• ความต้องการพิเศษ (เช่น ทุน, ดูแลเป็นพิเศษ ฯลฯ)
📂 เมื่อส่งข้อมูลแล้ว
• ระบบจะบันทึกข้อมูลนักเรียนแต่ละคน
• ครูสามารถดูรายการนักเรียนทั้งหมดในรูปแบบตาราง
• มีปุ่ม “ดาวน์โหลดเป็นไฟล์ PDF” เพื่อพิมพ์เป็นแบบฟอร์มประวัตินักเรียนรายบุคคล
• สามารถกรองตามชั้นเรียนหรือเลขที่ได้
🧾 รูปแบบ PDF ที่พิมพ์ออกมา:
• หัวกระดาษ: “แบบฟอร์มทะเบียนประวัตินักเรียน” พร้อมโลโก้โรงเรียน
• แสดงรูปถ่ายด้านซ้าย ชื่อ–สกุล และข้อมูลส่วนตัวด้านขวา
• แบ่งหมวดชัดเจน เช่น ข้อมูลทั่วไป / ผู้ปกครอง / การศึกษา / สุขภาพ
• ฟอนต์อ่านง่าย เช่น Sarabun
💡 สไตล์การออกแบบ:
• ใช้โครงแบบฟอร์มที่ดูเรียบร้อย (Form layout)
• ปุ่มส่งข้อมูลสีฟ้าเด่นชัด “ส่งข้อมูลให้ครู”
• เพิ่มไอคอนนักเรียน 📘 และเอกสาร 📄
🎯 จุดประสงค์ของระบบ:
เพื่อให้นักเรียนสามารถกรอกประวัติส่วนตัวได้ด้วยตนเอง ครูสามารถจัดเก็บ ตรวจสอบ และพิมพ์ออกเป็นแบบฟอร์ม PDF ได้อย่างสะดวกและเป็นระบบ

ออกแบบระบบบันทึกข้อมูล “การได้รับทุนการศึกษา” ของนักเรียนในโรงเรียน
โทนสีฟ้า-ขาว ดูเป็นทางการ เรียบง่าย ใช้งานสะดวก เหมาะสำหรับครูผู้บันทึกข้อมูล

📚 รายละเอียดในระบบ:
• หน้าแรก: ชื่อระบบ “ระบบบันทึกข้อมูลทุนการศึกษาโรงเรียน” พร้อมโลโก้โรงเรียนและช่องค้นหานักเรียน
• ตารางบันทึกข้อมูลทุน
• ชื่อ–สกุลนักเรียน
• ชั้นเรียน/ห้อง
• ปีการศึกษา (2568-2575)
• วันที่ได้รับทุน
• ชื่อทุน / แหล่งทุน (รัฐบาล, สภากาชาด, อบต., วัด, ผู้ใหญ่ใจดี ฯลฯ)
• จำนวนเงินที่ได้รับ
• สาเหตุที่ได้รับ (เช่น เรียนดี, บ้านยากจน, พ่อแม่แยกทาง ฯลฯ)
• ช่องบันทึกหมายเหตุ
• ระบบรวมยอดอัตโนมัติ:
• รวมยอดเงินที่นักเรียนแต่ละคนได้รับทั้งหมด
• รวมยอดเงินของแต่ละหน่วยงานผู้บริจาค
• หน้ารายงานวิเคราะห์:
• แผนภูมิแสดง “นักเรียนที่ได้รับทุนมากที่สุดในปี”
• แผนภูมิเปรียบเทียบ “หน่วยงานที่ให้ทุนมากที่สุด”
• ตัวกรองข้อมูล:
• ตามชั้นเรียน / ปีการศึกษา / ประเภททุน
• ปุ่ม: “เพิ่มข้อมูลทุนใหม่”, “ดูสรุปรายปี”, “ส่งออกเป็นไฟล์ Excel”

💡 สไตล์การออกแบบ:
• ใช้โครงแบบ Dashboard หรือ Spreadsheet ที่ดูเรียบและชัดเจน
• ใช้ไอคอนนักเรียน, เงินทุน, และแหล่งทุน
• ฟอนต์อ่านง่าย เช่น Prompt หรือ Sarabun
• เพิ่มกราฟสรุปยอดรวมแบบวงกลมและแท่ง

🎯 จุดประสงค์ของระบบ:
เพื่อให้ครูสามารถบันทึกและตรวจสอบข้อมูลทุนการศึกษาได้ง่ายขึ้น ไม่ซ้ำซ้อน และวิเคราะห์ข้อมูลย้อนหลังได้ในแต่ละปี

ออกแบบหน้าเว็บระบบส่งข่าวประชาสัมพันธ์ของโรงเรียน
โทนสีฟ้า-ขาว ให้ดูเป็นทางการและเป็นมิตร เหมาะกับเว็บไซต์โรงเรียน

หน้าเว็บควรมีส่วนประกอบดังนี้:
• หัวข้อหลัก: “ระบบส่งข่าวประชาสัมพันธ์โรงเรียน”
• ฟอร์มกรอกข้อมูลข่าวสาร มีช่องกรอกดังนี้
• ชื่อกิจกรรม
• วันที่จัดกิจกรรม
• รายละเอียดกิจกรรม (ข้อความยาวได้)
• ผู้ส่งข่าว / ผู้รับผิดชอบ
• ปุ่ม “แนบรูปภาพ (ไม่เกิน 10 ภาพ)”
• ปุ่ม “ส่งข่าวประชาสัมพันธ์”
• พื้นที่แสดงข่าวที่ถูกส่งแล้ว แสดงในรูปแบบการ์ดหรือโพสต์
แต่ละการ์ดแสดงภาพกิจกรรม, ชื่อกิจกรรม, วันที่, และชื่อผู้ส่ง
• ดีไซน์เรียบง่าย ดูสะอาดตา มีไอคอนและภาพประกอบแนวโรงเรียน
• ใช้ฟอนต์อ่านง่าย เช่น Prompt หรือ Noto Sans Thai
• เพิ่มภาพตัวอย่างนักเรียนและครูร่วมกิจกรรมในพื้นหลังบางส่วน
• รองรับการดูได้ทั้งคอมพิวเตอร์และมือถือ (Responsive Design)

ใส่ปุ่มเมนูด้านบน เช่น “หน้าแรก | ข่าวทั้งหมด | ส่งข่าว | ติดต่อโรงเรียน”

สร้างดีไซน์ให้พร้อมสำหรับนำไปใช้พัฒนาเว็บจริงได้

สร้างระบบตรวจสอบรูปแบบไฟล์รายงานที่อัปโหลดเป็น PDF
เพื่อวิเคราะห์ว่ารายงานเป็นไปตามหลักเกณฑ์การจัดทำรายงานโครงงานคอมพิวเตอร์หรือไม่
ระบบต้องสามารถตรวจสอบได้ดังนี้

⸻

🔹 1. การตั้งค่าหน้ากระดาษ
• ตรวจสอบว่าไฟล์ PDF ทุกหน้ามีขนาด A4 แนวตั้ง
• ตรวจสอบระยะขอบกระดาษว่า
• บน = 3.81 ซม. (1.5 นิ้ว)
• ซ้าย = 3.81 ซม. (1.5 นิ้ว)
• ล่าง = 2.54 ซม. (1 นิ้ว)
• ขวา = 2.54 ซม. (1 นิ้ว)

🔹 2. ฟ้อนต์และขนาดตัวอักษร
• ตรวจสอบฟ้อนต์ที่ใช้ว่าเป็น TH SarabunPSK
• หัวเรื่องหลัก: ขนาด 20 พอยท์ ตัวหนา
• เนื้อหา: ขนาด 16 พอยท์ ตัวปกติ
• ตรวจสอบว่าทั้งเล่มใช้ฟ้อนต์และขนาดเดียวกัน
• ตรวจสอบการเว้นบรรทัด (line spacing) ว่าเป็น 1 เท่า (single line)

🔹 3. การย่อหน้า
• ย่อหน้าแรกต้องเว้นจากขอบซ้าย 2.54 ซม. (1 นิ้ว)
• ย่อหน้าถัดไปเว้นเพิ่มทีละ 1.27 ซม. (0.5 นิ้ว) ตามลำดับ
• ตรวจสอบความสม่ำเสมอของการเว้นย่อหน้าในแต่ละบท

🔹 4. การลำดับหน้า
• ส่วน “กิตติกรรมประกาศ” “บทคัดย่อ” ต้องใช้เลขหน้าแบบอักษรไทย ก ข ค
• บทที่ 1 เป็นต้นไปต้องใช้เลขอารบิก (1, 2, 3, …)
• ตรวจสอบว่าเลขหน้าชิดขวาและห่างจากขอบบน 2.54 ซม.
• ตรวจสอบว่าหน้าขึ้นต้นบทใหม่ ไม่มีเลขหน้า

🔹 5. ส่วนประกอบของรายงาน

ตรวจสอบการมีอยู่ของหน้าเหล่านี้ตามลำดับ:
1. ปกหน้า (ตรวจสอบว่ามีชื่อเรื่องกลางหน้า ฟ้อนต์ TH SarabunPSK)
2. ปกใน (เหมือนปกหน้า)
3. สารบัญ (ตรวจสอบคำว่า “สารบัญ” อยู่กลางหน้า ตัวหนา 20 พอยท์)
4. สารบัญตาราง / สารบัญภาพ (ถ้ามี)
5. เนื้อหาบทที่ 1–5 (ตรวจสอบหัวข้อ “บทที่ …” อยู่กลางหน้า ห่างขอบบน 3.81 ซม.)
6. ภาคผนวก (ตรวจสอบคำว่า “ภาคผนวก” กลางหน้า ตัวหนา 20 พอยท์)

🔹 6. รายงานผลการตรวจสอบ
• แสดงผลว่า “ผ่าน” หรือ “ไม่ผ่าน” สำหรับแต่ละหัวข้อ
• หากไม่ผ่าน ให้ระบุข้อผิดพลาด เช่น
• “ฟ้อนต์ไม่ตรงตามกำหนด (พบ Arial แทน TH SarabunPSK)”
• “ระยะขอบซ้ายไม่ถูกต้อง (พบ 2.5 ซม.)”
• “ย่อหน้าแรกไม่เว้น 1 นิ้ว”
• สรุปคะแนนความถูกต้องโดยรวม (% ความถูกต้องของรูปแบบรายงาน)

🔹 7. ฟังก์ชันเพิ่มเติม (ถ้าทำเป็น Web App)
• รองรับการอัปโหลดไฟล์ PDF
• แสดงตัวอย่างหน้าที่ผิดรูปแบบ
• มีปุ่ม “ดาวน์โหลดรายงานผลตรวจสอบ (PDF)”
• ใช้ภาษาไทยใน UI

⸻

ให้ระบบนี้ออกแบบหน้าตาแบบเรียบง่าย ใช้สีโทนฟ้า–ขาว
เน้นความเข้าใจง่ายสำหรับนักเรียนหรือครูที่ต้องตรวจรายงานโครงงานคอมพิวเตอร์

สร้างระบบลงทะเบียนอบรมออนไลน์ด้วย Google Apps Script โดยมีรายละเอียดดังนี้

1. **ข้อมูลที่ใช้เก็บใน Google Sheet**
- วันที่อบรม
- ชื่อ – นามสกุลผู้เข้าอบรม
- หน่วยงาน / โรงเรียน
- อีเมล
- เบอร์โทรศัพท์
- หัวข้อการอบรมที่เลือก
- วันที่ลงทะเบียน
- สถานะการลงทะเบียน (รออนุมัติ / อนุมัติแล้ว)

2. **คุณสมบัติของระบบ**
- สร้างฟอร์มออนไลน์ (HTML + Apps Script) ให้ผู้ใช้กรอกข้อมูล
- เมื่อผู้ใช้กด “ลงทะเบียน” ให้บันทึกข้อมูลไปยัง Google Sheet โดยอัตโนมัติ
- ตรวจสอบว่าอีเมลนี้เคยลงทะเบียนอบรมแล้วหรือไม่ ถ้ามีให้แจ้งเตือน
- ส่งอีเมลยืนยันไปยังผู้ลงทะเบียน โดยใช้ GmailApp.sendEmail
- แสดงหน้าตอบกลับ “ลงทะเบียนสำเร็จ” หรือ “คุณได้ลงทะเบียนแล้ว”
- ผู้ดูแลระบบสามารถเปิด Sheet เพื่อดูรายชื่อผู้เข้าอบรมได้ทันที

3. **การใช้งาน**
- ใช้ไฟล์เดียวใน Google Apps Script (Code.gs + index.html)
- ใช้ Web App เพื่อเผยแพร่ลิงก์ให้ผู้เข้าร่วมลงทะเบียน
- แนะนำให้เพิ่มโลโก้และชื่อโครงการอบรมไว้ด้านบนฟอร์ม

4. **สไตล์ของหน้าเว็บ**
- ออกแบบเรียบง่าย ใช้ CSS ภายในไฟล์ HTML
- ใช้โทนสีฟ้า-ขาว และปุ่ม “ลงทะเบียน” สีเขียว
- ฟอร์มต้องรองรับการใช้งานบนมือถือ

5. **ขอให้แสดงโค้ดตัวอย่างเต็ม พร้อมคำอธิบายการ Deploy เป็น Web App**