# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.attachment_link.title
เพลง “AI เพื่อนใหม่ของเรา” ครูชัยพร ดีกร

# data[].attributes.attachment_link.title
ข่าวสารผู้ใหญ่บ้าน

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.body
ดชวีรยุทธ นันตา

ด.ชอัฐพล เกตุแสนสี

# data[].attributes.attachment_link.title
แนะนำคู่หูยอดนักเรียน_ป.3

# data[].attributes.attachment_link.title
แนะนำตัวละครนักเรียนชั้น_ป.3

# data[].attributes.headline
ด.ช.ธเนศพล อุดชา ชั้นป

# data[].attributes.body
ด.ช.ธเนศพล อุดชา ชั้นป.3

ด.ช.เบญจพล สังสิทธิ์ ชั้นป.3

โรงเรียน บ.ค.

ประเทศ ไทย

# data[].attributes.attachment_link.title
แนะนำตัวแทนนักเรียนชั้น_ป.3

# data[].attributes.headline
ด.ช.ธเนศพล อุดชา ชั้นป

# data[].attributes.body
ด.ช.ธเนศพล อุดชา ชั้นป.3

ด.ช.เบญจพล สังสิทธิ์ ชั้นป.3

โรงเรียน บ.ค.

ประเทศ ไทย

# data[].attributes.attachment_link.title
ทำความรู้จักเพื่อนใหม่_ชั้น_ป.3

# data[].attributes.headline
ด.ช.ธเนศพล อุดชา ชั้นป

# data[].attributes.body
ด.ช.ธเนศพล อุดชา ชั้นป.3

ด.ช.เบญจพล สังสิทธิ์ ชั้นป.3

โรงเรียน บ.ค.

ประเทศ ไทย

# data[].attributes.attachment_link.title
แนะนำนักเรียน_ป.3_โรงเรียน_บ.ค_

# data[].attributes.headline
ด.ชกันตถาวร คงนอก

# data[].attributes.body
ด.ชกันตถาวร คงนอก

# data[].attributes.attachment_link.title
ข้อมูลส่วนตัวของนักเรียนกันตถาวร

# data[].attributes.headline
ด.ช.ธเนศพล อุดชา ชั้นป

# data[].attributes.body
ด.ช.ธเนศพล อุดชา ชั้นป.3

ด.ช.เบญจพล สังสิทธิ์ ชั้นป.3

โรงเรียน บ.ค.

ประเทศ ไทย

# data[].attributes.attachment_link.title
ด.ช.ธเนศพล อุดชา ชั้นป.3 ด.ช.เบญจพล สังสิทธิ์ ชั้นป.3 โรงเรียน บ.ค. ประเทศ ไทย

# data[].attributes.headline
ด.ญ  ธิดารัตน์   แสงจันทร์

# data[].attributes.subject
ด.ญ  ธิดารัตน์   แสงจันทร์

# data[].attributes.headline
ชัยธวัช  พัตรภักดิ์

# data[].attributes.subject
ชัยธวัช  พัตรภักดิ์

# data[].attributes.attachment_link.title
หลังเป็นสายรุ้ง

# data[].attributes.body
คนจีนบ้านหรู บ้านสวยมีเงิน ชุดจีน สีแดง ผมยาว หน้าตาสวยที่สุดในโลก อังเป๋า เงินหยวน

# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.headline
ด.ญ ณัชชา หนันดุล

# data[].attributes.subject
ด.ญ ณัชชา หนันดุล

# data[].attributes.headline
ด.ย.วรรษมน สนองหงอก

# data[].attributes.subject
ด.ย.วรรษมน สนองหงอก

# data[].attributes.headline
ชัยธวัช  พัตรภักดิ์

# data[].attributes.subject
ชัยธวัช  พัตรภักดิ์

# data[].attributes.headline
ด.ญ.ธันยพร  สันทัด  ป.5  เลขที่ 7

# data[].attributes.subject
ด.ญ.ธันยพร  สันทัด  ป.5  เลขที่ 7

# data[].attributes.body
6767

# data[].attributes.headline
ด.ญ ณัชชา หนันดุล

# data[].attributes.subject
ด.ญ ณัชชา หนันดุล

# data[].attributes.headline
ด.ญ. นันทิชา  ป้องนาน   ชั้น ป.5   เลขที่9

# data[].attributes.subject
ด.ญ. นันทิชา  ป้องนาน   ชั้น ป.5   เลขที่9

# data[].attributes.headline
ด.ญ กัญญ์วรา ยาหะชั้นป.5 เลขที่15

# data[].attributes.subject
ด.ญ กัญญ์วรา ยาหะชั้นป.5 เลขที่15

# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.headline
ชัยธวัช   พัตรภักดิ์

# data[].attributes.subject
ชัยธวัช   พัตรภักดิ์

# data[].attributes.headline
ด.ญ.กัลยกร         คำฉิมมา

