Program Adiwiyata – 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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n * { font-family: 'Plus Jakarta Sans', sans-serif; }\n .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }\n .fade-up.visible { opacity: 1; transform: translateY(0); }\n .card-hover { transition: all 0.3s ease; }\n .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,139,34,0.15); }\n .pulse-dot { animation: pulse 2s infinite; }\n @keyframes pulse { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.3); opacity:0.7; } }\n .tab-active { background: #166534; color: white; }\n .progress-bar { transition: width 1.5s ease; }\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\">\n \n <header id=\"hero-section\" class=\"relative w-full bg-gradient-to-br from-green-800 via-green-700 to-emerald-600 text-white overflow-hidden\">\n <div class=\"absolute inset-0 opacity-10\">\n <svg width=\"100%\" height=\"100%\"><pattern id=\"leaf\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" patternunits=\"userSpaceOnUse\">\n <path d=\"M30 5 Q40 20 30 35 Q20 20 30 5Z\" fill=\"white\" \/>\n <\/pattern><rect width=\"100%\" height=\"100%\" fill=\"url(#leaf)\" \/>\n <\/svg>\n <\/div>\n <div class=\"relative max-w-5xl mx-auto px-6 py-16 text-center\">\n <div class=\"inline-flex items-center gap-2 bg-white\/15 rounded-full px-4 py-1.5 mb-6 text-sm backdrop-blur-sm\">\n <span class=\"pulse-dot w-2 h-2 bg-yellow-300 rounded-full inline-block\"><\/span> <span>Program Unggulan Sekolah<\/span>\n <\/div>\n <h1 id=\"title-el\" class=\"text-4xl md:text-5xl font-800 mb-4 leading-tight\">\ud83c\udf3f Program Adiwiyata<\/h1>\n <p id=\"school-el\" class=\"text-xl font-medium mb-3 text-white\">SMPN 1 Rancabali<\/p>\n <p id=\"intro-el\" class=\"max-w-2xl mx-auto leading-relaxed text-white\">Mewujudkan sekolah yang peduli dan berbudaya lingkungan melalui pendidikan, partisipasi, dan pengelolaan sarana ramah lingkungan.<\/p>\n <\/div>\n <\/header>\n <section class=\"max-w-5xl mx-auto px-6 -mt-8 relative z-10\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat1\">\n 0\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Tahun Berjalan\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat2\">\n 0\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Kegiatan\/Tahun\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat3\">\n 0%\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Partisipasi Siswa\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat4\">\n 0\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Penghargaan\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"max-w-5xl mx-auto px-6 py-14\">\n <h2 class=\"text-2xl font-700 text-gray-800 text-center mb-8\">Komponen Program Adiwiyata<\/h2>\n <div class=\"flex flex-wrap justify-center gap-2 mb-8\" id=\"tab-nav\">\n <button onclick=\"switchTab(0)\" class=\"tab-btn tab-active px-4 py-2 rounded-full text-sm font-600 transition-all\">Kebijakan<\/button> <button onclick=\"switchTab(1)\" class=\"tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all\">Kurikulum<\/button> <button onclick=\"switchTab(2)\" class=\"tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all\">Partisipatif<\/button> <button onclick=\"switchTab(3)\" class=\"tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all\">Sarana<\/button>\n <\/div>\n <div id=\"tab-content\" class=\"bg-white rounded-2xl shadow-lg p-8 min-h-[220px]\"><\/div>\n <\/section>\n <section class=\"bg-green-50 py-14\">\n <div class=\"max-w-5xl mx-auto px-6\">\n <h2 class=\"text-2xl font-700 text-gray-800 text-center mb-8\">Kegiatan Unggulan<\/h2>\n <div class=\"grid md:grid-cols-3 gap-6\" id=\"activities\"><\/div>\n <\/div>\n <\/section>\n <section class=\"max-w-5xl mx-auto px-6 py-14\">\n <h2 class=\"text-2xl font-700 text-gray-800 text-center mb-8\">Capaian & Target<\/h2>\n <div class=\"space-y-4\" id=\"progress-section\"><\/div>\n <\/section>\n <footer class=\"bg-green-900 text-white text-center py-8 px-6\">\n <p class=\"text-sm\">\u00a9 2026 SMPN 1 Rancabali \u2014 Program Adiwiyata<\/p>\n <p class=\"text-xs mt-1 text-white\">Bersama mewujudkan sekolah berbudaya lingkungan<\/p>\n <\/footer>\n <\/div>\n <script>\n const defaultConfig = {\n page_title: 'Program Adiwiyata',\n school_name: 'SMPN 1 Rancabali',\n intro_text: 'Mewujudkan sekolah yang peduli dan berbudaya lingkungan melalui pendidikan, partisipasi, dan pengelolaan sarana ramah lingkungan.',\n primary_color: '#166534',\n surface_color: '#ffffff',\n text_color: '#1f2937',\n accent_color: '#15803d',\n bg_color: '#fafaf9',\n font_family: 'Plus Jakarta Sans',\n font_size: 16\n };\n\n const tabData = [\n { title: '\ud83d\udccb Kebijakan Berwawasan Lingkungan', items: ['Visi & misi sekolah memuat nilai-nilai lingkungan hidup', 'Anggaran sekolah dialokasikan untuk kegiatan lingkungan', 'Peraturan sekolah mendukung perlindungan lingkungan', 'Kerjasama dengan pihak luar dalam pengelolaan lingkungan'] },\n { title: '\ud83d\udcda Kurikulum Berbasis Lingkungan', items: ['Integrasi materi lingkungan hidup ke dalam semua mata pelajaran', 'Pembelajaran berbasis proyek lingkungan (Project Based Learning)', 'Pengembangan modul pembelajaran lingkungan lokal', 'Pemanfaatan lingkungan sekolah sebagai media belajar'] },\n { title: '\ud83e\udd1d Kegiatan Partisipatif', items: ['Aksi lingkungan: penanaman pohon, bersih sungai, komposting', 'Kemitraan dengan masyarakat sekitar sekolah', 'Lomba kreativitas daur ulang antar kelas', 'Kampanye lingkungan oleh organisasi siswa (OSIS)'] },\n { title: '\ud83c\udfeb Pengelolaan Sarana Ramah Lingkungan', items: ['Taman sekolah dan green house sebagai laboratorium alam', 'Bank sampah dan sistem pemilahan sampah 3R', 'Biopori dan sumur resapan di area sekolah', 'Kantin sehat bebas plastik sekali pakai'] }\n ];\n\n const activities = [\n { icon: 'trees', title: 'Jumat Bersih', desc: 'Kerja bakti lingkungan sekolah setiap Jumat pagi bersama seluruh warga sekolah.' },\n { icon: 'recycle', title: 'Bank Sampah', desc: 'Pemilahan dan pengelolaan sampah menjadi nilai ekonomi oleh siswa.' },\n { icon: 'sprout', title: 'Green House', desc: 'Budidaya tanaman obat dan hias sebagai laboratorium hidup.' },\n { icon: 'droplets', title: 'Biopori', desc: 'Pembuatan lubang resapan air untuk konservasi air tanah.' },\n { icon: 'palette', title: 'Daur Ulang Kreatif', desc: 'Mengolah sampah plastik dan kertas menjadi kerajinan bernilai.' },\n { icon: 'megaphone', title: 'Kampanye Lingkungan', desc: 'Sosialisasi peduli lingkungan ke masyarakat sekitar sekolah.' }\n ];\n\n const progressData = [\n { label: 'Penghijauan Area Sekolah', pct: 85 },\n { label: 'Pengurangan Sampah Plastik', pct: 70 },\n { label: 'Partisipasi Warga Sekolah', pct: 92 },\n { label: 'Kerjasama Mitra Lingkungan', pct: 60 }\n ];\n\n let currentTab = 0;\n\n function switchTab(idx) {\n currentTab = idx;\n document.querySelectorAll('.tab-btn').forEach((b, i) => {\n b.className = i === idx ? 'tab-btn tab-active px-4 py-2 rounded-full text-sm font-600 transition-all' : 'tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all';\n });\n renderTab();\n }\n\n function renderTab() {\n const d = tabData[currentTab];\n document.getElementById('tab-content').innerHTML = `\n <h3 class=\"text-lg font-700 text-green-800 mb-4\">${d.title}<\/h3>\n <ul class=\"space-y-3\">${d.items.map(item => `<li class=\"flex items-start gap-3\"><i data-lucide=\"check-circle\" class=\"w-5 h-5 text-green-600 mt-0.5 flex-shrink-0\"><\/i><span class=\"text-gray-700\">${item}<\/span><\/li>`).join('')}<\/ul>\n `;\n lucide.createIcons();\n }\n\n function renderActivities() {\n document.getElementById('activities').innerHTML = activities.map(a => `\n <div class=\"bg-white rounded-xl p-6 shadow-sm card-hover fade-up\">\n <div class=\"w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-3\"><i data-lucide=\"${a.icon}\" class=\"w-5 h-5 text-green-700\"><\/i><\/div>\n <h3 class=\"font-700 text-gray-800 mb-2\">${a.title}<\/h3>\n <p class=\"text-sm text-gray-600 leading-relaxed\">${a.desc}<\/p>\n <\/div>\n `).join('');\n lucide.createIcons();\n }\n\n function renderProgress() {\n document.getElementById('progress-section').innerHTML = progressData.map(p => `\n <div class=\"fade-up\">\n <div class=\"flex justify-between mb-1\"><span class=\"text-sm font-600 text-gray-700\">${p.label}<\/span><span class=\"text-sm font-700 text-green-700\">${p.pct}%<\/span><\/div>\n <div class=\"h-3 bg-gray-200 rounded-full overflow-hidden\"><div class=\"progress-bar h-full bg-gradient-to-r from-green-600 to-emerald-500 rounded-full\" style=\"width:0%\" data-target=\"${p.pct}\"><\/div><\/div>\n <\/div>\n `).join('');\n }\n\n function animateStats() {\n const targets = [5, 24, 92, 3];\n const els = [document.getElementById('stat1'), document.getElementById('stat2'), document.getElementById('stat3'), document.getElementById('stat4')];\n const suffixes = ['', '', '%', ''];\n targets.forEach((t, i) => {\n let current = 0;\n const step = Math.ceil(t \/ 30);\n const interval = setInterval(() => {\n current += step;\n if (current >= t) { current = t; clearInterval(interval); }\n els[i].textContent = current + suffixes[i];\n }, 40);\n });\n }\n\n function observeFadeUp() {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });\n }, { threshold: 0.1 });\n document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n }\n\n function animateProgressBars() {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n const bar = e.target.querySelector('.progress-bar');\n if (bar) setTimeout(() => { bar.style.width = bar.dataset.target + '%'; }, 200);\n }\n });\n }, { threshold: 0.3 });\n document.querySelectorAll('#progress-section > div').forEach(el => observer.observe(el));\n }\n\n \/\/ Init\n renderTab();\n renderActivities();\n renderProgress();\n setTimeout(() => { animateStats(); observeFadeUp(); animateProgressBars(); }, 300);\n\n \/\/ Element SDK\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n const c = { ...defaultConfig, ...config };\n document.getElementById('title-el').textContent = '\ud83c\udf3f ' + c.page_title;\n document.getElementById('school-el').textContent = c.school_name;\n document.getElementById('intro-el').textContent = c.intro_text;\n\n const font = c.font_family + ', sans-serif';\n document.getElementById('app').style.fontFamily = font;\n\n document.getElementById('hero-section').style.background = `linear-gradient(135deg, ${c.primary_color}, ${c.accent_color})`;\n },\n mapToCapabilities: (config) => {\n const c = { ...defaultConfig, ...config };\n return {\n recolorables: [\n { get: () => c.bg_color, set: (v) => { c.bg_color = v; window.elementSdk.setConfig({ bg_color: v }); } },\n { get: () => c.surface_color, set: (v) => { c.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } },\n { get: () => c.text_color, set: (v) => { c.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },\n { get: () => c.primary_color, set: (v) => { c.primary_color = v; window.elementSdk.setConfig({ primary_color: v }); } },\n { get: () => c.accent_color, set: (v) => { c.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); } }\n ],\n borderables: [],\n fontEditable: { get: () => c.font_family, set: (v) => { c.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },\n fontSizeable: { get: () => c.font_size, set: (v) => { c.font_size = v; window.elementSdk.setConfig({ font_size: v }); } }\n };\n },\n mapToEditPanelValues: (config) => {\n const c = { ...defaultConfig, ...config };\n return new Map([\n ['page_title', c.page_title],\n ['school_name', c.school_name],\n ['intro_text', c.intro_text]\n ]);\n }\n });\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:'9fc288a2a7dfafeb',t:'MTc3ODg1MjIwOS4wMDAwMDA='};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>Program Adiwiyata – SMPN 1 Rancabali Program Unggulan Sekolah \ud83c\udf3f Program Adiwiyata SMPN 1 Rancabali Mewujudkan sekolah yang…<\/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-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/63","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=63"}],"version-history":[{"count":10,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":63,"date":"2026-05-14T10:19:09","date_gmt":"2026-05-14T10:19:09","guid":{"rendered":"https:\/\/smpn1rancabali.sch.id\/?page_id=63"},"modified":"2026-05-15T20:40:37","modified_gmt":"2026-05-15T13:40:37","slug":"program-unggulan","status":"publish","type":"page","link":"https:\/\/smpn1rancabali.sch.id\/?page_id=63","title":{"rendered":"Program Unggulan"},"content":{"rendered":"\n\n\n \n \n \n Program Adiwiyata – 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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n * { font-family: 'Plus Jakarta Sans', sans-serif; }\n .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }\n .fade-up.visible { opacity: 1; transform: translateY(0); }\n .card-hover { transition: all 0.3s ease; }\n .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,139,34,0.15); }\n .pulse-dot { animation: pulse 2s infinite; }\n @keyframes pulse { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.3); opacity:0.7; } }\n .tab-active { background: #166534; color: white; }\n .progress-bar { transition: width 1.5s ease; }\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\">\n \n <header id=\"hero-section\" class=\"relative w-full bg-gradient-to-br from-green-800 via-green-700 to-emerald-600 text-white overflow-hidden\">\n <div class=\"absolute inset-0 opacity-10\">\n <svg width=\"100%\" height=\"100%\"><pattern id=\"leaf\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" patternunits=\"userSpaceOnUse\">\n <path d=\"M30 5 Q40 20 30 35 Q20 20 30 5Z\" fill=\"white\" \/>\n <\/pattern><rect width=\"100%\" height=\"100%\" fill=\"url(#leaf)\" \/>\n <\/svg>\n <\/div>\n <div class=\"relative max-w-5xl mx-auto px-6 py-16 text-center\">\n <div class=\"inline-flex items-center gap-2 bg-white\/15 rounded-full px-4 py-1.5 mb-6 text-sm backdrop-blur-sm\">\n <span class=\"pulse-dot w-2 h-2 bg-yellow-300 rounded-full inline-block\"><\/span> <span>Program Unggulan Sekolah<\/span>\n <\/div>\n <h1 id=\"title-el\" class=\"text-4xl md:text-5xl font-800 mb-4 leading-tight\">\ud83c\udf3f Program Adiwiyata<\/h1>\n <p id=\"school-el\" class=\"text-xl font-medium mb-3 text-white\">SMPN 1 Rancabali<\/p>\n <p id=\"intro-el\" class=\"max-w-2xl mx-auto leading-relaxed text-white\">Mewujudkan sekolah yang peduli dan berbudaya lingkungan melalui pendidikan, partisipasi, dan pengelolaan sarana ramah lingkungan.<\/p>\n <\/div>\n <\/header>\n <section class=\"max-w-5xl mx-auto px-6 -mt-8 relative z-10\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat1\">\n 0\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Tahun Berjalan\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat2\">\n 0\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Kegiatan\/Tahun\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat3\">\n 0%\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Partisipasi Siswa\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-xl p-5 text-center shadow-md card-hover\">\n <div class=\"text-2xl font-800 text-green-700\" id=\"stat4\">\n 0\n <\/div>\n <div class=\"text-xs text-gray-500 mt-1\">\n Penghargaan\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"max-w-5xl mx-auto px-6 py-14\">\n <h2 class=\"text-2xl font-700 text-gray-800 text-center mb-8\">Komponen Program Adiwiyata<\/h2>\n <div class=\"flex flex-wrap justify-center gap-2 mb-8\" id=\"tab-nav\">\n <button onclick=\"switchTab(0)\" class=\"tab-btn tab-active px-4 py-2 rounded-full text-sm font-600 transition-all\">Kebijakan<\/button> <button onclick=\"switchTab(1)\" class=\"tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all\">Kurikulum<\/button> <button onclick=\"switchTab(2)\" class=\"tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all\">Partisipatif<\/button> <button onclick=\"switchTab(3)\" class=\"tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all\">Sarana<\/button>\n <\/div>\n <div id=\"tab-content\" class=\"bg-white rounded-2xl shadow-lg p-8 min-h-[220px]\"><\/div>\n <\/section>\n <section class=\"bg-green-50 py-14\">\n <div class=\"max-w-5xl mx-auto px-6\">\n <h2 class=\"text-2xl font-700 text-gray-800 text-center mb-8\">Kegiatan Unggulan<\/h2>\n <div class=\"grid md:grid-cols-3 gap-6\" id=\"activities\"><\/div>\n <\/div>\n <\/section>\n <section class=\"max-w-5xl mx-auto px-6 py-14\">\n <h2 class=\"text-2xl font-700 text-gray-800 text-center mb-8\">Capaian & Target<\/h2>\n <div class=\"space-y-4\" id=\"progress-section\"><\/div>\n <\/section>\n <footer class=\"bg-green-900 text-white text-center py-8 px-6\">\n <p class=\"text-sm\">\u00a9 2026 SMPN 1 Rancabali \u2014 Program Adiwiyata<\/p>\n <p class=\"text-xs mt-1 text-white\">Bersama mewujudkan sekolah berbudaya lingkungan<\/p>\n <\/footer>\n <\/div>\n <script>\n const defaultConfig = {\n page_title: 'Program Adiwiyata',\n school_name: 'SMPN 1 Rancabali',\n intro_text: 'Mewujudkan sekolah yang peduli dan berbudaya lingkungan melalui pendidikan, partisipasi, dan pengelolaan sarana ramah lingkungan.',\n primary_color: '#166534',\n surface_color: '#ffffff',\n text_color: '#1f2937',\n accent_color: '#15803d',\n bg_color: '#fafaf9',\n font_family: 'Plus Jakarta Sans',\n font_size: 16\n };\n\n const tabData = [\n { title: '\ud83d\udccb Kebijakan Berwawasan Lingkungan', items: ['Visi & misi sekolah memuat nilai-nilai lingkungan hidup', 'Anggaran sekolah dialokasikan untuk kegiatan lingkungan', 'Peraturan sekolah mendukung perlindungan lingkungan', 'Kerjasama dengan pihak luar dalam pengelolaan lingkungan'] },\n { title: '\ud83d\udcda Kurikulum Berbasis Lingkungan', items: ['Integrasi materi lingkungan hidup ke dalam semua mata pelajaran', 'Pembelajaran berbasis proyek lingkungan (Project Based Learning)', 'Pengembangan modul pembelajaran lingkungan lokal', 'Pemanfaatan lingkungan sekolah sebagai media belajar'] },\n { title: '\ud83e\udd1d Kegiatan Partisipatif', items: ['Aksi lingkungan: penanaman pohon, bersih sungai, komposting', 'Kemitraan dengan masyarakat sekitar sekolah', 'Lomba kreativitas daur ulang antar kelas', 'Kampanye lingkungan oleh organisasi siswa (OSIS)'] },\n { title: '\ud83c\udfeb Pengelolaan Sarana Ramah Lingkungan', items: ['Taman sekolah dan green house sebagai laboratorium alam', 'Bank sampah dan sistem pemilahan sampah 3R', 'Biopori dan sumur resapan di area sekolah', 'Kantin sehat bebas plastik sekali pakai'] }\n ];\n\n const activities = [\n { icon: 'trees', title: 'Jumat Bersih', desc: 'Kerja bakti lingkungan sekolah setiap Jumat pagi bersama seluruh warga sekolah.' },\n { icon: 'recycle', title: 'Bank Sampah', desc: 'Pemilahan dan pengelolaan sampah menjadi nilai ekonomi oleh siswa.' },\n { icon: 'sprout', title: 'Green House', desc: 'Budidaya tanaman obat dan hias sebagai laboratorium hidup.' },\n { icon: 'droplets', title: 'Biopori', desc: 'Pembuatan lubang resapan air untuk konservasi air tanah.' },\n { icon: 'palette', title: 'Daur Ulang Kreatif', desc: 'Mengolah sampah plastik dan kertas menjadi kerajinan bernilai.' },\n { icon: 'megaphone', title: 'Kampanye Lingkungan', desc: 'Sosialisasi peduli lingkungan ke masyarakat sekitar sekolah.' }\n ];\n\n const progressData = [\n { label: 'Penghijauan Area Sekolah', pct: 85 },\n { label: 'Pengurangan Sampah Plastik', pct: 70 },\n { label: 'Partisipasi Warga Sekolah', pct: 92 },\n { label: 'Kerjasama Mitra Lingkungan', pct: 60 }\n ];\n\n let currentTab = 0;\n\n function switchTab(idx) {\n currentTab = idx;\n document.querySelectorAll('.tab-btn').forEach((b, i) => {\n b.className = i === idx ? 'tab-btn tab-active px-4 py-2 rounded-full text-sm font-600 transition-all' : 'tab-btn bg-gray-200 text-gray-600 px-4 py-2 rounded-full text-sm font-600 transition-all';\n });\n renderTab();\n }\n\n function renderTab() {\n const d = tabData[currentTab];\n document.getElementById('tab-content').innerHTML = `\n <h3 class=\"text-lg font-700 text-green-800 mb-4\">${d.title}<\/h3>\n <ul class=\"space-y-3\">${d.items.map(item => `<li class=\"flex items-start gap-3\"><i data-lucide=\"check-circle\" class=\"w-5 h-5 text-green-600 mt-0.5 flex-shrink-0\"><\/i><span class=\"text-gray-700\">${item}<\/span><\/li>`).join('')}<\/ul>\n `;\n lucide.createIcons();\n }\n\n function renderActivities() {\n document.getElementById('activities').innerHTML = activities.map(a => `\n <div class=\"bg-white rounded-xl p-6 shadow-sm card-hover fade-up\">\n <div class=\"w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-3\"><i data-lucide=\"${a.icon}\" class=\"w-5 h-5 text-green-700\"><\/i><\/div>\n <h3 class=\"font-700 text-gray-800 mb-2\">${a.title}<\/h3>\n <p class=\"text-sm text-gray-600 leading-relaxed\">${a.desc}<\/p>\n <\/div>\n `).join('');\n lucide.createIcons();\n }\n\n function renderProgress() {\n document.getElementById('progress-section').innerHTML = progressData.map(p => `\n <div class=\"fade-up\">\n <div class=\"flex justify-between mb-1\"><span class=\"text-sm font-600 text-gray-700\">${p.label}<\/span><span class=\"text-sm font-700 text-green-700\">${p.pct}%<\/span><\/div>\n <div class=\"h-3 bg-gray-200 rounded-full overflow-hidden\"><div class=\"progress-bar h-full bg-gradient-to-r from-green-600 to-emerald-500 rounded-full\" style=\"width:0%\" data-target=\"${p.pct}\"><\/div><\/div>\n <\/div>\n `).join('');\n }\n\n function animateStats() {\n const targets = [5, 24, 92, 3];\n const els = [document.getElementById('stat1'), document.getElementById('stat2'), document.getElementById('stat3'), document.getElementById('stat4')];\n const suffixes = ['', '', '%', ''];\n targets.forEach((t, i) => {\n let current = 0;\n const step = Math.ceil(t \/ 30);\n const interval = setInterval(() => {\n current += step;\n if (current >= t) { current = t; clearInterval(interval); }\n els[i].textContent = current + suffixes[i];\n }, 40);\n });\n }\n\n function observeFadeUp() {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });\n }, { threshold: 0.1 });\n document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n }\n\n function animateProgressBars() {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n const bar = e.target.querySelector('.progress-bar');\n if (bar) setTimeout(() => { bar.style.width = bar.dataset.target + '%'; }, 200);\n }\n });\n }, { threshold: 0.3 });\n document.querySelectorAll('#progress-section > div').forEach(el => observer.observe(el));\n }\n\n \/\/ Init\n renderTab();\n renderActivities();\n renderProgress();\n setTimeout(() => { animateStats(); observeFadeUp(); animateProgressBars(); }, 300);\n\n \/\/ Element SDK\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n const c = { ...defaultConfig, ...config };\n document.getElementById('title-el').textContent = '\ud83c\udf3f ' + c.page_title;\n document.getElementById('school-el').textContent = c.school_name;\n document.getElementById('intro-el').textContent = c.intro_text;\n\n const font = c.font_family + ', sans-serif';\n document.getElementById('app').style.fontFamily = font;\n\n document.getElementById('hero-section').style.background = `linear-gradient(135deg, ${c.primary_color}, ${c.accent_color})`;\n },\n mapToCapabilities: (config) => {\n const c = { ...defaultConfig, ...config };\n return {\n recolorables: [\n { get: () => c.bg_color, set: (v) => { c.bg_color = v; window.elementSdk.setConfig({ bg_color: v }); } },\n { get: () => c.surface_color, set: (v) => { c.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } },\n { get: () => c.text_color, set: (v) => { c.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },\n { get: () => c.primary_color, set: (v) => { c.primary_color = v; window.elementSdk.setConfig({ primary_color: v }); } },\n { get: () => c.accent_color, set: (v) => { c.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); } }\n ],\n borderables: [],\n fontEditable: { get: () => c.font_family, set: (v) => { c.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },\n fontSizeable: { get: () => c.font_size, set: (v) => { c.font_size = v; window.elementSdk.setConfig({ font_size: v }); } }\n };\n },\n mapToEditPanelValues: (config) => {\n const c = { ...defaultConfig, ...config };\n return new Map([\n ['page_title', c.page_title],\n ['school_name', c.school_name],\n ['intro_text', c.intro_text]\n ]);\n }\n });\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:'9fc288a2a7dfafeb',t:'MTc3ODg1MjIwOS4wMDAwMDA='};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>Program Adiwiyata – SMPN 1 Rancabali Program Unggulan Sekolah \ud83c\udf3f Program Adiwiyata SMPN 1 Rancabali Mewujudkan sekolah yang…<\/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-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/63","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=63"}],"version-history":[{"count":10,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}