Dewan Guru SMPN 1 Rancabali<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n * { box-sizing: border-box; }\n body { font-family: 'Source Sans 3', sans-serif; margin: 0; }\n .font-heading { font-family: 'Playfair Display', serif; }\n\n .teacher-card {\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: pointer;\n }\n .teacher-card:hover {\n transform: translateY(-8px) scale(1.02);\n }\n .teacher-card:hover .card-glow {\n opacity: 1;\n }\n .card-glow {\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n\n .avatar-ring {\n background: conic-gradient(from 0deg, #1b5e3a, #2e8b57, #4ade80, #2e8b57, #1b5e3a);\n animation: spin-slow 8s linear infinite;\n }\n @keyframes spin-slow {\n to { transform: rotate(360deg); }\n }\n\n .fade-in {\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.6s ease forwards;\n }\n @keyframes fadeUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .hero-pattern {\n background-image: radial-gradient(circle at 20% 50%, rgba(46,139,87,0.08) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(46,139,87,0.06) 0%, transparent 40%),\n radial-gradient(circle at 60% 80%, rgba(26,95,58,0.05) 0%, transparent 45%);\n }\n\n .modal-overlay {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n }\n .modal-overlay.active {\n opacity: 1;\n pointer-events: all;\n }\n .modal-content {\n transform: scale(0.9) translateY(20px);\n transition: transform 0.3s ease;\n }\n .modal-overlay.active .modal-content {\n transform: scale(1) translateY(0);\n }\n\n .filter-btn {\n transition: all 0.2s ease;\n }\n .filter-btn.active {\n background: #1b5e3a;\n color: white;\n box-shadow: 0 4px 12px rgba(27,94,58,0.3);\n }\n\n .stagger-1 { animation-delay: 0.1s; }\n .stagger-2 { animation-delay: 0.15s; }\n .stagger-3 { animation-delay: 0.2s; }\n .stagger-4 { animation-delay: 0.25s; }\n .stagger-5 { animation-delay: 0.3s; }\n .stagger-6 { animation-delay: 0.35s; }\n .stagger-7 { animation-delay: 0.4s; }\n .stagger-8 { animation-delay: 0.45s; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n <div id=\"app\" class=\"w-full h-full overflow-auto bg-stone-50 hero-pattern\">\n \n <header class=\"relative overflow-hidden py-12 px-6 text-center\" style=\"background: linear-gradient(135deg, #1b5e3a 0%, #2e8b57 60%, #3da06a 100%);\">\n <div class=\"absolute inset-0 opacity-10\">\n <svg width=\"100%\" height=\"100%\"><defs>\n <pattern id=\"grid\" width=\"40\" height=\"40\" patternunits=\"userSpaceOnUse\">\n <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"white\" stroke-width=\"0.5\" \/>\n <\/pattern>\n <\/defs><rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" \/>\n <\/svg>\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"inline-flex items-center gap-2 bg-white\/15 backdrop-blur-sm rounded-full px-4 py-1.5 mb-4\">\n <i data-lucide=\"school\" style=\"width:16px;height:16px;color:white;\"><\/i> <span class=\"text-white\/90 text-sm font-medium\">SMPN 1 Rancabali<\/span>\n <\/div>\n <h1 id=\"page-title\" class=\"font-heading text-3xl md:text-5xl text-white font-bold mb-3\">Dewan Guru<\/h1>\n <p id=\"school-motto\" class=\"text-white\/80 text-lg max-w-xl mx-auto\">Unggul dalam Prestasi, Luhur dalam Budi Pekerti<\/p>\n <\/div>\n <\/header>\n <nav class=\"sticky top-0 z-20 bg-white\/80 backdrop-blur-md border-b border-stone-200 px-4 py-3\">\n <div class=\"max-w-5xl mx-auto flex flex-wrap gap-2 justify-center\" id=\"filter-container\">\n <button class=\"filter-btn active px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"all\">Semua<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"ipa\">IPA<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"ips\">IPS<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"bahasa\">Bahasa<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"agama\">Agama<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"lainnya\">Lainnya<\/button>\n <\/div>\n <\/nav>\n <main class=\"max-w-6xl mx-auto px-4 py-10\">\n <div id=\"teacher-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <\/div>\n <p id=\"empty-msg\" class=\"hidden text-center text-stone-400 py-12 text-lg\">Tidak ada guru di kategori ini.<\/p>\n <\/main>\n <div id=\"edit-modal\" class=\"modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4\" style=\"background:rgba(0,0,0,0.6);\">\n <div class=\"modal-content bg-white rounded-2xl max-w-lg w-full overflow-hidden shadow-2xl\">\n <div class=\"bg-gradient-to-r from-emerald-700 to-emerald-600 px-6 py-4 flex items-center justify-between\">\n <h2 class=\"font-heading text-xl font-bold text-white\">Edit Guru<\/h2><button id=\"edit-modal-close\" class=\"w-8 h-8 bg-white\/20 rounded-full flex items-center justify-center hover:bg-white\/40 transition\"> <i data-lucide=\"x\" style=\"width:18px;height:18px;color:white;\"><\/i> <\/button>\n <\/div>\n <div class=\"px-6 py-6 space-y-4 max-h-96 overflow-y-auto\">\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Foto (URL atau pilih emoji)<\/label>\n <div class=\"flex gap-2 mb-3\"><input type=\"text\" id=\"edit-photo-url\" placeholder=\"https:\/\/example.com\/photo.jpg\" class=\"flex-1 px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\"> <button id=\"edit-photo-btn\" class=\"px-4 py-2 bg-stone-100 hover:bg-stone-200 rounded-lg text-sm font-medium transition\">Emoji<\/button>\n <\/div>\n <div id=\"emoji-picker\" class=\"hidden grid grid-cols-6 gap-2 p-3 bg-stone-50 rounded-lg\"><button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc68\u200d\ud83c\udfeb\">\ud83d\udc68\u200d\ud83c\udfeb<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc69\u200d\ud83c\udfeb\">\ud83d\udc69\u200d\ud83c\udfeb<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc68\u200d\ud83d\udd2c\">\ud83d\udc68\u200d\ud83d\udd2c<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc69\u200d\ud83d\udd2c\">\ud83d\udc69\u200d\ud83d\udd2c<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc68\u200d\ud83d\udcbc\">\ud83d\udc68\u200d\ud83d\udcbc<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc69\u200d\ud83d\udcbc\">\ud83d\udc69\u200d\ud83d\udcbc<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83c\udf0d\">\ud83c\udf0d<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83c\udfa8\">\ud83c\udfa8<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\u26bd\">\u26bd<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udcda\">\ud83d\udcda<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udd4c\">\ud83d\udd4c<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83c\uddee\ud83c\udde9\">\ud83c\uddee\ud83c\udde9<\/button>\n <\/div>\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Nama Lengkap<\/label> <input type=\"text\" id=\"edit-name\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Jabatan<\/label> <input type=\"text\" id=\"edit-role\" placeholder=\"Guru \/ Kepala Sekolah \/ Wakasek\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Mata Pelajaran<\/label> <input type=\"text\" id=\"edit-mapel\" placeholder=\"Matematika \/ IPA \/ Bahasa\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Kategori<\/label> <select id=\"edit-category\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\"> <option value=\"ipa\">IPA<\/option> <option value=\"ips\">IPS<\/option> <option value=\"bahasa\">Bahasa<\/option> <option value=\"agama\">Agama<\/option> <option value=\"lainnya\">Lainnya<\/option> <\/select>\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Motto Pribadi<\/label> <textarea id=\"edit-motto\" placeholder=\"Masukkan motto atau filosofi mengajar\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600 h-20 resize-none\"><\/textarea>\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Pengalaman Mengajar<\/label> <input type=\"text\" id=\"edit-pengalaman\" placeholder=\"15 tahun\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <\/div>\n <div class=\"bg-stone-50 px-6 py-4 flex gap-3 justify-end border-t border-stone-200\"><button id=\"edit-delete-btn\" class=\"px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition\">Hapus<\/button> <button id=\"edit-save-btn\" class=\"px-4 py-2 bg-emerald-600 text-white hover:bg-emerald-700 rounded-lg text-sm font-medium transition\">Simpan<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"modal\" class=\"modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4\" style=\"background:rgba(0,0,0,0.6);\">\n <div class=\"modal-content bg-white rounded-2xl max-w-md w-full overflow-hidden shadow-2xl\">\n <div class=\"relative h-32\" style=\"background: linear-gradient(135deg, #1b5e3a, #2e8b57);\">\n <button id=\"modal-close\" class=\"absolute top-3 right-3 w-8 h-8 bg-white\/20 rounded-full flex items-center justify-center hover:bg-white\/40 transition\"> <i data-lucide=\"x\" style=\"width:18px;height:18px;color:white;\"><\/i> <\/button>\n <\/div>\n <div class=\"relative px-6 pb-6\">\n <div class=\"w-20 h-20 rounded-full bg-white border-4 border-white shadow-lg flex items-center justify-center text-3xl -mt-10 relative z-10\" id=\"modal-avatar\"><\/div>\n <h2 id=\"modal-name\" class=\"font-heading text-xl font-bold text-stone-800 mt-3\"><\/h2>\n <p id=\"modal-role\" class=\"text-emerald-700 font-medium text-sm mt-1\"><\/p>\n <div class=\"mt-4 space-y-3\" id=\"modal-details\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer class=\"text-center py-8 text-stone-400 text-sm border-t border-stone-200\">\n \u00a9 2026 SMPN 1 Rancabali \u2014 Kabupaten Bandung\n <\/footer>\n <\/div>\n <script>\nconst teachers = [\n { name: \"Dikdik Ahmad Sodikin, S.Pd, M.M.\", role: \"Kepala Sekolah\", mapel: \"\u2014\", category: \"lainnya\", emoji: \"\ud83d\udc68\u200d\ud83d\udcbc\", motto: \"Pendidikan adalah investasi terbaik untuk masa depan.\", pengalaman: \"60 tahun\" },\n { name: \"Maman Suherman, S.Pd.\", role: \"Wakasek Kurikulum\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Ai Mamah Tasimah, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n { name: \"H. Asep Deni Yuswana, S.Pd., M.M.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc68\u200d\ud83d\udd2c\", motto: \"Sains membuka jendela dunia.\", pengalaman: \" tahun\" },\n { name: \"Winarti, S.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc69\u200d\ud83d\udd2c\", motto: \"Alam adalah laboratorium terbaik.\", pengalaman: \" tahun\" },\n{ name: \"Dewi Rostika, S.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc69\u200d\ud83d\udd2c\", motto: \"Alam adalah laboratorium terbaik.\", pengalaman: \" tahun\" },\n{ name: \"Iin Munjiah, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n{ name: \"Eka Hernika, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Sunda\", category: \"bahasa\", emoji: \"\u26f0\ufe0f\", motto: \"Basa Sunda t\u00e9h ciciren bangsa, leungit basana ilang bangsana.\", pengalaman: \" tahun\" },\n{ name: \"Siti Soleha, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Asep Parid Soleh Hambali, S.Kom., M.Kom.\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n{ name: \"Agus Maulana Idrus, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n{ name: \"Nurhayati, S.Pd.\", role: \"Guru\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Budi Budiawan, S.Pd.\", role: \"Guru\", mapel: \"Pend. Pancasila\", category: \"lainnya\", emoji: \"\u2696\ufe0f\", motto: \"Pancasila bukan sekadar dihafal, tapi hidup dalam perilaku sehari-hari.\", pengalaman: \" tahun\" },\n{ name: \"Willy Firmansyah, S.Pd.\", role: \"Guru\", mapel: \"PJOK\", category: \"lainnya\", emoji: \"\u26bd\", motto: \"Di badan sehat terdapat jiwa yang kuat.\", pengalaman: \" tahun\" },\n{ name: \"Denia Nugraha Asri Wahyuni, S.Hum.\", role: \"Guru\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Fitri Rohmawati, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Lilis Atikah, S.Pd.\", role: \"Guru\", mapel: \"Pendidikan Agama Islam\", category: \"agama\", emoji: \"\ud83d\udd4c\", motto: \"Ilmu tanpa amal bagai pohon tanpa buah.\", pengalaman: \" tahun\" },\n{ name: \"Totin Supriatin, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n { name: \"Risa Risthia Dewi, SE., S.Pd.I.\", role: \"Guru\", mapel: \"IPS\/ PABP\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Angga Irawan, S.Pd.\", role: \"Guru\", mapel: \"IPS\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Linda Kusniawati, S.Pd.\", role: \"Guru\", mapel: \"B. Inggris\/ B. Indonesia\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Siti Aini Latifah S, SS.\", role: \"Guru\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Cecep Abrianto, S.Pd.\", role: \"Guru\", mapel: \"PJOK\", category: \"lainnya\", emoji: \"\u26bd\", motto: \"Di badan sehat terdapat jiwa yang kuat.\", pengalaman: \" tahun\" },\n{ name: \"Rapliana Nugraha, S.Pd.\", role: \"Guru\", mapel: \"IPS\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Nuraeni, S.Pd.\", role: \"Guru\", mapel: \"B. Inggris\/ Informatika\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Risniawati Nur Rahayu, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n{ name: \"Siti Aisah, S.Pd.\", role: \"Guru\", mapel: \"Pend. Pancasila\", category: \"lainnya\", emoji: \"\u2696\ufe0f\", motto: \"Pancasila bukan sekadar dihafal, tapi hidup dalam perilaku sehari-hari.\", pengalaman: \" tahun\" },\n{ name: \"Iis Siti Kurniasih, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Resty Utami Safarilla, S.Pd.\", role: \"Guru\", mapel: \"Pend. Pancasila\", category: \"lainnya\", emoji: \"\u2696\ufe0f\", motto: \"Pancasila bukan sekadar dihafal, tapi hidup dalam perilaku sehari-hari.\", pengalaman: \" tahun\" },\n{ name: \"Meyke Linda Permana, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Yusti Sylvia Febriarini, S.Pd.\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n{ name: \"Rizky Firmansyah Hidayat, S.Pd.\", role: \"Guru\", mapel: \"PJOK\", category: \"lainnya\", emoji: \"\u26bd\", motto: \"Di badan sehat terdapat jiwa yang kuat.\", pengalaman: \" tahun\" },\n{ name: \"Noer Aslam Rahayu, S.Pd.\", role: \"Guru\", mapel: \"IPS\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Laila Hanifa, S.Pd.\", role: \"Guru\", mapel: \"BP\/BK\", category: \"lainnya\", emoji: \"\ud83d\udca1\", motto: \"Ruang BK bukan tempat siswa bermasalah, tapi tempat mencari solusi bersama.\", pengalaman: \" tahun\" },\n{ name: \"Apep Dadan Mulyana, S.Sn.\", role: \"Guru\", mapel: \"Seni Budaya\/ Prakarya\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Ahmad Kanji, S.Pd.I.\", role: \"Guru\", mapel: \"Pendidikan Agama Islam\", category: \"agama\", emoji: \"\ud83d\udd4c\", motto: \"Ilmu tanpa amal bagai pohon tanpa buah.\", pengalaman: \" tahun\" },\n{ name: \"Ely Yuliantini, S.S.I.\", role: \"Guru\", mapel: \"Seni Budaya\/ Prakarya\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Ziyad Fajrul Falah, S.Pd.\", role: \"Guru\", mapel: \"BP\/BK\", category: \"lainnya\", emoji: \"\ud83d\udca1\", motto: \"Ruang BK bukan tempat siswa bermasalah, tapi tempat mencari solusi bersama.\", pengalaman: \" tahun\" },\n{ name: \"Andri Saripudin, S.T.\", role: \"Guru\", mapel: \"Seni Budaya\/ Prakarya\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Dea Karina, S.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc68\u200d\ud83d\udd2c\", motto: \"Sains membuka jendela dunia.\", pengalaman: \" tahun\" },\n{ name: \"Mah Kimkim, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Sunda\", category: \"bahasa\", emoji: \"\u26f0\ufe0f\", motto: \"Basa Sunda t\u00e9h ciciren bangsa, leungit basana ilang bangsana.\", pengalaman: \" tahun\" },\n{ name: \"Dianita Asyifa, S.IP.\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n{ name: \"Nurwidiawati Darmawan, S.Pd.I.\", role: \"Guru\", mapel: \"Pendidikan Agama Islam\", category: \"agama\", emoji: \"\ud83d\udd4c\", motto: \"Ilmu tanpa amal bagai pohon tanpa buah.\", pengalaman: \" tahun\" },\n{ name: \"Eneng Elah Hayati, A.Md.\", role: \"Guru\", mapel: \"Seni Budaya\/ BP\/BK\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Andriana\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n];\n\nlet activeFilter = 'all';\n\nfunction createCard(teacher, index) {\n const div = document.createElement('div');\n div.className = `teacher-card fade-in stagger-${(index % 8) + 1} relative bg-white rounded-xl p-5 border border-stone-100 shadow-sm group`;\n div.dataset.category = teacher.category;\n \n const photoDisplay = teacher.photo ? \n `<img decoding=\"async\" src=\"${teacher.photo}\" alt=\"${teacher.name}\" loading=\"lazy\" onerror=\"console.error('Image failed'); this.style.display='none'; this.parentElement.querySelector('.emoji-fallback').style.display='flex';\" class=\"w-full h-full object-cover rounded-full\">\n <div class=\"emoji-fallback hidden absolute inset-0 bg-white flex items-center justify-center text-2xl rounded-full\">${teacher.emoji}<\/div>` : \n `<div class=\"w-full h-full rounded-full bg-white flex items-center justify-center text-2xl\">${teacher.emoji}<\/div>`;\n \n div.innerHTML = `\n <div class=\"card-glow absolute inset-0 rounded-xl shadow-lg shadow-emerald-200\/50 pointer-events-none\"><\/div>\n <div class=\"absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition flex gap-1\">\n <button class=\"edit-btn w-7 h-7 bg-emerald-600 text-white rounded-full flex items-center justify-center hover:bg-emerald-700\" title=\"Edit\">\n <i data-lucide=\"edit-2\" style=\"width:14px;height:14px;\"><\/i>\n <\/button>\n <\/div>\n <div class=\"relative z-10 flex flex-col items-center text-center\">\n <div class=\"avatar-ring w-16 h-16 rounded-full p-[3px] mb-3 relative overflow-hidden\">\n ${photoDisplay}\n <\/div>\n <h3 class=\"font-heading text-sm font-bold text-stone-800 leading-tight\">${teacher.name}<\/h3>\n <span class=\"mt-1 inline-block bg-emerald-50 text-emerald-700 text-xs font-medium px-2.5 py-0.5 rounded-full\">${teacher.mapel}<\/span>\n <p class=\"text-stone-400 text-xs mt-2\">${teacher.role}<\/p>\n <\/div>\n `;\n div.addEventListener('click', () => openModal(teacher));\n div.querySelector('.edit-btn').addEventListener('click', (e) => {\n e.stopPropagation();\n openEditModal(teacher);\n });\n return div;\n}\n\nfunction renderGrid() {\n const grid = document.getElementById('teacher-grid');\n const empty = document.getElementById('empty-msg');\n grid.innerHTML = '';\n const filtered = activeFilter === 'all' ? teachers : teachers.filter(t => t.category === activeFilter);\n if (filtered.length === 0) {\n empty.classList.remove('hidden');\n } else {\n empty.classList.add('hidden');\n filtered.forEach((t, i) => grid.appendChild(createCard(t, i)));\n }\n lucide.createIcons();\n}\n\nfunction openModal(teacher) {\n const modal = document.getElementById('modal');\n document.getElementById('modal-avatar').textContent = teacher.emoji;\n document.getElementById('modal-name').textContent = teacher.name;\n document.getElementById('modal-role').textContent = teacher.role + (teacher.mapel !== '\u2014' ? ' \u2022 ' + teacher.mapel : '');\n document.getElementById('modal-details').innerHTML = `\n <div class=\"flex items-start gap-3 bg-emerald-50 rounded-lg p-3\">\n <i data-lucide=\"quote\" style=\"width:16px;height:16px;color:#2e8b57;flex-shrink:0;margin-top:2px;\"><\/i>\n <p class=\"text-stone-700 text-sm italic\">\"${teacher.motto}\"<\/p>\n <\/div>\n <div class=\"flex items-center gap-3 text-sm text-stone-600\">\n <i data-lucide=\"briefcase\" style=\"width:16px;height:16px;color:#2e8b57;\"><\/i>\n <span>Pengalaman: ${teacher.pengalaman}<\/span>\n <\/div>\n `;\n modal.classList.add('active');\n lucide.createIcons();\n}\n\ndocument.getElementById('modal-close').addEventListener('click', () => {\n document.getElementById('modal').classList.remove('active');\n});\ndocument.getElementById('modal').addEventListener('click', (e) => {\n if (e.target === e.currentTarget) document.getElementById('modal').classList.remove('active');\n});\n\n\/\/ Edit Modal Functions\nlet currentEditTeacherIndex = null;\n\nfunction openEditModal(teacher) {\n currentEditTeacherIndex = teachers.indexOf(teacher);\n document.getElementById('edit-photo-url').value = teacher.photo || '';\n document.getElementById('edit-name').value = teacher.name;\n document.getElementById('edit-role').value = teacher.role;\n document.getElementById('edit-mapel').value = teacher.mapel;\n document.getElementById('edit-category').value = teacher.category;\n document.getElementById('edit-motto').value = teacher.motto;\n document.getElementById('edit-pengalaman').value = teacher.pengalaman;\n document.getElementById('emoji-picker').classList.add('hidden');\n document.getElementById('edit-modal').classList.add('active');\n lucide.createIcons();\n}\n\ndocument.getElementById('edit-modal-close').addEventListener('click', () => {\n document.getElementById('edit-modal').classList.remove('active');\n});\ndocument.getElementById('edit-modal').addEventListener('click', (e) => {\n if (e.target === e.currentTarget) document.getElementById('edit-modal').classList.remove('active');\n});\n\ndocument.getElementById('edit-photo-btn').addEventListener('click', () => {\n document.getElementById('emoji-picker').classList.toggle('hidden');\n});\n\ndocument.querySelectorAll('.emoji-opt').forEach(btn => {\n btn.addEventListener('click', () => {\n document.getElementById('edit-photo-url').value = btn.dataset.emoji;\n document.getElementById('emoji-picker').classList.add('hidden');\n });\n});\n\ndocument.getElementById('edit-save-btn').addEventListener('click', () => {\n if (currentEditTeacherIndex !== null) {\n const photoVal = document.getElementById('edit-photo-url').value.trim();\n teachers[currentEditTeacherIndex].photo = photoVal && !photoVal.match(\/^[\\p{Emoji}]\/u) ? photoVal : null;\n teachers[currentEditTeacherIndex].emoji = photoVal.match(\/^[\\p{Emoji}]\/u) ? photoVal : teachers[currentEditTeacherIndex].emoji;\n teachers[currentEditTeacherIndex].name = document.getElementById('edit-name').value;\n teachers[currentEditTeacherIndex].role = document.getElementById('edit-role').value;\n teachers[currentEditTeacherIndex].mapel = document.getElementById('edit-mapel').value;\n teachers[currentEditTeacherIndex].category = document.getElementById('edit-category').value;\n teachers[currentEditTeacherIndex].motto = document.getElementById('edit-motto').value;\n teachers[currentEditTeacherIndex].pengalaman = document.getElementById('edit-pengalaman').value;\n renderGrid();\n document.getElementById('edit-modal').classList.remove('active');\n }\n});\n\ndocument.getElementById('edit-delete-btn').addEventListener('click', () => {\n if (currentEditTeacherIndex !== null && confirm('Yakin hapus guru ini?')) {\n teachers.splice(currentEditTeacherIndex, 1);\n renderGrid();\n document.getElementById('edit-modal').classList.remove('active');\n }\n});\n\ndocument.querySelectorAll('.filter-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n activeFilter = btn.dataset.filter;\n renderGrid();\n });\n});\n\n\/\/ Element SDK\nconst defaultConfig = {\n page_title: \"Dewan Guru\",\n school_motto: \"Unggul dalam Prestasi, Luhur dalam Budi Pekerti\",\n background_color: \"#fafaf9\",\n surface_color: \"#ffffff\",\n text_color: \"#1c1917\",\n primary_action: \"#1b5e3a\",\n secondary_action: \"#2e8b57\",\n font_family: \"Playfair Display\",\n font_size: 16\n};\n\nfunction applyConfig(config) {\n document.getElementById('page-title').textContent = config.page_title || defaultConfig.page_title;\n document.getElementById('school-motto').textContent = config.school_motto || defaultConfig.school_motto;\n\n const app = document.getElementById('app');\n app.style.backgroundColor = config.background_color || defaultConfig.background_color;\n\n document.querySelectorAll('.teacher-card').forEach(card => {\n card.style.backgroundColor = config.surface_color || defaultConfig.surface_color;\n });\n\n const textColor = config.text_color || defaultConfig.text_color;\n document.querySelectorAll('.font-heading').forEach(el => el.style.color = textColor);\n\n const font = config.font_family || defaultConfig.font_family;\n const baseSize = config.font_size || defaultConfig.font_size;\n document.getElementById('page-title').style.fontFamily = `${font}, serif`;\n document.getElementById('page-title').style.fontSize = `${baseSize * 2.5}px`;\n}\n\nwindow.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => { applyConfig(config); },\n mapToCapabilities: (config) => ({\n recolorables: [\n { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } },\n { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } },\n { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },\n { get: () => config.primary_action || defaultConfig.primary_action, set: (v) => { config.primary_action = v; window.elementSdk.setConfig({ primary_action: v }); } },\n { get: () => config.secondary_action || defaultConfig.secondary_action, set: (v) => { config.secondary_action = v; window.elementSdk.setConfig({ secondary_action: v }); } },\n ],\n borderables: [],\n fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },\n fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); } },\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"page_title\", config.page_title || defaultConfig.page_title],\n [\"school_motto\", config.school_motto || defaultConfig.school_motto],\n ])\n});\n\nrenderGrid();\nlucide.createIcons();\n<\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9ff2a0971446e782',t:'MTc3OTM1NjUwNy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dewan Guru SMPN 1 Rancabali SMPN 1 Rancabali Dewan Guru Unggul dalam Prestasi, Luhur dalam Budi Pekerti Semua…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-62","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":51,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":62,"date":"2026-05-14T10:19:09","date_gmt":"2026-05-14T10:19:09","guid":{"rendered":"https:\/\/smpn1rancabali.sch.id\/?page_id=62"},"modified":"2026-06-13T11:36:46","modified_gmt":"2026-06-13T04:36:46","slug":"pendidik-dan-tendik","status":"publish","type":"page","link":"https:\/\/smpn1rancabali.sch.id\/?page_id=62","title":{"rendered":"Pendidik Dan Tendik"},"content":{"rendered":"\n\n\n \n \n \n Dewan Guru SMPN 1 Rancabali<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n * { box-sizing: border-box; }\n body { font-family: 'Source Sans 3', sans-serif; margin: 0; }\n .font-heading { font-family: 'Playfair Display', serif; }\n\n .teacher-card {\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: pointer;\n }\n .teacher-card:hover {\n transform: translateY(-8px) scale(1.02);\n }\n .teacher-card:hover .card-glow {\n opacity: 1;\n }\n .card-glow {\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n\n .avatar-ring {\n background: conic-gradient(from 0deg, #1b5e3a, #2e8b57, #4ade80, #2e8b57, #1b5e3a);\n animation: spin-slow 8s linear infinite;\n }\n @keyframes spin-slow {\n to { transform: rotate(360deg); }\n }\n\n .fade-in {\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.6s ease forwards;\n }\n @keyframes fadeUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .hero-pattern {\n background-image: radial-gradient(circle at 20% 50%, rgba(46,139,87,0.08) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(46,139,87,0.06) 0%, transparent 40%),\n radial-gradient(circle at 60% 80%, rgba(26,95,58,0.05) 0%, transparent 45%);\n }\n\n .modal-overlay {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n }\n .modal-overlay.active {\n opacity: 1;\n pointer-events: all;\n }\n .modal-content {\n transform: scale(0.9) translateY(20px);\n transition: transform 0.3s ease;\n }\n .modal-overlay.active .modal-content {\n transform: scale(1) translateY(0);\n }\n\n .filter-btn {\n transition: all 0.2s ease;\n }\n .filter-btn.active {\n background: #1b5e3a;\n color: white;\n box-shadow: 0 4px 12px rgba(27,94,58,0.3);\n }\n\n .stagger-1 { animation-delay: 0.1s; }\n .stagger-2 { animation-delay: 0.15s; }\n .stagger-3 { animation-delay: 0.2s; }\n .stagger-4 { animation-delay: 0.25s; }\n .stagger-5 { animation-delay: 0.3s; }\n .stagger-6 { animation-delay: 0.35s; }\n .stagger-7 { animation-delay: 0.4s; }\n .stagger-8 { animation-delay: 0.45s; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n <div id=\"app\" class=\"w-full h-full overflow-auto bg-stone-50 hero-pattern\">\n \n <header class=\"relative overflow-hidden py-12 px-6 text-center\" style=\"background: linear-gradient(135deg, #1b5e3a 0%, #2e8b57 60%, #3da06a 100%);\">\n <div class=\"absolute inset-0 opacity-10\">\n <svg width=\"100%\" height=\"100%\"><defs>\n <pattern id=\"grid\" width=\"40\" height=\"40\" patternunits=\"userSpaceOnUse\">\n <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"white\" stroke-width=\"0.5\" \/>\n <\/pattern>\n <\/defs><rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" \/>\n <\/svg>\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"inline-flex items-center gap-2 bg-white\/15 backdrop-blur-sm rounded-full px-4 py-1.5 mb-4\">\n <i data-lucide=\"school\" style=\"width:16px;height:16px;color:white;\"><\/i> <span class=\"text-white\/90 text-sm font-medium\">SMPN 1 Rancabali<\/span>\n <\/div>\n <h1 id=\"page-title\" class=\"font-heading text-3xl md:text-5xl text-white font-bold mb-3\">Dewan Guru<\/h1>\n <p id=\"school-motto\" class=\"text-white\/80 text-lg max-w-xl mx-auto\">Unggul dalam Prestasi, Luhur dalam Budi Pekerti<\/p>\n <\/div>\n <\/header>\n <nav class=\"sticky top-0 z-20 bg-white\/80 backdrop-blur-md border-b border-stone-200 px-4 py-3\">\n <div class=\"max-w-5xl mx-auto flex flex-wrap gap-2 justify-center\" id=\"filter-container\">\n <button class=\"filter-btn active px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"all\">Semua<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"ipa\">IPA<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"ips\">IPS<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"bahasa\">Bahasa<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"agama\">Agama<\/button> <button class=\"filter-btn px-4 py-2 rounded-full text-sm font-medium border border-stone-200\" data-filter=\"lainnya\">Lainnya<\/button>\n <\/div>\n <\/nav>\n <main class=\"max-w-6xl mx-auto px-4 py-10\">\n <div id=\"teacher-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <\/div>\n <p id=\"empty-msg\" class=\"hidden text-center text-stone-400 py-12 text-lg\">Tidak ada guru di kategori ini.<\/p>\n <\/main>\n <div id=\"edit-modal\" class=\"modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4\" style=\"background:rgba(0,0,0,0.6);\">\n <div class=\"modal-content bg-white rounded-2xl max-w-lg w-full overflow-hidden shadow-2xl\">\n <div class=\"bg-gradient-to-r from-emerald-700 to-emerald-600 px-6 py-4 flex items-center justify-between\">\n <h2 class=\"font-heading text-xl font-bold text-white\">Edit Guru<\/h2><button id=\"edit-modal-close\" class=\"w-8 h-8 bg-white\/20 rounded-full flex items-center justify-center hover:bg-white\/40 transition\"> <i data-lucide=\"x\" style=\"width:18px;height:18px;color:white;\"><\/i> <\/button>\n <\/div>\n <div class=\"px-6 py-6 space-y-4 max-h-96 overflow-y-auto\">\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Foto (URL atau pilih emoji)<\/label>\n <div class=\"flex gap-2 mb-3\"><input type=\"text\" id=\"edit-photo-url\" placeholder=\"https:\/\/example.com\/photo.jpg\" class=\"flex-1 px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\"> <button id=\"edit-photo-btn\" class=\"px-4 py-2 bg-stone-100 hover:bg-stone-200 rounded-lg text-sm font-medium transition\">Emoji<\/button>\n <\/div>\n <div id=\"emoji-picker\" class=\"hidden grid grid-cols-6 gap-2 p-3 bg-stone-50 rounded-lg\"><button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc68\u200d\ud83c\udfeb\">\ud83d\udc68\u200d\ud83c\udfeb<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc69\u200d\ud83c\udfeb\">\ud83d\udc69\u200d\ud83c\udfeb<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc68\u200d\ud83d\udd2c\">\ud83d\udc68\u200d\ud83d\udd2c<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc69\u200d\ud83d\udd2c\">\ud83d\udc69\u200d\ud83d\udd2c<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc68\u200d\ud83d\udcbc\">\ud83d\udc68\u200d\ud83d\udcbc<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udc69\u200d\ud83d\udcbc\">\ud83d\udc69\u200d\ud83d\udcbc<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83c\udf0d\">\ud83c\udf0d<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83c\udfa8\">\ud83c\udfa8<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\u26bd\">\u26bd<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udcda\">\ud83d\udcda<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83d\udd4c\">\ud83d\udd4c<\/button> <button class=\"emoji-opt text-2xl p-2 hover:bg-white rounded transition\" data-emoji=\"\ud83c\uddee\ud83c\udde9\">\ud83c\uddee\ud83c\udde9<\/button>\n <\/div>\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Nama Lengkap<\/label> <input type=\"text\" id=\"edit-name\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Jabatan<\/label> <input type=\"text\" id=\"edit-role\" placeholder=\"Guru \/ Kepala Sekolah \/ Wakasek\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Mata Pelajaran<\/label> <input type=\"text\" id=\"edit-mapel\" placeholder=\"Matematika \/ IPA \/ Bahasa\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Kategori<\/label> <select id=\"edit-category\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\"> <option value=\"ipa\">IPA<\/option> <option value=\"ips\">IPS<\/option> <option value=\"bahasa\">Bahasa<\/option> <option value=\"agama\">Agama<\/option> <option value=\"lainnya\">Lainnya<\/option> <\/select>\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Motto Pribadi<\/label> <textarea id=\"edit-motto\" placeholder=\"Masukkan motto atau filosofi mengajar\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600 h-20 resize-none\"><\/textarea>\n <\/div>\n <div><label class=\"block text-sm font-medium text-stone-700 mb-2\">Pengalaman Mengajar<\/label> <input type=\"text\" id=\"edit-pengalaman\" placeholder=\"15 tahun\" class=\"w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-600\">\n <\/div>\n <\/div>\n <div class=\"bg-stone-50 px-6 py-4 flex gap-3 justify-end border-t border-stone-200\"><button id=\"edit-delete-btn\" class=\"px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition\">Hapus<\/button> <button id=\"edit-save-btn\" class=\"px-4 py-2 bg-emerald-600 text-white hover:bg-emerald-700 rounded-lg text-sm font-medium transition\">Simpan<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"modal\" class=\"modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4\" style=\"background:rgba(0,0,0,0.6);\">\n <div class=\"modal-content bg-white rounded-2xl max-w-md w-full overflow-hidden shadow-2xl\">\n <div class=\"relative h-32\" style=\"background: linear-gradient(135deg, #1b5e3a, #2e8b57);\">\n <button id=\"modal-close\" class=\"absolute top-3 right-3 w-8 h-8 bg-white\/20 rounded-full flex items-center justify-center hover:bg-white\/40 transition\"> <i data-lucide=\"x\" style=\"width:18px;height:18px;color:white;\"><\/i> <\/button>\n <\/div>\n <div class=\"relative px-6 pb-6\">\n <div class=\"w-20 h-20 rounded-full bg-white border-4 border-white shadow-lg flex items-center justify-center text-3xl -mt-10 relative z-10\" id=\"modal-avatar\"><\/div>\n <h2 id=\"modal-name\" class=\"font-heading text-xl font-bold text-stone-800 mt-3\"><\/h2>\n <p id=\"modal-role\" class=\"text-emerald-700 font-medium text-sm mt-1\"><\/p>\n <div class=\"mt-4 space-y-3\" id=\"modal-details\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer class=\"text-center py-8 text-stone-400 text-sm border-t border-stone-200\">\n \u00a9 2026 SMPN 1 Rancabali \u2014 Kabupaten Bandung\n <\/footer>\n <\/div>\n <script>\nconst teachers = [\n { name: \"Dikdik Ahmad Sodikin, S.Pd, M.M.\", role: \"Kepala Sekolah\", mapel: \"\u2014\", category: \"lainnya\", emoji: \"\ud83d\udc68\u200d\ud83d\udcbc\", motto: \"Pendidikan adalah investasi terbaik untuk masa depan.\", pengalaman: \"60 tahun\" },\n { name: \"Maman Suherman, S.Pd.\", role: \"Wakasek Kurikulum\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Ai Mamah Tasimah, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n { name: \"H. Asep Deni Yuswana, S.Pd., M.M.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc68\u200d\ud83d\udd2c\", motto: \"Sains membuka jendela dunia.\", pengalaman: \" tahun\" },\n { name: \"Winarti, S.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc69\u200d\ud83d\udd2c\", motto: \"Alam adalah laboratorium terbaik.\", pengalaman: \" tahun\" },\n{ name: \"Dewi Rostika, S.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc69\u200d\ud83d\udd2c\", motto: \"Alam adalah laboratorium terbaik.\", pengalaman: \" tahun\" },\n{ name: \"Iin Munjiah, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n{ name: \"Eka Hernika, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Sunda\", category: \"bahasa\", emoji: \"\u26f0\ufe0f\", motto: \"Basa Sunda t\u00e9h ciciren bangsa, leungit basana ilang bangsana.\", pengalaman: \" tahun\" },\n{ name: \"Siti Soleha, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Asep Parid Soleh Hambali, S.Kom., M.Kom.\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n{ name: \"Agus Maulana Idrus, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n{ name: \"Nurhayati, S.Pd.\", role: \"Guru\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Budi Budiawan, S.Pd.\", role: \"Guru\", mapel: \"Pend. Pancasila\", category: \"lainnya\", emoji: \"\u2696\ufe0f\", motto: \"Pancasila bukan sekadar dihafal, tapi hidup dalam perilaku sehari-hari.\", pengalaman: \" tahun\" },\n{ name: \"Willy Firmansyah, S.Pd.\", role: \"Guru\", mapel: \"PJOK\", category: \"lainnya\", emoji: \"\u26bd\", motto: \"Di badan sehat terdapat jiwa yang kuat.\", pengalaman: \" tahun\" },\n{ name: \"Denia Nugraha Asri Wahyuni, S.Hum.\", role: \"Guru\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Fitri Rohmawati, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Lilis Atikah, S.Pd.\", role: \"Guru\", mapel: \"Pendidikan Agama Islam\", category: \"agama\", emoji: \"\ud83d\udd4c\", motto: \"Ilmu tanpa amal bagai pohon tanpa buah.\", pengalaman: \" tahun\" },\n{ name: \"Totin Supriatin, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n { name: \"Risa Risthia Dewi, SE., S.Pd.I.\", role: \"Guru\", mapel: \"IPS\/ PABP\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Angga Irawan, S.Pd.\", role: \"Guru\", mapel: \"IPS\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Linda Kusniawati, S.Pd.\", role: \"Guru\", mapel: \"B. Inggris\/ B. Indonesia\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Siti Aini Latifah S, SS.\", role: \"Guru\", mapel: \"B. Inggris\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Cecep Abrianto, S.Pd.\", role: \"Guru\", mapel: \"PJOK\", category: \"lainnya\", emoji: \"\u26bd\", motto: \"Di badan sehat terdapat jiwa yang kuat.\", pengalaman: \" tahun\" },\n{ name: \"Rapliana Nugraha, S.Pd.\", role: \"Guru\", mapel: \"IPS\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Nuraeni, S.Pd.\", role: \"Guru\", mapel: \"B. Inggris\/ Informatika\", category: \"bahasa\", emoji: \"\ud83c\udf0d\", motto: \"English opens doors to the world.\", pengalaman: \" tahun\" },\n{ name: \"Risniawati Nur Rahayu, S.Pd.\", role: \"Guru\", mapel: \"Matematika\", category: \"lainnya\", emoji: \"\ud83d\udcd0\", motto: \"Kemampuan matematika tidak dibawa lahir, tapi dibentuk oleh latihan.\", pengalaman: \" tahun\" },\n{ name: \"Siti Aisah, S.Pd.\", role: \"Guru\", mapel: \"Pend. Pancasila\", category: \"lainnya\", emoji: \"\u2696\ufe0f\", motto: \"Pancasila bukan sekadar dihafal, tapi hidup dalam perilaku sehari-hari.\", pengalaman: \" tahun\" },\n{ name: \"Iis Siti Kurniasih, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Resty Utami Safarilla, S.Pd.\", role: \"Guru\", mapel: \"Pend. Pancasila\", category: \"lainnya\", emoji: \"\u2696\ufe0f\", motto: \"Pancasila bukan sekadar dihafal, tapi hidup dalam perilaku sehari-hari.\", pengalaman: \" tahun\" },\n{ name: \"Meyke Linda Permana, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Indonesia\", category: \"bahasa\", emoji: \"\ud83d\udcda\", motto: \"Bahasa menunjukkan bangsa.\", pengalaman: \" tahun\" },\n{ name: \"Yusti Sylvia Febriarini, S.Pd.\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n{ name: \"Rizky Firmansyah Hidayat, S.Pd.\", role: \"Guru\", mapel: \"PJOK\", category: \"lainnya\", emoji: \"\u26bd\", motto: \"Di badan sehat terdapat jiwa yang kuat.\", pengalaman: \" tahun\" },\n{ name: \"Noer Aslam Rahayu, S.Pd.\", role: \"Guru\", mapel: \"IPS\", category: \"ips\", emoji: \"\ud83d\uddfa\ufe0f\", motto: \"Belajar dari sejarah untuk masa depan lebih baik.\", pengalaman: \" tahun\" },\n{ name: \"Laila Hanifa, S.Pd.\", role: \"Guru\", mapel: \"BP\/BK\", category: \"lainnya\", emoji: \"\ud83d\udca1\", motto: \"Ruang BK bukan tempat siswa bermasalah, tapi tempat mencari solusi bersama.\", pengalaman: \" tahun\" },\n{ name: \"Apep Dadan Mulyana, S.Sn.\", role: \"Guru\", mapel: \"Seni Budaya\/ Prakarya\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Ahmad Kanji, S.Pd.I.\", role: \"Guru\", mapel: \"Pendidikan Agama Islam\", category: \"agama\", emoji: \"\ud83d\udd4c\", motto: \"Ilmu tanpa amal bagai pohon tanpa buah.\", pengalaman: \" tahun\" },\n{ name: \"Ely Yuliantini, S.S.I.\", role: \"Guru\", mapel: \"Seni Budaya\/ Prakarya\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Ziyad Fajrul Falah, S.Pd.\", role: \"Guru\", mapel: \"BP\/BK\", category: \"lainnya\", emoji: \"\ud83d\udca1\", motto: \"Ruang BK bukan tempat siswa bermasalah, tapi tempat mencari solusi bersama.\", pengalaman: \" tahun\" },\n{ name: \"Andri Saripudin, S.T.\", role: \"Guru\", mapel: \"Seni Budaya\/ Prakarya\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Dea Karina, S.Pd.\", role: \"Guru\", mapel: \"IPA\", category: \"ipa\", emoji: \"\ud83d\udc68\u200d\ud83d\udd2c\", motto: \"Sains membuka jendela dunia.\", pengalaman: \" tahun\" },\n{ name: \"Mah Kimkim, S.Pd.\", role: \"Guru\", mapel: \"Bahasa Sunda\", category: \"bahasa\", emoji: \"\u26f0\ufe0f\", motto: \"Basa Sunda t\u00e9h ciciren bangsa, leungit basana ilang bangsana.\", pengalaman: \" tahun\" },\n{ name: \"Dianita Asyifa, S.IP.\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n{ name: \"Nurwidiawati Darmawan, S.Pd.I.\", role: \"Guru\", mapel: \"Pendidikan Agama Islam\", category: \"agama\", emoji: \"\ud83d\udd4c\", motto: \"Ilmu tanpa amal bagai pohon tanpa buah.\", pengalaman: \" tahun\" },\n{ name: \"Eneng Elah Hayati, A.Md.\", role: \"Guru\", mapel: \"Seni Budaya\/ BP\/BK\", category: \"lainnya\", emoji: \"\ud83c\udfa8\", motto: \"Seni menghaluskan budi pekerti.\", pengalaman: \" tahun\" },\n{ name: \"Andriana\", role: \"Guru\", mapel: \"Informatika\", category: \"lainnya\", emoji: \"\ud83d\udcbb\", motto: \"Gunakan teknologi untuk mencipta karya, bukan sekadar gaya.\", pengalaman: \" tahun\" },\n];\n\nlet activeFilter = 'all';\n\nfunction createCard(teacher, index) {\n const div = document.createElement('div');\n div.className = `teacher-card fade-in stagger-${(index % 8) + 1} relative bg-white rounded-xl p-5 border border-stone-100 shadow-sm group`;\n div.dataset.category = teacher.category;\n \n const photoDisplay = teacher.photo ? \n `<img decoding=\"async\" src=\"${teacher.photo}\" alt=\"${teacher.name}\" loading=\"lazy\" onerror=\"console.error('Image failed'); this.style.display='none'; this.parentElement.querySelector('.emoji-fallback').style.display='flex';\" class=\"w-full h-full object-cover rounded-full\">\n <div class=\"emoji-fallback hidden absolute inset-0 bg-white flex items-center justify-center text-2xl rounded-full\">${teacher.emoji}<\/div>` : \n `<div class=\"w-full h-full rounded-full bg-white flex items-center justify-center text-2xl\">${teacher.emoji}<\/div>`;\n \n div.innerHTML = `\n <div class=\"card-glow absolute inset-0 rounded-xl shadow-lg shadow-emerald-200\/50 pointer-events-none\"><\/div>\n <div class=\"absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition flex gap-1\">\n <button class=\"edit-btn w-7 h-7 bg-emerald-600 text-white rounded-full flex items-center justify-center hover:bg-emerald-700\" title=\"Edit\">\n <i data-lucide=\"edit-2\" style=\"width:14px;height:14px;\"><\/i>\n <\/button>\n <\/div>\n <div class=\"relative z-10 flex flex-col items-center text-center\">\n <div class=\"avatar-ring w-16 h-16 rounded-full p-[3px] mb-3 relative overflow-hidden\">\n ${photoDisplay}\n <\/div>\n <h3 class=\"font-heading text-sm font-bold text-stone-800 leading-tight\">${teacher.name}<\/h3>\n <span class=\"mt-1 inline-block bg-emerald-50 text-emerald-700 text-xs font-medium px-2.5 py-0.5 rounded-full\">${teacher.mapel}<\/span>\n <p class=\"text-stone-400 text-xs mt-2\">${teacher.role}<\/p>\n <\/div>\n `;\n div.addEventListener('click', () => openModal(teacher));\n div.querySelector('.edit-btn').addEventListener('click', (e) => {\n e.stopPropagation();\n openEditModal(teacher);\n });\n return div;\n}\n\nfunction renderGrid() {\n const grid = document.getElementById('teacher-grid');\n const empty = document.getElementById('empty-msg');\n grid.innerHTML = '';\n const filtered = activeFilter === 'all' ? teachers : teachers.filter(t => t.category === activeFilter);\n if (filtered.length === 0) {\n empty.classList.remove('hidden');\n } else {\n empty.classList.add('hidden');\n filtered.forEach((t, i) => grid.appendChild(createCard(t, i)));\n }\n lucide.createIcons();\n}\n\nfunction openModal(teacher) {\n const modal = document.getElementById('modal');\n document.getElementById('modal-avatar').textContent = teacher.emoji;\n document.getElementById('modal-name').textContent = teacher.name;\n document.getElementById('modal-role').textContent = teacher.role + (teacher.mapel !== '\u2014' ? ' \u2022 ' + teacher.mapel : '');\n document.getElementById('modal-details').innerHTML = `\n <div class=\"flex items-start gap-3 bg-emerald-50 rounded-lg p-3\">\n <i data-lucide=\"quote\" style=\"width:16px;height:16px;color:#2e8b57;flex-shrink:0;margin-top:2px;\"><\/i>\n <p class=\"text-stone-700 text-sm italic\">\"${teacher.motto}\"<\/p>\n <\/div>\n <div class=\"flex items-center gap-3 text-sm text-stone-600\">\n <i data-lucide=\"briefcase\" style=\"width:16px;height:16px;color:#2e8b57;\"><\/i>\n <span>Pengalaman: ${teacher.pengalaman}<\/span>\n <\/div>\n `;\n modal.classList.add('active');\n lucide.createIcons();\n}\n\ndocument.getElementById('modal-close').addEventListener('click', () => {\n document.getElementById('modal').classList.remove('active');\n});\ndocument.getElementById('modal').addEventListener('click', (e) => {\n if (e.target === e.currentTarget) document.getElementById('modal').classList.remove('active');\n});\n\n\/\/ Edit Modal Functions\nlet currentEditTeacherIndex = null;\n\nfunction openEditModal(teacher) {\n currentEditTeacherIndex = teachers.indexOf(teacher);\n document.getElementById('edit-photo-url').value = teacher.photo || '';\n document.getElementById('edit-name').value = teacher.name;\n document.getElementById('edit-role').value = teacher.role;\n document.getElementById('edit-mapel').value = teacher.mapel;\n document.getElementById('edit-category').value = teacher.category;\n document.getElementById('edit-motto').value = teacher.motto;\n document.getElementById('edit-pengalaman').value = teacher.pengalaman;\n document.getElementById('emoji-picker').classList.add('hidden');\n document.getElementById('edit-modal').classList.add('active');\n lucide.createIcons();\n}\n\ndocument.getElementById('edit-modal-close').addEventListener('click', () => {\n document.getElementById('edit-modal').classList.remove('active');\n});\ndocument.getElementById('edit-modal').addEventListener('click', (e) => {\n if (e.target === e.currentTarget) document.getElementById('edit-modal').classList.remove('active');\n});\n\ndocument.getElementById('edit-photo-btn').addEventListener('click', () => {\n document.getElementById('emoji-picker').classList.toggle('hidden');\n});\n\ndocument.querySelectorAll('.emoji-opt').forEach(btn => {\n btn.addEventListener('click', () => {\n document.getElementById('edit-photo-url').value = btn.dataset.emoji;\n document.getElementById('emoji-picker').classList.add('hidden');\n });\n});\n\ndocument.getElementById('edit-save-btn').addEventListener('click', () => {\n if (currentEditTeacherIndex !== null) {\n const photoVal = document.getElementById('edit-photo-url').value.trim();\n teachers[currentEditTeacherIndex].photo = photoVal && !photoVal.match(\/^[\\p{Emoji}]\/u) ? photoVal : null;\n teachers[currentEditTeacherIndex].emoji = photoVal.match(\/^[\\p{Emoji}]\/u) ? photoVal : teachers[currentEditTeacherIndex].emoji;\n teachers[currentEditTeacherIndex].name = document.getElementById('edit-name').value;\n teachers[currentEditTeacherIndex].role = document.getElementById('edit-role').value;\n teachers[currentEditTeacherIndex].mapel = document.getElementById('edit-mapel').value;\n teachers[currentEditTeacherIndex].category = document.getElementById('edit-category').value;\n teachers[currentEditTeacherIndex].motto = document.getElementById('edit-motto').value;\n teachers[currentEditTeacherIndex].pengalaman = document.getElementById('edit-pengalaman').value;\n renderGrid();\n document.getElementById('edit-modal').classList.remove('active');\n }\n});\n\ndocument.getElementById('edit-delete-btn').addEventListener('click', () => {\n if (currentEditTeacherIndex !== null && confirm('Yakin hapus guru ini?')) {\n teachers.splice(currentEditTeacherIndex, 1);\n renderGrid();\n document.getElementById('edit-modal').classList.remove('active');\n }\n});\n\ndocument.querySelectorAll('.filter-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n activeFilter = btn.dataset.filter;\n renderGrid();\n });\n});\n\n\/\/ Element SDK\nconst defaultConfig = {\n page_title: \"Dewan Guru\",\n school_motto: \"Unggul dalam Prestasi, Luhur dalam Budi Pekerti\",\n background_color: \"#fafaf9\",\n surface_color: \"#ffffff\",\n text_color: \"#1c1917\",\n primary_action: \"#1b5e3a\",\n secondary_action: \"#2e8b57\",\n font_family: \"Playfair Display\",\n font_size: 16\n};\n\nfunction applyConfig(config) {\n document.getElementById('page-title').textContent = config.page_title || defaultConfig.page_title;\n document.getElementById('school-motto').textContent = config.school_motto || defaultConfig.school_motto;\n\n const app = document.getElementById('app');\n app.style.backgroundColor = config.background_color || defaultConfig.background_color;\n\n document.querySelectorAll('.teacher-card').forEach(card => {\n card.style.backgroundColor = config.surface_color || defaultConfig.surface_color;\n });\n\n const textColor = config.text_color || defaultConfig.text_color;\n document.querySelectorAll('.font-heading').forEach(el => el.style.color = textColor);\n\n const font = config.font_family || defaultConfig.font_family;\n const baseSize = config.font_size || defaultConfig.font_size;\n document.getElementById('page-title').style.fontFamily = `${font}, serif`;\n document.getElementById('page-title').style.fontSize = `${baseSize * 2.5}px`;\n}\n\nwindow.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => { applyConfig(config); },\n mapToCapabilities: (config) => ({\n recolorables: [\n { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } },\n { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } },\n { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },\n { get: () => config.primary_action || defaultConfig.primary_action, set: (v) => { config.primary_action = v; window.elementSdk.setConfig({ primary_action: v }); } },\n { get: () => config.secondary_action || defaultConfig.secondary_action, set: (v) => { config.secondary_action = v; window.elementSdk.setConfig({ secondary_action: v }); } },\n ],\n borderables: [],\n fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },\n fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); } },\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"page_title\", config.page_title || defaultConfig.page_title],\n [\"school_motto\", config.school_motto || defaultConfig.school_motto],\n ])\n});\n\nrenderGrid();\nlucide.createIcons();\n<\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9ff2a0971446e782',t:'MTc3OTM1NjUwNy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dewan Guru SMPN 1 Rancabali SMPN 1 Rancabali Dewan Guru Unggul dalam Prestasi, Luhur dalam Budi Pekerti Semua…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-62","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":51,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}