443 lines
25 KiB
HTML
443 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DH-HIS | Quản Trị & Cấu Hình Hệ Thống Giao Ban</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body class="bg-slate-100 text-slate-800 font-sans antialiased min-h-screen flex flex-col">
|
|
|
|
<!-- TOP HEADER -->
|
|
<header class="bg-gradient-to-r from-slate-900 via-indigo-950 to-slate-900 text-white shadow-lg sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex flex-wrap items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-indigo-600/30 p-2 rounded-xl border border-indigo-400/30 text-cyan-300">
|
|
<i class="fa-solid fa-sliders text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold tracking-tight uppercase flex items-center gap-2">
|
|
DH-HIS Giao Ban | Quản Trị Hệ Thống
|
|
<span class="text-xs bg-indigo-500/30 text-indigo-200 border border-indigo-400/30 px-2 py-0.5 rounded-full font-mono" id="appVersionBadge">v1.0.2</span>
|
|
</h1>
|
|
<p class="text-xs text-slate-400">Thiết lập kết nối CSDL, bảo mật mã hóa, kiểm tra cập nhật & theo dõi nhật ký</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<a href="index.html?v=1.0.2" class="bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold px-3 py-2 rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
|
|
<i class="fa-solid fa-hospital-user"></i>
|
|
<span>Mở Báo Cáo Giao Ban</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- NAVIGATION TABS -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 mt-4 w-full">
|
|
<div class="flex border-b border-slate-200 gap-2 flex-wrap">
|
|
<button class="admin-tab active px-5 py-2.5 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 flex items-center gap-2 transition-all" data-tab="tab-config">
|
|
<i class="fa-solid fa-database"></i>
|
|
<span>1. Cấu Hình Kết Nối & CSDL</span>
|
|
</button>
|
|
<button class="admin-tab px-5 py-2.5 text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-800 flex items-center gap-2 transition-all" data-tab="tab-update">
|
|
<i class="fa-solid fa-cloud-arrow-down"></i>
|
|
<span>2. Cập Nhật Phiên Bản (Gitea)</span>
|
|
</button>
|
|
<button class="admin-tab px-5 py-2.5 text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-800 flex items-center gap-2 transition-all" data-tab="tab-logs">
|
|
<i class="fa-solid fa-terminal"></i>
|
|
<span>3. Nhật Ký Hoạt Động (Live Logs)</span>
|
|
</button>
|
|
<button class="admin-tab px-5 py-2.5 text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-800 flex items-center gap-2 transition-all" data-tab="tab-license">
|
|
<i class="fa-solid fa-shield-halved"></i>
|
|
<span>4. Quản Lý Bản Quyền (License)</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MAIN CONTAINER -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 py-6 flex-1 w-full">
|
|
|
|
<!-- ========================================== -->
|
|
<!-- TAB 1: CẤU HÌNH KẾT NỐI -->
|
|
<!-- ========================================== -->
|
|
<div id="tab-config" class="admin-content space-y-6">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
|
|
<!-- Server & PostgreSQL Config Form -->
|
|
<div class="lg:col-span-6 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
|
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<i class="fa-solid fa-server text-indigo-600"></i>
|
|
<span>Cấu Hình Web Server & CSDL PostgreSQL</span>
|
|
</h2>
|
|
<span class="text-[11px] bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">Mã hóa AES-256</span>
|
|
</div>
|
|
|
|
<form id="formConfig" class="p-5 space-y-4 text-xs">
|
|
|
|
<!-- Server Settings -->
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 mb-1">Cổng Web (Port):</label>
|
|
<input type="number" id="cfgPort" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-bold" value="3000">
|
|
</div>
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 mb-1">Đường dẫn quản trị:</label>
|
|
<input type="text" id="cfgAdminPath" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" value="/admin">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PostgreSQL Settings -->
|
|
<div class="border-t border-slate-200 pt-3 space-y-3">
|
|
<div class="font-bold text-slate-800 text-xs flex items-center gap-1.5">
|
|
<i class="fa-solid fa-database text-blue-600"></i> Thông tin máy chủ PostgreSQL:
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="col-span-2">
|
|
<label class="block font-medium text-slate-600 mb-1">Địa chỉ IP / Host:</label>
|
|
<input type="text" id="cfgDbHost" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value="192.168.50.79">
|
|
</div>
|
|
<div>
|
|
<label class="block font-medium text-slate-600 mb-1">Port:</label>
|
|
<input type="number" id="cfgDbPort" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value="5437">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="block font-medium text-slate-600 mb-1">Người dùng (User):</label>
|
|
<input type="text" id="cfgDbUser" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value="postgres">
|
|
</div>
|
|
<div>
|
|
<label class="block font-medium text-slate-600 mb-1 flex items-center justify-between">
|
|
<span>Mật khẩu:</span>
|
|
<button type="button" id="btnToggleDbPass" class="text-[10px] text-indigo-600 hover:underline">Hiện</button>
|
|
</label>
|
|
<input type="password" id="cfgDbPassword" placeholder="•••••••• (Giữ nguyên hoặc nhập mới)" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block font-medium text-slate-600 mb-1">CSDL mặc định (Default DB):</label>
|
|
<input type="text" id="cfgDbDefault" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value="an_omon_full_04052026">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Connection Button -->
|
|
<div class="pt-2 flex items-center justify-between">
|
|
<button type="button" id="btnTestConnection" class="bg-slate-800 hover:bg-slate-900 text-white font-semibold py-2 px-3.5 rounded-lg flex items-center gap-1.5 transition-all">
|
|
<i class="fa-solid fa-bolt text-amber-400"></i>
|
|
<span>Thử Kết Nối (Test Connection)</span>
|
|
</button>
|
|
<div id="testConnResult" class="text-xs font-semibold"></div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="pt-4 border-t border-slate-200 flex justify-end">
|
|
<button type="submit" id="btnSaveConfig" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-6 rounded-lg shadow-md flex items-center gap-2 transition-all text-xs">
|
|
<i class="fa-solid fa-floppy-disk"></i>
|
|
<span>Lưu Cấu Hình & Mã Hóa</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Databases List Management -->
|
|
<div class="lg:col-span-6 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
|
|
<div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
|
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<i class="fa-solid fa-list text-blue-600"></i>
|
|
<span>Danh Sách CSDL Bệnh Viện (Dropdown)</span>
|
|
</h2>
|
|
<button id="btnAddDbRow" class="bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 px-2.5 py-1 rounded-lg text-xs font-bold flex items-center gap-1">
|
|
<i class="fa-solid fa-plus"></i> Thêm CSDL
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-4 flex-1 overflow-y-auto">
|
|
<table class="w-full text-left text-xs border-collapse">
|
|
<thead class="bg-slate-100 text-slate-700 font-semibold border-b border-slate-200">
|
|
<tr>
|
|
<th class="py-2 px-2.5 w-44">Tên CSDL (DB Name)</th>
|
|
<th class="py-2 px-2.5">Tên Hiển Thị (Label)</th>
|
|
<th class="py-2 px-2 w-16 text-center">Xóa</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="bodyDbList" class="divide-y divide-slate-200">
|
|
<!-- Dynamically loaded -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="p-3 bg-amber-50/70 border-t border-amber-200 text-amber-800 text-[11px] leading-relaxed">
|
|
<i class="fa-solid fa-circle-info mr-1"></i> Các CSDL này sẽ hiển thị trong dropdown chọn CSDL ngoài trang báo cáo giao ban để người dùng chuyển đổi linh hoạt.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- TAB 2: CẬP NHẬT PHIÊN BẢN (GITEA) -->
|
|
<!-- ========================================== -->
|
|
<div id="tab-update" class="admin-content hidden space-y-6">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
|
|
<!-- Gitea Config -->
|
|
<div class="lg:col-span-5 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
|
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<i class="fa-solid fa-gear text-indigo-600"></i>
|
|
<span>Thiết Lập Gitea Package / Release</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<form id="formGiteaConfig" class="p-5 space-y-3.5 text-xs">
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 mb-1">Gitea URL:</label>
|
|
<input type="text" id="cfgGiteaUrl" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value="https://i.dh-his.com">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 mb-1">Tổ chức / Owner:</label>
|
|
<input type="text" id="cfgGiteaOwner" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" value="ongtrieuhau">
|
|
</div>
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 mb-1">Repository:</label>
|
|
<input type="text" id="cfgGiteaRepo" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" value="web-giao-ban">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 mb-1 flex items-center justify-between">
|
|
<span>Personal Access Token (Để tải bản private):</span>
|
|
<button type="button" id="btnToggleToken" class="text-[10px] text-indigo-600 hover:underline">Hiện</button>
|
|
</label>
|
|
<input type="password" id="cfgGiteaToken" placeholder="•••••••• (Giữ nguyên hoặc nhập token mới)" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500">
|
|
</div>
|
|
|
|
<div class="pt-2 flex justify-end">
|
|
<button type="submit" class="bg-slate-800 hover:bg-slate-900 text-white font-bold py-2 px-4 rounded-lg flex items-center gap-1.5 transition-all">
|
|
<i class="fa-solid fa-check"></i>
|
|
<span>Lưu Cấu Hình Gitea</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Release Status & Action -->
|
|
<div class="lg:col-span-7 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
|
|
<div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
|
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<i class="fa-solid fa-code-compare text-blue-600"></i>
|
|
<span>Trạng Thái Phiên Bản & Tự Động Cập Nhật</span>
|
|
</h2>
|
|
<button id="btnCheckUpdate" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3.5 py-1.5 rounded-lg text-xs font-bold shadow-sm flex items-center gap-1.5 transition-all">
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
<span>Kiểm Tra Cập Nhật</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-6 flex-1 space-y-4">
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-4 rounded-xl border border-slate-200 bg-slate-50">
|
|
<div class="text-xs text-slate-500 font-semibold">Phiên Bản Đang Chạy:</div>
|
|
<div class="mt-1 text-2xl font-black text-slate-800" id="currentVerDisplay">v1.0.0</div>
|
|
</div>
|
|
|
|
<div class="p-4 rounded-xl border border-indigo-200 bg-indigo-50/40">
|
|
<div class="text-xs text-indigo-700 font-semibold">Phiên Bản Mới Nhất Trên Gitea:</div>
|
|
<div class="mt-1 text-2xl font-black text-indigo-700" id="latestVerDisplay">Đang kiểm tra...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="updateStatusBox" class="p-4 rounded-xl border border-slate-200 bg-white">
|
|
<div class="font-bold text-xs text-slate-700 mb-1" id="updateStatusTitle">Nội dung phiên bản:</div>
|
|
<div class="text-xs text-slate-600 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto" id="updateReleaseNotes">
|
|
Bấm nút "Kiểm Tra Cập Nhật" để truy vấn phiên bản mới nhất từ Gitea.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Button Apply Update -->
|
|
<div id="applyUpdateArea" class="hidden p-4 rounded-xl bg-emerald-50 border border-emerald-200 flex items-center justify-between gap-3">
|
|
<div>
|
|
<div class="font-bold text-xs text-emerald-900">Phát hiện bản cập nhật mới!</div>
|
|
<div class="text-[11px] text-emerald-700" id="updateAssetInfo">File: ...</div>
|
|
</div>
|
|
<button id="btnApplyUpdate" class="bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg font-bold text-xs shadow-md flex items-center gap-2 transition-all">
|
|
<i class="fa-solid fa-download"></i>
|
|
<span>Tải & Cập Nhật Tự Động</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- TAB 3: NHẬT KÝ HOẠT ĐỘNG (LIVE LOGS) -->
|
|
<!-- ========================================== -->
|
|
<div id="tab-logs" class="admin-content hidden space-y-4">
|
|
|
|
<!-- Toolbar Logs -->
|
|
<div class="bg-white p-3.5 rounded-2xl shadow-sm border border-slate-200 flex flex-wrap items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3 text-xs">
|
|
<span class="font-bold text-slate-700 flex items-center gap-1.5">
|
|
<i class="fa-solid fa-filter text-indigo-600"></i> Cấp độ log:
|
|
</span>
|
|
<select id="selectLogLevel" class="rounded-lg border border-slate-300 px-3 py-1.5 bg-slate-50 outline-none font-medium">
|
|
<option value="ALL">Tất cả (ALL)</option>
|
|
<option value="INFO">Thông tin (INFO)</option>
|
|
<option value="WARN">Cảnh báo (WARN)</option>
|
|
<option value="ERROR">Lỗi (ERROR)</option>
|
|
<option value="SQL">Truy vấn (SQL)</option>
|
|
</select>
|
|
|
|
<label class="inline-flex items-center gap-1.5 cursor-pointer text-slate-600 font-medium">
|
|
<input type="checkbox" id="chkAutoRefresh" class="rounded text-indigo-600" checked>
|
|
<span>Tự động cập nhật (3s)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button id="btnRefreshLogs" class="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold px-3 py-1.5 rounded-lg border border-slate-300 flex items-center gap-1">
|
|
<i class="fa-solid fa-rotate-right"></i> Làm mới
|
|
</button>
|
|
<button id="btnClearLogs" class="bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 text-xs font-semibold px-3 py-1.5 rounded-lg flex items-center gap-1">
|
|
<i class="fa-solid fa-trash-can"></i> Xóa log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Terminal Box -->
|
|
<div class="bg-slate-950 rounded-2xl p-4 shadow-xl border border-slate-800 font-mono text-xs overflow-hidden flex flex-col h-[600px]">
|
|
<div class="flex items-center justify-between pb-2 border-b border-slate-800 text-slate-500 text-[11px]">
|
|
<span>TERMINAL LOG STREAM (Ring buffer 500 dòng)</span>
|
|
<span id="logCountBadge" class="text-slate-400">0 dòng</span>
|
|
</div>
|
|
<div id="logTerminal" class="flex-1 overflow-y-auto space-y-1 mt-2 text-slate-300 leading-relaxed pr-2">
|
|
<div class="text-slate-500 italic">Đang tải nhật ký...</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- TAB 4: QUẢN LÝ BẢN QUYỀN (LICENSE) -->
|
|
<!-- ========================================== -->
|
|
<div id="tab-license" class="admin-content hidden space-y-6">
|
|
|
|
<!-- License Status Overview -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
|
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<i class="fa-solid fa-certificate text-amber-500"></i>
|
|
<span>Thông Tin Bản Quyền Web Giao Ban (DH-HIS)</span>
|
|
</h2>
|
|
<span id="licenseStatusBadge" class="text-xs px-2.5 py-1 rounded-full font-bold bg-slate-100 text-slate-600">Đang kiểm tra...</span>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
|
|
<span class="text-xs text-slate-500 block font-medium mb-1">Tên Bệnh Viện / Đơn Vị:</span>
|
|
<span id="licTenBV" class="text-sm font-bold text-slate-800 block">--</span>
|
|
<span class="text-[11px] text-slate-400 font-mono mt-0.5 block">Mã BVBH: <b id="licMabvbh" class="text-indigo-600">--</b></span>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
|
|
<span class="text-xs text-slate-500 block font-medium mb-1">Thời Hạn Sử Dụng:</span>
|
|
<span id="licDateExpires" class="text-sm font-bold text-slate-800 font-mono block">--</span>
|
|
<span id="licRemainingDays" class="text-[11px] text-slate-500 font-semibold mt-0.5 block">--</span>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
|
|
<span class="text-xs text-slate-500 block font-medium mb-1">Chức Năng Được Cấp:</span>
|
|
<span id="licTitle" class="text-sm font-bold text-slate-800 block">Sử dụng Web giao ban</span>
|
|
<span class="text-[11px] text-slate-400 font-mono mt-0.5 block">Key: <b id="licKey" class="text-slate-600">web_giao_ban</b></span>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
|
|
<span class="text-xs text-slate-500 block font-medium mb-1">Đối Tác & Ghi Chú:</span>
|
|
<span id="licDoiTac" class="text-sm font-bold text-slate-800 block">--</span>
|
|
<span id="licGhiChu" class="text-[11px] text-slate-500 mt-0.5 block italic">--</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="licenseAlertBox" class="mt-4 p-3.5 rounded-xl border text-xs flex items-center gap-2.5 bg-blue-50 border-blue-200 text-blue-800">
|
|
<i class="fa-solid fa-circle-info text-base"></i>
|
|
<span id="licenseAlertMsg">Đang tải trạng thái kích hoạt bản quyền...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- License Activation Form -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
|
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<i class="fa-solid fa-key text-indigo-600"></i>
|
|
<span>Nhập & Kích Hoạt Key Bản Quyền</span>
|
|
</h2>
|
|
<span class="text-xs text-slate-500 font-medium">Quy tắc chuẩn OTH.Adapter PrivateCode</span>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-4">
|
|
<div class="bg-amber-50 border border-amber-200 rounded-xl p-3.5 text-xs text-amber-800 flex items-start gap-2.5">
|
|
<i class="fa-solid fa-lightbulb text-amber-600 text-base mt-0.5"></i>
|
|
<div class="leading-relaxed">
|
|
<b>Hướng dẫn:</b> Quý khách chỉ dán chuỗi mã hóa bản quyền (phần ciphertext bắt đầu bằng <code class="bg-amber-100 px-1 py-0.5 rounded font-mono font-bold">U2FsdGVkX1...</code>). Hệ thống sẽ tự động giải mã bằng thuật toán OpenSSL AES-256-CBC, xác thực mã đơn vị, chức năng và kiểm tra thời hạn sử dụng trước khi kích hoạt.
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block font-semibold text-slate-700 text-xs mb-1.5 flex items-center justify-between">
|
|
<span>Chuỗi Key Bản Quyền (DECODE Token):</span>
|
|
<span class="text-slate-400 font-normal">Định dạng Base64 Salted__</span>
|
|
</label>
|
|
<textarea id="txtLicenseKey" rows="4" class="w-full rounded-xl border border-slate-300 p-3 bg-slate-50 font-mono text-xs outline-none focus:ring-2 focus:ring-indigo-500 text-slate-700 leading-relaxed resize-y" placeholder="Dán chuỗi token bản quyền (bắt đầu bằng U2FsdGVkX1...) vào đây..."></textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-2">
|
|
<button id="btnPasteSampleKey" type="button" class="text-xs text-indigo-600 hover:text-indigo-800 font-semibold flex items-center gap-1.5 py-2">
|
|
<i class="fa-solid fa-clipboard-check"></i>
|
|
<span>Dán Key Mẫu (Trà Cú)</span>
|
|
</button>
|
|
|
|
<button id="btnActivateLicense" type="button" class="bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700 text-white text-xs font-bold px-6 py-2.5 rounded-xl shadow-md flex items-center gap-2 transition-all">
|
|
<i class="fa-solid fa-check-double"></i>
|
|
<span>Kích Hoạt Key Bản Quyền</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- TOAST -->
|
|
<div id="toast" class="fixed bottom-4 right-4 z-50 bg-slate-900 text-white text-xs px-4 py-2.5 rounded-lg shadow-xl flex items-center gap-2 transform translate-y-20 opacity-0 transition-all duration-300">
|
|
<i class="fa-solid fa-circle-check text-emerald-400"></i>
|
|
<span id="toastMsg">Thông báo</span>
|
|
</div>
|
|
|
|
<script src="admin.js"></script>
|
|
</body>
|
|
</html>
|