# data[].attributes.subject
ด.ญ.กัลยกร         คำฉิมมา

# data[].attributes.headline
ด.ญ.ธันยพร  สันทัด  

# data[].attributes.subject
ด.ญ.ธันยพร  สันทัด  

# data[].attributes.headline
สิริวรรณ ทองปัญญาป.5

# data[].attributes.subject
สิริวรรณ ทองปัญญาป.5

# data[].attributes.headline
ด.ญ. วรรามน สนองหงอก

# data[].attributes.subject
ด.ญ. วรรามน สนองหงอก

# data[].attributes.headline
ด.ญ พัชราภา ปะพะลา  ชั้นป.5 เลขท ี่ 10

# data[].attributes.subject
ด.ญ พัชราภา ปะพะลา  ชั้นป.5 เลขท ี่ 10

# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.attachment_link.title
การแข่งขัน AI

# data[].attributes.headline
ด.ญ.  นันทิชา   ป้องนาน    ชั้น ป.5   เลขที่ 9

# data[].attributes.subject
ด.ญ.  นันทิชา   ป้องนาน    ชั้น ป.5   เลขที่ 9

# data[].attributes.headline
สร้างภาพสไตล์อนิเมะยอด

# data[].attributes.body
สร้างภาพสไตล์อนิเมะยอดนิยมจากภาพที่อัปโหลดมา ใช้ลายเส้นที่มั่นใจ มีน้ำหนักเส้นเปลี่ยนเล็กน้อย และใช้การแรเงาแบบเซลล์แรเงาให้น้อยที่สุดด้วยรูปเงาแบนราบ ใช้สีสว่างอิ่มตัวสูงและแสงแบบกราฟิกที่คมสะอาด สไตล์นี้ควรมีสัดส่วนตัวละครแบบการ์ตูนเกินจริง ใบหน้าเรียบง่ายแต่แสดงอารมณ์ได้หลากหลายมาก พร้อมกายวิภาคที่ยืดหดได้หลากหลาย ปรับสภาพแวดล้อมให้เป็นพื้นที่บิดเบี้ยวเล็กน้อย มีการบิดเพี้ยนของเพอร์สเปกทีฟอย่างขี้เล่นและวัตถุแบบเรียบง่าย องค์ประกอบภาพและโทนควรมีพลัง มีชีวิตชีวา และชวนขำ ในโลกที่สไตล์จัดเต็มและไม่สมจริง @สร้างรูปภาพ การแข่งขัน ประกวดสร้าง นวัตกรรม AI โรงเรียนบ้านโคกสามัคคี มีเงินรางวัลมูลรวม 3000 บาท โดยมีรายการแข่งขันดังนี้ 1. การสร้างสรรค์ แอพพลิเคชั่น 2.การสร้างสรรค์ภาพ จาก AI 3.การสร้างสรรค์วิดีโอ ด้วย AI 4.การสร้างสรรค์ เพลง AI 5.การสร้างอินโฟร์ กราฟิก ด้วย AI จัดการแข่งขัน โดย ครูชัยพร ดีกร โรงเรียนบ้านโคกสามัคคี สร้างภาพประชาสัมพันธ์การแข่งขัน มีหุ่นยนต์ AI บรรยาการศการแข่งขันที่สนุกสนาน ทุกคนมีความสุข เห็นแววตา ทรงพลัง มีเอฟเฟกแสงสีทอง สว่างสไสว สวยงาม อลังการ

# data[].attributes.attachment_link.title
ขอพร้อมพ์ส่าหรับสร้างวิดีโอด้วย Veo 3 บทพูดภาษาไทย ฉากละ 6 วินาที เรื่อง

# data[].attributes.headline
AI มีบทบาทสำคัญต่อมนุษย์อย่างไร

# data[].attributes.subject
AI มีบทบาทสำคัญต่อมนุษย์อย่างไร

# data[].attributes.headline
กลุ่ม 1 แล็กตาซอย

# data[].attributes.subject
กลุ่ม 1 แล็กตาซอย

# data[].attributes.attachment_link.title
โครงงานประดิษฐ์ไฟจราจรจำลอง

# data[].attributes.headline
กลุ่ม 3 ไวตามิลล์ อินโฟกราฟิก

# data[].attributes.subject
กลุ่ม 3 ไวตามิลล์ อินโฟกราฟิก

# data[].attributes.attachment_link.title
โครงงานระบบประตูสไลด์อัตโนมัติ

# data[].attributes.attachment_link.title
โครงงานไฟสัญญาณจราจรคนข้าม

# data[].attributes.attachment_link.title
นวัตกรรมระบบดูแลต้นไม้อัตโนมัติ

# data[].attributes.attachment_link.title
นวัตกรรมวงล้อหรรษาฝึกทักษะสูตรคูณ

# data[].attributes.attachment_link.description
Have a project to SHARE with the EDU:BIT community? Click here to submit. We’d love to feature you!

