24 TOPUP — Design Prototype Hub

📋 Changelog กดเพื่อดู

v1.0.2 SEO Articles Batch — ครบ 8 บทความ 21 เม.ย. 2026

✅ articles/ — เพิ่ม 8 บทความ minimal style สำหรับ SEO (JSON-LD + FAQ Schema ครบ)
✅ how-to-topup-uid.html — สอนหา UID และขั้นตอนการเติมที่ถูกต้อง
✅ payment-methods-compare.html — เทียบค่าธรรมเนียม 5 ช่องทาง (0% - 2%)
✅ topup-not-received.html — 5 วิธีเช็คและแจ้งปัญหาของไม่เข้าเกม
✅ vip-tier-guide.html — เงื่อนไขการอัปเกรดและสิทธิพิเศษ Silver/Gold/Platinum
✅ referral-guide.html — สอนแชร์ลิงก์รับคอมมิชชั่น 5% ถาวร
✅ topup-as-gift.html — วิธีเติมให้เพื่อน/ลูกหลานแบบปลอดภัย
✅ topup-scam-warning.html — วิธีเช็คเว็บปลอมและสัญญาณอันตราย
✅ mobile-vs-pc.html — เผยสาเหตุที่เติมผ่านเว็บถูกกว่าในแอป 30%

v1.0.1 Legal Pages + Q&A — ครบ 27 หน้า 4 เม.ย. 2026

✅ qa.html — FAQ search + category tabs + 9 accordion items · linked in drawer + footer ทุกหน้า
✅ terms.html — ข้อกำหนดการใช้บริการ 9 sections · sticky sidebar ToC · payment methods grid · fraud warning
✅ privacy.html — นโยบายความเป็นส่วนตัว 17 sections · PDPA badge · sticky sidebar ToC · rights 8-card grid
✅ Register popup modals — TOS/Privacy full content ใน register-login.html

v1.0.0 Review รอบ 2 — ครบทุกข้อ 24 มี.ค. 2026

✅ topup.html — qty selector +/− + พิมพ์เอง · stock display + overstock modal (รับทราบ/ติดต่อ) · sold-out state · referral+tier discount rows · upline hint · email receipt checkbox · processing time note · อัปเดตรูปสินค้า (c1–c6, booster, Welkin Moon)
✅ payment-checkout.html — fee per method (TrueMoney 2% · บัตร 1.5% · อื่นๆ ฟรี) · grand total คำนวณค่าธรรมเนียมอัตโนมัติ · processing time note
✅ profile.html — KYC flow 4 ขั้นตอน (บัตร + selfie) + avatar sync · 2FA แบบไม่บังคับ (Google Authenticator / Authy) · Last Login 3 sessions + IP · LINE ID (ID string / เบอร์โทร) + ฟรี 10 Credit · profile complete badge "กรอกแล้ว N/4"
✅ KYC gate — payment-checkout บังคับ KYC เมื่อสั่งซื้อ ≥ ฿20,000
✅ Game search tags — 70+ เกม รองรับชื่อเล่น/ชื่อย่อ Thai+EN · nav / homepage / all-games ทำงานเหมือนกัน
✅ Dark mode — ครบ 24 หน้า · logo dark swap · dark-fab · แก้ solid light colors ครบทุกหน้า
✅ order-detail.html — ปุ่ม "ดูใบเสร็จ" (success state) · receipt.html (logo + รายการ + พิมพ์/PDF)
✅ Referral links — "แนะนำเพื่อน" → profile?tab=referral แก้ครบ 15 ไฟล์
✅ Multi-product cart — sessionStorage ส่งรายการข้าม checkout → result · register-login + 2FA prompt flow

v0.9.9 Nav Responsive — tablet breakpoint fix 20 มี.ค. 2026

✅ Nav breakpoint: md: → lg: — ครบ 21 ไฟล์ (mobile drawer, 3 rows, hamburger, desktop menu/search/user)
📐 320–1023px → mobile nav 3 rows | 1024px+ → desktop nav
📱 Tablet portrait 768px ได้ mobile nav แทน desktop nav (เดิม iPad portrait เห็น desktop layout บน touch screen)

v0.9.8 UX Gaps — 3 หน้า + context fix 20 มี.ค. 2026

