PHP Code Editor
<!DOCTYPE html> <html lang="id" class="light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Audit Log BPKB v5.6 - Stable Line Edition</title> <script src="https://cdn.tailwindcss.com"></script> <!-- Font Awesome 6 (Pasti Muncul) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#0ea5e9', darkBg: '#0f172a', darkCard: '#1e293b' }, screens: { 'xs': '480px', } } } } </script> <style> @import url('https://fonts.googleapis.com'); body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease; } .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } </style> </head> <body class="bg-gray-50 dark:bg-darkBg text-slate-900 dark:text-slate-100 transition-colors duration-300"> <main class="min-h-screen"> <!-- TOPBAR (VERSI 5.3 BASE) --> <header class="sticky top-0 z-40 bg-white/80 dark:bg-darkCard/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 px-6 py-4 flex items-center justify-between"> <div class="flex items-center gap-4"> <div class="flex items-center gap-2 mr-4"> <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white"> <i class="fa-solid fa-book-open text-sm"></i> </div> <span class="font-bold text-xl tracking-tight hidden sm:block">BPKB<span class="text-primary">Log</span></span> </div> <h2 class="text-lg font-semibold border-l border-slate-200 dark:border-slate-700 pl-4 hidden md:block">Riwayat Aktivitas</h2> </div> <div class="flex items-center gap-3"> <!-- PROFIL USER --> <div class="flex items-center gap-3 p-1 pr-3 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-all cursor-pointer"> <img src="https://ui-avatars.com" class="w-8 h-8 rounded-full border border-white dark:border-slate-700 shadow-sm" alt="Avatar"> <div class="text-sm font-medium hidden sm:block">Admin User</div> </div> <!-- SEPARATOR --> <div class="h-6 w-px bg-slate-200 dark:bg-slate-700 mx-1"></div> <!-- DARK MODE TOGGLE --> <button onclick="toggleTheme()" class="w-10 h-10 flex items-center justify-center rounded-xl border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 transition-all shadow-sm"> <i id="theme-icon" class="fa-solid fa-sun text-lg"></i> </button> </div> </header> <!-- DASHBOARD CONTENT --> <div class="max-w-7xl mx-auto p-4 md:p-6 space-y-6"> <!-- STATS QUICK VIEW --> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white dark:bg-darkCard p-5 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center md:block gap-4"> <div class="p-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg shrink-0"><i class="fa-solid fa-clock-rotate-left w-5 text-center"></i></div> <div> <span class="text-slate-500 text-xs font-medium block">Total Aktivitas</span> <div class="text-2xl font-bold">1,284</div> </div> </div> <div class="bg-white dark:bg-darkCard p-5 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center md:block gap-4"> <div class="p-2 bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-lg shrink-0"><i class="fa-solid fa-database w-5 text-center"></i></div> <div> <span class="text-slate-500 text-xs font-medium block">Update Referensi</span> <div class="text-2xl font-bold">42</div> </div> </div> <div class="bg-white dark:bg-darkCard p-5 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center md:block gap-4"> <div class="p-2 bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 rounded-lg shrink-0"><i class="fa-solid fa-shield-halved w-5 text-center"></i></div> <div> <span class="text-slate-500 text-xs font-medium block">Keamanan Akun</span> <div class="text-2xl font-bold">15</div> </div> </div> </div> <!-- MAIN TABLE CARD --> <div class="bg-white dark:bg-darkCard rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden"> <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4"> <div> <h3 class="text-lg font-bold">Log Aktivitas Terbaru</h3> <p class="text-sm text-slate-500 dark:text-slate-400 font-medium">Monitoring sistem audit trail aplikasi BPKB.</p> </div> <div class="relative group w-full md:w-auto"> <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i> <input type="text" placeholder="Cari nopol atau aktivitas..." class="pl-10 pr-4 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none w-full md:w-64 transition-all"> </div> </div> <!-- DESKTOP TABLE VIEW (MD:BLOCK) --> <div class="hidden md:block overflow-x-auto"> <!-- class divide-y memberikan garis horizontal tipis antar baris --> <table class="w-full text-left border-collapse"> <thead> <tr class="bg-slate-50/50 dark:bg-slate-800/50 text-slate-500 text-[11px] uppercase tracking-widest font-bold border-b border-slate-100 dark:border-slate-800"> <th class="px-6 py-4">Waktu & Tanggal</th> <th class="px-6 py-4">Modul</th> <th class="px-6 py-4">Aktivitas</th> <th class="px-6 py-4">Status</th> <th class="px-6 py-4 text-right">Detail</th> </tr> </thead> <tbody id="table-content" class="divide-y divide-slate-100 dark:divide-slate-800"> <!-- JS RENDER DESKTOP --> </tbody> </table> </div> <!-- MOBILE CARD VIEW (MD:HIDDEN) --> <div id="card-content" class="md:hidden divide-y divide-slate-100 dark:divide-slate-800"> <!-- JS RENDER MOBILE --> </div> <!-- PAGINATION --> <div class="p-5 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white dark:bg-darkCard border-t border-slate-100 dark:border-slate-800"> <p class="text-sm text-slate-500 font-medium order-2 sm:order-1" id="page-info"></p> <div class="flex gap-2 w-full sm:w-auto order-1 sm:order-2"> <button onclick="navPage(-1)" id="btn-prev" class="flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-xl border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-30 transition-all shadow-sm">Sebelumnya</button> <button onclick="navPage(1)" id="btn-next" class="flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-darkBg hover:opacity-90 disabled:opacity-30 transition-all shadow-sm">Selanjutnya</button> </div> </div> </div> </div> </main> <script> // --- DATA DUMMY --- const templates = [ { mod: "PROFIL", act: "Edit Nama Profil", det: "Ubah nama profil menjadi 'Andi Wijaya'", type: "success", status: "Berhasil" }, { mod: "AVATAR", act: "Upload Avatar", det: "Memperbarui foto profil user (Admin-User)", type: "success", status: "Berhasil" }, { mod: "KEAMANAN", act: "Ganti Password", det: "Update kata sandi via Dashboard Akun", type: "success", status: "Berhasil" }, { mod: "KEAMANAN", act: "Ganti PIN", det: "Gagal: PIN lama tidak valid", type: "error", status: "Gagal" }, { mod: "REFERENSI", act: "Input Ref BPKB", det: "Tambah wilayah: Banten - Serang", type: "warning", status: "Pending" }, { mod: "DATA BPKB", act: "Input Data", det: "Input BPKB Baru Nopol: [B-4491-KLS]", type: "success", status: "Berhasil" }, { mod: "DATA BPKB", act: "Edit Data", det: "Koreksi nomor rangka Nopol: [A-2231-POI]", type: "success", status: "Berhasil" }, { mod: "FILE", act: "Upload Scan BPKB", det: "Berhasil upload berkas BPKB Nopol: [B-1234-ABC]", type: "success", status: "Berhasil" }, { mod: "FILE", act: "Download Scan BPKB", det: "Mendownload file scan BPKB Nopol: [A-8890-ZXC]", type: "success", status: "Berhasil" }, { mod: "REFERENSI", act: "Update Ref", det: "Update tarif PNBP wilayah Polda Metro", type: "success", status: "Berhasil" } ]; let database = []; for(let i=0; i<50; i++) { const base = templates[i % 10]; database.push({ ...base, time: `1${i%9}:${10+i%40}:22`, date: `${28 - Math.floor(i/10)} Mar 2026` }); } let page = 1; const limit = 10; function render() { const tBody = document.getElementById('table-content'); const cardBox = document.getElementById('card-content'); const start = (page - 1) * limit; const end = start + limit; const currentData = database.slice(start, end); // DESKTOP TABLE RENDER tBody.innerHTML = currentData.map(item => { let badge = "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"; if(item.type === 'warning') badge = "bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"; if(item.type === 'error') badge = "bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400"; return ` <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors group"> <td class="px-6 py-4 text-sm font-semibold">${item.date} <span class="block text-[10px] text-slate-400 font-normal uppercase">${item.time}</span></td> <td class="px-6 py-4"><span class="text-[10px] font-black px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-500 uppercase">${item.mod}</span></td> <td class="px-6 py-4"> <div class="text-sm font-bold text-slate-700 dark:text-slate-200">${item.act}</div> <div class="text-xs text-slate-500 font-medium">${item.det}</div> </td> <td class="px-6 py-4"> <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase ${badge}"> <i class="fa-solid fa-circle text-[5px]"></i> ${item.status} </span> </td> <td class="px-6 py-4 text-right"> <button class="p-2 text-slate-400 hover:text-primary transition-all"><i class="fa-solid fa-circle-info text-lg"></i></button> </td> </tr>`; }).join(''); // MOBILE CARD RENDER cardBox.innerHTML = currentData.map(item => { let badge = "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"; if(item.type === 'warning') badge = "bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"; if(item.type === 'error') badge = "bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400"; return ` <div class="p-5 space-y-3"> <div class="flex justify-between items-start"> <span class="text-[10px] font-black px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-500 uppercase tracking-tighter">${item.mod}</span> <span class="text-[10px] font-bold text-slate-400 uppercase">${item.date} • ${item.time}</span> </div> <div> <h4 class="text-sm font-bold text-slate-800 dark:text-slate-100">${item.act}</h4> <p class="text-xs text-slate-500 mt-0.5 font-medium leading-relaxed">${item.det}</p> </div> <div class="flex justify-between items-center pt-2"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase ${badge}"> <i class="fa-solid fa-circle text-[4px]"></i> ${item.status} </span> <button class="text-primary text-xs font-bold flex items-center gap-1">Detail <i class="fa-solid fa-chevron-right text-[10px]"></i></button> </div> </div>`; }).join(''); document.getElementById('page-info').innerHTML = `Halaman <b>${page}</b> dari <b>5</b> (50 aktivitas)`; document.getElementById('btn-prev').disabled = page === 1; document.getElementById('btn-next').disabled = end >= 50; } function navPage(dir) { page += dir; render(); window.scrollTo({top:0, behavior:'smooth'}); } // --- THEME ENGINE --- function toggleTheme() { const html = document.documentElement; const icon = document.getElementById('theme-icon'); if (html.classList.contains('dark')) { html.classList.remove('dark'); icon.className = 'fa-solid fa-sun text-lg'; localStorage.theme = 'light'; } else { html.classList.add('dark'); icon.className = 'fa-solid fa-moon text-lg'; localStorage.theme = 'dark'; } } if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); document.getElementById('theme-icon').className = 'fa-solid fa-moon text-lg'; } render(); </script> </body> </html>
Run Code
<!DOCTYPE html> <html lang="id" class="light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Audit Log BPKB v5.6 - Stable Line Edition</title> <script src="https://cdn.tailwindcss.com"></script> <!-- Font Awesome 6 (Pasti Muncul) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#0ea5e9', darkBg: '#0f172a', darkCard: '#1e293b' }, screens: { 'xs': '480px', } } } } </script> <style> @import url('https://fonts.googleapis.com'); body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease; } .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } </style> </head> <body class="bg-gray-50 dark:bg-darkBg text-slate-900 dark:text-slate-100 transition-colors duration-300"> <main class="min-h-screen"> <!-- TOPBAR (VERSI 5.3 BASE) --> <header class="sticky top-0 z-40 bg-white/80 dark:bg-darkCard/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 px-6 py-4 flex items-center justify-between"> <div class="flex items-center gap-4"> <div class="flex items-center gap-2 mr-4"> <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white"> <i class="fa-solid fa-book-open text-sm"></i> </div> <span class="font-bold text-xl tracking-tight hidden sm:block">BPKB<span class="text-primary">Log</span></span> </div> <h2 class="text-lg font-semibold border-l border-slate-200 dark:border-slate-700 pl-4 hidden md:block">Riwayat Aktivitas</h2> </div> <div class="flex items-center gap-3"> <!-- PROFIL USER --> <div class="flex items-center gap-3 p-1 pr-3 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-all cursor-pointer"> <img src="https://ui-avatars.com" class="w-8 h-8 rounded-full border border-white dark:border-slate-700 shadow-sm" alt="Avatar"> <div class="text-sm font-medium hidden sm:block">Admin User</div> </div> <!-- SEPARATOR --> <div class="h-6 w-px bg-slate-200 dark:bg-slate-700 mx-1"></div> <!-- DARK MODE TOGGLE --> <button onclick="toggleTheme()" class="w-10 h-10 flex items-center justify-center rounded-xl border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 transition-all shadow-sm"> <i id="theme-icon" class="fa-solid fa-sun text-lg"></i> </button> </div> </header> <!-- DASHBOARD CONTENT --> <div class="max-w-7xl mx-auto p-4 md:p-6 space-y-6"> <!-- STATS QUICK VIEW --> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white dark:bg-darkCard p-5 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center md:block gap-4"> <div class="p-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg shrink-0"><i class="fa-solid fa-clock-rotate-left w-5 text-center"></i></div> <div> <span class="text-slate-500 text-xs font-medium block">Total Aktivitas</span> <div class="text-2xl font-bold">1,284</div> </div> </div> <div class="bg-white dark:bg-darkCard p-5 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center md:block gap-4"> <div class="p-2 bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-lg shrink-0"><i class="fa-solid fa-database w-5 text-center"></i></div> <div> <span class="text-slate-500 text-xs font-medium block">Update Referensi</span> <div class="text-2xl font-bold">42</div> </div> </div> <div class="bg-white dark:bg-darkCard p-5 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center md:block gap-4"> <div class="p-2 bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 rounded-lg shrink-0"><i class="fa-solid fa-shield-halved w-5 text-center"></i></div> <div> <span class="text-slate-500 text-xs font-medium block">Keamanan Akun</span> <div class="text-2xl font-bold">15</div> </div> </div> </div> <!-- MAIN TABLE CARD --> <div class="bg-white dark:bg-darkCard rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden"> <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4"> <div> <h3 class="text-lg font-bold">Log Aktivitas Terbaru</h3> <p class="text-sm text-slate-500 dark:text-slate-400 font-medium">Monitoring sistem audit trail aplikasi BPKB.</p> </div> <div class="relative group w-full md:w-auto"> <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i> <input type="text" placeholder="Cari nopol atau aktivitas..." class="pl-10 pr-4 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none w-full md:w-64 transition-all"> </div> </div> <!-- DESKTOP TABLE VIEW (MD:BLOCK) --> <div class="hidden md:block overflow-x-auto"> <!-- class divide-y memberikan garis horizontal tipis antar baris --> <table class="w-full text-left border-collapse"> <thead> <tr class="bg-slate-50/50 dark:bg-slate-800/50 text-slate-500 text-[11px] uppercase tracking-widest font-bold border-b border-slate-100 dark:border-slate-800"> <th class="px-6 py-4">Waktu & Tanggal</th> <th class="px-6 py-4">Modul</th> <th class="px-6 py-4">Aktivitas</th> <th class="px-6 py-4">Status</th> <th class="px-6 py-4 text-right">Detail</th> </tr> </thead> <tbody id="table-content" class="divide-y divide-slate-100 dark:divide-slate-800"> <!-- JS RENDER DESKTOP --> </tbody> </table> </div> <!-- MOBILE CARD VIEW (MD:HIDDEN) --> <div id="card-content" class="md:hidden divide-y divide-slate-100 dark:divide-slate-800"> <!-- JS RENDER MOBILE --> </div> <!-- PAGINATION --> <div class="p-5 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white dark:bg-darkCard border-t border-slate-100 dark:border-slate-800"> <p class="text-sm text-slate-500 font-medium order-2 sm:order-1" id="page-info"></p> <div class="flex gap-2 w-full sm:w-auto order-1 sm:order-2"> <button onclick="navPage(-1)" id="btn-prev" class="flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-xl border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-30 transition-all shadow-sm">Sebelumnya</button> <button onclick="navPage(1)" id="btn-next" class="flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-darkBg hover:opacity-90 disabled:opacity-30 transition-all shadow-sm">Selanjutnya</button> </div> </div> </div> </div> </main> <script> // --- DATA DUMMY --- const templates = [ { mod: "PROFIL", act: "Edit Nama Profil", det: "Ubah nama profil menjadi 'Andi Wijaya'", type: "success", status: "Berhasil" }, { mod: "AVATAR", act: "Upload Avatar", det: "Memperbarui foto profil user (Admin-User)", type: "success", status: "Berhasil" }, { mod: "KEAMANAN", act: "Ganti Password", det: "Update kata sandi via Dashboard Akun", type: "success", status: "Berhasil" }, { mod: "KEAMANAN", act: "Ganti PIN", det: "Gagal: PIN lama tidak valid", type: "error", status: "Gagal" }, { mod: "REFERENSI", act: "Input Ref BPKB", det: "Tambah wilayah: Banten - Serang", type: "warning", status: "Pending" }, { mod: "DATA BPKB", act: "Input Data", det: "Input BPKB Baru Nopol: [B-4491-KLS]", type: "success", status: "Berhasil" }, { mod: "DATA BPKB", act: "Edit Data", det: "Koreksi nomor rangka Nopol: [A-2231-POI]", type: "success", status: "Berhasil" }, { mod: "FILE", act: "Upload Scan BPKB", det: "Berhasil upload berkas BPKB Nopol: [B-1234-ABC]", type: "success", status: "Berhasil" }, { mod: "FILE", act: "Download Scan BPKB", det: "Mendownload file scan BPKB Nopol: [A-8890-ZXC]", type: "success", status: "Berhasil" }, { mod: "REFERENSI", act: "Update Ref", det: "Update tarif PNBP wilayah Polda Metro", type: "success", status: "Berhasil" } ]; let database = []; for(let i=0; i<50; i++) { const base = templates[i % 10]; database.push({ ...base, time: `1${i%9}:${10+i%40}:22`, date: `${28 - Math.floor(i/10)} Mar 2026` }); } let page = 1; const limit = 10; function render() { const tBody = document.getElementById('table-content'); const cardBox = document.getElementById('card-content'); const start = (page - 1) * limit; const end = start + limit; const currentData = database.slice(start, end); // DESKTOP TABLE RENDER tBody.innerHTML = currentData.map(item => { let badge = "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"; if(item.type === 'warning') badge = "bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"; if(item.type === 'error') badge = "bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400"; return ` <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors group"> <td class="px-6 py-4 text-sm font-semibold">${item.date} <span class="block text-[10px] text-slate-400 font-normal uppercase">${item.time}</span></td> <td class="px-6 py-4"><span class="text-[10px] font-black px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-500 uppercase">${item.mod}</span></td> <td class="px-6 py-4"> <div class="text-sm font-bold text-slate-700 dark:text-slate-200">${item.act}</div> <div class="text-xs text-slate-500 font-medium">${item.det}</div> </td> <td class="px-6 py-4"> <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase ${badge}"> <i class="fa-solid fa-circle text-[5px]"></i> ${item.status} </span> </td> <td class="px-6 py-4 text-right"> <button class="p-2 text-slate-400 hover:text-primary transition-all"><i class="fa-solid fa-circle-info text-lg"></i></button> </td> </tr>`; }).join(''); // MOBILE CARD RENDER cardBox.innerHTML = currentData.map(item => { let badge = "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"; if(item.type === 'warning') badge = "bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"; if(item.type === 'error') badge = "bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400"; return ` <div class="p-5 space-y-3"> <div class="flex justify-between items-start"> <span class="text-[10px] font-black px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-500 uppercase tracking-tighter">${item.mod}</span> <span class="text-[10px] font-bold text-slate-400 uppercase">${item.date} • ${item.time}</span> </div> <div> <h4 class="text-sm font-bold text-slate-800 dark:text-slate-100">${item.act}</h4> <p class="text-xs text-slate-500 mt-0.5 font-medium leading-relaxed">${item.det}</p> </div> <div class="flex justify-between items-center pt-2"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase ${badge}"> <i class="fa-solid fa-circle text-[4px]"></i> ${item.status} </span> <button class="text-primary text-xs font-bold flex items-center gap-1">Detail <i class="fa-solid fa-chevron-right text-[10px]"></i></button> </div> </div>`; }).join(''); document.getElementById('page-info').innerHTML = `Halaman <b>${page}</b> dari <b>5</b> (50 aktivitas)`; document.getElementById('btn-prev').disabled = page === 1; document.getElementById('btn-next').disabled = end >= 50; } function navPage(dir) { page += dir; render(); window.scrollTo({top:0, behavior:'smooth'}); } // --- THEME ENGINE --- function toggleTheme() { const html = document.documentElement; const icon = document.getElementById('theme-icon'); if (html.classList.contains('dark')) { html.classList.remove('dark'); icon.className = 'fa-solid fa-sun text-lg'; localStorage.theme = 'light'; } else { html.classList.add('dark'); icon.className = 'fa-solid fa-moon text-lg'; localStorage.theme = 'dark'; } } if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); document.getElementById('theme-icon').className = 'fa-solid fa-moon text-lg'; } render(); </script> </body> </html>
Run Code New Tab
Result