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