# data[].attributes.attachment_link.title
แนะนำทีมผู้จัดทำโครงงาน

# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.headline
ด.ญ  ธิดารัตน์

# data[].attributes.subject
ด.ญ  ธิดารัตน์

# data[].attributes.headline
ด.ญ พัชรนาภาิ ด.ญ สุพัตรา

# data[].attributes.subject
ด.ญ พัชรนาภาิ ด.ญ สุพัตรา

# data[].attributes.headline
ด.ญ  ธิดารัตน์    แสงจันทร์   ป.5

# data[].attributes.subject
ด.ญ  ธิดารัตน์    แสงจันทร์   ป.5

# data[].attributes.attachment_link.title
โครงงาน_AI_ของชั้น_ป.5

# data[].attributes.headline
ด.ญ ณัชชา หนันดุล

# data[].attributes.subject
ด.ญ ณัชชา หนันดุล

# data[].attributes.headline
ต้นข้าว ออกัส

# data[].attributes.subject
ต้นข้าว ออกัส

# data[].attributes.attachment_link.title
โครงงาน_AI_นักเรียน_ป.5

# data[].attributes.attachment_link.title
ตะลุยโลก_AI_สุดเจ๋ง

# data[].attributes.attachment_link.title
โครงงาน_AI_แสนสนุก_ป.5 (1)

# data[].attributes.headline
ต้นข้าว   ออกัส

# data[].attributes.subject
ต้นข้าว   ออกัส

# data[].attributes.attachment_link.title
ข้อมูลโครงงานน่ารักชั้น_ป.5

# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.attachment_link.title
โครงงาน_AI_ป.5_สุดคิวท์

# data[].attributes.headline
ด.ญ พัชราภา ด.ญ สุพัตรา

# data[].attributes.subject
ด.ญ พัชราภา ด.ญ สุพัตรา

# data[].attributes.attachment_link.title
โครงงานแสนสนุก_ชั้น_ป.5

# data[].attributes.headline
ด.ญ ณัชชา หนันดุล ป.5

# data[].attributes.subject
ด.ญ ณัชชา หนันดุล ป.5

# data[].attributes.attachment_link.title
โครงงาน_AI_นักเรียนชั้น_ป.5

# data[].attributes.headline
ครูชัยพร ดีกร

# data[].attributes.subject
ครูชัยพร ดีกร

# data[].attributes.attachment_link.title
โครงงาน_AI_สำหรับชั้น_ป.5

# data[].attributes.headline
สรุ ศักดิ์ ศรีวันทา

# data[].attributes.subject
สรุ ศักดิ์ ศรีวันทา

# data[].attributes.attachment_link.title
วิธีทำกระถางปูนจิ๋ว

# data[].attributes.headline
นราภรณ์          อนุภัทร

# data[].attributes.subject
นราภรณ์          อนุภัทร

# data[].attributes.attachment_link.title
วิธีทำกระถางต้นไม้_DIY_ง่ายๆ

# data[].attributes.headline
ด.ช.อนุชา เวียนพบ ด.ช.พีรพัฒน์ สอนสุภาพ

# data[].attributes.subject
ด.ช.อนุชา เวียนพบ ด.ช.พีรพัฒน์ สอนสุภาพ

# data[].attributes.attachment_link.title
คู่มือการทำกระถางปูน

# data[].attributes.headline
ชลนธี  จันทิมา

# data[].attributes.subject
ชลนธี  จันทิมา

# data[].attributes.attachment_link.title
DIY_กระถางปูนจากกล่องกระดาษ

# data[].attributes.headline
ปริยาภัทร หนันดุล

# data[].attributes.subject
ปริยาภัทร หนันดุล

# data[].attributes.attachment_link.title
DIY_กระถางต้นไม้ทำเองง่ายๆ

# data[].attributes.headline
ด.ช.สหรัฐ พรรณภัทร

# data[].attributes.subject
ด.ช.สหรัฐ พรรณภัทร

# data[].attributes.attachment_link.title
คู่มือทำกระถางปูน_DIY

# data[].attributes.headline
อนุชิต เวียนพบ

# data[].attributes.subject
อนุชิต เวียนพบ

# data[].attributes.attachment_link.title
DIY_กระถางบอนไซงบ_20_บาท

# data[].attributes.headline
กัญญาณัฐ    ปวีณกร

# data[].attributes.subject
กัญญาณัฐ    ปวีณกร

# data[].attributes.body
https://youtu.be/-S1L95ZQsec?si=fRIjXlh4zezvzoR8

# data[].attributes.attachment_link.title
ดีกว่าทิ้งDIY เศษกระเบื้องเอามาทำกระถางปลูกต้นไม้ได้ สวยๆไม่ซ้ำใคร

# data[].attributes.headline
ด.ญ.อภิญญาพัชร์ เจริญยิ่ง

# data[].attributes.subject
ด.ญ.อภิญญาพัชร์ เจริญยิ่ง

