Chuyển đổi giao diện thành dạng tab và tối ưu hóa cho di động

[J2TeamNNL]

Introduce tabbed navigation for data input and customization, alongside mobile UI optimizations for header buttons and data type icons.

---

 

---

Note

Introduce tabbed UI separating data input and customization, update JS for tab switching and data-type rendering, and refine mobile/responsive styles with new translations.

• UI (index.html):
  • Tabbed Navigation: Split interface into data-input and customize tabs with corresponding tab-content containers.
  • Structure/Styling: Adjust paddings, responsive text sizes, and containers for QR preview and download sections; add dataTypeGrid container for dynamic rendering.
  • Header: Make language/dark-mode buttons responsive via header-buttons.
• JS (js/app.js):
  • Tab Switching: Add switchTab(tabName) to toggle .tab and .tab-content states with activity logging.
  • Data Types Rendering: Target #dataTypeGrid for dynamic card injection; maintain active state/init.
  • Event Wiring: Hook inputs, color pickers, size, campaign fields, and center options to auto-generate; minor logging tweaks.
• Styles (css/style.css):
  • Tabs: Tighter padding, hover color tweaks, and active border-bottom indicator.
  • Cards (Mobile): Smaller icons/text and padding for .data-card.
  • Header Buttons: Responsive positioning and sizing.
  • QR Preview: Responsive size limits across breakpoints.
• i18n (js/translations.js):
  • Add keys for tab_data_input and tab_customize in both vi and en.

^{Written by Cursor Bugbot for commit a6dc8f8. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}