KHALIFAH PROGRAM (ระบบเช็คชื่อ มาเรียน ละหมาด และกิจกรรม)

เว็บแอปพลิเคชันเพื่อการศึกษา ติดตามการมาเรียน ละหมาด 5 เวลา และกิจกรรม บันทึกข้อมูลลง Google Sheets

---

🌟 ฟังก์ชันหลักของระบบ (Key Features)

1. แดชบอร์ดนักเรียน (Educational Analytics Dashboard):
   • กราฟสมรรถนะทักษะรายวิชา (Student Skill Radar Chart 6 มิติ)
   • กราฟสถิติการมาเรียน (มาเรียน, เข้าเรียน, มาสาย, ลา, ขาด)
   • กราฟสถิติการละหมาด 5 เวลาประจำสัปดาห์
   • กราฟสรุปการเข้าร่วมกิจกรรมโรงเรียน
2. ระบบเช็คการมาละหมาด 5 เวลา (Smart Geofence & In-App Live Camera):
   • ตรวจสอบพิกัดก่อนปลดล็อกกล้อง:
     • มัสยิดอัลฮารอมัยน์ มหาวิทยาลัยฟาฏอนี (รัศมี 18 เมตร)
     • คณะวิทยาศาสตร์และเทคโนโลยี (รัศมี 40 เมตร)
     • คำนวณระยะทางจริงกรณีอยู่นอกพื้นที่ พร้อมระบบตรวจจับ Fake GPS
   • ล็อคให้ถ่ายภาพจากกล้องสดในตัวระบบเท่านั้น (ไม่รับรูปจากแกลเลอรี) ปั๊มลายน้ำพิกัด วันที่ เวลา ชื่อนักเรียน อัตโนมัติ
3. ระบบเลื่อนชั้นปีการศึกษา (ม.5 ➔ ม.6):
   • นักเรียนสามารถเลือกอัปเดตเลื่อนชั้นปีได้เองในหน้าโปรไฟล์
   • ผู้ดูแลระบบสามารถกด "เลื่อนชั้นปีอัตโนมัติยกห้อง" ได้ในคลิกเดียว
4. ศูนย์ควบคุมผู้ดูแลระบบ (Admin Panel):
   • รหัสผ่านแอดมินหลักตั้งค่าใน Apps Script > Project Settings > Script Properties (MASTER_ADMIN_PASS) — ไม่เก็บไว้ในโค้ด
   • ค้นหาและดูสถิตินักเรียนรายบุคคลอย่างอิสระ ลบข้อมูล จัดการแอดมินรอง
   • ประกาศกิจกรรมใหม่ Broadcast ทันที
   • ส่งออกรายงาน: Excel (.xlsx), Word (.doc), และพิมพ์เป็น PDF ตามรายคน รายห้อง และช่วงวันที่
5. รองรับ Responsive เต็มรูปแบบ:
   • คอมพิวเตอร์, iPad / แท็บเล็ต, และสมาร์ทโฟน
   • ธีมมินิมอล ฟ้า-ขาว หรูหรา สะอาดตา (Google Font Kanit)

---

📁 โครงสร้างโปรเจกต์ (Project Structure)

├── index.html              # หน้าเว็บหลัก (สำหรับเปิดบน GitHub Pages / Vercel / Web Browser)
├── style.css               # สไตล์ชีท Minimalist Blue-White & macOS Frosted Glass
├── app.js                  # ลอจิกหลักทั้งหมด (Camera, Geofencing, Export, Charts, Hasanat)
├── Code.gs                 # โค้ด Google Apps Script Backend สำหรับ Google Sheets
├── manifest.json           # การตั้งค่า Progressive Web App (PWA)
├── sw.js                   # Service Worker สำหรับ PWA และโหมดออฟไลน์
├── assets/
│   ├── logo.png            # โลโก้ Khalifah Program
│   ├── icon-192.png        # ไอคอนแอป PWA (192x192)
│   └── icon-512.png        # ไอคอนแอป PWA (512x512)
└── README.md               # เอกสารคู่มือโครงการ

---

🚀 วิธีเปิดใช้งาน GitHub Pages ฟรี (Hosting on GitHub Pages)

1. นำโฟลเดอร์นี้ขึ้นไปที่ GitHub Repository ของท่าน
2. ไปที่หน้า Repository บน GitHub ➔ คลิกเมนู Settings (รูปฟันเฟืองด้านบน)
3. เมนูด้านซ้าย คลิกที่หัวข้อ Pages
4. ตรงหัวข้อ Branch ให้เลือกเป็น main (หรือ master) และโฟลเดอร์เป็น /(root)
5. กดปุ่ม Save
6. รอสักครู่ (ประมาณ 1 นาที) จะได้รับลิงก์เว็บไซต์ HTTPS ฟรี เช่น:

   https://your-username.github.io/khalifah-program/
   

7. สามารถนำลิงก์นี้ไปใส่ใน Google Sites เมนู "แทรก (Insert) > ฝัง (Embed) > ตาม URL" ได้ทันที รองรับทั้งกล้องสดและ GPS เต็ม 100%!