Template Configuration
TOR 4.2.2 — เลือก Design System จาก 3 Template ที่แตกต่าง (สี, style, font, sidebar)
Design System — เลือก 1 จาก 3 Template
Color Configuration (ปรับสีเพิ่มเติม)
| สี | ชื่อ | ใช้งาน | Hex |
|---|---|---|---|
Primary (สีหลัก) | Header, Sidebar active, ปุ่มหลัก | ||
Secondary (สีรอง) | Badge, ปุ่มรอง | ||
Accent (เน้น) | Hover, Active state | ||
Background (พื้นหลัง) | พื้นหลังหน้าจอ | ||
Card (การ์ด) | พื้นหลังการ์ด | ||
Foreground (ตัวอักษร) | สีตัวอักษรหลัก | ||
Sidebar Background | พื้นหลัง Sidebar | ||
Sidebar Accent | สี Active/Hover ใน Sidebar |
Landing Page — Section ลำดับ & แสดง/ซ่อน
| # | Section | คำอธิบาย | แสดง | ลำดับ |
|---|---|---|---|---|
| 1 | Hero Section | Banner หลัก + สถิติสมาชิก | ||
| 2 | แผนที่สมาชิก | Interactive Thailand Map + ค้นหาตามจังหวัด | ||
| 3 | SACIT Shop Banner | Banner ร้านค้า SACIT | ||
| 4 | กิจกรรมล่าสุด | การ์ดกิจกรรม 3 รายการ | ||
| 5 | Call to Action | ปุ่มเข้าสู่ระบบ / สมัครสมาชิก | ||
| 6 | Footer | ข้อมูลติดต่อ + ลิงก์ที่เกี่ยวข้อง |
Typography
UI Settings
Live Preview
SACIT Data IntelligenceAI
หน้าแรก
สมาชิก
สินค้า
KPI 1
KPI 2
KPI 3
📋 Config JSON
{
"name": "SACIT Royal",
"colors": {
"primary": "#533193",
"secondary": "#FAA61A",
"accent": "#1AAB9F",
"background": "#F2EFFF",
"card": "#FFFFFF",
"foreground": "#1a1a2e",
"sidebarBg": "#FFFFFF",
"sidebarAccent": "#F2EFFF"
},
"sections": [
{
"id": "hero",
"label": "Hero Section",
"desc": "Banner หลัก + สถิติสมาชิก",
"visible": true
},
{
"id": "map",
"label": "แผนที่สมาชิก",
"desc": "Interactive Thailand Map + ค้นหาตามจังหวัด",
"visible": true
},
{
"id": "shop",
"label": "SACIT Shop Banner",
"desc": "Banner ร้านค้า SACIT",
"visible": true
},
{
"id": "activities",
"label": "กิจกรรมล่าสุด",
"desc": "การ์ดกิจกรรม 3 รายการ",
"visible": true
},
{
"id": "cta",
"label": "Call to Action",
"desc": "ปุ่มเข้าสู่ระบบ / สมัครสมาชิก",
"visible": true
},
{
"id": "footer",
"label": "Footer",
"desc": "ข้อมูลติดต่อ + ลิงก์ที่เกี่ยวข้อง",
"visible": true
}
],
"fonts": {
"heading": "Kanit",
"body": "Sarabun"
},
"borderRadius": "0.75rem",
"sidebarStyle": "light"
}