SIPADU - Portal Presensi SDN 1 Mekarwangi<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n \r\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n body { \r\n font-family: 'Plus Jakarta Sans', sans-serif; \r\n background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); \r\n color: #f8fafc; \r\n margin: 0; \r\n padding: 0;\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .mobile-container {\r\n width: 100%;\r\n max-width: 440px;\r\n min-height: 100vh;\r\n background: rgba(15, 23, 42, 0.75);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n border-left: 1px solid rgba(255, 255, 255, 0.08);\r\n border-right: 1px solid rgba(255, 255, 255, 0.08);\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n padding: 16px 16px 90px 16px;\r\n box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @keyframes slideUp {\r\n from { opacity: 0; transform: translateY(12px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .animate-slide { animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }\r\n\r\n .app-header {\r\n background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 14px 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);\r\n margin-bottom: 14px;\r\n }\r\n\r\n \/* TAB NAVIGASI 3 MENU *\/\r\n .nav-tabs { \r\n display: flex; \r\n background: rgba(30, 41, 59, 0.6); \r\n padding: 4px; \r\n border-radius: 16px; \r\n gap: 4px; \r\n margin-bottom: 16px;\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n .nav-tab { \r\n flex: 1; \r\n text-align: center; \r\n padding: 10px 4px; \r\n font-size: 10px; \r\n font-weight: 700; \r\n border-radius: 12px; \r\n cursor: pointer; \r\n transition: all 0.3s ease; \r\n color: #94a3b8; \r\n }\r\n .nav-tab.active { \r\n background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);\r\n color: #ffffff; \r\n box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); \r\n }\r\n\r\n .glass-card {\r\n background: rgba(30, 41, 59, 0.5);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: 20px;\r\n padding: 16px;\r\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .person-item {\r\n background: rgba(15, 23, 42, 0.4);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 14px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .btn-datang {\r\n background: linear-gradient(135deg, #059669 0%, #10b981 100%);\r\n color: white;\r\n box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);\r\n }\r\n .btn-pulang {\r\n background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);\r\n color: white;\r\n box-shadow: 0 3px 10px rgba(244, 63, 94, 0.3);\r\n }\r\n .btn-bersama {\r\n background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);\r\n }\r\n\r\n .app-footer {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(10px);\r\n color: #64748b;\r\n text-align: center;\r\n padding: 10px;\r\n font-size: 10px;\r\n font-weight: 600;\r\n border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n .app-footer span { color: #38bdf8; font-weight: 700; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"mobile-container\">\r\n\r\n <header class=\"app-header\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 bg-gradient-to-tr from-sky-500 to-indigo-600 text-white rounded-xl flex items-center justify-center font-bold text-base shadow-lg shadow-sky-500\/30\">\r\n <i class=\"fa-solid fa-school\"><\/i>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-xs font-extrabold text-white uppercase tracking-wider\">SIPADU MOBILE<\/h1>\r\n <div id=\"txtNamaSekolah\" class=\"text-[10px] text-sky-400 font-bold uppercase tracking-widest mt-0.5\">UNIT: SDN 1 MEKARWANGI<\/div>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-[9px] bg-sky-500\/10 text-sky-400 font-extrabold px-2.5 py-1 rounded-lg border border-sky-500\/20\">LIVE<\/span>\r\n <\/header>\r\n\r\n \r\n <div class=\"nav-tabs\">\r\n <div id=\"tabBtnPekerja\" onclick=\"switchTab('pekerja')\" class=\"nav-tab active\"><i class=\"fa-solid fa-helmet-safety block mb-0.5 text-xs\"><\/i> Pekerja<\/div>\r\n <div id=\"tabBtnPiket\" onclick=\"switchTab('piket')\" class=\"nav-tab\"><i class=\"fa-solid fa-shield-halved block mb-0.5 text-xs\"><\/i> Piket<\/div>\r\n <div id=\"tabBtnBersama\" onclick=\"switchTab('bersama')\" class=\"nav-tab\"><i class=\"fa-solid fa-camera-retro block mb-0.5 text-xs\"><\/i> Absen Bersama<\/div>\r\n <\/div>\r\n\r\n \r\n <input type=\"file\" id=\"nativeCameraInput\" accept=\"image\/*\" capture=\"environment\" class=\"hidden\" onchange=\"prosesFotoDirect(event)\">\r\n\r\n \r\n <div id=\"sectionPekerja\" class=\"animate-slide space-y-3\">\r\n <div class=\"glass-card space-y-3\">\r\n <div class=\"flex justify-between items-center text-xs font-bold text-slate-300 border-b border-slate-700\/60 pb-2.5\">\r\n <span><i class=\"fa-solid fa-users text-sky-400 mr-1.5\"><\/i> Daftar Pekerja Harian<\/span>\r\n <span class=\"text-[10px] bg-sky-950 text-sky-400 px-2 py-0.5 rounded-full border border-sky-800\/50\">Individu<\/span>\r\n <\/div>\r\n <div id=\"pekerjaContainer\" class=\"space-y-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"sectionPiket\" class=\"hidden animate-slide space-y-3\">\r\n <div class=\"glass-card space-y-3\">\r\n <div class=\"flex justify-between items-center text-xs font-bold text-slate-300 border-b border-slate-700\/60 pb-2.5\">\r\n <span><i class=\"fa-solid fa-user-shield text-amber-400 mr-1.5\"><\/i> Petugas Piket Malam<\/span>\r\n <span class=\"text-[10px] bg-amber-950 text-amber-400 px-2 py-0.5 rounded-full border border-amber-800\/50\">Individu<\/span>\r\n <\/div>\r\n <div id=\"piketContainer\" class=\"space-y-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"sectionBersama\" class=\"hidden animate-slide space-y-3\">\r\n <div class=\"glass-card space-y-4 text-center py-6\">\r\n <div class=\"w-16 h-16 bg-purple-500\/20 text-purple-400 rounded-2xl flex items-center justify-center mx-auto text-2xl border border-purple-500\/30 shadow-lg\">\r\n <i class=\"fa-solid fa-users-viewfinder\"><\/i>\r\n <\/div>\r\n <div class=\"space-y-1\">\r\n <h3 class=\"font-extrabold text-sm text-white\">Presensi Tim \/ Bersama<\/h3>\r\n <p class=\"text-[11px] text-slate-400 px-4\">Ambil satu foto bersama untuk mencatat kehadiran seluruh tim secara instan.<\/p>\r\n <\/div>\r\n <div class=\"pt-2\">\r\n <button onclick=\"bukaKameraBersama()\" class=\"w-full btn-bersama py-3.5 px-4 rounded-2xl font-bold text-xs shadow-lg flex items-center justify-center gap-2 transition active:scale-95\">\r\n <i class=\"fa-solid fa-camera text-base\"><\/i> Ambil Foto Bersama Sekarang\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modalKonfirmasi\" class=\"fixed inset-0 bg-slate-950\/85 backdrop-blur-md z-50 hidden flex items-center justify-center p-4\">\r\n <div class=\"glass-card max-w-sm w-full p-5 text-center space-y-3.5 animate-slide border-slate-700\">\r\n <div class=\"flex justify-between items-center border-b border-slate-700\/60 pb-2.5\">\r\n <div class=\"text-left\">\r\n <span id=\"txtTipeBadge\" class=\"text-[10px] font-extrabold px-2.5 py-0.5 rounded-full uppercase tracking-wider inline-block mb-1 bg-sky-500\/20 text-sky-300 border border-sky-500\/30\">ABSEN<\/span>\r\n <h4 id=\"txtNamaTarget\" class=\"font-bold text-xs text-white\">Nama Personil<\/h4>\r\n <\/div>\r\n <button onclick=\"batalFoto()\" class=\"text-slate-400 hover:text-white text-lg w-7 h-7 rounded-full bg-slate-800 flex items-center justify-center\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\r\n <\/div>\r\n <div class=\"w-full h-56 bg-slate-900 rounded-xl overflow-hidden border border-slate-700 relative\">\r\n <img id=\"imgPreviewNative\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex gap-2 pt-1\">\r\n <button type=\"button\" onclick=\"triggerKameraUlang()\" class=\"flex-1 bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold py-2.5 rounded-xl text-xs transition border border-slate-700\">Ulangi<\/button>\r\n <button type=\"button\" id=\"btnSubmitFoto\" onclick=\"kirimPresensi()\" class=\"flex-1 bg-gradient-to-r from-sky-500 to-indigo-600 text-white font-bold py-2.5 rounded-xl text-xs shadow-lg shadow-indigo-600\/30 transition\">Kirim Absen<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modalSukses\" class=\"fixed inset-0 bg-slate-950\/85 backdrop-blur-md z-50 hidden flex items-center justify-center p-4\">\r\n <div class=\"glass-card max-w-sm w-full p-6 text-center space-y-4 animate-slide border-emerald-500\/30\">\r\n <div class=\"w-12 h-12 bg-emerald-500\/20 text-emerald-400 rounded-full flex items-center justify-center mx-auto text-xl border border-emerald-500\/40 shadow-lg shadow-emerald-500\/20\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-extrabold text-xs text-white tracking-wide\">PRESENSI BERHASIL DICATAT<\/h4>\r\n <p class=\"text-[11px] text-slate-400 mt-0.5\">Tersinkronisasi otomatis ke Spreadsheet<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-3 rounded-xl border border-slate-800 text-left text-xs space-y-1.5\">\r\n <div class=\"flex justify-between border-b border-slate-800 pb-1\"><span class=\"text-slate-400\">Nama:<\/span><span id=\"notifNama\" class=\"font-bold text-white\">-<\/span><\/div>\r\n <div class=\"flex justify-between border-b border-slate-800 pb-1\"><span class=\"text-slate-400\">Status:<\/span><span id=\"notifTipe\" class=\"font-bold text-emerald-400\">-<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-slate-400\">Waktu:<\/span><span id=\"notifWaktu\" class=\"font-bold text-slate-200\">-<\/span><\/div>\r\n <\/div>\r\n <button onclick=\"document.getElementById('modalSukses').classList.add('hidden')\" class=\"w-full bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-bold py-2.5 rounded-xl text-xs shadow-lg shadow-emerald-600\/30 transition\">Selesai<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <footer class=\"app-footer\">\r\n Copyright © 2026 <span>SIPADU MOBILE<\/span>. All rights reserved.\r\n <\/footer>\r\n\r\n <canvas id=\"hiddenCanvas\" class=\"hidden\"><\/canvas>\r\n\r\n <script>\r\n \/\/ KUNCI PERMANEN KHUSUS SDN 1 MEKARWANGI\r\n const BASE_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyi6A6YbhjtWdhliNQFPVbkjnLwsx9ximwLOLPESVG3v5iYbQ_6DglgVDYwm_Pbkekd\/exec\";\r\n const SEKOLAH_KODE = \"sdn1mekarwangi\";\r\n\r\n document.getElementById('txtNamaSekolah').innerText = \"UNIT: SDN 1 MEKARWANGI\";\r\n\r\n let activeTab = 'pekerja';\r\n let targetNama = \"\", targetJabatan = \"\", targetTipe = \"\", fotoBase64Data = \"\";\r\n let modeAbsenBersama = false;\r\n\r\n function switchTab(tab) {\r\n activeTab = tab;\r\n const tPekerja = document.getElementById('sectionPekerja');\r\n const tPiket = document.getElementById('sectionPiket');\r\n const tBersama = document.getElementById('sectionBersama');\r\n \r\n const bPekerja = document.getElementById('tabBtnPekerja');\r\n const bPiket = document.getElementById('tabBtnPiket');\r\n const bBersama = document.getElementById('tabBtnBersama');\r\n\r\n tPekerja.classList.add('hidden');\r\n tPiket.classList.add('hidden');\r\n tBersama.classList.add('hidden');\r\n bPekerja.classList.remove('active');\r\n bPiket.classList.remove('active');\r\n bBersama.classList.remove('active');\r\n\r\n if (tab === 'pekerja') {\r\n tPekerja.classList.remove('hidden');\r\n bPekerja.classList.add('active');\r\n loadDataPekerja();\r\n } else if (tab === 'piket') {\r\n tPiket.classList.remove('hidden');\r\n bPiket.classList.add('active');\r\n loadDataPiket();\r\n } else if (tab === 'bersama') {\r\n tBersama.classList.remove('hidden');\r\n bBersama.classList.add('active');\r\n }\r\n }\r\n\r\n function getTodayKey() {\r\n const d = new Date();\r\n return `${activeTab}_${SEKOLAH_KODE}_${d.getFullYear()}_${d.getMonth() + 1}_${d.getDate()}`;\r\n }\r\n\r\n async function loadDataPekerja() {\r\n const container = document.getElementById('pekerjaContainer');\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-slate-400\"><i class=\"fa-solid fa-circle-notch fa-spin text-sky-400 text-lg mb-2\"><\/i><br>Memuat pekerja...<\/div>`;\r\n\r\n try {\r\n const res = await fetch(`${BASE_URL}?action=getMasterPekerja&sekolah=${SEKOLAH_KODE}`);\r\n const data = await res.json();\r\n\r\n if (!data.success || data.list.length === 0) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Belum ada data pekerja untuk SDN 1 Mekarwangi di Spreadsheet.<\/div>`;\r\n return;\r\n }\r\n\r\n const records = JSON.parse(localStorage.getItem(getTodayKey()) || \"{}\");\r\n container.innerHTML = data.list.map(p => {\r\n const sDatang = !!records[`${p.nama}_DATANG`];\r\n const sPulang = !!records[`${p.nama}_PULANG`];\r\n\r\n return `\r\n <div class=\"person-item\">\r\n <div><h4 class=\"font-bold text-xs text-white\">${p.nama}<\/h4><p class=\"text-[10px] text-slate-400\">${p.peran}<\/p><\/div>\r\n <div class=\"flex gap-1.5\">\r\n <button ${sDatang ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'DATANG\\')\" class=\"btn-datang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Datang<\/button>\r\n <button ${sPulang ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'PULANG\\')\" class=\"btn-pulang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Pulang<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n } catch (err) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Gagal memuat data.<\/div>`;\r\n }\r\n }\r\n\r\n async function loadDataPiket() {\r\n const container = document.getElementById('piketContainer');\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-slate-400\"><i class=\"fa-solid fa-circle-notch fa-spin text-amber-400 text-lg mb-2\"><\/i><br>Memuat petugas...<\/div>`;\r\n\r\n try {\r\n const res = await fetch(`${BASE_URL}?action=getMasterPiket&sekolah=${SEKOLAH_KODE}`);\r\n const data = await res.json();\r\n\r\n if (!data.success || data.list.length === 0) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Belum ada data piket untuk SDN 1 Mekarwangi di Spreadsheet.<\/div>`;\r\n return;\r\n }\r\n\r\n const records = JSON.parse(localStorage.getItem(getTodayKey()) || \"{}\");\r\n container.innerHTML = data.list.map(p => {\r\n const sMulai = !!records[`${p.nama}_MULAI PIKET`];\r\n const sSelesai = !!records[`${p.nama}_SELESAI PIKET`];\r\n\r\n return `\r\n <div class=\"person-item\">\r\n <div><h4 class=\"font-bold text-xs text-white\">${p.nama}<\/h4><p class=\"text-[10px] text-slate-400\">${p.peran}<\/p><\/div>\r\n <div class=\"flex gap-1.5\">\r\n <button ${sMulai ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'MULAI PIKET\\')\" class=\"btn-datang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Mulai<\/button>\r\n <button ${sSelesai ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'SELESAI PIKET\\')\" class=\"btn-pulang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Selesai<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n } catch (err) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Gagal memuat data.<\/div>`;\r\n }\r\n }\r\n\r\n function pilihAbsen(nama, jabatan, tipe) {\r\n modeAbsenBersama = false;\r\n targetNama = nama; targetJabatan = jabatan; targetTipe = tipe;\r\n document.getElementById('nativeCameraInput').click();\r\n }\r\n\r\n function bukaKameraBersama() {\r\n modeAbsenBersama = true;\r\n targetNama = \"SEMUA PETUGAS \/ TIM\";\r\n targetJabatan = \"Absen Bersama\";\r\n targetTipe = \"HADIR BERSAMA\";\r\n document.getElementById('nativeCameraInput').click();\r\n }\r\n\r\n function triggerKameraUlang() {\r\n document.getElementById('nativeCameraInput').click();\r\n }\r\n\r\n function prosesFotoDirect(event) {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n let reader = new FileReader();\r\n reader.onload = function(e) {\r\n let img = new Image();\r\n img.onload = function() {\r\n const canvas = document.getElementById('hiddenCanvas');\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = img.width; canvas.height = img.height;\r\n ctx.drawImage(img, 0, 0);\r\n\r\n const now = new Date();\r\n const dateStr = now.toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', timeZone: 'Asia\/Jakarta' });\r\n const timeStr = now.toLocaleTimeString('id-ID', { timeZone: 'Asia\/Jakarta', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(\/\\.\/g, ':');\r\n const timeStampText = \"\ud83d\udccc SDN 1 MEKARWANGI | \" + targetTipe + \" (\" + targetNama + \") | \" + dateStr + \" \" + timeStr + \" WIB\";\r\n\r\n const fontSize = Math.max(16, Math.floor(canvas.width \/ 26));\r\n ctx.font = \"bold \" + fontSize + \"px sans-serif\";\r\n ctx.fillStyle = \"rgba(0, 0, 0, 0.65)\";\r\n ctx.fillRect(0, canvas.height - (fontSize * 2.2), canvas.width, fontSize * 2.2);\r\n ctx.fillStyle = \"#facc15\";\r\n ctx.fillText(timeStampText, 14, canvas.height - (fontSize * 0.7));\r\n\r\n fotoBase64Data = canvas.toDataURL('image\/jpeg', 0.80);\r\n document.getElementById('imgPreviewNative').src = fotoBase64Data;\r\n document.getElementById('txtTipeBadge').innerText = targetTipe;\r\n document.getElementById('txtNamaTarget').innerText = targetNama;\r\n document.getElementById('modalKonfirmasi').classList.remove('hidden');\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n async function kirimPresensi() {\r\n const btn = document.getElementById('btnSubmitFoto');\r\n btn.disabled = true; btn.innerText = \"Mengirim...\";\r\n\r\n let actionName = 'submitPekerja';\r\n if (activeTab === 'piket') actionName = 'submitPiket';\r\n if (modeAbsenBersama) actionName = 'submitPekerja';\r\n\r\n const params = new URLSearchParams();\r\n params.append('action', actionName);\r\n params.append('sekolah', SEKOLAH_KODE);\r\n params.append('nama', targetNama);\r\n params.append('jenis', targetJabatan);\r\n params.append('tipePresensi', targetTipe);\r\n params.append('foto', fotoBase64Data);\r\n\r\n try {\r\n await fetch(BASE_URL, { method: 'POST', body: params });\r\n } catch(e) {} finally {\r\n document.getElementById('modalKonfirmasi').classList.add('hidden');\r\n document.getElementById('nativeCameraInput').value = \"\";\r\n \r\n const now = new Date();\r\n document.getElementById('notifNama').innerText = targetNama;\r\n document.getElementById('notifTipe').innerText = targetTipe;\r\n document.getElementById('notifWaktu').innerText = now.toLocaleTimeString('id-ID') + \" WIB\";\r\n document.getElementById('modalSukses').classList.remove('hidden');\r\n\r\n btn.disabled = false; btn.innerText = \"Kirim Absen\";\r\n if (activeTab === 'pekerja') loadDataPekerja(); \r\n else if (activeTab === 'piket') loadDataPiket();\r\n }\r\n }\r\n\r\n function batalFoto() {\r\n document.getElementById('modalKonfirmasi').classList.add('hidden');\r\n document.getElementById('nativeCameraInput').value = \"\";\r\n }\r\n\r\n window.onload = loadDataPekerja;\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SIPADU – Portal Presensi SDN 1 Mekarwangi SIPADU MOBILE UNIT: SDN 1 MEKARWANGI LIVE Pekerja Piket Absen Bersama Daftar Pekerja Harian Individu Petugas Piket Malam Individu Presensi Tim \/ Bersama Ambil satu foto bersama untuk mencatat kehadiran seluruh tim secara instan. Ambil Foto Bersama Sekarang ABSEN Nama Personil Ulangi Kirim Absen PRESENSI BERHASIL DICATAT Tersinkronisasi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":128,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages\/35\/revisions\/472"}],"wp:attachment":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n SIPADU - Portal Presensi SDN 1 Mekarwangi<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n \r\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n body { \r\n font-family: 'Plus Jakarta Sans', sans-serif; \r\n background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); \r\n color: #f8fafc; \r\n margin: 0; \r\n padding: 0;\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .mobile-container {\r\n width: 100%;\r\n max-width: 440px;\r\n min-height: 100vh;\r\n background: rgba(15, 23, 42, 0.75);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n border-left: 1px solid rgba(255, 255, 255, 0.08);\r\n border-right: 1px solid rgba(255, 255, 255, 0.08);\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n padding: 16px 16px 90px 16px;\r\n box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @keyframes slideUp {\r\n from { opacity: 0; transform: translateY(12px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .animate-slide { animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }\r\n\r\n .app-header {\r\n background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 14px 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);\r\n margin-bottom: 14px;\r\n }\r\n\r\n \/* TAB NAVIGASI 3 MENU *\/\r\n .nav-tabs { \r\n display: flex; \r\n background: rgba(30, 41, 59, 0.6); \r\n padding: 4px; \r\n border-radius: 16px; \r\n gap: 4px; \r\n margin-bottom: 16px;\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n .nav-tab { \r\n flex: 1; \r\n text-align: center; \r\n padding: 10px 4px; \r\n font-size: 10px; \r\n font-weight: 700; \r\n border-radius: 12px; \r\n cursor: pointer; \r\n transition: all 0.3s ease; \r\n color: #94a3b8; \r\n }\r\n .nav-tab.active { \r\n background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);\r\n color: #ffffff; \r\n box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); \r\n }\r\n\r\n .glass-card {\r\n background: rgba(30, 41, 59, 0.5);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: 20px;\r\n padding: 16px;\r\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .person-item {\r\n background: rgba(15, 23, 42, 0.4);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 14px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .btn-datang {\r\n background: linear-gradient(135deg, #059669 0%, #10b981 100%);\r\n color: white;\r\n box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);\r\n }\r\n .btn-pulang {\r\n background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);\r\n color: white;\r\n box-shadow: 0 3px 10px rgba(244, 63, 94, 0.3);\r\n }\r\n .btn-bersama {\r\n background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);\r\n }\r\n\r\n .app-footer {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(10px);\r\n color: #64748b;\r\n text-align: center;\r\n padding: 10px;\r\n font-size: 10px;\r\n font-weight: 600;\r\n border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n .app-footer span { color: #38bdf8; font-weight: 700; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"mobile-container\">\r\n\r\n <header class=\"app-header\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 bg-gradient-to-tr from-sky-500 to-indigo-600 text-white rounded-xl flex items-center justify-center font-bold text-base shadow-lg shadow-sky-500\/30\">\r\n <i class=\"fa-solid fa-school\"><\/i>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-xs font-extrabold text-white uppercase tracking-wider\">SIPADU MOBILE<\/h1>\r\n <div id=\"txtNamaSekolah\" class=\"text-[10px] text-sky-400 font-bold uppercase tracking-widest mt-0.5\">UNIT: SDN 1 MEKARWANGI<\/div>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-[9px] bg-sky-500\/10 text-sky-400 font-extrabold px-2.5 py-1 rounded-lg border border-sky-500\/20\">LIVE<\/span>\r\n <\/header>\r\n\r\n \r\n <div class=\"nav-tabs\">\r\n <div id=\"tabBtnPekerja\" onclick=\"switchTab('pekerja')\" class=\"nav-tab active\"><i class=\"fa-solid fa-helmet-safety block mb-0.5 text-xs\"><\/i> Pekerja<\/div>\r\n <div id=\"tabBtnPiket\" onclick=\"switchTab('piket')\" class=\"nav-tab\"><i class=\"fa-solid fa-shield-halved block mb-0.5 text-xs\"><\/i> Piket<\/div>\r\n <div id=\"tabBtnBersama\" onclick=\"switchTab('bersama')\" class=\"nav-tab\"><i class=\"fa-solid fa-camera-retro block mb-0.5 text-xs\"><\/i> Absen Bersama<\/div>\r\n <\/div>\r\n\r\n \r\n <input type=\"file\" id=\"nativeCameraInput\" accept=\"image\/*\" capture=\"environment\" class=\"hidden\" onchange=\"prosesFotoDirect(event)\">\r\n\r\n \r\n <div id=\"sectionPekerja\" class=\"animate-slide space-y-3\">\r\n <div class=\"glass-card space-y-3\">\r\n <div class=\"flex justify-between items-center text-xs font-bold text-slate-300 border-b border-slate-700\/60 pb-2.5\">\r\n <span><i class=\"fa-solid fa-users text-sky-400 mr-1.5\"><\/i> Daftar Pekerja Harian<\/span>\r\n <span class=\"text-[10px] bg-sky-950 text-sky-400 px-2 py-0.5 rounded-full border border-sky-800\/50\">Individu<\/span>\r\n <\/div>\r\n <div id=\"pekerjaContainer\" class=\"space-y-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"sectionPiket\" class=\"hidden animate-slide space-y-3\">\r\n <div class=\"glass-card space-y-3\">\r\n <div class=\"flex justify-between items-center text-xs font-bold text-slate-300 border-b border-slate-700\/60 pb-2.5\">\r\n <span><i class=\"fa-solid fa-user-shield text-amber-400 mr-1.5\"><\/i> Petugas Piket Malam<\/span>\r\n <span class=\"text-[10px] bg-amber-950 text-amber-400 px-2 py-0.5 rounded-full border border-amber-800\/50\">Individu<\/span>\r\n <\/div>\r\n <div id=\"piketContainer\" class=\"space-y-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"sectionBersama\" class=\"hidden animate-slide space-y-3\">\r\n <div class=\"glass-card space-y-4 text-center py-6\">\r\n <div class=\"w-16 h-16 bg-purple-500\/20 text-purple-400 rounded-2xl flex items-center justify-center mx-auto text-2xl border border-purple-500\/30 shadow-lg\">\r\n <i class=\"fa-solid fa-users-viewfinder\"><\/i>\r\n <\/div>\r\n <div class=\"space-y-1\">\r\n <h3 class=\"font-extrabold text-sm text-white\">Presensi Tim \/ Bersama<\/h3>\r\n <p class=\"text-[11px] text-slate-400 px-4\">Ambil satu foto bersama untuk mencatat kehadiran seluruh tim secara instan.<\/p>\r\n <\/div>\r\n <div class=\"pt-2\">\r\n <button onclick=\"bukaKameraBersama()\" class=\"w-full btn-bersama py-3.5 px-4 rounded-2xl font-bold text-xs shadow-lg flex items-center justify-center gap-2 transition active:scale-95\">\r\n <i class=\"fa-solid fa-camera text-base\"><\/i> Ambil Foto Bersama Sekarang\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modalKonfirmasi\" class=\"fixed inset-0 bg-slate-950\/85 backdrop-blur-md z-50 hidden flex items-center justify-center p-4\">\r\n <div class=\"glass-card max-w-sm w-full p-5 text-center space-y-3.5 animate-slide border-slate-700\">\r\n <div class=\"flex justify-between items-center border-b border-slate-700\/60 pb-2.5\">\r\n <div class=\"text-left\">\r\n <span id=\"txtTipeBadge\" class=\"text-[10px] font-extrabold px-2.5 py-0.5 rounded-full uppercase tracking-wider inline-block mb-1 bg-sky-500\/20 text-sky-300 border border-sky-500\/30\">ABSEN<\/span>\r\n <h4 id=\"txtNamaTarget\" class=\"font-bold text-xs text-white\">Nama Personil<\/h4>\r\n <\/div>\r\n <button onclick=\"batalFoto()\" class=\"text-slate-400 hover:text-white text-lg w-7 h-7 rounded-full bg-slate-800 flex items-center justify-center\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\r\n <\/div>\r\n <div class=\"w-full h-56 bg-slate-900 rounded-xl overflow-hidden border border-slate-700 relative\">\r\n <img id=\"imgPreviewNative\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex gap-2 pt-1\">\r\n <button type=\"button\" onclick=\"triggerKameraUlang()\" class=\"flex-1 bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold py-2.5 rounded-xl text-xs transition border border-slate-700\">Ulangi<\/button>\r\n <button type=\"button\" id=\"btnSubmitFoto\" onclick=\"kirimPresensi()\" class=\"flex-1 bg-gradient-to-r from-sky-500 to-indigo-600 text-white font-bold py-2.5 rounded-xl text-xs shadow-lg shadow-indigo-600\/30 transition\">Kirim Absen<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modalSukses\" class=\"fixed inset-0 bg-slate-950\/85 backdrop-blur-md z-50 hidden flex items-center justify-center p-4\">\r\n <div class=\"glass-card max-w-sm w-full p-6 text-center space-y-4 animate-slide border-emerald-500\/30\">\r\n <div class=\"w-12 h-12 bg-emerald-500\/20 text-emerald-400 rounded-full flex items-center justify-center mx-auto text-xl border border-emerald-500\/40 shadow-lg shadow-emerald-500\/20\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-extrabold text-xs text-white tracking-wide\">PRESENSI BERHASIL DICATAT<\/h4>\r\n <p class=\"text-[11px] text-slate-400 mt-0.5\">Tersinkronisasi otomatis ke Spreadsheet<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-3 rounded-xl border border-slate-800 text-left text-xs space-y-1.5\">\r\n <div class=\"flex justify-between border-b border-slate-800 pb-1\"><span class=\"text-slate-400\">Nama:<\/span><span id=\"notifNama\" class=\"font-bold text-white\">-<\/span><\/div>\r\n <div class=\"flex justify-between border-b border-slate-800 pb-1\"><span class=\"text-slate-400\">Status:<\/span><span id=\"notifTipe\" class=\"font-bold text-emerald-400\">-<\/span><\/div>\r\n <div class=\"flex justify-between\"><span class=\"text-slate-400\">Waktu:<\/span><span id=\"notifWaktu\" class=\"font-bold text-slate-200\">-<\/span><\/div>\r\n <\/div>\r\n <button onclick=\"document.getElementById('modalSukses').classList.add('hidden')\" class=\"w-full bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-bold py-2.5 rounded-xl text-xs shadow-lg shadow-emerald-600\/30 transition\">Selesai<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <footer class=\"app-footer\">\r\n Copyright © 2026 <span>SIPADU MOBILE<\/span>. All rights reserved.\r\n <\/footer>\r\n\r\n <canvas id=\"hiddenCanvas\" class=\"hidden\"><\/canvas>\r\n\r\n <script>\r\n \/\/ KUNCI PERMANEN KHUSUS SDN 1 MEKARWANGI\r\n const BASE_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyi6A6YbhjtWdhliNQFPVbkjnLwsx9ximwLOLPESVG3v5iYbQ_6DglgVDYwm_Pbkekd\/exec\";\r\n const SEKOLAH_KODE = \"sdn1mekarwangi\";\r\n\r\n document.getElementById('txtNamaSekolah').innerText = \"UNIT: SDN 1 MEKARWANGI\";\r\n\r\n let activeTab = 'pekerja';\r\n let targetNama = \"\", targetJabatan = \"\", targetTipe = \"\", fotoBase64Data = \"\";\r\n let modeAbsenBersama = false;\r\n\r\n function switchTab(tab) {\r\n activeTab = tab;\r\n const tPekerja = document.getElementById('sectionPekerja');\r\n const tPiket = document.getElementById('sectionPiket');\r\n const tBersama = document.getElementById('sectionBersama');\r\n \r\n const bPekerja = document.getElementById('tabBtnPekerja');\r\n const bPiket = document.getElementById('tabBtnPiket');\r\n const bBersama = document.getElementById('tabBtnBersama');\r\n\r\n tPekerja.classList.add('hidden');\r\n tPiket.classList.add('hidden');\r\n tBersama.classList.add('hidden');\r\n bPekerja.classList.remove('active');\r\n bPiket.classList.remove('active');\r\n bBersama.classList.remove('active');\r\n\r\n if (tab === 'pekerja') {\r\n tPekerja.classList.remove('hidden');\r\n bPekerja.classList.add('active');\r\n loadDataPekerja();\r\n } else if (tab === 'piket') {\r\n tPiket.classList.remove('hidden');\r\n bPiket.classList.add('active');\r\n loadDataPiket();\r\n } else if (tab === 'bersama') {\r\n tBersama.classList.remove('hidden');\r\n bBersama.classList.add('active');\r\n }\r\n }\r\n\r\n function getTodayKey() {\r\n const d = new Date();\r\n return `${activeTab}_${SEKOLAH_KODE}_${d.getFullYear()}_${d.getMonth() + 1}_${d.getDate()}`;\r\n }\r\n\r\n async function loadDataPekerja() {\r\n const container = document.getElementById('pekerjaContainer');\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-slate-400\"><i class=\"fa-solid fa-circle-notch fa-spin text-sky-400 text-lg mb-2\"><\/i><br>Memuat pekerja...<\/div>`;\r\n\r\n try {\r\n const res = await fetch(`${BASE_URL}?action=getMasterPekerja&sekolah=${SEKOLAH_KODE}`);\r\n const data = await res.json();\r\n\r\n if (!data.success || data.list.length === 0) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Belum ada data pekerja untuk SDN 1 Mekarwangi di Spreadsheet.<\/div>`;\r\n return;\r\n }\r\n\r\n const records = JSON.parse(localStorage.getItem(getTodayKey()) || \"{}\");\r\n container.innerHTML = data.list.map(p => {\r\n const sDatang = !!records[`${p.nama}_DATANG`];\r\n const sPulang = !!records[`${p.nama}_PULANG`];\r\n\r\n return `\r\n <div class=\"person-item\">\r\n <div><h4 class=\"font-bold text-xs text-white\">${p.nama}<\/h4><p class=\"text-[10px] text-slate-400\">${p.peran}<\/p><\/div>\r\n <div class=\"flex gap-1.5\">\r\n <button ${sDatang ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'DATANG\\')\" class=\"btn-datang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Datang<\/button>\r\n <button ${sPulang ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'PULANG\\')\" class=\"btn-pulang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Pulang<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n } catch (err) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Gagal memuat data.<\/div>`;\r\n }\r\n }\r\n\r\n async function loadDataPiket() {\r\n const container = document.getElementById('piketContainer');\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-slate-400\"><i class=\"fa-solid fa-circle-notch fa-spin text-amber-400 text-lg mb-2\"><\/i><br>Memuat petugas...<\/div>`;\r\n\r\n try {\r\n const res = await fetch(`${BASE_URL}?action=getMasterPiket&sekolah=${SEKOLAH_KODE}`);\r\n const data = await res.json();\r\n\r\n if (!data.success || data.list.length === 0) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Belum ada data piket untuk SDN 1 Mekarwangi di Spreadsheet.<\/div>`;\r\n return;\r\n }\r\n\r\n const records = JSON.parse(localStorage.getItem(getTodayKey()) || \"{}\");\r\n container.innerHTML = data.list.map(p => {\r\n const sMulai = !!records[`${p.nama}_MULAI PIKET`];\r\n const sSelesai = !!records[`${p.nama}_SELESAI PIKET`];\r\n\r\n return `\r\n <div class=\"person-item\">\r\n <div><h4 class=\"font-bold text-xs text-white\">${p.nama}<\/h4><p class=\"text-[10px] text-slate-400\">${p.peran}<\/p><\/div>\r\n <div class=\"flex gap-1.5\">\r\n <button ${sMulai ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'MULAI PIKET\\')\" class=\"btn-datang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Mulai<\/button>\r\n <button ${sSelesai ? 'disabled class=\"bg-slate-800 text-slate-600 px-2.5 py-1.5 rounded-lg text-[10px] font-bold cursor-not-allowed\"' : 'onclick=\"pilihAbsen(\\''+p.nama+'\\', \\''+p.peran+'\\', \\'SELESAI PIKET\\')\" class=\"btn-pulang px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition active:scale-95\"'}><i class=\"fa-solid fa-camera mr-1\"><\/i> Selesai<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n } catch (err) {\r\n container.innerHTML = `<div class=\"text-center py-6 text-xs text-rose-400 font-bold\">Gagal memuat data.<\/div>`;\r\n }\r\n }\r\n\r\n function pilihAbsen(nama, jabatan, tipe) {\r\n modeAbsenBersama = false;\r\n targetNama = nama; targetJabatan = jabatan; targetTipe = tipe;\r\n document.getElementById('nativeCameraInput').click();\r\n }\r\n\r\n function bukaKameraBersama() {\r\n modeAbsenBersama = true;\r\n targetNama = \"SEMUA PETUGAS \/ TIM\";\r\n targetJabatan = \"Absen Bersama\";\r\n targetTipe = \"HADIR BERSAMA\";\r\n document.getElementById('nativeCameraInput').click();\r\n }\r\n\r\n function triggerKameraUlang() {\r\n document.getElementById('nativeCameraInput').click();\r\n }\r\n\r\n function prosesFotoDirect(event) {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n let reader = new FileReader();\r\n reader.onload = function(e) {\r\n let img = new Image();\r\n img.onload = function() {\r\n const canvas = document.getElementById('hiddenCanvas');\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = img.width; canvas.height = img.height;\r\n ctx.drawImage(img, 0, 0);\r\n\r\n const now = new Date();\r\n const dateStr = now.toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', timeZone: 'Asia\/Jakarta' });\r\n const timeStr = now.toLocaleTimeString('id-ID', { timeZone: 'Asia\/Jakarta', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(\/\\.\/g, ':');\r\n const timeStampText = \"\ud83d\udccc SDN 1 MEKARWANGI | \" + targetTipe + \" (\" + targetNama + \") | \" + dateStr + \" \" + timeStr + \" WIB\";\r\n\r\n const fontSize = Math.max(16, Math.floor(canvas.width \/ 26));\r\n ctx.font = \"bold \" + fontSize + \"px sans-serif\";\r\n ctx.fillStyle = \"rgba(0, 0, 0, 0.65)\";\r\n ctx.fillRect(0, canvas.height - (fontSize * 2.2), canvas.width, fontSize * 2.2);\r\n ctx.fillStyle = \"#facc15\";\r\n ctx.fillText(timeStampText, 14, canvas.height - (fontSize * 0.7));\r\n\r\n fotoBase64Data = canvas.toDataURL('image\/jpeg', 0.80);\r\n document.getElementById('imgPreviewNative').src = fotoBase64Data;\r\n document.getElementById('txtTipeBadge').innerText = targetTipe;\r\n document.getElementById('txtNamaTarget').innerText = targetNama;\r\n document.getElementById('modalKonfirmasi').classList.remove('hidden');\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n async function kirimPresensi() {\r\n const btn = document.getElementById('btnSubmitFoto');\r\n btn.disabled = true; btn.innerText = \"Mengirim...\";\r\n\r\n let actionName = 'submitPekerja';\r\n if (activeTab === 'piket') actionName = 'submitPiket';\r\n if (modeAbsenBersama) actionName = 'submitPekerja';\r\n\r\n const params = new URLSearchParams();\r\n params.append('action', actionName);\r\n params.append('sekolah', SEKOLAH_KODE);\r\n params.append('nama', targetNama);\r\n params.append('jenis', targetJabatan);\r\n params.append('tipePresensi', targetTipe);\r\n params.append('foto', fotoBase64Data);\r\n\r\n try {\r\n await fetch(BASE_URL, { method: 'POST', body: params });\r\n } catch(e) {} finally {\r\n document.getElementById('modalKonfirmasi').classList.add('hidden');\r\n document.getElementById('nativeCameraInput').value = \"\";\r\n \r\n const now = new Date();\r\n document.getElementById('notifNama').innerText = targetNama;\r\n document.getElementById('notifTipe').innerText = targetTipe;\r\n document.getElementById('notifWaktu').innerText = now.toLocaleTimeString('id-ID') + \" WIB\";\r\n document.getElementById('modalSukses').classList.remove('hidden');\r\n\r\n btn.disabled = false; btn.innerText = \"Kirim Absen\";\r\n if (activeTab === 'pekerja') loadDataPekerja(); \r\n else if (activeTab === 'piket') loadDataPiket();\r\n }\r\n }\r\n\r\n function batalFoto() {\r\n document.getElementById('modalKonfirmasi').classList.add('hidden');\r\n document.getElementById('nativeCameraInput').value = \"\";\r\n }\r\n\r\n window.onload = loadDataPekerja;\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SIPADU – Portal Presensi SDN 1 Mekarwangi SIPADU MOBILE UNIT: SDN 1 MEKARWANGI LIVE Pekerja Piket Absen Bersama Daftar Pekerja Harian Individu Petugas Piket Malam Individu Presensi Tim \/ Bersama Ambil satu foto bersama untuk mencatat kehadiran seluruh tim secara instan. Ambil Foto Bersama Sekarang ABSEN Nama Personil Ulangi Kirim Absen PRESENSI BERHASIL DICATAT Tersinkronisasi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":128,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/pages\/35\/revisions\/472"}],"wp:attachment":[{"href":"https:\/\/sipadutalbar.com\/sdn1mekarwangi\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}