✅ vip-benefits.html — tier cards (Bronze/Silver/Gold/Diamond) · comparison table · FAQ accordion · CTA section · tier badge ใน nav เชื่อมหน้านี้
✅ profile.html — เปลี่ยนรหัสผ่าน: เปิด modal แทน redirect ไป forgot-password (wrong flow สำหรับ logged-in) · strength bar + show/hide toggle + success state
✅ payment-qr / truemoney / bank / credit-card — รับ ?ctx=wallet&amount=X แสดง "เติม Credit ฿X,XXX" แทน game order · wallet-topup routing ส่ง params ครบทุก method

v0.9.7 R3 Completion — ครบ 21 หน้า 20 มี.ค. 2026

✅ promotion-list.html — filter tabs (ทั้งหมด/คูปอง/โบนัส/VIP) · card states: active / expiring-soon / expired · guest/member CTA toggle
✅ promotion-detail.html — breadcrumb · hero banner · copy coupon code · T&C accordion · sticky mobile CTA bar · related promos
✅ notification-center.html — filter tabs (ทั้งหมด/คำสั่งซื้อ/โปรฯ/ระบบ) · mark-as-read · unread badge sync · guest redirect wall
✅ system-error.html — 3 states: 404 / 500 / Maintenance · countdown timer + progress bar (maintenance) · minimal nav
🗑 ตัด Order Confirmation + Search Results ออกจาก backlog — ซ้ำกับ order-result/order-detail และ live filter ใน all-games

v0.9.6 R2 Patch — Assets, Icons & Search 20 มี.ค. 2026

✅ 24topup-logo.svg — SVG logo ใหม่ gaming style (icon gradient square + wordmark horizontal)
✅ LINE icon — เปลี่ยน emoji → <img> tag ทั้ง 13 ไฟล์
✅ Game icons relinked — Rectangle X.jpg → icon_*.jpg ครบ 12 ไฟล์
✅ ICONS array — populate 50 icons ใน homepage + all-games (แก้ภาพเกมหาย)
✅ Nav logo — h-7 → h-9 (36px) ทุกหน้า 14 ไฟล์ ไม่กระทบ drawer/footer
✅ GAME_ALIAS object — ~115 เกม พร้อม Thai nicknames/abbreviations สำหรับ search
✅ topup.html — ลบ T&C checkbox ออก + coupon card clickable mobile
✅ register-login.html — Google button → สีแดง #ea4335 + SVG Google icon

v0.9.5 P2 Batch — Account & Auth Flow 18 มี.ค. 2026

✅ profile.html → 4 tabs — เพิ่ม My Wallet tab (balance hero + tx history + filter), inline edit email/phone พร้อม OTP verify
✅ forgot-password.html — email → OTP countdown + resend → new password (strength bar) → success
✅ referral-landing.html — downline landing page (URL จากลิงก์ upline) — upline card + benefits + sticky CTA mobile

v0.9.4 P1 Batch — Payment Flow ครบ 18 มี.ค. 2026

✅ payment-truemoney.html — กรอกเบอร์ → validate → 5 states (form/processing/success/notfound/balance)
✅ payment-bank-transfer.html — copy เลขบัญชี + ยอด, upload slip + preview, 4 states
✅ payment-credit-card.html — live card preview, 3DS OTP popup, 5 states
✅ order-detail.html — status timeline 4 แบบ, conditional action (rejected → upload slip ใหม่)
✅ profile.html orders tab — รองรับ status ครบ: สำเร็จ / รอตรวจสอบ / สลิปไม่ผ่าน / ล้มเหลว / ยกเลิก

v0.9.3 Client Feedback Round 1 — ✅ ครบทุกข้อ 18 มี.ค. 2026

✅ Font → Prompt, type scale ใหม่ · Nav redesign ทุกหน้า (mobile 3 แถว + hamburger drawer)
✅ Homepage: banner slider auto-slide + pause on hover · Flash Sale zone · game grid 3col mobile
✅ Topup: sold-out state · ⚠️ warning modal · UID guide image · sticky bottom bar
✅ Payment Checkout แยกออกจาก topup.html · Profile: Coin history modal · Go to Top button ทุกหน้า

✅

หน้าที่เสร็จแล้ว

27 หน้า ✅ ครบ

🔐 Auth

• Tab สลับ Login ↔ Register
• Register 2-phase: email → OTP 6 หลัก (countdown + resend) → ตั้งรหัส + referral code optional
• Password strength meter · toggle แสดง/ซ่อน
• Social login: LINE / Google / Facebook

