<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Status History - FB Manager</title>
<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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.timeline-item::before {
content: '';
position: absolute;
left: 19px;
top: 40px;
bottom: -20px;
width: 2px;
background: linear-gradient(to bottom, #e5e7eb, transparent);
}
.timeline-item:last-child::before {
display: none;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.status-live { background: #dcfce7; color: #166534; }
.status-die { background: #fee2e2; color: #991b1b; }
.status-checkpoint { background: #fef3c7; color: #92400e; }
.status-locked { background: #e0e7ff; color: #3730a3; }
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:block">
<div class="p-6">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
<i class="fab fa-facebook text-white text-xl"></i>
</div>
<h1 class="text-xl font-bold text-gray-800">FB Manager</h1>
</div>
</div>
<nav class="px-3 space-y-1">
<a href="dashboard.html" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chart-line w-5 mr-3"></i>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-users w-5 mr-3"></i>
Quản lý Accounts
</a>
<a href="account-history.html" class="flex items-center px-4 py-3 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg">
<i class="fas fa-history w-5 mr-3"></i>
Lịch sử Log
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-bell w-5 mr-3"></i>
Cảnh báo
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
<i class="fas fa-cog w-5 mr-3"></i>
Cài đặt
</a>
</nav>
</aside>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Header -->
<header class="bg-white border-b border-gray-200 sticky top-0 z-10">
<div class="px-6 py-4">
<div class="flex items-center space-x-3 mb-4">
<a href="dashboard.html" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-arrow-left"></i>
</a>
<div>
<h2 class="text-2xl font-bold text-gray-800">Lịch Sử Account #FB12345</h2>
<p class="text-sm text-gray-500 mt-1">Theo dõi chi tiết thay đổi trạng thái</p>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-6">
<!-- Account Info Card -->
<div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl shadow-lg p-6 mb-6 text-white">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center space-x-3 mb-4">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
<i class="fab fa-facebook text-3xl"></i>
</div>
<div>
<h3 class="text-2xl font-bold">Account #FB12345</h3>
<p class="text-blue-100 text-sm">Email: fb12345@example.com</p>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white bg-opacity-10 rounded-lg p-3 backdrop-blur-sm">
<p class="text-blue-100 text-xs mb-1">Status Hiện Tại</p>
<p class="text-xl font-bold">DIE</p>
</div>
<div class="bg-white bg-opacity-10 rounded-lg p-3 backdrop-blur-sm">
<p class="text-blue-100 text-xs mb-1">Nguồn</p>
<p class="text-xl font-bold">Supplier A</p>
</div>
<div class="bg-white bg-opacity-10 rounded-lg p-3 backdrop-blur-sm">
<p class="text-blue-100 text-xs mb-1">Tổng Thay Đổi</p>
<p class="text-xl font-bold">12</p>
</div>
<div class="bg-white bg-opacity-10 rounded-lg p-3 backdrop-blur-sm">
<p class="text-blue-100 text-xs mb-1">Uptime</p>
<p class="text-xl font-bold">89.5%</p>
</div>
</div>
</div>
<button class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg text-sm font-medium transition">
<i class="fas fa-download mr-2"></i>
Export
</button>
</div>
</div>
<!-- Filters -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-6 border border-gray-100">
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center space-x-2">
<i class="fas fa-filter text-gray-400"></i>
<span class="text-sm font-medium text-gray-700">Lọc:</span>
</div>
<div class="flex items-center space-x-2 bg-gray-50 px-3 py-2 rounded-lg">
<i class="far fa-calendar text-gray-500 text-sm"></i>
<input type="date" value="2025-12-01" class="bg-transparent text-sm text-gray-700 focus:outline-none">
<span class="text-gray-400">→</span>
<input type="date" value="2025-12-29" class="bg-transparent text-sm text-gray-700 focus:outline-none">
</div>
<select class="bg-gray-50 px-3 py-2 rounded-lg text-sm text-gray-700 focus:outline-none border-0">
<option>Tất cả status</option>
<option>LIVE → DIE</option>
<option>DIE → LIVE</option>
<option>LIVE → CHECKPOINT</option>
<option>CHECKPOINT → LIVE</option>
</select>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
<i class="fas fa-search mr-2"></i>
Áp dụng
</button>
<button class="text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg text-sm font-medium transition">
<i class="fas fa-redo mr-2"></i>
Reset
</button>
</div>
</div>
<!-- Timeline -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-800">Timeline Thay Đổi</h3>
<span class="text-sm text-gray-500">Hiển thị 12 records</span>
</div>
<div class="space-y-6">
<!-- Timeline Item 1 -->
<div class="timeline-item relative pl-12">
<div class="absolute left-0 top-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-down text-red-600"></i>
</div>
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
<div class="flex items-start justify-between mb-2">
<div>
<p class="text-sm font-semibold text-gray-800">
<span class="status-badge status-live">LIVE</span>
<i class="fas fa-arrow-right mx-2 text-gray-400"></i>
<span class="status-badge status-die">DIE</span>
</p>
</div>
<span class="text-xs text-gray-500">29/12/2025 14:23:45</span>
</div>
<div class="mt-3 space-y-2 text-sm">
<div class="flex items-center text-gray-600">
<i class="fas fa-user w-4 mr-2 text-gray-400"></i>
<span>Changed by: <span class="font-medium">System Auto</span></span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-globe w-4 mr-2 text-gray-400"></i>
<span>IP: 103.56.78.90</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-info-circle w-4 mr-2 text-gray-400"></i>
<span>Reason: Login failed - Invalid credentials</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-tag w-4 mr-2 text-gray-400"></i>
<span>Source: Supplier A</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item relative pl-12">
<div class="absolute left-0 top-0 w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-up text-green-600"></i>
</div>
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
<div class="flex items-start justify-between mb-2">
<div>
<p class="text-sm font-semibold text-gray-800">
<span class="status-badge status-checkpoint">CHECKPOINT</span>
<i class="fas fa-arrow-right mx-2 text-gray-400"></i>
<span class="status-badge status-live">LIVE</span>
</p>
</div>
<span class="text-xs text-gray-500">28/12/2025 09:15:22</span>
</div>
<div class="mt-3 space-y-2 text-sm">
<div class="flex items-center text-gray-600">
<i class="fas fa-user w-4 mr-2 text-gray-400"></i>
<span>Changed by: <span class="font-medium">Admin User</span></span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-globe w-4 mr-2 text-gray-400"></i>
<span>IP: 192.168.1.100</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-info-circle w-4 mr-2 text-gray-400"></i>
<span>Reason: Checkpoint cleared successfully</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-clock w-4 mr-2 text-gray-400"></i>
<span>Downtime: 6 giờ 23 phút</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item relative pl-12">
<div class="absolute left-0 top-0 w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-yellow-600"></i>
</div>
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
<div class="flex items-start justify-between mb-2">
<div>
<p class="text-sm font-semibold text-gray-800">
<span class="status-badge status-live">LIVE</span>
<i class="fas fa-arrow-right mx-2 text-gray-400"></i>
<span class="status-badge status-checkpoint">CHECKPOINT</span>
</p>
</div>
<span class="text-xs text-gray-500">27/12/2025 18:52:11</span>
</div>
<div class="mt-3 space-y-2 text-sm">
<div class="flex items-center text-gray-600">
<i class="fas fa-user w-4 mr-2 text-gray-400"></i>
<span>Changed by: <span class="font-medium">System Auto</span></span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-globe w-4 mr-2 text-gray-400"></i>
<span>IP: 103.56.78.90</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-info-circle w-4 mr-2 text-gray-400"></i>
<span>Reason: Suspicious activity detected</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="timeline-item relative pl-12">
<div class="absolute left-0 top-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-sync-alt text-blue-600"></i>
</div>
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
<div class="flex items-start justify-between mb-2">
<div>
<p class="text-sm font-semibold text-gray-800">
<span class="status-badge status-die">DIE</span>
<i class="fas fa-arrow-right mx-2 text-gray-400"></i>
<span class="status-badge status-live">LIVE</span>
</p>
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-700 mt-2">
<i class="fas fa-heart-pulse mr-1"></i>
Recovered
</span>
</div>
<span class="text-xs text-gray-500">26/12/2025 11:30:05</span>
</div>
<div class="mt-3 space-y-2 text-sm">
<div class="flex items-center text-gray-600">
<i class="fas fa-user w-4 mr-2 text-gray-400"></i>
<span>Changed by: <span class="font-medium">Support Team</span></span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-globe w-4 mr-2 text-gray-400"></i>
<span>IP: 172.16.0.5</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-info-circle w-4 mr-2 text-gray-400"></i>
<span>Reason: Manual recovery - Password reset successful</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-clock w-4 mr-2 text-gray-400"></i>
<span>Downtime: 18 giờ 45 phút</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="timeline-item relative pl-12">
<div class="absolute left-0 top-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-down text-red-600"></i>
</div>
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
<div class="flex items-start justify-between mb-2">
<div>
<p class="text-sm font-semibold text-gray-800">
<span class="status-badge status-live">LIVE</span>
<i class="fas fa-arrow-right mx-2 text-gray-400"></i>
<span class="status-badge status-die">DIE</span>
</p>
</div>
<span class="text-xs text-gray-500">25/12/2025 16:45:20</span>
</div>
<div class="mt-3 space-y-2 text-sm">
<div class="flex items-center text-gray-600">
<i class="fas fa-user w-4 mr-2 text-gray-400"></i>
<span>Changed by: <span class="font-medium">System Auto</span></span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-globe w-4 mr-2 text-gray-400"></i>
<span>IP: 103.56.78.90</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-info-circle w-4 mr-2 text-gray-400"></i>
<span>Reason: Account disabled by Facebook</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 6 - First Record -->
<div class="timeline-item relative pl-12">
<div class="absolute left-0 top-0 w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
<i class="fas fa-plus text-purple-600"></i>
</div>
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
<div class="flex items-start justify-between mb-2">
<div>
<p class="text-sm font-semibold text-gray-800">
<span class="status-badge status-live">LIVE</span>
</p>
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-purple-100 text-purple-700 mt-2">
<i class="fas fa-sparkles mr-1"></i>
Account Created
</span>
</div>
<span class="text-xs text-gray-500">20/12/2025 08:00:00</span>
</div>
<div class="mt-3 space-y-2 text-sm">
<div class="flex items-center text-gray-600">
<i class="fas fa-user w-4 mr-2 text-gray-400"></i>
<span>Created by: <span class="font-medium">Import System</span></span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-tag w-4 mr-2 text-gray-400"></i>
<span>Source: Supplier A - Batch #2024-12</span>
</div>
<div class="flex items-center text-gray-600">
<i class="fas fa-info-circle w-4 mr-2 text-gray-400"></i>
<span>Initial import from supplier</span>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="flex items-center justify-between mt-8 pt-6 border-t border-gray-200">
<p class="text-sm text-gray-600">
Hiển thị <span class="font-medium">1-12</span> trong tổng số <span class="font-medium">12</span> records
</p>
<div class="flex items-center space-x-2">
<button class="px-3 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-lg hover:bg-gray-200 transition disabled:opacity-50" disabled>
<i class="fas fa-chevron-left"></i>
</button>
<button class="px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg">
1
</button>
<button class="px-3 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-lg hover:bg-gray-200 transition disabled:opacity-50" disabled>
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Số dòng: 414