Mei 31, 2026
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Detail Siswa</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<style>
body{
background:#f5f6fa;
font-family:'Segoe UI',sans-serif;
}
/* HEADER */
.topbar{
background:#0d6efd;
color:#fff;
padding:20px;
padding-top:40px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
}
.topbar h5{
margin:0;
font-weight:700;
}
/* PROFILE */
.profile-card{
background:#fff;
margin-top:-20px;
border-radius:25px;
padding:25px;
box-shadow:0 3px 15px rgba(0,0,0,.05);
}
.profile-photo{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid #fff;
box-shadow:0 3px 10px rgba(0,0,0,.1);
}
.student-name{
font-size:24px;
font-weight:700;
margin-top:15px;
}
.student-program{
color:#666;
}
.badge-paid{
background:#e8f8ee;
color:#1a9f4f;
padding:10px 18px;
border-radius:20px;
font-weight:600;
}
.badge-unpaid{
background:#ffeaea;
color:#dc3545;
padding:10px 18px;
border-radius:20px;
font-weight:600;
}
/* INFO CARD */
.info-card{
background:#fff;
border-radius:20px;
padding:20px;
margin-top:15px;
box-shadow:0 3px 10px rgba(0,0,0,.04);
}
.info-label{
color:#888;
font-size:13px;
}
.info-value{
font-size:16px;
font-weight:600;
}
.icon-box{
width:42px;
height:42px;
background:#eef4ff;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:#0d6efd;
margin-right:12px;
}
.action-btn{
border-radius:15px;
padding:12px;
font-weight:600;
}
</style>
</head>
<body>
<!-- HEADER -->
<div class="topbar">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<i class="bi bi-arrow-left fs-4 me-3"></i>
<h5>Detail Siswa</h5>
</div>
<i class="bi bi-three-dots-vertical fs-4"></i>
</div>
</div>
<div class="container pb-5">
<!-- PROFILE -->
<div class="profile-card text-center">
<img src="https://randomuser.me/api/portraits/boys/1.jpg"
class="profile-photo">
<div class="student-name">
Ahmad Syarif
</div>
<div class="student-program">
English For Kids - Level 1
</div>
<div class="mt-3">
<span class="badge-unpaid">
Belum Bayar
</span>
</div>
</div>
<!-- INFORMASI SISWA -->
<div class="info-card">
<h6 class="fw-bold mb-4">
Informasi Siswa
</h6>
<div class="d-flex mb-3">
<div class="icon-box">
<i class="bi bi-person"></i>
</div>
<div>
<div class="info-label">Nama Lengkap</div>
<div class="info-value">Ahmad Syarif</div>
</div>
</div>
<div class="d-flex mb-3">
<div class="icon-box">
<i class="bi bi-telephone"></i>
</div>
<div>
<div class="info-label">Nomor WhatsApp</div>
<div class="info-value">0812-1234-5678</div>
</div>
</div>
<div class="d-flex mb-3">
<div class="icon-box">
<i class="bi bi-mortarboard"></i>
</div>
<div>
<div class="info-label">Program</div>
<div class="info-value">English For Kids Level 1</div>
</div>
</div>
<div class="d-flex">
<div class="icon-box">
<i class="bi bi-people"></i>
</div>
<div>
<div class="info-label">Nama Orang Tua</div>
<div class="info-value">Bapak Rahman</div>
</div>
</div>
</div>
<!-- INFORMASI PEMBAYARAN -->
<div class="info-card">
<h6 class="fw-bold mb-4">
Informasi Pembayaran
</h6>
<div class="row text-center">
<div class="col-6">
<div class="bg-light rounded-4 p-3">
<div class="text-muted small">
Tagihan Bulan Ini
</div>
<div class="fw-bold fs-5">
Rp300.000
</div>
</div>
</div>
<div class="col-6">
<div class="bg-light rounded-4 p-3">
<div class="text-muted small">
Status
</div>
<div class="fw-bold text-danger">
Belum Bayar
</div>
</div>
</div>
</div>
</div>
<!-- ALAMAT -->
<div class="info-card">
<h6 class="fw-bold mb-3">
Alamat
</h6>
<p class="mb-0 text-muted">
Jl. Diponegoro No. 123,
Kecamatan Pati,
Kabupaten Pati,
Jawa Tengah.
</p>
</div>
<!-- TOMBOL -->
<div class="row mt-4">
<div class="col-6">
<button class="btn btn-outline-primary w-100 action-btn">
<i class="bi bi-pencil-square"></i>
Edit
</button>
</div>
<div class="col-6">
<button class="btn btn-success w-100 action-btn">
<i class="bi bi-whatsapp"></i>
Hubungi
</button>
</div>
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar