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

"ช่วยเขียนโค้ดสร้างหน้าเว็บไซต์ 'คลังบทเรียนออนไลน์' (Online Learning Hub) ให้หน่อย โดยใช้ HTML แบบไฟล์เดียวจบ (Single File) และใช้ Tailwind CSS (ผ่าน CDN) ในการตกแต่งความสวยงาม

ความต้องการของเว็บไซต์มีดังนี้:

การออกแบบและโทนสี: เน้นความสะอาดตา ทันสมัย (Modern & Clean) ใช้โทนสีน้ำเงิน/คราม (Indigo) สลับกับขาวและเทาอ่อน เพื่อให้อ่านง่าย ฟอนต์ขอเป็นตระกูลภาษาไทย เช่น Prompt หรือ Sarabun

รองรับมือถือ (Responsive): ต้องแสดงผลได้ดีทั้งบนคอมพิวเตอร์และโทรศัพท์มือถือ (มีระบบ Hamburger Menu สำหรับมือถือ)

ส่วนประกอบของหน้าเว็บ:

Navigation Bar (Navbar): มีโลโก้, เมนูหลัก (หน้าแรก, หมวดหมู่, บทเรียนทั้งหมด), ช่องค้นหา (Search Bar) และปุ่ม 'เข้าสู่ระบบ'

Hero Section: ส่วนต้อนรับด้านบน มีข้อความชักชวนให้คนมาเรียน มีปุ่ม Call to action เช่น 'เริ่มเรียนเลย' และมีรูปภาพประกอบที่เข้ากับการศึกษา

Categories Section (หมวดหมู่วิชา): แสดงหมวดหมู่วิชาเป็น Card เล็กๆ เช่น วิทยาการคอมพิวเตอร์, ภาษาต่างประเทศ, คณิตศาสตร์ (ใช้ Icon ประกอบด้วย)

Lessons/Courses Section (รายการบทเรียนแนะนำ): แสดงรายการบทเรียนเป็นแบบ Card (Grid เลย์เอาต์) แต่ละการ์ดมีรูปภาพปก, ชื่อวิชา, คำอธิบายสั้นๆ, เวลาเรียน และปุ่ม 'เข้าเรียน' (สร้างตัวอย่างจำลองมาประมาณ 6 วิชา)

Footer: ส่วนล่างสุดของเว็บ มีข้อมูลเกี่ยวกับเว็บไซต์, ลิงก์ด่วน, และข้อมูลการติดต่อ

ไอคอน: ขอให้ใช้ไอคอนจากไลบรารีอย่าง Lucide Icons หรือ FontAwesome (เรียกผ่าน CDN)

JavaScript: ใส่ลูกเล่นเล็กๆ น้อยๆ เช่น การเปิด/ปิดเมนูบนมือถือ และถ้าระบบช่องค้นหาสามารถพิมพ์ค้นหาแล้วกรองบทเรียน (Filter) ได้ด้วยจะดีมาก

ขอโค้ดทั้งหมดอยู่ในไฟล์ index.html ไฟล์เดียวเลยนะ"

ตัวอย่าง Prompt 2: แบบสั้น (เน้นไอเดีย)

"สร้าง Landing Page สำหรับเว็บ 'คลังบทเรียนออนไลน์' ด้วย HTML และ Tailwind CSS ขอโทนสีสะอาดๆ ดูน่าเชื่อถือ มี Navbar, Hero Banner อธิบายเว็บ, ส่วนแสดงหมวดหมู่วิชาเป็นไอคอน, ส่วนแสดงการ์ดคอร์สเรียนแนะนำ (Mockup มาสัก 6 คอร์ส) และ Footer เน้นให้รองรับการเปิดบนมือถือ (Responsive) ขอโค้ดรวมในไฟล์เดียวเลยครับ"

ตัวอย่าง Prompt 3: แบบเน้น Framework อื่น (เผื่ออยากได้ React)

"สร้างคอมโพเนนต์สำหรับหน้าแรกของเว็บ 'คลังบทเรียนออนไลน์' ด้วย React (JSX) และ Tailwind CSS ขอโครงสร้างแบบ Single Page
มี Navbar (พร้อมเมนูมือถือ), Hero section, หมวดหมู่คอร์สเรียน และ Grid แสดงคอร์สเรียนแนะนำจำลอง 6 คอร์ส
สร้าง Mock Data ให้คอร์สเรียนด้วย และทำให้ช่อง Search สามารถพิมพ์ค้นหาชื่อคอร์สได้จริงๆ
ขอโค้ดทั้งหมดอยู่ในไฟล์เดียว" (ดูตัวอย่างผลลัพธ์แบบ React ได้จากไฟล์ learning-portal.jsx ที่ผมสร้างไว้ให้ใน Artifacts state ด้านบนครับ)