# data[].attributes.attachment_link.title
วิธีทำกระถางปูน_DIY_จากเศษผ้า

# data[].attributes.headline
นราภรณ์      อนุภัทร

# data[].attributes.subject
นราภรณ์      อนุภัทร

# data[].attributes.attachment_link.title
ทำกระถางต้นไม้ไว้ใช้เองง่ายๆ งบประหยัด ไปชมคลิปเต็ม EP.13 ได้แล้วจ้า ฝากกดติดตามด้วยนะคะ 🥰🥰

# data[].attributes.headline
ปณัฏฎา ศสิธร

# data[].attributes.subject
ปณัฏฎา ศสิธร

# data[].attributes.body
https://youtu.be/0TRXyR4cJtM?si=BWVVLXzCqVXXVx-x

# data[].attributes.attachment_link.title
วิธีทำกระถางต้นไม้ปูนเปลือยขนาดเล็ก แม่พิมพ์ซิลิโคน

# data[].attributes.headline
ด.ช.ชนนน   หนามพรม  ด.ช.ซาเล้ง  บุดดีหงษ์

# data[].attributes.subject
ด.ช.ชนนน   หนามพรม  ด.ช.ซาเล้ง  บุดดีหงษ์

# data[].attributes.body
https://youtu.be/zz7N6Y3R8E4?si=K8v55X7oXkrnuKpZ

# data[].attributes.attachment_link.title
Cement Craft Ideas / Unique With Potted Plants Made From Rags And Cement

# data[].attributes.headline
ชลนธี    จันทิมา

# data[].attributes.subject
ชลนธี    จันทิมา

# data[].attributes.attachment_link.authors[].name
น้าตี๋ มีดเดินป่า

# data[].attributes.attachment_link.title
รีวิว !! กระถางปูนเปลือย จากแม่พิมพ์กล่องกระดาษ แบบละเอียด ทุกขั้นตอน

# data[].attributes.headline
 ด.ญ.ปริยาภัทร หนันดุล

# data[].attributes.subject
 ด.ญ.ปริยาภัทร หนันดุล

# data[].attributes.body
https://youtube.com/shorts/oe2gBtSHXQc?si=rSnYk9gfincWhZfO

# data[].attributes.attachment_link.title
DIY ทำกระถางต้นไม้ไว้ใช้เองง่ายๆ Easy DIY Plant Pots Designs

# data[].attributes.headline
อนุชิต เวียนพบ

# data[].attributes.subject
อนุชิต เวียนพบ

# data[].attributes.body
https://youtu.be/XY4OE4zHRdI?si=rkPUq5C_I3olhSYN

# data[].attributes.attachment_link.title
ทำกระถางปูน ง่ายๆใครก็ทำได้

# data[].attributes.headline
สุร ศักดิ์ ศรีวันทา

# data[].attributes.subject
สุร ศักดิ์ ศรีวันทา

# data[].attributes.body
https://www.tiktok.com/@supawa2529/video/7632869421773589780?is_from_webapp=1&sender_device=pc&web_id=7616577015772677633

# data[].attributes.attachment_link.authors[].name
กระถางปูนเปลือย

# data[].attributes.attachment_link.title
#กระถางปูนเปลือย #กระถางทรงสี่เหลี่ยมลูกเต๋า #ไม้ประดับ #กระถาง #สวนมาลี 

# data[].attributes.attachment_link.embed_code
@supawa2529
#กระถางปูนเปลือย #กระถางทรงสี่เหลี่ยมลูกเต๋า #ไม้ประดับ #กระถาง #สวนมาลี
♬ เสียงต้นฉบับ - Rawewan Boonma - Rawewan Boonma

# data[].attributes.headline
ด.ญ.อภิญญาพัชร์ เจริญยิ่ง 

# data[].attributes.subject
ด.ญ.อภิญญาพัชร์ เจริญยิ่ง 

# data[].attributes.body
https://youtu.be/ehHQ3h72JtM?si=5hy_TMZW8yda01z6

# data[].attributes.attachment_link.authors[].name
สวนน้อย ร้อยเรื่องปลูก

# data[].attributes.attachment_link.title
ทำกระถางปูนจากเศษผ้า

# data[].attributes.headline
ด.ช.อนุชา เวียนพบ ด.ช.พีรพัฒน์ สอนสุภาพ

# data[].attributes.subject
ด.ช.อนุชา เวียนพบ ด.ช.พีรพัฒน์ สอนสุภาพ

# data[].attributes.body
https://www.youtube.com/watch?v=LMH6TooyM0c

# data[].attributes.attachment_link.title
วิธีทำกระถางปูนซีเมนต์ ทำเลียนแบบหินธรรมชาติ จากปูนซีเมนต์และโฟมสวยๆทำใว้ใช้เอง

# data[].attributes.headline
 ด.ช.สหรัฐ พรรณภัทร

