<html lang="id">
<head>
<meta charset="UTF-8">
<title>👨💻Admin👩🏼💻</title>
<style>
body {
background: #e9ffe9;
font-family: Arial, sans-serif;
margin: 0;
}
/* HEADER */
.topbar {
background: #5bbd5b;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-size: 18px;
}
.btn-home {
display: inline-block;
background: #28a745;
padding: 12px 25px;
border-radius: 10px;
color: Black;
font-size: 18px;
text-decoration: none;
font-weight: bold;
box-shadow: 0px 4px 10px rgba(0,0,0,0.25);
transition: 0.3s;
}
.btn-home:hover{
background: #1f8f3c;
transform: scale(1.05);
}
.container {
padding: 15px;
}
.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
/* MENU GRID */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
background: white;
border-radius: 12px;
padding: 15px;
text-align: center;
font-weight: bold;
font-size: 16px;
cursor: pointer;
box-shadow: 0px 3px 10px rgba(0,0,0,0.15);
transition: 0.2s;
text-decoration: none;
color: black;
}
.box:hover {
transform: scale(1.08);
}
/* FOOTER BUTTON */
.footer-button {
background: orange;
padding: 12px;
border-radius: 10px;
margin-top: 15px;
text-align: center;
font-size: 18px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: black;
display: block;
}
.footer-button:hover {
background: #e69500;
}
.tebal-animasi {
font-weight: bold;
display: inline-block;
position: relative;
text-align: center;
}
.tebal-animasi::after {
content: "";
width: 0;
height: 4px;
background: #800080 ;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.4s;
}
.tebal-animasi:hover::after {
width: 100%;
}
.center {
text-align: center;
margin-top: 110px;
}
</style>
</head>
<body>
<!-- TOP BAR -->
<div class="topbar">
<span>Login</span>
<a href="profil.html" class="btn-home">📥Profil</a>
<span>⚙ Edit Profil</span>
<a href="profil.html" class="btn-home">👤Profil</a>
<span>Keluar</span>
<a href="logout.html" class="btn-home">📤Keluar</a>
</div>
<div class="container">
<div class="title">👋 Selamat Datang,</div>
<!-- MENU GRID -->
<div class="grid">
<a class="box" href="materi.html" style="background:#69d2ff;">📚<br>Materi</a>
<a class="box" href="tugas.html" style="background:#90ff90;">📄<br>Tugas</a>
<a class="box" href="saldo.html" style="background:#ffb0ff;">💰<br>Saldo</a>
<a class="box" href="tagihan.html" style="background:#ffd27f;">🧾<br>Tagihan</a>
<a class="box" href="Penggunaan.app/Murid/SEKOLAH.zip" style="background:#bfb3ff;">⏰<br>Jadwal</a>
<a class="box" href="pengumuman.html" style="background:#ff8282;">⚠<br>Pengumuman</a>
</div>
<!-- FOOTER BUTTONS -->
<a class="footer-button" href="tatatertib.html">📜TATA TERTIB SEKOLAH</a>
<a class="footer-button" href="ujian.html">🗃UJIAN SEKOLAH</a>
<a class="footer-button" href="panduan.html">📱📲TATA CARA PENGGUNAAN APLIKASI</a>
<a class="footer-button" href="setelan.html">🛠SETELAN</a>
<a class="footer-button" href="kirim-pesan.html">📨📥Kirim Pesan</a>
<a class="footer-button" href="pesan-masuk.html">📤📨Terima Pesan Masuk</a>
</div>
<div class="center">
<p class="tebal-animasi">SELAMAT BEKERJA</p>
</div>
</body>
</html>
