24 TOPUP Design Prototype

เว็บเติมเกมออนไลน์ตลาดไทย — รวม link หน้าที่ออกแบบแล้วทั้งหมด

อัปเดตล่าสุด: 21 เม.ย. 2026 · v1.0.2 — ✅ 35 หน้า (27 หลัก + 8 บทความ SEO)

📋 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

Register / Login

  • • 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

Terms of Service

  • • 9 sections · sticky sidebar ToC (desktop)
  • • Payment methods grid · fraud warning section
เปิด →

Privacy Policy

  • • 17 sections · PDPA badge · sticky sidebar ToC (desktop)
  • • User rights 8-card grid
เปิด →

📰 SEO Articles

⚙️ 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)