# data[].attributes.subject
 ด.ช.สหรัฐ พรรณภัทร

# data[].attributes.body
https://youtube.com/shorts/wOUX75kPBhg?si=QDJCqJasupiSGOUo

# data[].attributes.attachment_link.title
ไอเดียDIYปูนซีเมนต์ ให้เป็นกระถางต้นไม้

# data[].attributes.headline
ด.ช.อนุชา เวียนพบ

# data[].attributes.subject
ด.ช.อนุชา เวียนพบ

# data[].attributes.attachment_link.title
ฮีโร่พิทักษ์ชุมชน พิชิตขยะ

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
ด.ช.อนุชา เวียนพบ

# data[].attributes.subject
ด.ช.อนุชา เวียนพบ

# data[].attributes.attachment_link.title
สัตว์เลี้ยงจอมเวท อักษรคำนวณ

# data[].attributes.headline
สร้าง/แก้ไขแอปพลิเคชันมือถือชื่อ "Easy Fix" สำหรับแจ้งปัญหาในชุมชน 

# data[].attributes.subject
สร้าง/แก้ไขแอปพลิเคชันมือถือชื่อ "Easy Fix" สำหรับแจ้งปัญหาในชุมชน 

# data[].attributes.body
เป็น Progressive Web App หน้าเดียว (single-page) ภาษาไทย

เชื่อมต่อฐานข้อมูลออนไลน์ Supabase เพื่อให้ทุกคนเห็นข้อมูลเดียวกันแบบเรียลไทม์

=== ดีไซน์ ===

- โทนสี: --ink: #173d39 (ตัวอักษรหลัก), --leaf: #4ca675, --leaf-dark: #27845f (ปุ่ม/สำเนียงสีเขียว),

--line: #d9ebe6 (เส้นขอบ), พื้นหลังไล่เฉดพาสเทลเขียว-ฟ้าอ่อน

- ฟอนต์: DM Sans (เนื้อหา), Fraunces (หัวข้อถ้าต้องการ)

- Layout แบบ phone-frame กว้างสูงสุด 460px กึ่งกลางจอ มุมโค้ง 31px เงานุ่ม

- การ์ดขอบโค้ง (organic-card) เงาอ่อน ปุ่มหลักพื้นเขียวเข้มตัวหนังสือขาว

=== โครงสร้างหน้าจอ ===

1. Header: โลโก้วงกลม (ไอคอนต้นอ่อน) + ข้อความเล็ก "ชุมชนของเรา" + ชื่อแอป "Easy Fix" ตัวใหญ่

มุมขวาบน: ปุ่มเล็ก "เข้าสู่ระบบผู้ดูแล"

2. การ์ดต้อนรับ: หัวข้อ "ช่วยกันทำให้ชุมชนน่าอยู่ขึ้นทุกวัน"

คำอธิบาย "พิมพ์ปัญหาที่พบ แล้วเราจะช่วยส่งต่อให้ชุมชนดูแล"

3. การ์ดฟอร์มแจ้งปัญหา (id="report-form"):

- input ประเภทปัญหา (id="category") placeholder "เช่น ฝาท่อชำรุด หรือขยะกีดขวางทาง"

- textarea รายละเอียด (id="description") maxlength 500

- ปุ่ม "ส่งเรื่องแจ้งปัญหา" (id="submit-report")

4. การ์ด "ปัญหาทั้งหมดในชุมชน" (id="reports-list"):

- แสดงรายการปัญหาที่ทุกคนแจ้ง เรียงล่าสุดขึ้นก่อน (ไม่ใช่แค่ของผู้ใช้คนเดียว)

- แต่ละรายการแสดง: ประเภทปัญหา, รายละเอียด, วันที่แจ้ง (รูปแบบไทย),

สถานะเป็น pill สี (รับเรื่องแล้ว=แดงอ่อน, กำลังดำเนินการ=เหลือง, เสร็จสิ้น=เขียว)

- ถ้ายังไม่มีข้อมูล แสดงข้อความ "ยังไม่มีเรื่องที่แจ้ง"

- ดึงข้อมูลใหม่อัตโนมัติทุก 20 วินาที (polling)

5. Toast แจ้งเตือนเลื่อนลงจากด้านบนเมื่อทำรายการสำเร็จ

=== ระบบฐานข้อมูล (Supabase) ===

ใช้ fetch() เรียก Supabase REST API โดยกำหนดตัวแปรต้นไฟล์:

const SUPABASE_URL = "https://YOUR_PROJECT.supabase.co";

const SUPABASE_KEY = "YOUR_ANON_KEY";

ตาราง reports มีคอลัมน์: id (uuid), category (text), description (text),

status (text, default "รับเรื่องแล้ว"), created_at (timestamp)

- ส่งเรื่องใหม่: POST ไปที่ ${SUPABASE_URL}/rest/v1/reports

พร้อม header apikey และ Authorization: Bearer SUPABASE_KEY

