Juni 06, 2026
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Dashboard - Bimbel Al Qur'an</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
body{
background:#f8fafc;
font-family:'Segoe UI',sans-serif;
}
.sidebar{
width:280px;
min-height:100vh;
background:linear-gradient(
180deg,
#0f766e,
#115e59);
position:fixed;
left:0;
top:0;
color:white;
}
.logo{
padding:25px;
text-align:center;
border-bottom:1px solid rgba(255,255,255,.1);
}
.logo h4{
margin:0;
font-weight:700;
}
.menu a{
display:block;
color:white;
text-decoration:none;
padding:14px 25px;
transition:.3s;
}
.menu a:hover{
background:rgba(255,255,255,.1);
padding-left:35px;
}
.menu i{
width:25px;
}
.content{
margin-left:280px;
padding:30px;
}
.topbar{
background:white;
border-radius:20px;
padding:15px 25px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.stat-card{
background:white;
border:none;
border-radius:24px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
transition:.3s;
}
.stat-card:hover{
transform:translateY(-5px);
}
.icon-box{
width:60px;
height:60px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
}
.bg-green{
background:#0f766e;
}
.bg-gold{
background:#D4AF37;
}
.bg-blue{
background:#2563eb;
}
.bg-red{
background:#dc2626;
}
.card-premium{
background:white;
border:none;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.table thead{
background:#f1f5f9;
}
.badge-status{
background:#dcfce7;
color:#166534;
padding:8px 12px;
border-radius:30px;
}
</style>
</head>
<body>
<!-- SIDEBAR -->
<div class="sidebar">
<div class="logo">
<h4>📖 Al Qur'an Academy</h4>
<small>Admin Panel</small>
</div>
<div class="menu mt-3">
<a href="#">
<i class="fas fa-home"></i>
Dashboard
</a>
<a href="#">
<i class="fas fa-user-graduate"></i>
Data Santri
</a>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
Pengajar
</a>
<a href="#">
<i class="fas fa-video"></i>
Kelas Online
</a>
<a href="#">
<i class="fas fa-calendar"></i>
Jadwal
</a>
<a href="#">
<i class="fas fa-check-circle"></i>
Absensi
</a>
<a href="#">
<i class="fas fa-book-quran"></i>
Hafalan
</a>
<a href="#">
<i class="fas fa-wallet"></i>
Pembayaran
</a>
<a href="#">
<i class="fas fa-certificate"></i>
Sertifikat
</a>
<a href="#">
<i class="fas fa-chart-line"></i>
Laporan
</a>
<a href="#">
<i class="fas fa-gear"></i>
Pengaturan
</a>
</div>
</div>
<!-- CONTENT -->
<div class="content">
<!-- TOPBAR -->
<div class="topbar d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 fw-bold">
Dashboard Admin
</h4>
<small class="text-muted">
Selamat Datang Kembali
</small>
</div>
<div class="d-flex align-items-center gap-3">
<button class="btn btn-light">
<i class="fas fa-bell"></i>
</button>
<img src="https://ui-avatars.com/api/?name=Admin"
width="45"
class="rounded-circle">
</div>
</div>
<!-- STATISTIK -->
<div class="row mt-4">
<div class="col-lg-3 mb-3">
<div class="stat-card">
<div class="d-flex justify-content-between">
<div>
<p class="text-muted mb-1">
Total Santri
</p>
<h3>1,254</h3>
</div>
<div class="icon-box bg-green">
<i class="fas fa-user-graduate"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="stat-card">
<div class="d-flex justify-content-between">
<div>
<p class="text-muted mb-1">
Pengajar
</p>
<h3>36</h3>
</div>
<div class="icon-box bg-blue">
<i class="fas fa-chalkboard-teacher"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="stat-card">
<div class="d-flex justify-content-between">
<div>
<p class="text-muted mb-1">
Kelas Aktif
</p>
<h3>72</h3>
</div>
<div class="icon-box bg-gold">
<i class="fas fa-video"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="stat-card">
<div class="d-flex justify-content-between">
<div>
<p class="text-muted mb-1">
Pendapatan
</p>
<h3>Rp 24 Jt</h3>
</div>
<div class="icon-box bg-red">
<i class="fas fa-wallet"></i>
</div>
</div>
</div>
</div>
</div>
<!-- TABLE -->
<div class="card-premium p-4 mt-3">
<h5 class="fw-bold mb-4">
Santri Terbaru
</h5>
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
<th>Nama</th>
<th>Program</th>
<th>Pengajar</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahmad Fauzi</td>
<td>Tahsin Dasar</td>
<td>Ust. Abdullah</td>
<td>
<span class="badge-status">
Aktif
</span>
</td>
</tr>
<tr>
<td>Fatimah Zahra</td>
<td>Tahfidz</td>
<td>Ustadzah Aisyah</td>
<td>
<span class="badge-status">
Aktif
</span>
</td>
</tr>
<tr>
<td>Muhammad Ali</td>
<td>Iqra'</td>
<td>Ust. Hasan</td>
<td>
<span class="badge-status">
Aktif
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar