Responsive Redesign

Login, Verify, Monitor.

หน้าแรกใหม่นี้ถูกออกแบบให้ดูเด่นบนจอคอม แต่ยังย่อลงแท็บเล็ตและมือถือได้อย่างลื่นไหล ใช้ข้อความสั้น ชัด และมีทางเข้าใช้งานหลักที่ไม่ทำให้ผู้ใช้สับสน

Discord OAuth ระบบล็อกอินใช้ session เดียวกันทั้งหน้าแรก, หน้ายืนยันยศ และ dashboard
Role Verify ใช้ PIN verification เพื่อเช็กว่า account บนเว็บตรงกับคนที่กดปุ่มรับยศใน Discord จริง
Bot Heartbeat dashboard อ่าน online/offline จาก heartbeat ของบอท Node.js แบบเรียลไทม์

สิ่งที่ระบบนี้ทำได้

ล็อกอินด้วย Discord
เชื่อมกับ Discord Developer Portal โดยตรง เพื่อให้ทุกหน้ารู้จักผู้ใช้คนเดียวกัน
มอบยศหลังยืนยันตัวตน
ผู้ใช้ต้องผ่าน flow ปุ่มใน Discord, ล็อกอินบนเว็บ และกรอก PIN ให้ตรงก่อนรับยศ
รองรับทุกหน้าจอ
เลย์เอาต์ถูกจัดใหม่ให้ดูดีบน desktop, tablet และ mobile โดยไม่ต้องซูมหรือเลื่อนแปลก ๆ

เส้นทางการใช้งาน

Step 01
เริ่มจากล็อกอินด้วย Discord เพื่อสร้าง session บนเว็บไซต์
Step 02
กดปุ่มรับยศใน Discord แล้วใช้ PIN บนหน้า verify-role เพื่อยืนยันตัวตน
Step 03
เมื่อยืนยันสำเร็จ ระบบจะมอบยศและพาเข้าสู่ dashboard สำหรับสมาชิกที่ผ่านการยืนยันแล้ว