- โหลดรายการ: GET ${SUPABASE_URL}/rest/v1/reports?select=*&order=created_at.desc

- ถ้ายังไม่ได้ตั้งค่า SUPABASE_URL/KEY ให้ทำงานแบบสำรองด้วย localStorage

พร้อมแสดงข้อความเตือนสีเหลืองด้านบนว่า "ยังไม่ได้เชื่อมฐานข้อมูลออนไลน์"

=== ระบบ Admin (สำหรับผู้ใหญ่บ้าน) ===

- ปุ่ม "เข้าสู่ระบบผู้ดูแล" เปิด modal ให้กรอกรหัสผ่าน

- รหัสผ่านที่ถูกต้องคือ "AdminCommunity" ตรวจสอบฝั่ง client แล้วเก็บสถานะล็อกอินไว้ใน sessionStorage

- กรอกรหัสผิด แสดงข้อความ "รหัสผ่านไม่ถูกต้อง กรุณาลองใหม่"

- เมื่อล็อกอินสำเร็จ:

- แสดงแถบสีเข้ม "โหมดผู้ดูแล" ด้านบนสุดของแอป พร้อมปุ่ม "ออกจากระบบ"

- แต่ละรายการในฟีดปัญหาทั้งหมด เพิ่ม:

a) dropdown เปลี่ยนสถานะ (รับเรื่องแล้ว / กำลังดำเนินการ / เสร็จสิ้น)

→ ยิง PATCH ไปที่ ${SUPABASE_URL}/rest/v1/reports?id=eq.{id} ทันทีที่เปลี่ยน

b) ปุ่ม "ลบ" → เปิดกล่องยืนยัน "ต้องการลบรายการนี้ใช่หรือไม่?"

ก่อนยิง DELETE ไปที่ ${SUPABASE_URL}/rest/v1/reports?id=eq.{id}

- ผู้ใช้ทั่วไปที่ไม่ได้ล็อกอิน เห็นรายการและสถานะได้ แต่ไม่เห็นปุ่มแก้ไข/ลบ

=== รายละเอียดทางเทคนิคอื่นๆ ===

- Responsive รองรับหน้าจอมือถือเป็นหลัก

- ปุ่มและ input มี focus state ที่มองเห็นได้ชัดเจน (accessibility)

- Escape ข้อความผู้ใช้ก่อนแสดงผล ป้องกัน HTML injection

- ใช้ภาษาไทยทั้งหมดในส่วนติดต่อผู้ใช้

# data[].attributes.body
https://krunokpaclick.my.canva.site/basic-health-check-up

# data[].attributes.attachment_link.title
ตรวจสุขภาพเบื้องต้น

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
อินโฟกราฟฟิก

# data[].attributes.subject
อินโฟกราฟฟิก

# data[].attributes.attachment_link.title
ระบบแจ้งปัญหาเมืองอัจฉริยะ

# data[].attributes.body
https://pasamrit.my.canva.site/easy-fix

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
ยอดนักสืบจิ๋ว ถอดรหัสลับ

# data[].attributes.subject
ยอดนักสืบจิ๋ว ถอดรหัสลับ

# data[].attributes.body
อ้ายเปิ่น ยอดนักสืบบบ แต่ๆ 🥸🕵️

# data[].attributes.attachment_link.title
ยอดนักสืบจิ๋ว ถอดรหัสลับ

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
ตลาดนัดนักปราชญ์วัยจิ๋ว 

# data[].attributes.subject
ตลาดนัดนักปราชญ์วัยจิ๋ว 

# data[].attributes.body
https://pasamrit.my.canva.site/cfkz3cy2q3g2gd6e

# data[].attributes.attachment_link.title
ตลาดนัดนักปราชญ์วัยจิ๋ว

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
เตือนเวลาออกกำลังกาย

# data[].attributes.subject
เตือนเวลาออกกำลังกาย

# data[].attributes.body
https://pasamrit.my.canva.site/workout-reminder

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
ด.ช.อนุชา เวียนพบ

# data[].attributes.subject
ด.ช.อนุชา เวียนพบ

# data[].attributes.attachment_link.title
ขุมทรัพย์วรรณคดี มีตัวเลข

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
เตือนเวลานอน

# data[].attributes.subject
เตือนเวลานอน

# data[].attributes.body
https://pasamrit.my.canva.site/sleep-reminder

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
สไตล์โมเดิร์น สะอาดตา 

# data[].attributes.body
สไตล์โมเดิร์น สะอาดตา ใช้โทนสีฟ้า-ขาว-เขียว สื่อถึงความน่าเชื่อถือและเป็นมิตร

ฟอนต์อ่านง่าย มีไอคอนประกอบทุกเมนู ชื่อแอพ EasyFix

=== หน้าจอฝั่งผู้ใช้งาน (User) ===

1. หน้า Splash/Login

- โลโก้แอป + ชื่อแอป