คุณคือ Senior Full Stack Developer และ UI/UX Designer มืออาชีพ
จงออกแบบและพัฒนา “เว็บไซต์โรงเรียน” แบบครบระบบ โดยใช้เทคโนโลยีดังนี้

- PHP 8+
- MySQL
- HTML5
- CSS3
- JavaScript
- Bootstrap 5
- Responsive Design
- รองรับ Dark Mode
- ใช้งานได้ทั้งมือถือ Tablet และ Desktop

แนวคิดการออกแบบ:
- ทันสมัย สวยงาม น่าเชื่อถือ
- ใช้โทนสีหลักของโรงเรียน (แดง-เหลือง)
- UI ดูเป็นทางการแต่ทันสมัย
- โหลดเร็ว
- รองรับ SEO
- มี Animation เบา ๆ
- ใช้ Font ภาษาไทยที่อ่านง่าย
- Dashboard ดู Professional

โครงสร้างเว็บไซต์ประกอบด้วย:

1. หน้าแรก (Home)
- Hero Section พร้อมภาพโรงเรียน
- ข่าวประชาสัมพันธ์
- ปฏิทินกิจกรรม
- ผู้บริหาร
- สถิติผู้ใช้งาน
- แนะนำโรงเรียน
- Quick Links
- แกลเลอรีภาพ
- วิดีโอแนะนำโรงเรียน
- Footer ครบถ้วน

2. ระบบข่าวประชาสัมพันธ์
- เพิ่ม/แก้ไข/ลบข่าว
- อัปโหลดรูปภาพ
- แสดงข่าวล่าสุด
- ระบบหมวดหมู่ข่าว
- ระบบค้นหาข่าว

3. ระบบบุคลากร
- ข้อมูลครูและบุคลากร
- แสดงรูปภาพ
- แบ่งกลุ่มสาระ
- ระบบค้นหา

4. ระบบนักเรียน
- แสดงข้อมูลนักเรียน
- ห้องเรียน
- ระดับชั้น
- ระบบค้นหา

5. ระบบดาวน์โหลดเอกสาร
- อัปโหลดไฟล์ PDF/Word
- แบ่งหมวดหมู่
- นับจำนวนดาวน์โหลด

6. ระบบแกลเลอรี
- อัลบั้มรูป
- Lightbox
- Lazy Load

7. ระบบติดต่อโรงเรียน
- ฟอร์มติดต่อ
- Google Map
- Social Media

8. ระบบ Admin
- Login / Logout
- Dashboard
- จัดการผู้ใช้งาน
- จัดการข่าว
- จัดการแกลเลอรี
- จัดการเอกสาร
- จัดการ Banner

9. ระบบความปลอดภัย
- Password Hashing
- Prepared Statements (PDO)
- CSRF Protection
- Session Security
- Validation Input
- Upload Security

10. ฐานข้อมูล MySQL
ออกแบบ ER Diagram และ SQL Script สำหรับ:
- users
- news
- galleries
- gallery_images
- teachers
- students
- downloads
- categories
- banners
- settings

11. สิ่งที่ต้องการเพิ่มเติม
- ใช้ MVC Structure
- แยกไฟล์เป็นระบบระเบียบ
- Clean Code
- Comment อธิบายโค้ด
- รองรับ .htaccess Rewrite URL
- ระบบ Pagination
- Toast Notification
- SweetAlert2
- DataTables
- CKEditor

12. ต้องการผลลัพธ์ดังนี้
- โครงสร้างโฟลเดอร์ทั้งหมด
- SQL Script
- ตัวอย่างไฟล์ config.php
- ตัวอย่างระบบ Login
- ตัวอย่าง CRUD ข่าวประชาสัมพันธ์
- ตัวอย่าง Dashboard Admin
- ตัวอย่างหน้า Home
- ตัวอย่าง CSS Modern Design
- ตัวอย่าง JavaScript
- วิธีติดตั้งระบบบน XAMPP/MAMP
- วิธี Deploy ขึ้น Hosting

13. รูปแบบการเขียนโค้ด
- เขียนโค้ดแบบ Production Ready
- ใช้มาตรฐาน PSR
- อธิบายทุกส่วน
- แสดงตัวอย่างไฟล์ครบ
- แสดงโค้ดเต็ม ไม่ตัด