เปิด →

Forgot Password

• 4 states: email → OTP → new password → success
• OTP countdown 3 นาที · ปุ่ม resend unlock หลัง countdown ศูนย์
• Password strength bar · match check realtime · สลับ state ด้วยปุ่มมุมล่าง

เปิด →

🎮 Browse

Homepage

• Banner slider: auto-slide 4s · หยุดเมื่อ hover · กดลูกศรหรือ dots สลับ
• Search bar กรอง game grid realtime (ชื่อ / tag / ชื่อย่อ)
• ปุ่ม Guest/Member toggle มุมซ้ายล่าง (prototype) — สลับ nav state ทันที

เปิด →

All Games

• Mobile: ปุ่ม ⚙ เปิด filter bar (chips + selects) พร้อม badge จำนวน filter ที่ active
• Desktop: sidebar filter + search bar กลางหน้า
• Filter + search ทำงานพร้อมกัน realtime

เปิด →

🛒 Checkout

Topup (เลือกแพ็กเกจ)

• ซื้อหลายสินค้าพร้อมกัน · qty +/− หรือพิมพ์เอง · stock badge + overstock modal
• Sold out → ปุ่มติดต่อเจ้าหน้าที่ · info popup + skip 7 วัน
• สรุปราคา: referral discount + tier discount แยกบรรทัด · upline hint
• Email receipt checkbox (verified เท่านั้น) · processing time note
• Mobile: sticky bottom bar · enable เมื่อมีสินค้า ≥ 1 ชิ้น

เปิด →

Payment Checkout (สรุปก่อนชำระ)

• Warning banner เตือน UID + Server → route ไปหน้า payment ที่เลือก
• ค่าธรรมเนียมแต่ละช่องทาง: TrueMoney 2% · บัตร 1.5% · อื่นๆ ฟรี
• Grand total คำนวณค่าธรรมเนียมอัตโนมัติ · processing time note
• KYC gate: บังคับยืนยันตัวตนเมื่อสั่งซื้อ ≥ ฿20,000

เปิด →

💳 Payment

Payment — QR PromptPay

• 4 states: Waiting (countdown 15 นาที) · Detected · Timeout · Error
• สลับ state ด้วยปุ่มมุมล่าง

เปิด →

Payment — TrueMoney Wallet

• กรอกเบอร์ 10 หลัก → validate realtime → ส่งคำขอ
• 5 states: form · processing · success · error-notfound · error-balance · สลับด้วยปุ่มมุมล่าง

เปิด →

Payment — โอนธนาคาร + สลิป

• Copy button สำหรับเลขบัญชีและยอดโอน แยกกัน
• Upload slip → preview รูปทันที
• 4 states: upload · pending (tracking 3 steps) · confirmed · rejected · สลับด้วยปุ่มมุมล่าง

เปิด →

Payment — บัตรเครดิต / เดบิต

• Live card preview อัปเดตตามที่พิมพ์ (เลข + ชื่อ + วันหมด)
• 3DS popup OTP · CVV toggle แสดง/ซ่อน
• 5 states: form · processing · 3DS · success · error · สลับด้วยปุ่มมุมล่าง

เปิด →

👛 Wallet

👑 NEW

VIP Benefits

Tier cards · comparison table · FAQ

Wallet Top-up (เติม Credit)

• กด chip หรือกรอกเอง → สรุปยอด + bonus Credit อัปเดตอัตโนมัติ
• VIP tier bonus สูงขึ้นตาม tier ที่แสดงอยู่

เปิด →

📦 Order

Order Result (ผลชำระทันที)

• 2 states: Success / Fail · Guest nudge สมัครสมาชิก
• สลับ state + guest/member ด้วยปุ่มมุมล่าง

เปิด →

Order Detail (ประวัติ → กดรายการ)

• 4 timelines: pending / success / rejected / cancelled · สลับด้วยปุ่มมุมล่าง
• Rejected → ปุ่ม "อัปโหลดสลิปใหม่"
• Success → ปุ่ม "ดูใบเสร็จ" → receipt.html (พิมพ์/บันทึก PDF ได้)

เปิด →

Receipt (ใบเสร็จรับเงิน)

• Logo + order# + รายการสินค้า + ข้อมูลการชำระเงิน + ยอดรวม
• ปุ่ม "พิมพ์ / บันทึก PDF" — print mode ซ่อน nav/ปุ่ม เหลือแต่ใบเสร็จ

