ระบบจัดการเนื้อหา (CMS)

จัดการเนื้อหาเว็บไซต์ — Branding, ธีม, หน้า Landing, แบนเนอร์, หมวดเกม, Routing, Popup และสร้างรูปด้วย AI เมนูหลัก 9 เมนู: Dashboard, Branding, Backgrounds, Landing Page, Banners, Game Categories, Routing & URLs, Welcome Popup, AI Image Gen

วิธีเข้าใช้งาน CMS

1. เข้า URL: /cms (เช่น https://yourdomain.com/cms)
2. ระบบจะพาไปหน้า /cms/login — กรอก Username หรือ Email + Password ของบัญชี Admin แล้วกด [Sign In]
3. เมื่อล็อกอินสำเร็จ ระบบแสดง Dashboard พร้อมเมนูด้านซ้าย 9 เมนู

Rate Limit: หากล็อกอินผิดหลายครั้ง ระบบจะแสดงข้อความ "กรุณารอ X วินาที" พร้อม countdown — รอจนหมดเวลาแล้วลองใหม่

หมายเหตุ: การเปลี่ยนแปลงในแต่ละหน้าจะมีผลเมื่อกดปุ่ม [Save Changes] (บางหน้าใช้ [Save All Changes]) ที่มุมล่างเท่านั้น — กด [Reset] เพื่อยกเลิกการแก้ไขที่ยังไม่บันทึก เนื้อหาส่วนใหญ่ที่บันทึกแล้วสมาชิกเห็นผลทันที (ไม่ต้อง deploy ใหม่)

---

1. Dashboard

ส่วน	รายละเอียด
Quick Setup	สร้างเนื้อหาเว็บ + รูป AI อัตโนมัติจากชื่อ domain (ใช้ AI)
Quick Actions	ทางลัดไปแต่ละหน้า — Branding, Backgrounds, Landing Page, Banners, Game Categories, AI Image Generator
Overview	สรุปจำนวน Active Banners, Landing Sections, ภาษาที่เปิดใช้, และเวลาที่แก้ไขล่าสุด
Recent Activity	รายการแก้ไขล่าสุดในระบบ

---

2. Branding

หมายเลขในรูป:

① Site Identity — ชื่อเว็บ + Tagline (ไทย/อังกฤษ)
② Logos — โลโก้พื้นมืด/พื้นสว่าง + Favicon + Loading Logo
③ Theme Preset — เลือกธีมสีพื้นฐาน
④ Theme Colors — ปรับสีหลักทีละสี (override preset)

Site Identity

ช่องกรอก	รายละเอียด	ผลต่อเว็บ
Site Name	ชื่อเว็บไซต์	แสดงที่ header + SEO title
Tagline (Thai)	คำอธิบายสั้นภาษาไทย	แสดงใต้ชื่อเว็บ
Tagline (English)	คำอธิบายสั้นภาษาอังกฤษ	แสดงเมื่อเปลี่ยนภาษา

Logos

ช่อง	ขนาดแนะนำ	ใช้กับ
Logo (Dark Background)	PNG โปร่งใส 200x60px	หน้าเว็บพื้นมืด
Logo (Light Background)	PNG โปร่งใส 200x60px	หน้าเว็บพื้นสว่าง
Favicon	32x32px หรือไฟล์ .ico	ไอคอนบนแท็บเบราว์เซอร์
Loading Logo (Optional)	PNG โปร่งใส	แสดงระหว่างหน้ากำลังโหลด

Theme Preset

เลือกธีมสีพื้นฐาน 5 แบบ — กดเลือกแล้วเครื่องหมาย ✅ จะแสดง:

Theme	ชื่อไทย
Siam Neon	นีออนสยาม
Golden Dragon	มังกรทอง
Blue Horizon	ฟ้าไกล
Fortune Red	โชคลาภแดง
Midnight Pro	มิดไนท์โปร

Theme Colors

ปรับสีเฉพาะเจาะจง (ค่าที่ตั้งจะ override จาก preset) — มี color picker + ช่องกรอกรหัสสี HEX + จานสีด่วน + กล่อง Preview:

ช่อง	รายละเอียด
Primary Color	สีหลักของแบรนด์ (เช่น ปุ่ม, highlight)
Secondary Color	สีรอง (เช่น พื้นหลังเข้ม)
Accent Color	สีเน้น (เช่น ข้อความ/ไอคอนบนพื้นเข้ม)

---

3. Backgrounds

หมายเลขในรูป:

① Landing Page — Background หน้าแรก
② Login Page — Background หน้าล็อกอิน
③ Register Page — Background หน้าสมัคร

แต่ละหน้าตั้งค่าได้: รูป Desktop + Mobile, Overlay (เลเยอร์ทับ), และความเข้ม Overlay พร้อม Preview

ช่อง	ค่า	รายละเอียด
Desktop Background	1920x1080px, JPG/PNG	รูปพื้นหลังบนจอใหญ่
Mobile Background (Optional)	390x844px, JPG/PNG	รูปพื้นหลังบนมือถือ
Overlay Type	None / Dark / Light / Gradient	เลเยอร์สีทับรูปเพื่อให้อ่านข้อความง่าย
Overlay Opacity	0–100% (slider)	ความเข้มของ overlay

วิธีอัปโหลด:

1. คลิกพื้นที่ "Drop image here or click to upload" (หรือกด [Replace] หากมีรูปอยู่แล้ว)
2. เลือกไฟล์รูป (JPG หรือ PNG)
3. รูปจะอัปโหลดไปยัง S3 storage อัตโนมัติ
4. ปรับ Overlay Type + Opacity แล้วดูผลในกล่อง Preview
5. กด [Save Changes]

---

4. Landing Page

หมายเลขในรูป:

① Design Template — เลือกเลย์เอาต์หน้าแรก (Classic / Spotlight)
② Hero Section — หัวข้อหลัก + ปุ่ม CTA (ไทย/อังกฤษ)
③ Scrolling Announcement — ข้อความวิ่ง
④ USP Strip — จุดเด่น 4 ข้อ
⑤ SEO Settings — Meta Title/Description + OG Image
⑥ Section Visibility — เปิด/ปิดแต่ละ section บนหน้าแรก

Design Template

เลือกเลย์เอาต์ของหน้า Landing — เนื้อหาและสีคงเดิม เปลี่ยนแค่การจัดวาง:

Template	ชื่อไทย	รายละเอียด
Classic	คลาสสิก	เลย์เอาต์มาตรฐาน
Spotlight	สปอตไลต์	เลย์เอาต์เน้น hero/โปรเด่น

Hero Section

ช่องกรอก	รายละเอียด	ผลต่อเว็บ
Title (Thai/English)	หัวข้อหลัก	ข้อความใหญ่บน Hero banner
Subtitle (Thai/English)	คำอธิบายรอง	ข้อความเล็กใต้หัวข้อ
CTA Button Text (Thai)	ข้อความปุ่ม (เช่น "สมัครสมาชิกเลย")	ปุ่มกดบน Hero
CTA Link	ลิงก์ปลายทาง (เช่น /register)	เมื่อกดปุ่ม CTA

Scrolling Announcement

ช่องกรอก	รายละเอียด
Text (Thai)	ข้อความวิ่งภาษาไทย
Text (English)	ข้อความวิ่งภาษาอังกฤษ

USP Strip

จุดเด่น 4 ข้อ (USP #1–#4) ที่แสดงใต้ Hero — แต่ละข้อกรอก Title ได้ทั้งไทยและอังกฤษ:

ช่องกรอก	ตัวอย่าง
Title (Thai)	เกมหลากหลาย พรีเมียม
Title (English)	Premium Game Selection

SEO Settings

ช่องกรอก	รายละเอียด
Meta Title (Thai)	หัวข้อที่แสดงใน Google
Meta Description (Thai)	คำอธิบายใต้หัวข้อใน Google
OG Image (Social Share)	รูปสำหรับแชร์ Social — แนะนำ 1200x630px

Section Visibility

เปิด/ปิดแต่ละ section บนหน้าแรก (สวิตช์): hero, usps, gameShowcase, trustBadges, seoArticle, marquee

---

5. Banners

หมายเลขในรูป:

① Banner List — รายการแบนเนอร์ (ลากเรียงลำดับ, เปิด/ปิด, ลบ)
② Carousel Settings — Auto Play, Show Dots, Show Arrows, Interval

จัดการแบนเนอร์

ปุ่ม/ฟีเจอร์	รายละเอียด
+ Add Banner	เพิ่มแบนเนอร์ใหม่ (อัปโหลดรูป + ตั้งลิงก์)
ลากการ์ด	ลากเพื่อเปลี่ยนลำดับการแสดง
Active	เปิด/ปิดการแสดงแบนเนอร์โดยไม่ลบ
Delete	ลบแบนเนอร์

Carousel Settings

ตัวเลือก	ค่าเริ่มต้น	รายละเอียด
Auto Play	เปิด	เลื่อนอัตโนมัติ
Show Dots	เปิด	จุดแสดงตำแหน่ง
Show Arrows	เปิด	ลูกศรซ้าย-ขวา
Interval (ms)	5000	ระยะเวลาเลื่อน (5 วินาที)

กดปุ่ม [Save All Changes] เพื่อบันทึกทั้งรายการแบนเนอร์และ Carousel Settings พร้อมกัน

---

6. Game Categories

จัดลำดับและซ่อน/แสดงแท็บหมวดเกมบนหน้า Dashboard และหน้า Providers — มีผลกับสมาชิกทุกคน

หมายเลขในรูป:

① Category Tabs — รายการหมวดเกมทั้งหมด พร้อมปุ่มเรียงลำดับ + ปุ่มซ่อน

จัดการหมวดเกม

ปุ่ม/ฟีเจอร์	รายละเอียด
▲ Move up / ▼ Move down	ย้ายลำดับ (บนสุด = แท็บซ้ายสุด)
👁 Hide category	ซ่อนหมวดจากสมาชิก (กดอีกครั้งเพื่อแสดง)
Search	ค้นหาหมวดในรายการ

หมวดที่มีให้จัดการ (12 หมวด): All (ทั้งหมด), Slots (สล็อต), Casino (คาสิโน), Sports (กีฬา), Lottery (หวย), Fishing (ยิงปลา), Card (ไพ่), Keno (คีโน), E-Sport (อีสปอร์ต), Poker (โป๊กเกอร์), Trade (เทรด), Other (อื่นๆ)

หมายเหตุ: หมวด All (ทั้งหมด) ถูกล็อกไว้ — ย้ายลำดับและซ่อนไม่ได้ (ปุ่มเป็นสีจาง) เพราะต้องแสดงเสมอ

กด [Save Changes] เพื่อบันทึก หรือ [Reset] เพื่อคืนค่าเดิม

---

7. Routing & URLs

หมายเลขในรูป:

① Domains — Portal URL, Primary Domain, Backup Domains
② API & Contact — API Base URL, LINE, Telegram, Email
③ Channel Visibility — เปิด/ปิดช่องทางติดต่อใน footer + หน้าติดต่อ

Domains

ช่องกรอก	รายละเอียด
Portal URL (โดเมนแม่)	URL หลักของเว็บ
Primary Domain	โดเมน Frontend ปัจจุบัน
Backup Domains	โดเมนสำรอง (คั่นด้วย ,)

API & Contact

ช่องกรอก	รายละเอียด	ผลต่อเว็บ
API Base URL	URL ของ Backend API	ระบบเรียก API
LINE URL	ลิงก์เพิ่มเพื่อน LINE	หน้าติดต่อเรา + footer
Telegram URL	ลิงก์ Telegram	หน้าติดต่อเรา + footer
Support Email	อีเมลฝ่ายซัพพอร์ต	หน้าติดต่อเรา + footer

Channel Visibility

เปิด/ปิดการแสดงแต่ละช่องทางใน footer และหน้าติดต่อ (สวิตช์): Facebook, LINE, Telegram, Email

---

8. Welcome Popup

หมายเลขในรูป:

① Popup Status — เปิด/ปิด popup ทั้งระบบ
② Content — ข้อความหลายภาษา (TH / EN / LO / KM / ZH)
③ Banner Image — รูปด้านบน popup (ไม่บังคับ)
④ Call-to-Action Link — ปุ่มลิงก์ไปโปรโมชัน/หน้าอื่น (ไม่บังคับ)
⑤ Preview — ดูตัวอย่าง popup ที่สมาชิกจะเห็น

Popup Status

สถานะ	รายละเอียด
Enabled	สมาชิกเห็น popup หลังล็อกอิน
Disabled	ไม่แสดง popup

Content

เลือกแท็บภาษา (TH / EN / LO / KM / ZH) แล้วกรอกของแต่ละภาษา:

ช่องกรอก	รายละเอียด
Title	หัวข้อ popup
Message	เนื้อหา popup

Banner Image

ช่อง	ขนาดแนะนำ
Popup Banner	600x200px (อัตราส่วน 3:1)

Call-to-Action Link

ช่องกรอก	รายละเอียด
Link URL	ลิงก์ปลายทางเมื่อกดปุ่ม
Button Label	ข้อความปุ่ม (กรอกแยกตามภาษา TH / EN / LO / KM / ZH)

---

9. AI Image Generator

สร้างแบนเนอร์, พื้นหลัง และรูป branding ด้วย AI Nano Banana Pro (Gemini) ผ่าน OpenRouter

หมายเลขในรูป:

① OpenRouter API Key — กรอก API Key (กด "Get key" ถ้ายังไม่มี)
② Theme — เลือกโทนสีสำหรับรูปที่สร้าง
③ Templates — เลือก template รูปที่ต้องการสร้าง
④ Prompt + ตัวเลือก — Model / Aspect Ratio / Resolution

Theme Presets

Theme	โทนสี	เหมาะกับ
Purple & Gold	ม่วงเข้ม + ทอง	ความหรูหรา
Midnight Blue	น้ำเงินเข้ม	ความน่าเชื่อถือ
Black & Red	ดำ + แดง	ความตื่นเต้น
Emerald & Gold	เขียวมรกต + ทอง	ธรรมชาติ + มงคล
Custom	กำหนดเอง	ปรับแต่งตาม brand

Templates (8 แบบ)

Template	รายละเอียด
Welcome Bonus Banner	แบนเนอร์ต้อนรับสมาชิกใหม่
Slots Promo Banner	โปรโมชันเกมสล็อต
Live Casino Banner	โปรโมชันคาสิโนสด
Sports Banner	โปรโมชันกีฬา
Login Background	พื้นหลังหน้าล็อกอิน
Dashboard Background	พื้นหลังหน้าหลัก
Logo Concept	แนวคิดโลโก้
OG / Social Image	รูปสำหรับแชร์ Social Media

Model Selector (เลือก AI Model)

Model	เบื้องหลัง	คุณภาพ	ความเร็ว
Nano Banana Pro	Gemini 3 Pro	สูงสุด	ช้า
Nano Banana 2	Gemini 3.1 Flash	สูง	เร็ว
Nano Banana	Gemini 2.5 Flash	ปานกลาง	เร็วสุด

ตัวเลือกรูป

ตัวเลือก	ค่าที่เลือกได้
Aspect Ratio	1:1 / 16:9 / 9:16 / 4:3 / 3:4
Resolution	1K / 2K / 4K

วิธีใช้

1. ใส่ OpenRouter API Key (กดปุ่ม "Get key" ถ้ายังไม่มี)
2. เลือก Theme ที่ต้องการ
3. สร้างแบบ template: เลือก Template แล้วกด [Generate Image] (หรือ [Generate All (8 images)] เพื่อสร้างครบทุก template)
4. สร้างแบบ custom: พิมพ์ Prompt เอง → เลือก Model / Aspect Ratio / Resolution → กด [Generate Image]
5. รูปที่สร้างจะแสดงทางขวา — เลือกเพื่อนำไปใช้งาน

หมายเหตุ: ใช้ Gemini ผ่าน OpenRouter — ต้องมี API Key; เลือก model ตามความต้องการ (Pro = คุณภาพสูง, Flash = เร็ว)