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

ออกแบบเว็บไซต์ Responsive โทนสีฟ้า-ขาว สำหรับ "ระบบค้นหาและดาวน์โหลดเกียรติบัตร"
โรงเรียน: xxxxxx

ฟังก์ชันหน้าเว็บ:
1. ส่วนหัวเว็บไซต์ แสดงชื่อกิจกรรมและรายละเอียดวิชา
2. แบบฟอร์มค้นหาเกียรติบัตร โดยกรอก:
- ชื่อ
- นามสกุล
3. ปุ่ม "ค้นหาเกียรติบัตร"
4. เมื่อค้นหาแล้ว ระบบจะแสดงปุ่ม "ดาวน์โหลดเกียรติบัตร" (ลิงก์จาก Google Drive / Apps Script API)
5. จัดวางให้อ่านง่าย สวยงาม ใช้ Bootstrap หรือ Tailwind

องค์ประกอบเพิ่มเติม:
- โลโก้โรงเรียนด้านบน
- พื้นหลังแบบ Gradient อ่อน ๆ
- ใช้ Card/Container แสดงผลลัพธ์เกียรติบัตร
- Footer ใส่ข้อความ "พัฒนาโดย xxxx"

สร้างเว็บไซต์ระบบสุ่มรายชื่อนักเรียน
- โทนสีฟ้า-ขาว เรียบง่าย ทันสมัย รองรับ Responsive
- ส่วนหัวแสดงชื่อ "ระบบสุ่มรายชื่อนักเรียน"
- มีกล่องให้ครูกรอกรายชื่อนักเรียน (กรอกทีละชื่อ หรือคัดลอกวางเป็นบรรทัด)
- มีปุ่ม "เพิ่มรายชื่อ" และแสดงรายชื่อนักเรียนที่เพิ่มเข้ามาในกล่องด้านล่าง
- มีปุ่ม "สุ่มรายชื่อ" เมื่อกดแล้ว จะแสดงผลลัพธ์นักเรียนที่ถูกสุ่มในกล่องตรงกลาง พร้อมแอนิเมชันเล็กน้อย
- มีปุ่ม "ล้างรายชื่อ" เพื่อเริ่มใหม่
- ใช้ฟอนต์ TH Sarabun New หรือฟอนต์อ่านง่ายสำหรับภาษาไทย
- ดีไซน์ให้น่าใช้ เหมาะกับครูใช้ในห้องเรียนจริง

สร้าง Exam Countdown ระยะเวลา <30 นาที> ไม่มีปุ่มหยุดชั่วคราว มีเตือนล่วงหน้าเมื่อเหลือ <5 นาที> (ไอคอนเตือน + ข้อความ) และเมื่อหมดเวลาให้เรียกฟังก์ชัน onTimeUp() เพื่อส่งคำตอบอัตโนมัติ โค้ด JS แยกเป็นฟังก์ชันชัดเจน

สร้างตัวอย่าง Chatbot ตอบคำถามพื้นฐาน ด้วย Canva Code โดยใช้ HTML + JavaScript

✅ ผู้ใช้พิมพ์ข้อความลงในช่องแชท
✅ Bot ตอบกลับอัตโนมัติตามเงื่อนไขที่ตั้งไว้ เช่น

ทักทาย ("สวัสดี", "Hello") → Bot ตอบว่า "สวัสดีค่ะ ยินดีให้บริการ"

ถามเวลา ("กี่โมง", "time") → Bot ตอบเวลาปัจจุบัน

ถามเกี่ยวกับโรงเรียน ("โรงเรียน", "school") → Bot ตอบว่า "นี่คือแชทบอทสำหรับข้อมูลโรงเรียน"
✅ ถ้าไม่เข้าใจ → Bot ตอบว่า "ขอโทษค่ะ ฉันยังไม่เข้าใจคำถามนี้"
✅ อินเทอร์เฟซสวยงาม ใช้กล่องแชทเลียนแบบ Messenger
✅ รองรับทั้งคอมพิวเตอร์และมือถือ

ออกแบบระบบออกใบเสร็จออนไลน์ โดยมีคุณสมบัติดังนี้

1. ระบบ Login
- ผู้ดูแลระบบต้องใส่ Username/Password เพื่อเข้าสู่ระบบ
- เมื่อเข้าสู่ระบบแล้วจะสามารถจัดการข้อมูลลูกค้าและสร้างใบเสร็จได้

2. จัดการข้อมูลลูกค้า
- เพิ่ม / แก้ไข / ลบ ข้อมูลลูกค้าได้
- ฟอร์มบันทึกข้อมูลลูกค้า: ชื่อ-นามสกุล, หน่วยงาน, ที่อยู่, เบอร์โทร, อีเมล
- แสดงรายชื่อลูกค้าในรูปแบบตาราง ค้นหา/กรองได้
- เวลาสร้างใบเสร็จสามารถเลือกชื่อจากฐานข้อมูลลูกค้าได้ทันที (Auto Fill ข้อมูลที่อยู่)