เปิด →

👤 Account

Profile — 4 tabs

• ข้อมูล: KYC flow 4 ขั้น (บัตร+selfie) · 2FA (Google Auth/Authy) · LINE ID · Last Login 3 sessions · profile complete "N/4"
• My Wallet: balance hero + filter tx · deep link: profile.html?tab=wallet
• ประวัติซื้อ: filter 5 status · "สลิปไม่ผ่าน" มีปุ่ม upload inline
• แนะนำเพื่อน: copy ลิงก์ · แลก Affiliate Wallet → modal

เปิด →

👥 Referral

Referral Landing (downline)

• หน้านี้คือปลายทางของลิงก์ที่ upline แชร์ — แสดงชื่อ + tier ของคนที่ชวน
• Mobile: sticky bottom CTA · New member offer card + FAQ accordion

เปิด →

🎁 Promotion

Promotion List

• Filter tabs: ทั้งหมด / คูปอง / โบนัสเครดิต / VIP
• Card states: active · expiring-soon (amber border) · expired (disabled) · VIP (violet badge)
• Guest: banner prompt login + member-only CTA · สลับ guest/member ด้วยปุ่มมุมล่าง

เปิด →

Promotion Detail

• Breadcrumb · hero banner gradient · วิธีใช้ (numbered steps) · T&C accordion
• Desktop: sticky sidebar CTA + copy coupon code · Mobile: fixed bottom CTA bar
• Guest/member CTA toggle · Related promotions grid

เปิด →

🔔 Notification

Notification Center

• Filter tabs: ทั้งหมด / คำสั่งซื้อ / โปรโมชั่น / ระบบ
• Unread: highlight + dot indicator · mark-as-read รายการ + mark all · unread badge sync
• Guest: redirect wall แทนรายการ · สลับด้วยปุ่มมุมล่าง

เปิด →

❓ Support

Q&A / FAQ

• Search bar กรองคำถามแบบ realtime
• Category tabs: ทั้งหมด / บัญชี / การชำระเงิน / คำสั่งซื้อ / เติมเกม
• 9 accordion items · linked in drawer + footer ทุกหน้า

เปิด →

📄 Legal

• 9 sections · sticky sidebar ToC (desktop)
• Payment methods grid · fraud warning section

เปิด →

• 17 sections · PDPA badge · sticky sidebar ToC (desktop)
• User rights 8-card grid

เปิด →

📰 SEO Articles

1. วิธีเติมเกมผ่าน UID

สอนหา UID และขั้นตอนการเติม

2. เปรียบเทียบช่องทางชำระเงิน

ตารางเทียบค่าธรรมเนียม + ความเร็ว

3. เติมเงินแล้วไม่เข้า

5 วิธีเช็คและแจ้งปัญหาแอดมิน

4. VIP Tier คืออะไร

สิทธิประโยชน์สมาชิกแต่ละระดับ

5. ระบบแนะนำเพื่อน

วิธีรับคอมมิชชั่น 5% ตลอดอายุ

6. เติมเกมให้เพื่อน/ลูก

วิธีเปย์ของขวัญแบบปลอดภัย

7. ระวังมิจฉาชีพ

วิธีเช็คเว็บปลอมและสัญญาณโกง

8. เติมแอป vs เติมเว็บ

ทำไมเติมเว็บถึงถูกกว่า 30%

⚙️ System

System Error Pages

• 3 states: 404 Not Found · 500 Internal Error · 🔧 Maintenance
• Maintenance: live countdown timer + progress bar · contact chips
• Minimal nav (logo + กลับหน้าหลัก เท่านั้น) · สลับ state ด้วยปุ่มบน

เปิด →

🎉

ทุกหน้าเสร็จแล้ว — 27/27

รวม Q&A · Terms of Service · Privacy Policy · Register popup modals (TOS/Privacy) ✅ ครบ

🛠

Dev Reference

components.html → TemplUI component patterns, สี, ปุ่ม ที่ใช้ในโปรเจค Stack: HTML + Tailwind v4 CDN + TemplUI · Prod: Go + templ · Font: Prompt · Theme: Light + Dark Assets: images/24topup-logo.svg (v0.9.6) · images/line-icon.png · images/game-icon/icon_*.jpg (50 icons)