slicing: modal notification

main-dlh
Regiaaaaaa 2025-12-15 15:11:28 +07:00
parent eb1f523530
commit 09b76ec079
1 changed files with 46 additions and 0 deletions

View File

@ -2,6 +2,46 @@
ViewData["Title"] = "Dashboard Satpel";
}
<!-- Modal Notifikasi -->
<dialog id="modalNotifikasi" class="modal">
<div class="modal-box max-w-lg rounded-2xl bg-white p-8 shadow-xl">
<!-- Icon Warning -->
<div class="flex justify-center mb-6">
<div class="relative w-24 h-24 rounded-full bg-gradient-to-br from-amber-50 to-amber-100 flex items-center justify-center ring-4 ring-amber-400">
<div class="w-14 h-14 rounded-lg bg-amber-500 flex items-center justify-center rotate-45">
<span class="text-white text-3xl font-bold -rotate-45">!</span>
</div>
</div>
</div>
<!-- Title -->
<h3 class="text-xl font-bold text-center text-gray-900 mb-5 px-8">
Selamat Datang Bapak/Ibu Hartono
</h3>
<!-- Message -->
<div class="text-center text-gray-600 text-base leading-relaxed mb-8 space-y-3 px-10">
<p>
Menginformasikan bahwa ada <span class="font-semibold text-gray-900">45 checklist harian</span> belum verifikasi (terlewat/diragukan kebenarannya).
</p>
<p>
Mohon untuk segera melakukan pengecekan checklist harian dan verifikasi jika sudah pasti kebenarannya. Terimakasih
</p>
</div>
<div class="modal-action justify-center mt-0 px-6">
<button onclick="modalNotifikasi.close()" class="btn w-full max-w-md rounded-full border-2 border-gray-300 bg-white hover:bg-gray-50 text-gray-900 font-semibold normal-case text-base h-12 min-h-12 outline-none focus:outline-none focus:ring-0 active:ring-0">
Tutup
</button>
</div>
</div>
<!-- Backdrop -->
<form method="dialog" class="modal-backdrop bg-black/40">
<button>close</button>
</form>
</dialog>
<div class="grid grid-cols-1 items-stretch gap-4 lg:grid-cols-12">
<!-- Profil RW -->
<div class="card card-border h-full bg-white lg:col-span-9">
@ -366,5 +406,11 @@
const bulan = $(this).val();
console.log('Filter bulan:', bulan);
});
// Auto show modal notification on page load
const modal = document.getElementById('modalNotifikasi');
if (modal) {
modal.showModal();
}
});
</script>