3. หน้าสร้างใบเสร็จ
- กรอกข้อมูลผู้ชำระเงิน (เลือกจากลูกค้าเดิม หรือเพิ่มใหม่)
- ระบบรันเลขที่ใบเสร็จอัตโนมัติ (เช่น 0001, 0002…)
- เลือกวันที่ออกใบเสร็จได้จากปฏิทิน

4. ตารางรายการสินค้า/บริการ
- แสดงคอลัมน์: ลำดับ | รายการ | จำนวน | ราคาต่อหน่วย | จำนวนเงิน
- กดปุ่มเพิ่ม/ลบแถวรายการได้
- คำนวณราคารวมอัตโนมัติ

5. การคำนวณ
- แสดง "ราคารวม" เป็นตัวเลข
- แปลง "ราคารวม" เป็นข้อความ (เช่น 1500 → หนึ่งพันห้าร้อยบาทถ้วน)

6. ส่วนท้ายใบเสร็จ
- ช่องเซ็นชื่อผู้รับเงิน พร้อมชื่อในวงเล็บ
- ปุ่มพิมพ์ใบเสร็จเป็น PDF

7. การออกแบบ
- ใช้ฟ้อนต์ **Sarabun** ทั้งระบบ
- โทนสี **ม่วง-ขาว**
- Heading ใช้สีม่วงเข้ม
- พื้นหลังใบเสร็จสีขาว เส้นตารางสีม่วงอ่อน
- ปุ่มต่าง ๆ ใช้สีม่วง (อ่อน-เข้ม) กับตัวอักษรสีขาว
- Responsive ใช้งานได้ทั้งมือถือและคอมพิวเตอร์

สร้างเว็บไซต์ตัวอย่างแนวทันสมัย โทนสีสดใส
แสดง "ผลงานนักเรียน" หลายชิ้นในรูปแบบการ์ด แต่ละการ์ดมี:
- รูปภาพจำลองผลงานนักเรียน (Placeholder Image)
- ชื่อผลงาน
- ปุ่มกดไลค์พร้อมตัวเลขนับจำนวน
- ปุ่มกดแชร์ (ลิงก์จำลองไป Facebook, LINE, Twitter)
- ส่วนแสดงความคิดเห็นสำหรับผลงานนั้นโดยเฉพาะ (ฟอร์มกรอกชื่อ + ข้อความ)
- แสดงคอมเมนต์ที่เพิ่มเข้ามาใต้การ์ดของผลงานนั้นทันที

จัดหน้าเว็บให้อ่านง่าย สวยงาม และรองรับมือถือ (Responsive)
ใช้ JavaScript เบาๆ เพื่อจำลองการทำงาน เช่น:
- กดไลค์แล้วตัวเลขเพิ่มขึ้น
- เพิ่มคอมเมนต์ใหม่เข้าไปในรายการคอมเมนต์ของผลงานที่เลือกโดยไม่ต้องรีเฟรชหน้า
- ปุ่มแชร์แสดงเป็นลิงก์สมมติ (ไม่ต้องเชื่อมต่อจริง)

สร้างฟอร์มมีหน้าแสดงรายชื่อนักเรียน พร้อมแต้มสะสมของแต่ละคน
-มีปุ่มเพิ่มนักเรียน อยู่ด้านบนเป็น modal form
-มีปุ่ม “เพิ่มแต้ม” และ “ลบแต้ม” ข้างชื่อของนักเรียนแต่ละคน แต้มเพิ่มขึ้นทีละ 1
-มีแถบแต้มแบบ progress bar และกำหนดถึง 100
-ค้นหานักเรียนได้ และค้นหาแบบห้องเรียนได้
2. สร้างฟอร์มหน้ารายวิชาที่สามารถให้แต้มแก่นักเรียน (เช่น วิทยาศาสตร์ คณิตศาสตร์ ภาษาไทย ฯลฯ)
- มีปุ่มเพิ่มรายวิชา อยู่ด้านบนเป็น modal form
มีปุ่ม “เพิ่มแต้ม” และ “ลบแต้ม” ข้างชื่อของนักเรียนแต่ละคน แต้มเพิ่มขึ้นทีละ 1
- ใช้ไอคอน font awesome ที่เกี่ยวข้องกับรายวิชา มีเฉดสีเป็นโค้ดสีให้เลือกสีของไอคอนเอง และแถบแต้มแบบ progress bar (มีไอคอน ชื่อวิชา สี)
- แสดงรายชื่อนักเรียนแต่ละรายวิชา โดยคลิกดูรายชื่อนักเรียน
- แต้มของนักเรียนต้องมาจากฐานข้อมูลเดียวกันทั้งรายชื่อนักเรียนและรายวิชา
3. สร้างแท็บนำเข้าข้อมูลนักเรียนเป็นรายห้อง เป็นไฟล์ excel
มีปุ่มเพิ่มห้องเรียน อยู่ด้านบนเป็น modal form
ต้องเลือกห้องเรียนก่อนถึงจะนำเข้าข้อมูลได้
นำเข้าข้อมูลนักเรียนแยกเป็นรายห้อง มีรหัสนักเรียน คำนำหน้า ชื่อ นามสกุล ชั้น วิชาที่เรียน
แสดงรายชื่อข้อมูลที่นำเข้า ตามข้อมูลที่นำเข้าของไฟล์
- แสดงตัวอย่างไฟล์นำเข้าข้อมูล
- มีปุ่มนำเข้าข้อมูล
4. เมื่อนำเข้าข้อมูลแล้ว ต้องมีรายชื่อนักเรียนแสดงอยู่ในรายวิชาที่เรียนด้วย
5. ใช้ Sweet Alert แสดงสถานะบันทึกข้อมูลสำเร็จ
6. รองรับการแสดงผลบนมือถือ
7. ดีไซน์สวยงาม ใช้โทนสีสดใส ฟ้า-ขาว สไตล์นักเรียนมัธยม
8.**Header**: โลโก้ https://imprnoom.com/logonoom1.png ขนาดเหมาะสม (ไม่เกิน 150px) มี title ระบบสะสมแต้มนักเรียน อยู่ด้านล่าง ไม่ต้องมี background
9. **Footer**: ข้อความ “© 2025 ระบบสะสมแต้มนักเรียน | Pichayanart Reerak” อยู่ตรงกลาง ไม่ต้องมี background
10. ใช้ Google Font “Prompt”
11.เชื่อม App Script ที่ URL: xxxxxx
12. เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ให้ด้วย

