dfgsdfd
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pengumuman Kelulusan - SMP NEGERI 1 TAPA</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-blue-50 to-blue-200 min-h-screen flex flex-col items-center justify-center text-gray-800">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold">🎓 Pengumuman Kelulusan</h1>
<p class="text-lg mt-2">SMP NEGERI 1 TAPA - Tahun Pelajaran 2024/2025</p>
</div>
<!-- Countdown -->
<div class="bg-white p-6 rounded-lg shadow-lg text-center mb-10">
<h2 class="text-2xl font-semibold mb-2">Pengumuman dibuka dalam:</h2>
<div id="countdown" class="text-xl text-red-600 font-bold"></div>
</div>
<!-- Form Pencarian -->
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
<form id="searchForm">
<input type="text" id="nama" placeholder="Nama Lengkap" required class="w-full p-2 border rounded mb-4" />
<input type="text" id="nisn" placeholder="NISN" required class="w-full p-2 border rounded mb-4" />
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded w-full">Cek Kelulusan</button>
</form>
<div id="result" class="mt-4 hidden">
<h3 class="text-lg font-semibold">Hasil:</h3>
<p><strong>Nama:</strong> <span id="resNama"></span></p>
<p><strong>NISN:</strong> <span id="resNISN"></span></p>
<p><strong>No Peserta:</strong> <span id="resPeserta"></span></p>
<p><strong>Status:</strong> <span id="resStatus" class="font-bold"></span></p>
</div>
</div>
<script>
const bukaTanggal = new Date("2025-06-02T20:00:00+08:00");
function updateCountdown() {
const now = new Date();
const distance = bukaTanggal - now;
if (distance <= 0) {
document.getElementById("countdown").innerText = "Pengumuman telah dibuka!";
return;
}
const jam = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const menit = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const detik = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerText = `${jam} jam ${menit} menit ${detik} detik`;
setTimeout(updateCountdown, 1000);
}
updateCountdown();
// Simulasi Data
const dataSiswa = [
{ nama: "Rudi Hartono", nisn: "1234567890", peserta: "01-001-001-0", status: "LULUS" },
{ nama: "Ani Wijaya", nisn: "0987654321", peserta: "01-001-002-0", status: "LULUS" },
];
document.getElementById("searchForm").addEventListener("submit", function (e) {
e.preventDefault();
const now = new Date();
if (now < bukaTanggal) {
alert("Pengumuman belum dibuka. Silakan cek kembali setelah 2 Juni 2025 pukul 20.00 WITA.");
return;
}
const nama = document.getElementById("nama").value.trim().toLowerCase();
const nisn = document.getElementById("nisn").value.trim();
const hasil = dataSiswa.find(s =>
s.nama.toLowerCase() === nama && s.nisn === nisn
);
if (hasil) {
document.getElementById("resNama").innerText = hasil.nama;
document.getElementById("resNISN").innerText = hasil.nisn;
document.getElementById("resPeserta").innerText = hasil.peserta;
document.getElementById("resStatus").innerText = hasil.status;
document.getElementById("result").classList.remove("hidden");
} else {
alert("Data tidak ditemukan. Periksa kembali Nama dan NISN.");
}
});
</script>
</body>
</html>
Comments
Post a Comment