14. เพิ่มฟีเจอร์ AI ภายในเว็บไซต์
- AI Chatbot ตอบคำถามโรงเรียน
- AI สรุปข่าวอัตโนมัติ
- AI สร้างประกาศ
- AI ช่วยค้นหาเอกสาร

15. ต้องการ UI เพิ่มเติม
- Glassmorphism
- Soft Shadow
- Gradient Modern
- Card Design
- Hover Effect
- Animated Counter
- Loading Animation

กรุณาสร้าง:
- Wireframe
- Database Schema
- Folder Structure
- Full Source Code Example
- Responsive UI Design
- Modern Admin Dashboard
- Beautiful Landing Page
- พร้อมอธิบายทุกขั้นตอนแบบละเอียด

Prompt:
“ออกแบบหน้าเว็บไซต์ของโรงเรียนสมัยใหม่ โทนสีสุภาพ น่าเชื่อถือ ใช้สีประจำโรงเรียน (สีน้ำเงิน–เหลือง หรือปรับตามต้องการ) เน้นความเป็นมืออาชีพ ใช้งานง่าย และรองรับการนำไปเป็นหน้า Landing Page จริง
ให้มีโครงสร้างดังนี้:
1. ส่วนหัวเว็บไซต์ (Hero Section)
• รูปภาพโรงเรียนหรือภาพสื่อถึงการเรียนรู้
• ข้อความเด่น: ‘โรงเรียน…(ชื่อโรงเรียน)… มุ่งสู่ความเป็นเลิศทางวิชาการและคุณธรรม’
• ปุ่ม Call-to-Action เช่น ‘ดูข้อมูลเพิ่มเติม’ หรือ ‘ระบบรับสมัคร’
2. เมนูหลัก
• หน้าแรก | เกี่ยวกับโรงเรียน | ข่าวประชาสัมพันธ์ | แผนการเรียน | ติดต่อเรา
3. ส่วนแสดงข่าว/ประกาศล่าสุด
• การ์ดข่าว 3–4 ใบ แนวสมัยใหม่
• ไอคอน/กราฟิกสื่อการศึกษา
4. ส่วนแนะนำโรงเรียน (About School)
• จุดเด่นของโรงเรียน
• ภาพกิจกรรม
• ข้อความสั้นแต่ชัดเจน
5. ส่วนกิจกรรม/ภาพถ่าย
• แกลเลอรีหรือกริดภาพขนาดสวยงาม
6. ส่วนลิงก์บริการออนไลน์
• ปุ่มแบบการ์ด: ระบบงานสารบรรณ, ระบบรับสมัครนักเรียน, ระบบส่งงานออนไลน์ ฯลฯ
7. ส่วนท้ายเว็บไซต์ (Footer)
• ชื่อโรงเรียน
• ที่อยู่ เบอร์ติดต่อ
• ไอคอนโซเชียลมีเดีย

สไตล์ทั้งหมดให้เป็นแบบโมเดิร์น ตัวหนังสืออ่านง่าย จัดวางเป็นระเบียบ ใช้ไอคอนและกราฟิกแบบ Flat Design รองรับการใช้งานบนมือถือ (Responsive).”

“โปรดสร้าง โค้ด HTML และ CSS พื้นฐาน สำหรับหน้าเว็บ [ระบุวัตถุประสงค์ เช่น หน้า Landing Page สำหรับโปรโมทหลักสูตร] โดยเน้นโครงสร้างที่ประกอบด้วย Header, ส่วนเนื้อหาหลัก 3 ส่วน, และ Footer โดยใช้ โทนสี [ระบุโทนสี เช่น สีน้ำเงินและขาว] และใช้โค้ดที่สะอาดและอ่านง่าย เหมาะสำหรับผู้เริ่มต้น”

สร้างเว็บไซต์โปรแกรมคำนวณชั่วโมงสอน (PA)
โดยมีรายละเอียดดังนี้:

🎯 ฟังก์ชันหลัก:
- ให้ผู้ใช้กรอก “กำหนดเวลาสอน” หน่วยเป็นนาที/คาบ (editable field)
- ให้กรอกข้อมูลรายวิชา (ชื่อวิชา, จำนวนคาบ/สัปดาห์)
- มีปุ่ม “➕ เพิ่มรายวิชา” เพื่อเพิ่มแถวกรอกข้อมูลได้ไม่จำกัด
- ระบบคำนวณอัตโนมัติ:
• ชั่วโมงสอนของแต่ละวิชา (คาบ × นาที ÷ 60)
• รวมจำนวน “ชั่วโมงสอนทั้งหมด” และ “นาทีทั้งหมด” ที่ส่วนล่างของตารางโดยอัตโนมัติ
- สามารถแก้ไข หรือลบรายวิชาได้
- รองรับ Responsive ทั้งมือถือและคอมพิวเตอร์

