📖 CẨM NANG HƯỚNG DẪN SỬ DỤNG AE888 POPUP STUDIO V10
🖼️ SƠ ĐỒ TRỰC QUAN: THANH CÔNG CỤ SÂN KHẤU PREVIEW & KÉO ĐỘ DÀI Chiều ngang cố định 323px
👁️ PREVIEW 323×427
↩️ ↪️ Hoàn tác ✏️ Sửa chữ ✋ Kéo vị trí 🔄 Reset 📸 Xuất PNG ⭐ Lưu ☑️ Khít
📐 Khung: 323 × 427 px
↕ Kéo chỉnh độ dài (180px – 750px)
↕ Kéo Chỉnh Chiều Dài Tự Do (180px – 750px)
• Cách 1: Nắm kéo trực tiếp thanh ══ ↕ Kéo chỉnh độ dài ══ ngay dưới đáy Popup trong khung Preview.
• Cách 2: Kéo thanh trượt ngang hoặc gõ số pixel bất kỳ (VD: 323 cho popup vuông, 427 cho hộp thư chuẩn). Chiều ngang luôn khóa chuẩn 323px.
✏️ Sửa Chữ Trực Tiếp Trên Popup
• Bấm nút ✏️ Sửa chữ (nút chuyển sang màu xanh ĐANG SỬA).
• Nhấp chuột thẳng vào bất kỳ tiêu đề, con số thưởng hay nút bấm nào trên Popup để gõ chữ mới. Code bên dưới sẽ tự động cập nhật theo từng phím gõ.
✋ Kéo Vị Trí & 🔄 Reset Mặc Định
• Bật nút ✋ Kéo vị trí để dùng chuột nắm kéo bất kỳ ô thông tin, nút bấm, sticker hay hiệu ứng VFX nào tới vị trí mong muốn.
• Bấm 🔄 Reset khi anh muốn đưa toàn bộ vị trí các khối về lại bố cục chuẩn ban đầu.
📸 Xuất PNG & ☑️ Tự Động Co Khít
• 📸 Xuất PNG: Chụp và tải khung Popup hiện tại thành file ảnh PNG độ phân giải cao.
• ☑️ Khít: Tự động cân chỉnh tỷ lệ nội dung bên trong khi anh thu ngắn chiều dài để không bao giờ bị che khuất nút bấm.
🎨 SƠ ĐỒ TRỰC QUAN: BẢNG MÀU, ĐỘ ĐẬM NHẠT & KHO 54 HIỆU ỨNG VFX Đóng/Mở Gọn Gàng
🎨 MÀU: 🌈 52 Màu ▼ 🎚️ Kéo Đậm/Nhạt ▼ ⚡ 54 VFX ▼
🎭 Sticker 🔗 Link
🌈 52 Màu (20 Màu Đơn + 32 Màu Pha Đôi)
• Bấm 🌈 52 Màu ▼ để mở bảng màu Hoàng Gia & Cyber 2026.
• Chỉ cần chạm 1 lần vào chấm màu bất kỳ, toàn bộ nền hộp, viền, chữ ánh kim và nút bấm sẽ chuyển sang tông màu mới ngay lập tức.
🎚️ Kéo Đậm/Nhạt & Độ Mảnh Viền
• Chỉnh trực tiếp 6 thông số: Độ đậm/sáng nền, Độ rực màu, Cường độ phát sáng (Glow), Độ mảnh viền khung (0.5px–2.5px), Độ đậm tiêu đề và Độ mảnh nội dung phụ.
⚡ 54 Hiệu Ứng VFX & 🪄 AI Độ Tinh Tế
• Chia làm 6 nhóm: Hạt & Mưa, Nút & Chữ, Vân & Khung, Widget FOMO, Tem & Nhãn, Ánh Sáng.
• Bấm vào hiệu ứng để bật/tắt. Có thể bật ✋ Kéo vị trí để di chuyển các tem, đồng hồ đếm ngược, mưa xu tới bất kỳ đâu.
🎭 Sticker 3D & 🔗 Thay Nhanh Link / Banner
• 🎭 Sticker: Gắn Cúp, Rương, Vương miện hoặc dán link ảnh PNG tách nền nổi 3D.
• 🔗 Link: Dán link ảnh Banner mới hoặc gán đường link trang đích riêng biệt cho từng nút bấm trên Popup.
💻 SƠ ĐỒ TRỰC QUAN: THANH CÔNG CỤ MÃ NGUỒN CHUẨN WEB CMS Chống lỗi vỡ giao diện 100%
💻 Mã nguồn
⏪ Gốc 📐 Chuẩn Khung ✨ Làm đẹp 🔍 Phóng to ⚡ 1 Dòng 📋 Sao chép
📐 Chuẩn Khung & Tự Thu Nhỏ Code Lớn
• Khi anh tải tệp hoặc dán code có kích thước lớn (ví dụ 646×855px, 600×800px), hệ thống tự động tính tỷ lệ thu về đúng chiều ngang 323px.
• Đồng thời tự gỡ các thuộc tính gây lỗi trên Web CMS như body/html toàn cục, position: fixed ở vỏ ngoài hay comment //.
⏪ Khôi Phục Code Gốc & ✨ Làm Đẹp
• ⏪ Gốc: Khôi phục ngay lập tức về 100% tệp code gốc ban đầu anh vừa tải lên nếu anh muốn làm lại từ đầu.
• ✨ Làm đẹp: Căn lề, sắp xếp lại các thẻ HTML/CSS gọn gàng, sạch sẽ.
⚡ Nén 1 Dòng & 📋 Sao Chép Dán CMS
• 📋 Sao chép: Chép toàn bộ mã nguồn tiêu chuẩn để dán vào hệ thống.
• ⚡ 1 Dòng: Nén toàn bộ HTML + CSS thành đúng 1 dòng duy nhất (đã lọc sạch comment gây lỗi) dành cho các khung nhập CMS không cho phép xuống dòng.
🔍 Phóng To Khung Code
• Bấm 🔍 Phóng to để mở rộng khung soạn thảo code lên toàn màn hình bên phải khi anh muốn kiểm tra hoặc chỉnh sửa sâu từng dòng CSS.
☁️ SƠ ĐỒ TRỰC QUAN: TỦ MẪU CHUNG VĨNH VIỄN TRÊN CLOUDFLARE (MỌI NGƯỜI DÙNG CHUNG) Chống Xem Trộm Code
🔥 50 Bố Cục VIP ⭐ Tủ Đã Lưu (Đồng bộ Cloud) ☁️ Tự động lưu & chia sẻ qua Link 📤 Xuất file Tủ (.json) 📥 Nhập file Tủ
☁️ Đồng Bộ Tủ Mẫu Chung Qua Link Cloudflare
• Khi bấm ⭐ Lưu, mẫu popup vừa lưu vào trình duyệt (`IndexedDB` + `LocalStorage`) vừa tự động đồng bộ ngầm lên đám mây Cloudflare.
• Tất cả thành viên truy cập vào đường link trang web của anh trên bất kỳ máy tính hay điện thoại nào đều thấy ngay các mẫu chung đã lưu, trừ khi bấm ✕ xóa mới mất.
🔒 Bảo Vệ & Giấu Mã Nguồn Trang Web
• Không bao giờ tải file .html của trang Studio về máy người dùng.
• Tự động khóa các phím tắt soi mã nguồn trang web (Ctrl+U, Ctrl+S, F12, Ctrl+Shift+I) và khóa chuột phải ngoài vùng soạn thảo để bảo vệ bản quyền code của anh.
🖼️ Dán Ảnh Mẫu (Ctrl+V) & Tải Tệp Code (📁)
• Ctrl+V dán ảnh: Chụp màn hình mẫu popup bất kỳ và bấm Ctrl+V vào khung chat, AI Vision sẽ đọc ảnh và dựng lại code 1:1.
• Tải tệp lỗi (📁): Tải code bị vỡ giao diện khi up lên web, gõ "Sửa lỗi code này để up lên web", AI sẽ giữ nguyên giao diện và sửa sạch lỗi CSS.
🔥 50 Bố Cục Độc Bản (Xoay Vòng 5 Bộ)
• Ở thanh bên trái, mục 🔥 50 Bố Cục VIP hiển thị 10 mẫu mỗi trang.
• Bấm nút 🔄 Làm Mới hoặc mũi tên ◀ ▶ để chuyển qua lại giữa 5 bộ (từ mẫu #1 đến mẫu #50).
⚡ ĐOẠN CODE DÁN THÊM VÀO CLOUDFLARE WORKER CỦA ANH (ĐỂ TẤT CẢ MÁY THẤY CHUNG TỦ MẪU)
Nếu trên Cloudflare Worker của anh (xkiro-proxy.khoathegioi.workers.dev) đã gắn 1 bộ nhớ KV tên là VAULT_KV (hoặc POPUP_VAULT), anh chỉ cần thêm nhánh /vault nhỏ gọn dưới đây vào đầu hàm fetch(request, env) là mọi thiết bị vào link sẽ tự động dùng chung Tủ mẫu:
// Dán thêm đoạn này vào đầu hàm async fetch(request, env) trong Cloudflare Worker của anh:
const url = new URL(request.url);
const kv = env.VAULT_KV || env.POPUP_VAULT || env.KV;
if (url.pathname.endsWith("/vault") && kv) {
  const cors = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,POST,OPTIONS", "Access-Control-Allow-Headers": "Content-Type,Authorization", "Content-Type": "application/json" };
  if (request.method === "OPTIONS") return new Response(null, { headers: cors });
  if (request.method === "GET") return new Response((await kv.get("shared_vault_v10")) || "[]", { headers: cors });
  if (request.method === "POST") { const body = await request.text(); await kv.put("shared_vault_v10", body); return new Response('{"ok":true}', { headers: cors }); }
}
⭐ Lưu Mẫu Popup Vào Tủ Cá Nhân
POPUP STUDIO
● Sẵn sàng
Popup Studio - Thiết kế Popup chuyên nghiệp
preview Ảnh đính kèm (AI Vision sẵn sàng)
📄 Tệp code