ระบบค้นหาเกียรติบัตร
1. ค้นหาชื่อของตนเอง
2. เมื่อเจอ ให้ปุ่มสำหรับดาวน์โหลดเกียรติบัตรเป็น PDF
3. ข้อมูลรายชื่อทั้งหมดอยู่ใน Google Sheet โดยมีคอลัมน์:
ID: รหัสเกียรติบัตร
TITLE : ชื่อเรื่อง
PRENAME : คำนำหน้า
FIRSTNAME: ชื่อ
LASTNAME : นามสกุล
PDFURL: ลิงก์ดาวน์โหลดไฟล์ PDF
🎯 ฟังก์ชันระบบ:
หน้าค้นหาที่มีช่องให้กรอกชื่อหรือนามสกุล
เมื่อค้นเจอ ให้แสดงรหัสเกียรติบัตร ชื่อ-นามสกุล ชื่อเรื่อง และมีปุ่ม “ดาวน์โหลด PDF” ลิงก์ไปที่ PDFURL
หากไม่พบข้อมูล ให้แสดงข้อความ “ไม่พบข้อมูลของคุณในระบบ”
รูปแบบการแสดงผล:
สไตล์หน้าเว็บเรียบง่าย สวยงาม โทนสีฟ้า–ขาว
ชื่อผู้รับอยู่บนหัวข้อ
ปุ่มดาวน์โหลด PDF ด้านใต้ข้อมูล
ลิงก์เปิดไฟล์ PDF ในแท็บใหม่
4. ใช้ Font google : Noto sans Thai
5. – **Header**: โลโก้ https://imprnoom.com/logonoom1.png ขนาดเหมาะสม (ไม่เกิน 150px)
มี title ระบบค้นหาเกียรติบัตร ครูนุ่ม แอดมจว. อยู่ด้านล่าง ไม่ต้องมี background
6. **Footer**: ข้อความ “© 2025 ระบบค้นหาเกียรติบัตร ครูนุ่ม แอดมจว. | Pichayanart Reerak” อยู่ตรงกลาง ไม่ต้องมี background
7. แปลง ID เป็นลิงก์อัตโนมัติของ PDFURL ใน google drive เปิดไฟล์แทนการดาวน์โหลดไฟล์ PDF จาก ID ในคอลัมน์ PDFURL จากใน SHEET_ID=xxxx
8.เชื่อม App Script ที่ URL:xxxx
9.SHEET_NAME=certificate
10. เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ให้ด้วย

ออกแบบระบบแจ้งคะแนนสอบออนไลน์ให้นักเรียน
สามารถเข้ามาค้นหาคะแนนของตนเองได้ โดยกรอกรหัสประจำตัวนักเรียนหรือเลขประจำตัวประชาชน ระบบจะแสดงข้อมูลดังนี้:
• ชื่อ-นามสกุล
• ห้อง/ระดับชั้น
• รายวิชา
• คะแนนสอบกลางภาค/ปลายภาค/รวม
• เกรดหรือผลประเมิน
จัดแสดงผลในรูปแบบตารางสวยงาม มีการเน้นสีผลคะแนนสูง/ต่ำ หรือผ่าน/ไม่ผ่าน
โครงสร้างหน้าเว็บให้มี:
• Header: ชื่อระบบ เช่น “ระบบแจ้งคะแนนสอบนักเรียน”
• Form สำหรับค้นหาคะแนน โดยกรอกเลขประจำตัว
• Section แสดงผลคะแนน (ถ้าพบข้อมูล)
• Footer: แสดงชื่อโรงเรียน ปีการศึกษา และผู้พัฒนา เช่น “© 2025 โรงเรียนxxxxxxxxx | พัฒนาโดย xxxxxxxx”
ใช้ Bootstrap หรือ Tailwind CSS ก็ได้ ให้หน้าเว็บสวยงามและแสดงผลได้ดีทั้งในคอมและมือถือ (Responsive Design)