<!DOCTYPE html>
<html lang=”vi”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dashboard | CAPITLAB Admin</title>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap” rel=”stylesheet”>
<link rel=”stylesheet” href=”index.css”>
<style>
.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { background: var(–clr-surface); border-right: 1px solid var(–clr-border); padding: 2rem; }
.admin-main { padding: 3rem; background: var(–clr-bg); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.stat-card { padding: 2rem; background: var(–clr-surface-alt); border: 1px solid var(–clr-border); border-radius: 12px; }
.stat-card h4 { color: var(–clr-text-dim); font-size: 0.8rem; text-transform: uppercase; margin-bottom: 1rem; }
.stat-card p { font-size: 2.5rem; font-weight: 800; color: var(–clr-primary); }
.admin-nav-item { display: block; padding: 1rem; color: var(–clr-text-dim); text-decoration: none; border-radius: 8px; margin-bottom: 0.5rem; transition: 0.3s; }
.admin-nav-item:hover, .admin-nav-item.active { background: var(–clr-surface-alt); color: var(–clr-primary); }
.recent-activity { background: var(–clr-surface); border-radius: 12px; border: 1px solid var(–clr-border); padding: 2rem; }
.activity-item { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(–clr-border); }
</style>
</head>
<body>
<div class=”admin-layout”>
<aside class=”sidebar”>
<a href=”index.html” class=”logo” style=”text-decoration: none; font-size: 1.2rem; font-weight: 800; color: #fff; display: block; margin-bottom: 3rem;”>
CAPIT<span style=”color: var(–clr-primary);”>LAB</span> <small style=”font-size: 0.6rem; opacity: 0.5;”>ADMIN</small>
</a>
<nav>
<a href=”admin.html” class=”admin-nav-item active”>Dashboard</a>
<a href=”admin-editor.html” class=”admin-nav-item”>Viết bài mới</a>
<a href=”admin-gallery.html” class=”admin-nav-item”>Thư viện ảnh</a>
<div style=”margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(–clr-border);”>
<a href=”index.html” class=”admin-nav-item”>Xem Website</a>
</div>
</nav>
</aside>
<main class=”admin-main”>
<h2 style=”margin-bottom: 2rem;”>Chào mừng trở lại, Admin</h2>
<div class=”stats-grid”>
<div class=”stat-card”>
<h4>Bài viết</h4>
<p>12</p>
</div>
<div class=”stat-card”>
<h4>Hình ảnh</h4>
<p>85</p>
</div>
<div class=”stat-card”>
<h4>Lượt xem</h4>
<p>1.2k</p>
</div>
<div class=”stat-card”>
<h4>Học viên</h4>
<p>342</p>
</div>
</div>
<div class=”recent-activity”>
<h3 style=”margin-bottom: 1.5rem;”>Hoạt động gần đây</h3>
<div class=”activity-item”>
<span>Đã xuất bản bài viết: <b>”Tối ưu hóa DMA…”</b></span>
<span style=”color: var(–clr-text-dim);”>2 giờ trước</span>
</div>
<div class=”activity-item”>
<span>Đã tải lên 5 ảnh mới vào Thư viện</span>
<span style=”color: var(–clr-text-dim);”>Hôm qua</span>
</div>
<div class=”activity-item” style=”border: none;”>
<span>Cập nhật giao diện trang About</span>
<span style=”color: var(–clr-text-dim);”>3 ngày trước</span>
</div>
</div>
</main>
</div>
</body>
</html>
