.png)
.png)
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistem Informasi Pondok Ramadhan SMA</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f8fafc;
}
.tab-active {
border-bottom: 2px solid #059669;
color: #059669;
}
.glass-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="min-h-screen pb-20">
<!-- Header -->
<header class="bg-emerald-700 text-white p-6 shadow-lg rounded-b-3xl">
<div class="max-w-4xl mx-auto flex justify-between items-center">
<div>
<h1 class="text-2xl font-bold">Pondok Ramadhan 1446H</h1>
<p class="text-emerald-100 text-sm">SMA Unggul Harapan Bangsa</p>
</div>
<div class="bg-emerald-600 p-3 rounded-full">
<i class="fas fa-mosque text-2xl"></i>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-4xl mx-auto p-4 mt-4">
<!-- Tab Navigation -->
<div class="flex justify-around mb-6 bg-white rounded-xl shadow-sm p-1">
<button onclick="switchTab('jadwal')" id="tab-jadwal" class="flex-1 py-3 text-sm font-semibold tab-active transition-all">
<i class="fas fa-calendar-alt mr-2"></i>Jadwal
</button>
<button onclick="switchTab('materi')" id="tab-materi" class="flex-1 py-3 text-sm font-semibold text-gray-500 transition-all">
<i class="fas fa-book-open mr-2"></i>Materi
</button>
<button onclick="switchTab('presensi')" id="tab-presensi" class="flex-1 py-3 text-sm font-semibold text-gray-500 transition-all">
<i class="fas fa-user-check mr-2"></i>Presensi
</button>
<button onclick="switchTab('ibadah')" id="tab-ibadah" class="flex-1 py-3 text-sm font-semibold text-gray-500 transition-all">
<i class="fas fa-star mr-2"></i>Ibadah
</button>
</div>
<!-- Sections -->
<!-- Jadwal Section -->
<section id="section-jadwal" class="space-y-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Agenda Hari Ini</h2>
<div class="bg-white rounded-2xl p-4 shadow-sm border-l-4 border-emerald-500">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-bold text-emerald-600">07:30 - 08:30</span>
<span class="bg-emerald-100 text-emerald-700 text-xs px-2 py-1 rounded">Selesai</span>
</div>
<h3 class="font-bold text-gray-800">Pembukaan & Tadarus Bersama</h3>
<p class="text-gray-500 text-sm">Masjid Sekolah - Seluruh Siswa</p>
</div>
<div class="bg-white rounded-2xl p-4 shadow-sm border-l-4 border-amber-500">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-bold text-amber-600">08:30 - 10:00</span>
<span class="bg-amber-100 text-amber-700 text-xs px-2 py-1 rounded font-medium">Sedang Berlangsung</span>
</div>
<h3 class="font-bold text-gray-800">Materi I: Adab Menuntut Ilmu</h3>
<p class="text-gray-500 text-sm">Aula Utama - Pemateri: Ust. Ahmad Fauzi</p>
</div>
<div class="bg-white rounded-2xl p-4 shadow-sm border-l-4 border-gray-300">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-bold text-gray-600">10:00 - 10:30</span>
</div>
<h3 class="font-bold text-gray-800">Istirahat & Shalat Dhuha</h3>
<p class="text-gray-500 text-sm">Area Masjid</p>
</div>
<div class="bg-white rounded-2xl p-4 shadow-sm border-l-4 border-gray-300">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-bold text-gray-600">10:30 - 12:00</span>
</div>
<h3 class="font-bold text-gray-800">Materi II: Fiqih Puasa Kontemporer</h3>
<p class="text-gray-500 text-sm">Aula Utama - Pemateri: Dra. Hj. Siti Aminah</p>
</div>
</section>
<!-- Materi Section -->
<section id="section-materi" class="hidden space-y-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Ringkasan Materi</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center mb-3">
<i class="fas fa-file-pdf text-xl"></i>
</div>
<h3 class="font-bold text-gray-800">Fiqih Puasa</h3>
<p class="text-xs text-gray-500 mb-4">Panduan lengkap syarat, rukun, dan yang membatalkan puasa.</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-semibold transition">Unduh Materi</button>
</div>
<div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
<div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center mb-3">
<i class="fas fa-video text-xl"></i>
</div>
<h3 class="font-bold text-gray-800">Adab Bergaul</h3>
<p class="text-xs text-gray-500 mb-4">Rekaman ceramah tentang etika bersosialisasi di era digital.</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-semibold transition">Tonton Video</button>
</div>
</div>
</section>
<!-- Presensi Section -->
<section id="section-presensi" class="hidden">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
<div class="mb-6">
<div class="inline-block p-4 bg-emerald-50 rounded-full mb-4">
<i class="fas fa-qrcode text-5xl text-emerald-600"></i>
</div>
<h2 class="text-xl font-bold text-gray-800">Presensi Kehadiran</h2>
<p class="text-gray-500 text-sm">Klik tombol di bawah untuk mencatat kehadiran Anda hari ini.</p>
</div>
<div id="presensi-status" class="hidden mb-6 p-4 bg-emerald-100 text-emerald-700 rounded-xl">
<i class="fas fa-check-circle mr-2"></i> Presensi Berhasil! (10:15 WIB)
</div>
<form id="form-presensi" class="space-y-4">
<input type="text" placeholder="Nama Lengkap" class="w-full p-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 outline-none">
<select class="w-full p-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 outline-none">
<option value="">Pilih Kelas</option>
<option>X-1</option>
<option>X-2</option>
<option>XI-IPA 1</option>
<option>XI-IPS 1</option>
<option>XII-IPA 2</option>
</select>
<button type="button" onclick="submitPresensi()" class="w-full py-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg transition">
Submit Kehadiran
</button>
</form>
</div>
</section>
<!-- Ibadah Section -->
<section id="section-ibadah" class="hidden space-y-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Mutaba'ah Harian</h2>
<div class="bg-white rounded-2xl p-5 shadow-sm space-y-6">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-gray-700">Shalat 5 Waktu</h4>
<p class="text-xs text-gray-400">Berjamaah lebih utama</p>
</div>
<div class="flex gap-1">
<button class="w-8 h-8 rounded bg-gray-100 hover:bg-emerald-500 hover:text-white text-xs">S</button>
<button class="w-8 h-8 rounded bg-gray-100 hover:bg-emerald-500 hover:text-white text-xs">D</button>
<button class="w-8 h-8 rounded bg-gray-100 hover:bg-emerald-500 hover:text-white text-xs">A</button>
<button class="w-8 h-8 rounded bg-gray-100 hover:bg-emerald-500 hover:text-white text-xs">M</button>
<button class="w-8 h-8 rounded bg-gray-100 hover:bg-emerald-500 hover:text-white text-xs">I</button>
</div>
</div>
<hr>
<div class="flex items-center justify-between">
<h4 class="font-semibold text-gray-700">Tadarus (Lembar)</h4>
<input type="number" placeholder="0" class="w-16 p-2 border border-gray-200 rounded-lg text-center">
</div>
<hr>
<div class="flex items-center justify-between">
<h4 class="font-semibold text-gray-700">Shalat Dhuha</h4>
<input type="checkbox" class="w-6 h-6 accent-emerald-600">
</div>
<hr>
<div class="flex items-center justify-between">
<h4 class="font-semibold text-gray-700">Shalat Tarawih</h4>
<input type="checkbox" class="w-6 h-6 accent-emerald-600">
</div>
<button class="w-full py-3 bg-emerald-600 text-white rounded-xl font-bold mt-4">Simpan Laporan Harian</button>
</div>
</section>
</main>
<!-- Bottom Navigation (Mobile Style) -->
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-6 py-3 flex justify-between items-center shadow-[0_-4px_10px_rgba(0,0,0,0.05)] md:hidden">
<button onclick="switchTab('jadwal')" class="text-emerald-600 flex flex-col items-center">
<i class="fas fa-home text-xl"></i>
<span class="text-[10px] mt-1">Beranda</span>
</button>
<button onclick="switchTab('materi')" class="text-gray-400 flex flex-col items-center">
<i class="fas fa-book text-xl"></i>
<span class="text-[10px] mt-1">Materi</span>
</button>
<div class="relative -top-6">
<button onclick="switchTab('presensi')" class="bg-emerald-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center border-4 border-white">
<i class="fas fa-plus"></i>
</button>
</div>
<button onclick="switchTab('ibadah')" class="text-gray-400 flex flex-col items-center">
<i class="fas fa-heart text-xl"></i>
<span class="text-[10px] mt-1">Mutabaah</span>
</button>
<button class="text-gray-400 flex flex-col items-center">
<i class="fas fa-user text-xl"></i>
<span class="text-[10px] mt-1">Profil</span>
</button>
</nav>
<script>
function switchTab(tabName) {
// Hide all sections
const sections = ['jadwal', 'materi', 'presensi', 'ibadah'];
sections.forEach(s => {
document.getElementById('section-' + s).classList.add('hidden');
document.getElementById('tab-' + s).classList.remove('tab-active');
document.getElementById('tab-' + s).classList.add('text-gray-500');
});
// Show selected section
document.getElementById('section-' + tabName).classList.remove('hidden');
document.getElementById('tab-' + tabName).classList.add('tab-active');
document.getElementById('tab-' + tabName).classList.remove('text-gray-500');
}
function submitPresensi() {
const form = document.getElementById('form-presensi');
const status = document.getElementById('presensi-status');
// Animasi sederhana
form.classList.add('opacity-50', 'pointer-events-none');
setTimeout(() => {
form.classList.add('hidden');
status.classList.remove('hidden');
// Alert simulasi (Custom Message Box)
const msg = document.createElement('div');
msg.className = "fixed top-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-full shadow-2xl z-50 animate-bounce";
msg.innerText = "Alhamdulillah, Presensi Tercatat!";
document.body.appendChild(msg);
setTimeout(() => msg.remove(), 3000);
}, 800);
}
</script>
</body>
</html>
0 komentar:
Post a Comment