- ปุ่มเข้าสู่ระบบด้วยเบอร์โทร/อีเมล

- ปุ่ม "เข้าใช้งานแบบไม่ระบุตัวตน"

- ลิงก์ "เข้าสู่ระบบสำหรับผู้ดูแลระบบ (Admin)" ตัวเล็กมุมล่าง

2. หน้า Home / แผนที่ปัญหา

- แผนที่แสดงหมุดปัญหาทั้งหมดในพื้นที่ แยกสีตามสถานะ

(แดง = รอดำเนินการ, เหลือง = กำลังแก้ไข, เขียว = เสร็จสิ้น)

- แถบค้นหา + ตัวกรองตามประเภทปัญหา

- ปุ่มลอย (Floating Button) รูป "+" สำหรับแจ้งปัญหาใหม่

3. หน้าแจ้งปัญหาใหม่

- เลือกประเภทปัญหา (ถนนชำรุด, ไฟฟ้า, ขยะ, น้ำท่วม, ต้นไม้, สัตว์จรจัด, ความปลอดภัย, อื่นๆ) แสดงเป็นไอคอนการ์ด

- ปุ่มถ่ายรูป/แนบรูปได้สูงสุด 5 รูป

- ระบุตำแหน่งอัตโนมัติ (GPS) พร้อมแผนที่ปักหมุดปรับได้

- ช่องกรอกรายละเอียด

- เลือกระดับความเร่งด่วน (ปกติ/เร่งด่วน/ฉุกเฉิน) เป็นแถบสี

- ปุ่ม "ส่งเรื่อง"

4. หน้ารายการแจ้งของฉัน

- การ์ดแสดงรายการปัญหาที่เคยแจ้ง พร้อมรูปย่อ สถานะ วันที่

- แตะเข้าไปดูรายละเอียดและไทม์ไลน์ความคืบหน้า

5. หน้ารายละเอียดปัญหา

- รูปภาพ, คำอธิบาย, ตำแหน่งบนแผนที่

- ไทม์ไลน์สถานะแบบขั้นบันได

- ปุ่ม "เจอปัญหานี้เหมือนกัน" (โหวต)

- ช่องแสดงความคิดเห็น

6. หน้าโปรไฟล์ผู้ใช้

- ข้อมูลส่วนตัว, จำนวนเรื่องที่แจ้ง, ป้ายรางวัล (badge)

=== หน้าจอฝั่งผู้ดูแลระบบ (Admin) ===

7. หน้า Admin Login

- แบบฟอร์มเข้าสู่ระบบแยกจากผู้ใช้ทั่วไป (username/password)

- ดีไซน์เข้มขึ้นเล็กน้อยเพื่อแยกความแตกต่างจากฝั่งผู้ใช้

8. หน้า Admin Dashboard

- การ์ดสรุปตัวเลข: จำนวนเคสทั้งหมด, รอดำเนินการ, กำลังแก้ไข, เสร็จสิ้นแล้ว

- กราฟสรุปประเภทปัญหาที่พบบ่อย

- แผนที่ Heatmap จุดที่มีปัญหาซ้ำ

9. หน้า Admin จัดการรายการปัญหา (สำคัญ)

- ตารางรายการปัญหาทั้งหมด แสดง: รูปย่อ, ประเภท, ผู้แจ้ง, วันที่, สถานะ, ความเร่งด่วน

- แถบค้นหา + ตัวกรองตามสถานะ/ประเภท/วันที่

- ปุ่มไอคอนต่อแต่ละแถว 3 ปุ่ม:

"แก้ไข" (ดินสอ) / "ลบ" (ถังขยะ) / "ดูรายละเอียด" (ตา)

10. หน้า Admin แก้ไขปัญหา

- ฟอร์มแก้ไขข้อมูล: ประเภทปัญหา, รายละเอียด, ตำแหน่ง, รูปภาพ

- Dropdown เปลี่ยนสถานะ (รับเรื่อง/กำลังดำเนินการ/เสร็จสิ้น/ปิดเคส)

- ช่องมอบหมายงานให้หน่วยงาน/เจ้าหน้าที่รับผิดชอบ

- ช่องแนบรูปหลักฐานการแก้ไข

- ปุ่ม "บันทึกการแก้ไข" และปุ่ม "ยกเลิก"

11. หน้ายืนยันการลบ (Pop-up)

- ข้อความยืนยัน "คุณต้องการลบรายการนี้ใช่หรือไม่?"

- ปุ่ม "ยืนยันลบ" (สีแดง) และ "ยกเลิก" (สีเทา)

12. หน้า Admin จัดการผู้ใช้/สิทธิ์

- ตารางรายชื่อผู้ดูแลระบบ พร้อมระดับสิทธิ์ (แอดมินหลัก/เจ้าหน้าที่ภาคสนาม)

=== หน้า Admin Login ===