🧩 การออกแบบ:
- ส่วนหัวเว็บไซต์: “โปรแกรมคำนวณชั่วโมงสอน (PA)”
พร้อมโลโก้ทางซ้าย: https://imprnoom.com/images/logonoom1.png
- โทนสีหลัก: ฟ้า-ขาว ดูสะอาดตาแบบโปร
- ฟอนต์: “Sarabun”
- ปุ่มและกล่องกรอกข้อมูลโค้งมน (rounded-xl)
- มีเงาแบบ soft shadow ให้แต่ละการ์ด

📊 ส่วนแสดงผลรวม:
- แสดง “รวมชั่วโมงทั้งหมด (ชั่วโมง)” และ “รวมเวลาทั้งหมด (นาที)” แบบ real-time

📱 Footer:
Dev by Pichayanart Reerak.

💡 ใช้ HTML + Tailwind CSS + JavaScript
รองรับ Responsive ทั้งหน้าจอคอมพิวเตอร์และมือถือ

สร้างหน้าออกแบบ 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)

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

สร้างเว็บไซต์ ฝึกการเขียน Prompt สำหรับครู
โดยใช้ โทนสีฟ้า–ขาว ดูสะอาด สบายตา และรองรับ Responsive Design
เว็บไซต์ควรมีโครงสร้างดังนี้ 👇

🔹 ส่วน Header
• โลโก้ + ชื่อเว็บ “Prompt Training for Teachers”

🔹 ส่วน Hero (แนะนำ)
• พื้นหลังสีฟ้าอ่อน + ข้อความต้อนรับ เช่น
💡 “พื้นที่สำหรับครู ฝึกการเขียน Prompt ให้มีประสิทธิภาพ”
• ปุ่ม CTA: “เริ่มฝึกเขียน Prompt”

🔹 ส่วน Practice (ฝึกเขียน)
• กล่องข้อความ (Text Area) สำหรับพิมพ์ Prompt
• ปุ่ม “ส่งประเมิน”
• พื้นที่แสดงผลคะแนน/Feedback อัตโนมัติ (Progress bar สีฟ้า/เขียว)
• ตัวอย่าง Prompt ที่ดี (เป็นการ์ดหรือกล่องตัวอย่าง)

🔹 ส่วน Leaderboard (กระดานคะแนน)
• ตารางรายชื่อผู้ใช้ + คะแนนรวม
• แสดง Badge/Level เช่น 🥇 🥈 🥉
• รองรับการแสดงผลบนมือถือ (Responsive table)

🔹 ส่วน Footer
• ลิงก์เมนูซ้ำ (Home | Practice | Leaderboard | Resources | About)
• ข้อความลิขสิทธิ์ เช่น
© 2025 Prompt Training by Krunoom.dev
• ไอคอน Social Media (Facebook, YouTube, Line OA)

🎨 การออกแบบ
• โทนสีหลัก: ฟ้า (#2196F3, #BBDEFB) + ขาว (#FFFFFF)
• ฟอนต์: Sarabun (อ่านง่ายในภาษาไทย)
• ปุ่ม/CTA: สีฟ้าเข้ม + ตัวอักษรหนา
• Layout รองรับ Desktop / Tablet / Mobile

ฉันจะสร้างเว็บไซต์ฝึกการเขียน Prompt สำหรับครูให้คุณ โดยใช้โทนสีฟ้า-ขาว ที่สะอาดตาและรองรับทุกอุปกรณ์!

เสร็จแล้ว! เว็บไซต์ฝึกการเขียน Prompt สำหรับครูพร้อมใช้งาน มีระบบประเมินผลอัตโนมัติ กระดานคะแนน และตัวอย่าง Prompt ที่ดี ลองพิมพ์ Prompt ในช่องฝึกเขียนแล้วกดส่งประเมินเพื่อดูคะแนนและคำแนะนำ!


เปลี่ยนฟ้อนต์เป็น Prompt ไม่ต้องมีตารางคะแนน และเมนูต่างๆ ในเมื่อคุณเป็นผู้เชี่ยวชาญด้าน AI ขอรูปแบบการตรวจ Prompt ที่ฝึกเขียนแบบละเอียด

สร้างเว็บไซต์ประเมิน วPA ครู ตำแหน่ง วิทยฐานะ ชำนาญการ ให้ครบทุกหัวข้อ