Dashboard

Quản lý toàn bộ website GameBooster

📄
Pages
8
🎨
CSS Files
9
⚙️
JS Files
7
🌍
Languages
2

✅ Dark Mode

Toggle giữa chế độ sáng/tối với CSS variables

Active

✅ Multi-Language

Support EN/VI qua config.js

Active

✅ Modular Assets

Tách riêng CSS/JS cho từng trang

Active

📱 Responsive

Tối ưu mobile & desktop

Active

Pages Management

Quản lý các trang HTML

Page CSS JS Size Action
🏠 index.html ✓ ✓ 7.2 KB
🔑 genkey.html ✓ ✓ 476 L
🔍 getkey.html ✓ ✓ 725 L
⬇️ download.html ✓ ✓ 591 L
🔒 privacy.html ✓ — 402 L
📋 terms.html ✓ — 333 L
❌ 404.html ✓ — 299 L
↩️ redirect.html ✓ ✓ 51 L
💡 Tip: Mỗi trang HTML đã được tách CSS và JS riêng vào thư mục assets/css/ và assets/js/

Assets Management

Quản lý CSS và JavaScript files

🎨 CSS Files

global.css 8.2 KB Shared
index.css 12.7 KB Page
getkey.css 17.4 KB Page
download.css 11.4 KB Page
genkey.css 1.9 KB Page
privacy.css 7.6 KB Page
terms.css 6.5 KB Page
404.css 6.5 KB Page
redirect.css 718 B Page

⚙️ JavaScript Files

config.js 1.2 KB Shared
utils.js 878 B Shared
index.js 868 B Page
getkey.js 9.5 KB Page
genkey.js 1.8 KB Page
download.js 263 B Page
redirect.js 395 B Page
📌 Architecture:
  • Shared: config.js, utils.js, global.css - dùng trên tất cả pages
  • Page: {name}.js, {name}.css - riêng cho từng trang HTML

Settings

Cấu hình toàn bộ website

🌐 Display Settings

Trang mặc định hiển thị ở chế độ tối

Ngôn ngữ mặc định cho lần truy cập đầu tiên

📱 Asset Settings

Nén CSS/JS để tăng tốc độ tải

Tải assets không đồng bộ (async)

🔧 Web Config

Bật chế độ bảo trì cho tất cả trang

Ngày cập nhật cuối cùng

Documentation

Hướng dẫn sử dụng và phát triển

📁 Project Structure

GameBooster/
├── index.html
├── genkey.html
├── getkey.html
├── download.html
├── privacy.html
├── terms.html
├── 404.html
├── admin.html (Control Panel)
└── assets/
    ├── css/
    │   ├── global.css (shared)
    │   ├── index.css
    │   ├── genkey.css
    │   ├── getkey.css
    │   ├── download.css
    │   ├── privacy.css
    │   ├── terms.css
    │   ├── 404.css
    │   ├── redirect.css
    │   └── admin.css
    └── js/
        ├── config.js (shared)
        ├── utils.js (shared)
        ├── index.js
        ├── genkey.js
        ├── getkey.js
        ├── download.js
        └── redirect.js

🎨 CSS Architecture

  • global.css: Theme variables (dark/light mode), shared components
  • Page CSS: Page-specific styles, removed from HTML
  • Variables: --bg, --text, --accent, --card, --border
  • Dark Mode: :root default (dark), [data-theme="light"] override

⚙️ JavaScript Architecture

  • config.js: Language strings (LANG_STRINGS), getCurrentLang(), setLanguage()
  • utils.js: initDarkMode(), toggleDarkMode()
  • Page JS: Page-specific event listeners, init functions

🌍 Multi-Language Implementation

// config.js usage:
const LANG_STRINGS = {
  vi: { ... },
  en: { ... }
};

// In HTML:
<select id="lang-select">
  <option value="vi">Tiếng Việt</option>
  <option value="en">English</option>
</select>

// In JS:
const lang = getCurrentLang(); // Returns 'vi' or 'en'
setLanguage('en'); // Changes language & reloads

🌙 Dark Mode Implementation

// utils.js usage:
initDarkMode(); // Initialize from localStorage

toggleDarkMode(); // Toggle between modes
// CSS: :root { dark mode }
//      [data-theme="light"] { light mode }

// localStorage: app_theme = "light" or "dark"

✅ Adding New Features

  1. Create HTML file in root: newpage.html
  2. Extract inline styles to assets/css/newpage.css
  3. Extract inline scripts to assets/js/newpage.js
  4. Link both files in <head>
  5. Load shared files: global.css, config.js, utils.js

🚀 Deployment Checklist

  • ✅ Test dark mode toggle on all pages
  • ✅ Test language selector (VI/EN)
  • ✅ Verify all links work (internal & external)
  • ✅ Check responsive design (mobile, tablet, desktop)
  • ✅ Test all interactive features (buttons, forms, modals)
  • ✅ Validate HTML/CSS/JS syntax
  • ✅ Check SEO meta tags