| <!DOCTYPE html>
|
| <html lang="vi">
|
|
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>Pro Captcha Solver - Dashboard</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <script src="/socket.io/socket.io.js"></script>
|
|
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
| <style>
|
| body {
|
| font-family: "Inter", sans-serif;
|
| }
|
|
|
| .modal-enter {
|
| animation: fadeIn 0.3s ease-out;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from {
|
| opacity: 0;
|
| transform: scale(0.95);
|
| }
|
|
|
| to {
|
| opacity: 1;
|
| transform: scale(1);
|
| }
|
| }
|
|
|
| .scrollbar-hide::-webkit-scrollbar {
|
| display: none;
|
| }
|
|
|
| .scrollbar-hide {
|
| -ms-overflow-style: none;
|
| scrollbar-width: none;
|
| }
|
|
|
|
|
| .nav-item.active {
|
| background-color: #f3f4f6;
|
| color: #4f46e5;
|
| border-right: 3px solid #4f46e5;
|
| }
|
| </style>
|
| </head>
|
|
|
| <body class="bg-gray-50 text-gray-800 h-screen overflow-hidden">
|
|
|
| <div id="auth-screen" class="fixed inset-0 z-50 bg-gray-50 flex justify-center items-center">
|
| <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md border border-gray-100">
|
| <h4 class="text-3xl font-bold text-center mb-2 text-indigo-600">
|
| 🚀 CaptchaPro
|
| </h4>
|
| <p class="text-center text-gray-400 mb-8 text-sm">
|
| Automated Solver Service
|
| </p>
|
|
|
| <div class="flex border-b border-gray-100 mb-6">
|
| <button onclick="switchAuthTab('login')" id="tab-login"
|
| class="w-1/2 pb-3 text-center font-bold border-b-2 border-indigo-600 text-indigo-600 transition">
|
| Đăng nhập
|
| </button>
|
| <button onclick="switchAuthTab('register')" id="tab-register"
|
| class="w-1/2 pb-3 text-center font-bold text-gray-400 border-b-2 border-transparent hover:text-indigo-500 transition">
|
| Đăng ký
|
| </button>
|
| </div>
|
|
|
| <div id="login-form">
|
| <input type="text" id="l_user"
|
| class="w-full p-3 mb-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition"
|
| placeholder="Username" />
|
| <input type="password" id="l_pass"
|
| class="w-full p-3 mb-6 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition"
|
| placeholder="Password" />
|
| <button onclick="login()"
|
| class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition shadow-lg shadow-indigo-200">
|
| ĐĂNG NHẬP
|
| </button>
|
| </div>
|
|
|
| <div id="register-form" class="hidden">
|
| <input type="text" id="r_user"
|
| class="w-full p-3 mb-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 transition"
|
| placeholder="New Username" />
|
| <input type="password" id="r_pass"
|
| class="w-full p-3 mb-6 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 transition"
|
| placeholder="New Password" />
|
| <button onclick="register()"
|
| class="w-full bg-green-500 text-white py-3 rounded-lg font-bold hover:bg-green-600 transition shadow-lg shadow-green-200">
|
| ĐĂNG KÝ NGAY
|
| </button>
|
| </div>
|
| <p id="auth-msg" class="text-red-500 text-center mt-4 text-sm font-medium h-5"></p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="dashboard" class="flex h-screen hidden">
|
|
|
| <aside class="w-64 bg-white border-r border-gray-200 flex flex-col shadow-sm z-20">
|
| <div class="h-16 flex items-center px-6 border-b border-gray-100">
|
| <span class="text-2xl font-bold text-indigo-600 tracking-tight">🚀 CaptchaPro</span>
|
| </div>
|
|
|
| <div class="p-4">
|
| <div class="flex items-center gap-3 p-3 bg-indigo-50 rounded-xl mb-4">
|
| <div
|
| class="w-10 h-10 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-lg">
|
| <span id="avatar-char">U</span>
|
| </div>
|
| <div class="overflow-hidden">
|
| <div id="display-name" class="font-bold text-gray-800 truncate">
|
| User
|
| </div>
|
| <div id="user-role" class="text-xs text-indigo-600 font-medium">
|
| Member
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <nav class="flex-1 px-4 space-y-1">
|
| <button onclick="showPage('dashboard')" id="nav-dashboard"
|
| class="nav-item active w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition">
|
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
| d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
|
| </path>
|
| </svg>
|
| Dashboard
|
| </button>
|
|
|
| <button onclick="showPage('history')" id="nav-history"
|
| class="nav-item w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition">
|
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
| d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
| </svg>
|
| Lịch sử
|
| </button>
|
|
|
| <a href="/docs.html" target="_blank"
|
| class="nav-item w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition">
|
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
| d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 4.168 6.253v13C4.168 19.977 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 19.977 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
|
| </path>
|
| </svg>
|
| Tài liệu API
|
| </a>
|
| </nav>
|
|
|
| <div id="sidebar-admin" class="px-4 py-2 hidden mt-2">
|
| <div class="text-xs font-bold text-gray-400 uppercase px-2 mb-2 tracking-wider">
|
| Admin Control
|
| </div>
|
| <button onclick="showPage('admin')" id="nav-admin"
|
| class="nav-item w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-red-600 rounded-lg hover:bg-red-50 transition">
|
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
| d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
|
| </path>
|
| </svg>
|
| Quản lý hệ thống
|
| </button>
|
| </div>
|
|
|
| <div class="p-4 border-t border-gray-100">
|
| <button onclick="logout()"
|
| class="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-bold text-red-500 border border-red-200 rounded-lg hover:bg-red-50 transition">
|
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
| d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
| </svg>
|
| Đăng xuất
|
| </button>
|
| </div>
|
| </aside>
|
|
|
|
|
| <main class="flex-1 overflow-y-auto bg-gray-50 p-8">
|
|
|
| <div id="page-dashboard" class="animate-fade-in space-y-6">
|
|
|
| <h1 class="text-2xl font-bold text-gray-800 mb-6">Tổng quan</h1>
|
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
| <div class="md:col-span-1 space-y-6">
|
|
|
| <div
|
| class="bg-gradient-to-br from-indigo-600 to-violet-600 text-white rounded-2xl p-6 shadow-lg shadow-indigo-100 relative overflow-hidden">
|
| <div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-white opacity-10 rounded-full blur-xl"></div>
|
| <div class="relative z-10">
|
| <p class="text-indigo-100 text-sm font-medium mb-1">
|
| Số dư khả dụng
|
| </p>
|
| <h1 class="text-5xl font-bold tracking-tight" id="credits">
|
| 0
|
| </h1>
|
| <div class="mt-4 flex items-center gap-2 text-xs font-mono bg-black/20 p-2 rounded-lg truncate">
|
| <span class="text-gray-300">KEY:</span>
|
| <span id="api-key" class="text-white select-all">...</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
|
| <h5 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
|
| <span class="bg-green-100 text-green-600 p-1.5 rounded-lg text-xs">💎</span>
|
| Nạp thêm Credits
|
| </h5>
|
| <div class="space-y-3">
|
| <button onclick="openDepositModal(1)"
|
| class="w-full flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition group">
|
| <span class="text-gray-600 font-medium group-hover:text-blue-600">Gói $1</span>
|
| <span
|
| class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-bold group-hover:bg-blue-200 group-hover:text-blue-800">1,000
|
| Cre</span>
|
| </button>
|
| <button onclick="openDepositModal(5)"
|
| class="w-full flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:border-green-500 hover:bg-green-50 transition group">
|
| <span class="text-gray-600 font-medium group-hover:text-green-600">Gói $5</span>
|
| <span
|
| class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-bold group-hover:bg-green-200 group-hover:text-green-800">5,000
|
| Cre</span>
|
| </button>
|
| <button onclick="openDepositModal(10)"
|
| class="w-full flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:border-yellow-500 hover:bg-yellow-50 transition group">
|
| <span class="text-gray-600 font-medium group-hover:text-yellow-600">Gói $10</span>
|
| <span
|
| class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-bold group-hover:bg-yellow-200 group-hover:text-yellow-800">10,000
|
| Cre</span>
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="md:col-span-2">
|
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 h-full flex flex-col">
|
| <h5 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
|
| <span class="bg-indigo-100 text-indigo-600 p-1.5 rounded-lg text-xs">⚡</span>
|
| Test Solver API
|
| </h5>
|
|
|
| <div class="space-y-4 flex-1">
|
| <div class="bg-indigo-50/50 rounded-2xl p-6 border border-indigo-100/50">
|
| <div class="flex items-center gap-4 mb-5">
|
| <div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center text-2xl">
|
| 🌐
|
| </div>
|
| <div>
|
| <h6 class="font-bold text-gray-800">
|
| Cấu hình tự động
|
| </h6>
|
| <p class="text-xs text-gray-500">
|
| Hệ thống đã tối ưu cho môi trường Google Labs
|
| </p>
|
| </div>
|
| </div>
|
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
| <div class="bg-white/80 p-3 rounded-xl border border-indigo-100/30">
|
| <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
|
| Dịch vụ
|
| </p>
|
| <p class="text-xs font-bold text-indigo-600 truncate">
|
| Sẵn sàng (High Trust)
|
| </p>
|
| </div>
|
| <div class="bg-white/80 p-3 rounded-xl border border-indigo-100/30 text-right">
|
| <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1 text-right">
|
| Trạng thái cổng
|
| </p>
|
| <div class="flex items-center justify-end gap-1.5">
|
| <span
|
| class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
|
| <span class="text-xs font-bold text-gray-700">HTTPS (443)</span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="flex items-start gap-2 px-2">
|
| <span class="text-indigo-400 text-xs">🛡️</span>
|
| <p class="text-[11px] text-gray-400 leading-relaxed italic">
|
| Hệ thống đã được thiết lập bảo mật đa lớp. Mọi tham số cấu
|
| hình đã được mã hóa và cố định trong lõi xử lý.
|
| </p>
|
| </div>
|
| </div>
|
|
|
| <button onclick="solve()" id="btn-solve"
|
| class="w-full mt-6 bg-gray-900 text-white py-3 rounded-xl font-bold hover:bg-black transition shadow-lg hover:shadow-xl flex justify-center items-center gap-2">
|
| <span>🚀</span> Giải Captcha (-1 Credit)
|
| </button>
|
|
|
| <div class="mt-6">
|
| <label class="block text-xs font-bold text-gray-400 mb-1 uppercase">Terminal Output</label>
|
| <textarea id="result-log"
|
| class="w-full bg-gray-900 text-green-400 font-mono text-xs p-3 rounded-xl h-32 focus:outline-none resize-none"
|
| readonly placeholder="Waiting for command..."></textarea>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="page-history" class="hidden animate-fade-in">
|
| <div class="flex justify-between items-center mb-6">
|
| <h1 class="text-2xl font-bold text-gray-800">Lịch sử hoạt động</h1>
|
| </div>
|
|
|
| <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
| <div class="px-6 py-4 border-b border-gray-100 flex gap-6">
|
| <button onclick="switchHistoryTab('usage')" id="tab-hist-usage"
|
| class="pb-2 font-bold text-sm text-indigo-600 border-b-2 border-indigo-600 transition">
|
| ⚡ Captcha Logs
|
| </button>
|
| <button onclick="switchHistoryTab('deposit')" id="tab-hist-deposit"
|
| class="pb-2 font-bold text-sm text-gray-400 hover:text-gray-600 transition">
|
| 💰 Transaction Logs
|
| </button>
|
| </div>
|
|
|
| <div class="p-0">
|
| <div id="hist-usage-content">
|
| <div class="overflow-auto max-h-[600px] scrollbar-hide">
|
| <table class="w-full text-sm text-left">
|
| <thead class="bg-gray-50 text-gray-500 font-medium">
|
| <tr>
|
| <th class="p-4 pl-6">Thời gian</th>
|
| <th class="p-4">Hành động</th>
|
| <th class="p-4">Chi tiết</th>
|
| </tr>
|
| </thead>
|
| <tbody id="table-usage-body" class="divide-y divide-gray-50"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| <div id="hist-deposit-content" class="hidden">
|
| <div class="overflow-auto max-h-[600px] scrollbar-hide">
|
| <table class="w-full text-sm text-left">
|
| <thead class="bg-gray-50 text-gray-500 font-medium">
|
| <tr>
|
| <th class="p-4 pl-6">Thời gian</th>
|
| <th class="p-4">Số tiền</th>
|
| <th class="p-4">Phương thức</th>
|
| <th class="p-4">Trạng thái</th>
|
| </tr>
|
| </thead>
|
| <tbody id="table-deposit-body" class="divide-y divide-gray-50"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="page-admin" class="hidden animate-fade-in">
|
| <div class="flex justify-between items-center mb-6">
|
| <h1 class="text-2xl font-bold text-red-600 flex items-center gap-2">
|
| 🛡️ Admin Dashboard
|
| </h1>
|
| <button onclick="loadAdminData()"
|
| class="text-sm bg-white border border-gray-200 text-gray-600 px-3 py-1.5 rounded-lg hover:bg-gray-50 font-medium shadow-sm">
|
| Làm mới dữ liệu
|
| </button>
|
| </div>
|
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
| <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-[500px]">
|
| <div class="p-4 border-b border-gray-100 bg-yellow-50/50">
|
| <h3 class="font-bold text-yellow-700">
|
| ⌛ Yêu cầu nạp chờ duyệt
|
| </h3>
|
| </div>
|
| <div class="overflow-auto flex-1 scrollbar-hide">
|
| <table class="w-full text-sm text-left">
|
| <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
|
| <tr>
|
| <th class="p-3 pl-4">User</th>
|
| <th class="p-3">Amount</th>
|
| <th class="p-3">Method</th>
|
| <th class="p-3 text-right pr-4">Action</th>
|
| </tr>
|
| </thead>
|
| <tbody id="admin-trans-list" class="divide-y divide-gray-50"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-[500px]">
|
| <div class="p-4 border-b border-gray-100 bg-indigo-50/50">
|
| <h3 class="font-bold text-indigo-700">
|
| 👥 Danh sách người dùng
|
| </h3>
|
| </div>
|
| <div class="overflow-auto flex-1 scrollbar-hide">
|
| <table class="w-full text-sm text-left">
|
| <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
|
| <tr>
|
| <th class="p-3 pl-4">User</th>
|
| <th class="p-3">Credits</th>
|
| <th class="p-3">Role</th>
|
| <th class="p-3 text-right pr-4">Hành động</th>
|
| </tr>
|
| </thead>
|
| <tbody id="admin-user-list" class="divide-y divide-gray-50"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </main>
|
| </div>
|
|
|
|
|
| <div id="depositModal"
|
| class="fixed inset-0 bg-gray-900/50 z-50 hidden flex items-center justify-center backdrop-blur-sm transition-all">
|
| <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl transform scale-100 modal-enter mx-4 overflow-hidden">
|
| <div class="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
|
| <h5 class="font-bold text-lg text-gray-800">
|
| Thanh toán
|
| <span id="modal-amount-display" class="text-indigo-600">$0</span>
|
| </h5>
|
| <button onclick="closeModal('depositModal')"
|
| class="text-gray-400 hover:text-gray-600 bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center font-bold transition">
|
| ×
|
| </button>
|
| </div>
|
| <div class="p-6">
|
| <div class="flex p-1 bg-gray-100 rounded-xl mb-6">
|
| <button onclick="switchPaymentMethod('mb')" id="btn-tab-mb"
|
| class="flex-1 py-2 rounded-lg text-sm font-bold bg-white text-indigo-600 shadow-sm transition">
|
| MBBank
|
| </button>
|
| <button onclick="switchPaymentMethod('binance')" id="btn-tab-binance"
|
| class="flex-1 py-2 rounded-lg text-sm font-bold text-gray-500 hover:text-gray-700 transition">
|
| Binance
|
| </button>
|
| </div>
|
|
|
|
|
| <div id="content-mb" class="text-center">
|
| <img id="mb-qr-img" src="" class="w-48 h-auto mx-auto border-4 border-white shadow-lg rounded-xl mb-4" />
|
| <div class="bg-indigo-50 p-4 rounded-xl text-sm space-y-2 border border-indigo-100 text-left">
|
| <div class="flex justify-between">
|
| <span class="text-gray-500">Bank</span>
|
| <span class="font-bold text-gray-800">MBBank</span>
|
| </div>
|
| <div class="flex justify-between">
|
| <span class="text-gray-500">Account</span>
|
| <span class="font-bold text-indigo-600 select-all">0972121082000</span>
|
| </div>
|
| <div class="flex justify-between">
|
| <span class="text-gray-500">Name</span>
|
| <span class="font-bold text-gray-800">NGUYEN NGOC NEN</span>
|
| </div>
|
| <div class="pt-2 border-t border-indigo-200 flex justify-between">
|
| <span class="text-gray-500">Memo</span>
|
| <span id="mb-memo" class="font-bold text-red-500 select-all">...</span>
|
| </div>
|
| </div>
|
| </div>
|
| <div id="content-binance" class="hidden text-center py-6">
|
| <img id="binance-qr-img"
|
| src="https://img.upanh.moe/svG8VPr7/z7378722800950-37af8ee1f0cd5dafae8366cb441490ed-jpg.jpg"
|
| class="w-48 h-auto mx-auto border-4 border-white shadow-lg rounded-xl mb-4" />
|
| <p class="text-sm text-gray-500 mb-2">Binance Pay / Wallet</p>
|
| <div class="bg-yellow-50 text-yellow-800 p-3 rounded-xl text-sm font-medium border border-yellow-100">
|
| Memo: <span id="bn-memo" class="font-bold">...</span>
|
| </div>
|
| </div>
|
| </div>
|
| <div class="p-4 bg-gray-50 border-t border-gray-100 flex justify-end gap-3">
|
| <button onclick="closeModal('depositModal')"
|
| class="px-4 py-2 text-gray-500 font-bold hover:bg-gray-200 rounded-lg transition">
|
| Hủy
|
| </button>
|
| <button onclick="confirmDeposit()" id="btn-confirm-deposit"
|
| class="px-6 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 shadow-lg shadow-indigo-200 transition">
|
| ✅ Đã chuyển tiền
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="successModal"
|
| class="fixed inset-0 bg-gray-900/60 z-60 hidden flex items-center justify-center backdrop-blur-sm">
|
| <div class="bg-white rounded-3xl shadow-2xl p-8 w-full max-w-sm text-center modal-enter mx-4">
|
| <div class="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
| <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
| </svg>
|
| </div>
|
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Thành công!</h2>
|
| <p id="success-msg" class="text-gray-500 mb-6">Yêu cầu đã được gửi.</p>
|
| <button onclick="closeModal('successModal')"
|
| class="w-full py-3 bg-green-600 text-white rounded-xl font-bold hover:bg-green-700 transition">
|
| OK
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| const API = "/api";
|
| const socket = io();
|
| let userKey = localStorage.getItem("apiKey");
|
| let currentAmount = 0;
|
| let currentMethod = "MBBank";
|
|
|
|
|
| function getHWID() {
|
| let id = localStorage.getItem("hwid");
|
| if (!id) {
|
| id =
|
| "hw-" + Math.random().toString(36).substr(2, 9) + "-" + Date.now();
|
| localStorage.setItem("hwid", id);
|
| }
|
| return id;
|
| }
|
|
|
|
|
| if (userKey) {
|
| refreshMe();
|
| } else {
|
| document.getElementById("auth-screen").classList.remove("hidden");
|
| }
|
|
|
| function switchAuthTab(tab) {
|
| const login = document.getElementById("login-form");
|
| const reg = document.getElementById("register-form");
|
| const tLog = document.getElementById("tab-login");
|
| const tReg = document.getElementById("tab-register");
|
|
|
| if (tab === "login") {
|
| login.classList.remove("hidden");
|
| reg.classList.add("hidden");
|
| tLog.className =
|
| "w-1/2 pb-3 text-center font-bold border-b-2 border-indigo-600 text-indigo-600 transition";
|
| tReg.className =
|
| "w-1/2 pb-3 text-center font-bold text-gray-400 border-b-2 border-transparent hover:text-indigo-500 transition";
|
| } else {
|
| login.classList.add("hidden");
|
| reg.classList.remove("hidden");
|
| tReg.className =
|
| "w-1/2 pb-3 text-center font-bold border-b-2 border-green-500 text-green-500 transition";
|
| tLog.className =
|
| "w-1/2 pb-3 text-center font-bold text-gray-400 border-b-2 border-transparent hover:text-indigo-500 transition";
|
| }
|
| }
|
|
|
| async function login() {
|
| const u = document.getElementById("l_user").value;
|
| const p = document.getElementById("l_pass").value;
|
| try {
|
| const res = await fetch(`${API}/login`, {
|
| method: "POST",
|
| headers: { "Content-Type": "application/json" },
|
| body: JSON.stringify({ username: u, password: p }),
|
| });
|
| const data = await res.json();
|
| if (data.success) {
|
| localStorage.setItem("apiKey", data.user.api_key);
|
| userKey = data.user.api_key;
|
| loadUser(data.user);
|
| } else document.getElementById("auth-msg").innerText = data.error;
|
| } catch (e) {
|
| console.error(e);
|
| }
|
| }
|
|
|
| async function register() {
|
| const u = document.getElementById("r_user").value;
|
| const p = document.getElementById("r_pass").value;
|
| const hwid = getHWID();
|
| const res = await fetch(`${API}/register`, {
|
| method: "POST",
|
| headers: { "Content-Type": "application/json" },
|
| body: JSON.stringify({ username: u, password: p, hwid: hwid }),
|
| });
|
| const data = await res.json();
|
| if (data.success) {
|
| alert(data.message);
|
| switchAuthTab("login");
|
| } else alert(data.error);
|
| }
|
|
|
| function loadUser(user) {
|
| document.getElementById("auth-screen").classList.add("hidden");
|
| document.getElementById("dashboard").classList.remove("hidden");
|
|
|
| document.getElementById("display-name").innerText = user.username;
|
| document.getElementById("avatar-char").innerText = user.username
|
| .charAt(0)
|
| .toUpperCase();
|
| document.getElementById("credits").innerText = user.credits;
|
| document.getElementById("api-key").innerText = user.api_key;
|
| document.getElementById("user-role").innerText =
|
| user.role === "admin" ? "Administrator" : "Member";
|
|
|
| if (user.role === "admin") {
|
| document.getElementById("sidebar-admin").classList.remove("hidden");
|
| } else {
|
| document.getElementById("sidebar-admin").classList.add("hidden");
|
| }
|
|
|
|
|
| showPage("dashboard");
|
| }
|
|
|
| function logout() {
|
| localStorage.removeItem("apiKey");
|
| location.reload();
|
| }
|
|
|
|
|
| function showPage(pageId) {
|
|
|
| document.getElementById("page-dashboard").classList.add("hidden");
|
| document.getElementById("page-history").classList.add("hidden");
|
| document.getElementById("page-admin").classList.add("hidden");
|
|
|
|
|
| document
|
| .querySelectorAll(".nav-item")
|
| .forEach((el) =>
|
| el.classList.remove(
|
| "active",
|
| "bg-indigo-50",
|
| "text-indigo-600",
|
| "border-r-4",
|
| "border-indigo-600"
|
| )
|
| );
|
|
|
|
|
| const target = document.getElementById(`page-${pageId}`);
|
| if (target) target.classList.remove("hidden");
|
|
|
|
|
| const nav = document.getElementById(`nav-${pageId}`);
|
| if (nav) {
|
| nav.classList.add("active", "bg-indigo-50", "text-indigo-600");
|
| }
|
|
|
| if (pageId === "history") loadHistoryData();
|
| if (pageId === "admin") loadAdminData();
|
| }
|
|
|
|
|
| async function solve() {
|
| const btn = document.getElementById("btn-solve");
|
| const log = document.getElementById("result-log");
|
|
|
| btn.disabled = true;
|
| btn.innerHTML = `<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Processing...`;
|
|
|
| try {
|
| const res = await fetch(`${API}/solve`, {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json",
|
| "x-api-key": userKey,
|
| },
|
| body: JSON.stringify({ action: "default" }),
|
| });
|
| const data = await res.json();
|
| if (data.success) {
|
| log.value = `[SUCCESS] Token received:\n${data.token}`;
|
| refreshMe();
|
| } else {
|
| log.value = `[FAILED] Error: ${data.error}`;
|
| }
|
| } catch (e) {
|
| log.value = `[ERROR] Connection failed: ${e}`;
|
| }
|
|
|
| btn.disabled = false;
|
| btn.innerHTML = `<span>🚀</span> Giải Captcha (-1 Credit)`;
|
| }
|
|
|
|
|
| function openDepositModal(amount) {
|
| currentAmount = amount;
|
| const user = document.getElementById("display-name").innerText;
|
| const memo = `NAP ${user}`.toUpperCase();
|
| const vnd = amount * 25000;
|
|
|
| document.getElementById(
|
| "modal-amount-display"
|
| ).innerText = `$${amount}`;
|
| document.getElementById(
|
| "mb-qr-img"
|
| ).src = `https://img.vietqr.io/image/MB-0972121082000-compact2.jpg?amount=${vnd}&addInfo=${encodeURIComponent(
|
| memo
|
| )}`;
|
| document.getElementById("mb-memo").innerText = memo;
|
| document.getElementById("bn-memo").innerText = memo;
|
|
|
| switchPaymentMethod("mb");
|
| openModal("depositModal");
|
| }
|
|
|
| function switchPaymentMethod(method) {
|
| currentMethod = method === "mb" ? "MBBank" : "Binance";
|
| if (method === "mb") {
|
| document.getElementById("content-mb").classList.remove("hidden");
|
| document.getElementById("content-binance").classList.add("hidden");
|
| document.getElementById("btn-tab-mb").className =
|
| "flex-1 py-2 rounded-lg text-sm font-bold bg-white text-indigo-600 shadow-sm transition";
|
| document.getElementById("btn-tab-binance").className =
|
| "flex-1 py-2 rounded-lg text-sm font-bold text-gray-500 hover:text-gray-700 transition";
|
| } else {
|
| document.getElementById("content-mb").classList.add("hidden");
|
| document.getElementById("content-binance").classList.remove("hidden");
|
| document.getElementById("btn-tab-binance").className =
|
| "flex-1 py-2 rounded-lg text-sm font-bold bg-white text-yellow-600 shadow-sm transition";
|
| document.getElementById("btn-tab-mb").className =
|
| "flex-1 py-2 rounded-lg text-sm font-bold text-gray-500 hover:text-gray-700 transition";
|
| }
|
| }
|
|
|
| async function confirmDeposit() {
|
| const btn = document.getElementById("btn-confirm-deposit");
|
| const old = btn.innerText;
|
| btn.disabled = true;
|
| btn.innerText = "...";
|
| try {
|
| const res = await fetch(`${API}/deposit`, {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json",
|
| "x-api-key": userKey,
|
| },
|
| body: JSON.stringify({
|
| amount: currentAmount,
|
| method: currentMethod,
|
| }),
|
| });
|
| const data = await res.json();
|
| if (data.success) {
|
| closeModal("depositModal");
|
| openModal("successModal");
|
| } else alert(data.error);
|
| } catch (e) {
|
| alert(e.message);
|
| }
|
| btn.disabled = false;
|
| btn.innerText = old;
|
| }
|
|
|
|
|
| async function loadHistoryData() {
|
| const resU = await fetch(`${API}/history/usage`, {
|
| headers: { "x-api-key": userKey },
|
| });
|
| const dataU = await resU.json();
|
| document.getElementById("table-usage-body").innerHTML =
|
| dataU
|
| .map(
|
| (u) => `
|
| <tr class="bg-white hover:bg-gray-50 transition border-b border-gray-50/50">
|
| <td class="p-4 pl-6 text-xs text-gray-400 font-mono">${new Date(
|
| u.timestamp
|
| ).toLocaleString()}</td>
|
| <td class="p-4 font-bold text-gray-700 text-sm">${u.action}</td>
|
| <td class="p-4 text-xs text-gray-400 font-mono truncate max-w-xs" title="${u.details
|
| }">${u.details.includes("labs.google") ? "[HIDDEN]" : u.details
|
| }</td>
|
| </tr>
|
| `
|
| )
|
| .join("") ||
|
| '<tr><td colspan="3" class="p-4 text-center text-gray-400 text-sm">Chưa có dữ liệu</td></tr>';
|
|
|
| const resT = await fetch(`${API}/history/transactions`, {
|
| headers: { "x-api-key": userKey },
|
| });
|
| const dataT = await resT.json();
|
| document.getElementById("table-deposit-body").innerHTML =
|
| dataT
|
| .map((t) => {
|
| let color =
|
| t.status === "approved"
|
| ? "text-green-600 bg-green-50"
|
| : t.status === "rejected"
|
| ? "text-red-600 bg-red-50"
|
| : "text-yellow-600 bg-yellow-50";
|
| return `
|
| <tr class="bg-white hover:bg-gray-50 transition border-b border-gray-50/50">
|
| <td class="p-4 pl-6 text-xs text-gray-400 font-mono">${new Date(
|
| t.created_at
|
| ).toLocaleString()}</td>
|
| <td class="p-4 font-bold text-gray-800">$${t.amount}</td>
|
| <td class="p-4 text-sm text-gray-500">${t.method}</td>
|
| <td class="p-4"><span class="px-2.5 py-1 rounded-lg text-xs font-bold uppercase ${color}">${t.status
|
| }</span></td>
|
| </tr>
|
| `;
|
| })
|
| .join("") ||
|
| '<tr><td colspan="4" class="p-4 text-center text-gray-400 text-sm">Chưa có dữ liệu</td></tr>';
|
| }
|
|
|
| function switchHistoryTab(tab) {
|
| if (tab === "usage") {
|
| document
|
| .getElementById("hist-usage-content")
|
| .classList.remove("hidden");
|
| document
|
| .getElementById("hist-deposit-content")
|
| .classList.add("hidden");
|
| document.getElementById("tab-hist-usage").className =
|
| "pb-2 font-bold text-sm text-indigo-600 border-b-2 border-indigo-600 transition";
|
| document.getElementById("tab-hist-deposit").className =
|
| "pb-2 font-bold text-sm text-gray-400 hover:text-gray-600 transition";
|
| } else {
|
| document.getElementById("hist-usage-content").classList.add("hidden");
|
| document
|
| .getElementById("hist-deposit-content")
|
| .classList.remove("hidden");
|
| document.getElementById("tab-hist-deposit").className =
|
| "pb-2 font-bold text-sm text-indigo-600 border-b-2 border-indigo-600 transition";
|
| document.getElementById("tab-hist-usage").className =
|
| "pb-2 font-bold text-sm text-gray-400 hover:text-gray-600 transition";
|
| }
|
| }
|
|
|
|
|
| async function loadAdminData() {
|
| const resT = await fetch(`${API}/admin/transactions`, {
|
| headers: { "x-api-key": userKey },
|
| });
|
| const dataT = await resT.json();
|
| document.getElementById("admin-trans-list").innerHTML =
|
| dataT
|
| .filter((t) => t.status === "pending")
|
| .map(
|
| (t) => `
|
| <tr class="bg-white hover:bg-yellow-50/30 transition border-b border-gray-50">
|
| <td class="p-3 pl-4 font-bold text-gray-700">${t.username}</td>
|
| <td class="p-3 font-mono text-indigo-600">$${t.amount}</td>
|
| <td class="p-3 text-xs text-gray-400">${t.method}</td>
|
| <td class="p-3 pr-4 text-right flex justify-end gap-1">
|
| <button onclick="processTrans(${t.id}, 'approve')" class="p-1 px-2 rounded bg-green-100 text-green-600 hover:bg-green-200 font-bold text-xs">✔</button>
|
| <button onclick="processTrans(${t.id}, 'reject')" class="p-1 px-2 rounded bg-red-100 text-red-600 hover:bg-red-200 font-bold text-xs">✘</button>
|
| </td>
|
| </tr>
|
| `
|
| )
|
| .join("") ||
|
| '<tr><td colspan="4" class="p-6 text-center text-gray-300 text-sm italic">Không có yêu cầu nào</td></tr>';
|
|
|
| const resU = await fetch(`${API}/admin/users`, {
|
| headers: { "x-api-key": userKey },
|
| });
|
| const dataU = await resU.json();
|
| document.getElementById("admin-user-list").innerHTML = dataU
|
| .map(
|
| (u) => `
|
| <tr class="bg-white hover:bg-indigo-50/30 transition border-b border-gray-50">
|
| <td class="p-3 pl-4 font-medium text-gray-700">${u.username
|
| }</td>
|
| <td class="p-3 font-bold text-gray-800">${u.credits}</td>
|
| <td class="p-3"><span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase ${u.role === "admin"
|
| ? "bg-red-100 text-red-600"
|
| : "bg-gray-100 text-gray-500"
|
| }">${u.role}</span></td>
|
| <td class="p-3 pr-4 text-right">
|
| <button onclick="deleteUser(${u.id}, '${u.username
|
| }')" class="text-red-400 hover:text-red-600 transition p-1">
|
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
| </svg>
|
| </button>
|
| </td>
|
| </tr>
|
| `
|
| )
|
| .join("");
|
| }
|
|
|
| async function processTrans(id, act) {
|
| if (!confirm(`Xác nhận ${act}?`)) return;
|
| await fetch(`${API}/admin/approve`, {
|
| method: "POST",
|
| headers: { "Content-Type": "application/json", "x-api-key": userKey },
|
| body: JSON.stringify({ transId: id, action: act }),
|
| });
|
| loadAdminData();
|
| refreshMe();
|
| }
|
|
|
| async function deleteUser(id, name) {
|
| if (
|
| !confirm(
|
| `Bạn có chắc chắn muốn xóa user "${name}"? Thao tác này không thể hoàn tác.`
|
| )
|
| )
|
| return;
|
| try {
|
| const res = await fetch(`${API}/admin/delete-user`, {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json",
|
| "x-api-key": userKey,
|
| },
|
| body: JSON.stringify({ userId: id }),
|
| });
|
| const data = await res.json();
|
| if (data.success) {
|
| loadAdminData();
|
| } else alert(data.error);
|
| } catch (e) {
|
| alert(e.message);
|
| }
|
| }
|
|
|
| async function refreshMe() {
|
| const res = await fetch(`${API}/me`, {
|
| headers: { "x-api-key": userKey },
|
| });
|
| const data = await res.json();
|
| if (data.username) loadUser(data);
|
| else {
|
| localStorage.removeItem("apiKey");
|
| location.reload();
|
| }
|
| }
|
|
|
|
|
| function openModal(id) {
|
| document.getElementById(id).classList.remove("hidden");
|
| }
|
| function closeModal(id) {
|
| document.getElementById(id).classList.add("hidden");
|
| }
|
|
|
|
|
| socket.on("user:credit-update", () => refreshMe());
|
| socket.on("transaction-updated", () => loadAdminData());
|
| socket.on("admin:new-transaction", () => loadAdminData());
|
| </script>
|
| </body>
|
|
|
| </html> |
