Prompt
ระบบเลือกตั้งประธานนักเรียน
1.หน้าแรก
-header fluid width(เติมสีพื้นหลัง header น้ำเงินอมม่วง)
ระบบเลือกตั้งประธานนักเรียน
โรงเรียน(ดึงชื่อมาแสดง)
โลโก้โรงเรียน(ดึงรูปภาพโลโก้มาแสดง)
-ปุ่มสำหรับเข้าระบบ ผู้ดูแลระบบ (modal username password)
-กำหนดการเลือกตั้ง แสดง ช่วงเวลาที่เลือกตั้ง เริ่มต้น สิ้นสุด สถานะเปิดการลงคะแนน , ปิดการลงคะแนนแล้ว , ถ้าหมดเขตสิ้นสุดเวลาเลือกตั้ง คือ ปิดการลงคะแนนแล้ว
-card 4 คอลัมน์ (ถ้ามีการอนุมัติผลการเลือกตั้ง ให้ทำการซ่อนไว้) แสดงผู้สมัคร รูปผู้ลงสมัคร , หมายเลย , นโยบาย , คลิกที่ card สำหรับเลือกลงคะแนนเพื่อยืนยันการลงคะแนน และ งดออกเสียง
-ผลการเลือกตั้ง(แสดงเมื่อมีการอนุมัติผลการเลือกตั้งเท่านั้น) card 4 คอลัมน์ แสดงผู้สมัคร รูปผู้ลงสมัคร , หมายเลย , นโยบาย , ถ้ามีการอนุมัติผลการเลือกตั้ง ให้แสดงลำดับที่ได้คะแนนเยอะที่สุดเป็นผู้ชนะเรียงตามลำดับ และ งดออกเสียง
-เงื่อนไขการเลือกตั้งคือ เลือกตั้งตามกำหนดช่วงเวลาที่เลือกตั้ง เริ่มต้น สิ้นสุด , การอนุมัติผลการเลือกตั้งแล้วไม่สามารถเลือกตั้งได้ , สถานะการเปิดปิดการเลือกตั้ง
2.หน้าสำหรับผู้ดูแลระบบ
-เมนูแดรชบอร์ด(active)
card แสดงจำนวนผู้ลงคะแนนทั้งหมด , จำนวนลงคะแนนแล้วแสดงร้อยละด้วย , จำนวนบัตรดีแสดงร้อยละด้วย , จำนวนงดออกเสียงแสดงร้อยละด้วย , (เติมสีพื้นหลังแต่ละ card คนละสีในรูปแบบ color gardient และเติมพื้นหลัง Background Decoration ใน card ต่างๆ)
-เมนูตั้งค่าระบบ ได้แก่ ชื่อโรงเรียน อัพโหลดโลโก้โรงเรียน (อัพเดทแก้ไข)
-เมนูตั้งค่าการเลือกตั้ง ได้แก่ กำหนดช่วงเวลาที่เลือกตั้ง เริ่มต้น สิ้นสุด , ปุ่มสวิตช์สไลด์สำหรับเปิดปิดการลงคะแนน(ถ้าหมดเขตสิ้นสุดเวลาเลือกตั้งให้ปิดอัตโนมัติ) ปุ่มสวิตช์สไลด์สำหรับอนุมัติผลการเลือกตั้ง (อัพเดทแก้ไข)
-เมนูจัดการผู้ดูแลระบบ ได้แก่ username , password , ชื่อ-นามสกุล(อัพเดทแก้ไข)
-เมนูจัดการลงสมัคร ได้แก่ ชื่อผู้สมัคร อัพโหลดรูปผู้ลงสมัคร(preview), หมายเลย , นโยบาย (เพิ่ม ลบ แก้ไข)
-เมนูรายการลงคะแนน
ตารางแสดงข้อมูล(การลงคะแนน)
คอลัมน์ที่ 1 วันที่
คอลัมน์ที่ 2 เวลาลงคะแนน
คอลัมน์ที่ 3 ผลการลงคะแนน
คอลัมน์ที่ 4 จัดการ(ไอคอนลบ)
-เมนูสรุปคะแนนผลการเลือกตั้ง(แสดงผลคะแนนรวมแบบ real-time เมื่อมีกาลงคะแนนเลือกตั้ง)
ตารางแสดงข้อมูล(แสดงข้อมูลของผู้ลงสมัคร รวมไปถึงงดออกเสียง)
คอลัมน์ที่ 1 รูปภาพ
คอลัมน์ที่ 2 ชื่อ-นามสกุล
คอลัมน์ที่ 3 ชั้นเรียน
คอลัมน์ที่ 4 เบอร์ลงสมัคร
คอลัมน์ที่ 5 คะแนนรวม
3.footer fluid width เติมสีพื้นหลังเทาเข้มอมเทาอ่อน color gradient ระบบเลือกตั้งประธานนักเรียน โรงเรียน(ดึงชื่อมาแสดง)
4.font kanit google ,UI/UX tailwind CSS Style Modern , responsive, icon , จัด layout ให้สวยงามเหมาะสม , (loading spin ทุกกระบวนการทำงาน) , การเพิ่ม(modal) ,การแก้ไข(modal) , การลบ(sweet confirm), การแจ้งเตือน(sweet alert) , ตกแต่งด้วย badge , table overflow ,<div> <canvas> </div> , theme color #26A69A #AED581 #FFCA28 #FF8A65 #EF5350 #4A2C6D #D32F2F #F57C00 #FBC02D #0288D1 , รูปแบบเมนู ผู้ดูแลระบบ ที่ทันสมัยอยู่ด้านซ้ายมือ เมื่อ responsive ให้ซ่อนเมนู มีปุ่มคลิกเปิดเมนูสไลด์ออกมา