ออกแบบหน้าเข้าสู่ระบบสำหรับผู้ดูแลระบบ (Admin) แยกต่างหากจากผู้ใช้ทั่วไป

สไตล์เข้มขึ้น ใช้โทนสีกรมท่า/เทาเข้ม-ขาว เพื่อสื่อถึงความเป็นระบบหลังบ้าน

องค์ประกอบในหน้า:

- โลโก้แอปด้านบน + ข้อความ "สำหรับผู้ดูแลระบบเท่านั้น"

- ช่องกรอก Username (เช่น "ชื่อผู้ใช้แอดมิน")

- ช่องกรอก Password พร้อมไอคอนดวงตาเพื่อแสดง/ซ่อนรหัสผ่าน

- ตัวอย่างข้อมูลทดสอบ (สำหรับ Prototype เท่านั้น):

Username: admin

Password: AdminCommunity

- ปุ่ม "เข้าสู่ระบบ" สีเข้ม

- ข้อความแจ้งเตือนกรณีรหัสผิด "รหัสผ่านไม่ถูกต้อง กรุณาลองใหม่"

- ลิงก์ "กลับหน้าหลัก" ด้านล่าง

เมื่อเข้าสู่ระบบสำเร็จ ให้นำไปยังหน้า Admin Dashboard ทันที

# data[].attributes.body
https://pasamrit.my.canva.site/medication-reminder

# data[].attributes.attachment_link.title
แอปเตือนกินยา

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.body
ออกแบบ UI/UX โมบายแอพพลิเคชันชื่อ "ชุมชนแจ้งดี" (Community Report App)

สำหรับให้ประชาชนแจ้งปัญหาในชุมชน เช่น ถนนชำรุด ไฟฟ้าดับ ขยะตกค้าง

น้ำท่วม ต้นไม้ล้ม สัตว์จรจัด และปัญหาความปลอดภัย ไปยังหน่วยงานท้องถิ่น

สไตล์การออกแบบ: โมเดิร์น สะอาดตา เป็นมิตร ใช้งานง่ายสำหรับทุกวัย

โทนสีหลักเป็นสีฟ้า-เขียว สื่อถึงความน่าเชื่อถือและความปลอดภัย

ฟอนต์อ่านง่าย มีไอคอนประกอบชัดเจน เว้นระยะห่างสบายตา

ขอชุดหน้าจอ (mobile app screens) ดังนี้:

1. หน้า Splash/Onboarding แนะนำแอพ 3 หน้า

2. หน้า Login/Register (เข้าสู่ระบบด้วยเบอร์โทรหรืออีเมล)

3. หน้า Home แสดงแผนที่ปัญหาในพื้นที่ + ปุ่ม "แจ้งปัญหา" เด่นตรงกลาง

4. หน้าฟอร์มแจ้งปัญหา (เลือกประเภทปัญหาด้วยไอคอน, แนบรูป, ปักหมุดตำแหน่ง,

เลือกระดับความเร่งด่วน, กรอกรายละเอียด)

5. หน้าติดตามสถานะเคส (Timeline แสดง: รับเรื่อง > กำลังดำเนินการ > เสร็จสิ้น)

6. หน้ารายการปัญหาทั้งหมดในชุมชน (feed แบบการ์ด พร้อมรูป, สถานะ, จำนวนโหวต)

7. หน้าโปรไฟล์ผู้ใช้ + ประวัติการแจ้งปัญหา

8. หน้าแดชบอร์ดสำหรับเจ้าหน้าที่ (สรุปจำนวนเคส, กราฟสถิติ, ตารางมอบหมายงาน)

ใช้ mockup บนกรอบมือถือ (iPhone frame) แสดงผลสมจริง เหมาะสำหรับนำเสนอ

ต่อผู้บริหารหรือหน่วยงานราชการ

# data[].attributes.headline
พัชราภา ปะพะลา สุพัตรา นิพนธ์รัมย์

# data[].attributes.subject
พัชราภา ปะพะลา สุพัตรา นิพนธ์รัมย์

# data[].attributes.attachment_link.title
แนะนำเพื่อนใหม่ชั้น_ป.5

# data[].attributes.headline
ด.ญ.ณัชชา หนันดุล ด.ญ    ธันยพร   สันทัด

# data[].attributes.subject
ด.ญ.ณัชชา หนันดุล ด.ญ    ธันยพร   สันทัด

# data[].attributes.attachment_link.title
ข้อมูลแนะนำตัวของน้องณัชชา

# data[].attributes.headline
พัชราภา ปะพะลา สุพัตรา นิพนธืรัมย์

# data[].attributes.subject
พัชราภา ปะพะลา สุพัตรา นิพนธืรัมย์

# data[].attributes.attachment_link.title
ทำเนียบนักเรียนชั้น_ป.5

# data[].attributes.headline
ด  ชวิทธิชัย   แตะกระโทก

# data[].attributes.subject
ด  ชวิทธิชัย   แตะกระโทก