html_code = """<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rencana Aksi Perubahan - MOTA KELOLA PANDU</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#1E40AF', // Deep Blue
lightblue: '#3B82F6',
softblue: '#EFF6FF',
yellow: '#EAB308', // Accent Yellow
lightyellow: '#FEF9C3',
darkyellow: '#CA8A04',
slate: '#1E293B',
lightbg: '#F8FAFC'
}
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.tab-btn.active {
background-color: #1E40AF;
color: #ffffff;
border-color: #1E40AF;
}
.tab-btn.active .icon-badge {
background-color: #EAB308;
color: #1E40AF;
}
</style>
</head>
<body class="bg-brand-lightbg text-brand-slate antialiased selection:bg-brand-yellow selection:text-brand-blue">
<!-- Header / Navbar -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-xl bg-brand-blue flex items-center justify-center text-brand-yellow font-bold text-xl shadow-md">
<i class="fa-solid fa-chart-line"></i>
</div>
<div>
<h1 class="font-bold text-lg text-brand-blue leading-tight">MOTA KELOLA PANDU</h1>
<p class="text-xs text-slate-500 font-medium">Provinsi Gorontalo • Tata Kelola Posyandu 6 SPM</p>
</div>
</div>
<nav class="hidden md:flex space-x-8 text-sm font-semibold text-slate-600">
<a href="#overview" class="hover:text-brand-blue transition">Ikhtisar</a>
<a href="#roadmap" class="hover:text-brand-blue transition">Tahapan Milestone</a>
<a href="#kegiatan" class="hover:text-brand-blue transition">Detail Rencana</a>
</nav>
<a href="#roadmap" class="px-5 py-2.5 rounded-lg bg-brand-yellow hover:bg-brand-darkyellow text-brand-blue font-semibold text-sm transition shadow-sm hover:shadow">
Lihat Progress
</a>
</div>
</header>
<!-- Hero Section -->
<section id="overview" class="relative pt-12 pb-16 bg-gradient-to-b from-brand-softblue to-brand-lightbg overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl">
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-yellow/20 text-brand-darkyellow text-xs font-bold uppercase tracking-wider mb-4 border border-brand-yellow/30">
<span class="w-2 h-2 rounded-full bg-brand-yellow animate-pulse"></span>
Rencana Aksi Perubahan
</div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-brand-blue tracking-tight leading-tight mb-4">
Model Tata Kelola Pembinaan Kelembagaan Posyandu "MOTA KELOLA PANDU"
</h2>
<p class="text-base sm:text-lg text-slate-600 mb-8 leading-relaxed">
Strategi transformasi digital dan penguatan tata kelola Posyandu berbasis 6 Standar Pelayanan Minimal (SPM) di Provinsi Gorontalo, menuju perencanaan berbasis data yang terintegrasi dan berkelanjutan.
</p>
</div>
<!-- Metric Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200/80 hover:border-brand-lightblue/50 transition flex items-start space-x-4">
<div class="p-3 bg-brand-softblue rounded-xl text-brand-blue">
<i class="fa-solid fa-clock-rotate-left text-xl"></i>
</div>
<div>
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Jangka Pendek</span>
<h3 class="text-xl font-bold text-slate-800">Agustus – Oktober 2026</h3>
<p class="text-xs text-slate-500 mt-1">s.d. 2 Bulan (4 Milestone Utama)</p>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200/80 hover:border-brand-lightblue/50 transition flex items-start space-x-4">
<div class="p-3 bg-brand-lightyellow rounded-xl text-brand-darkyellow">
<i class="fa-solid fa-calendar-days text-xl"></i>
</div>
<div>
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Jangka Menengah</span>
<h3 class="text-xl font-bold text-slate-800">6 Bulan – 1 Tahun</h3>
<p class="text-xs text-slate-500 mt-1">Perluasan & Integrasi Dashboard</p>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200/80 hover:border-brand-lightblue/50 transition flex items-start space-x-4">
<div class="p-3 bg-brand-softblue rounded-xl text-brand-blue">
<i class="fa-solid fa-trophy text-xl"></i>
</div>
<div>
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Jangka Panjang</span>
<h3 class="text-xl font-bold text-slate-800">1 Tahun – 2 Tahun</h3>
<p class="text-xs text-slate-500 mt-1">Institutionalization & Ekosistem Data</p>
</div>
</div>
</div>
</div>
</section>
<!-- Main Content Section -->
<section id="roadmap" class="py-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Tab Navigation -->
<div class="flex flex-col sm:flex-row justify-center gap-3 mb-10">
<button onclick="switchTab('pendek')" id="btn-pendek" class="tab-btn active px-6 py-3.5 rounded-xl border border-slate-200 bg-white font-semibold text-sm sm:text-base text-slate-600 hover:bg-slate-50 transition flex items-center justify-center gap-2 shadow-sm">
<span class="icon-badge w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-xs flex items-center justify-center font-bold">A</span>
Jangka Pendek (s.d 2 Bulan)
</button>
<button onclick="switchTab('menengah')" id="btn-menengah" class="tab-btn px-6 py-3.5 rounded-xl border border-slate-200 bg-white font-semibold text-sm sm:text-base text-slate-600 hover:bg-slate-50 transition flex items-center justify-center gap-2 shadow-sm">
<span class="icon-badge w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-xs flex items-center justify-center font-bold">B</span>
Jangka Menengah (> 6 Bulan – 1 Tahun)
</button>
<button onclick="switchTab('panjang')" id="btn-panjang" class="tab-btn px-6 py-3.5 rounded-xl border border-slate-200 bg-white font-semibold text-sm sm:text-base text-slate-600 hover:bg-slate-50 transition flex items-center justify-center gap-2 shadow-sm">
<span class="icon-badge w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-xs flex items-center justify-center font-bold">C</span>
Jangka Panjang (> 1 Tahun – 2 Tahun)
</button>
</div>
<!-- TAB CONTENT: JANGKA PENDEK -->
<div id="tab-pendek" class="tab-content block space-y-8">
<!-- Item 1 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">1</span>
<h3 class="font-bold text-lg">Terbangunnya Komitmen dan Tata Kelola Aksi Perubahan</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Minggu I – II
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Memastikan dukungan pimpinan, mentor, stakeholder dan tim pelaksana terhadap pengembangan <span class="font-bold text-brand-blue">"MOTA KELOLA PANDU"</span>
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>1.1.</strong> Konsultasi dan koordinasi dengan Mentor terkait arah dan strategi aksi perubahan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>1.2.</strong> Presentasi dan penyamaan persepsi dengan pimpinan/unit kerja.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>1.3.</strong> Identifikasi dan pemetaan stakeholder internal dan eksternal.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>1.4.</strong> Pembentukan Tim Efektif/Tim Kerja Aksi Perubahan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>1.5.</strong> Penyusunan pembagian tugas dan tanggung jawab Tim Efektif.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>1.6.</strong> Penyusunan rencana kerja dan jadwal pelaksanaan aksi perubahan.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Surat/nota dukungan pimpinan.</li>
<li>Terbentuknya Tim Efektif.</li>
<li>SK/Surat Tugas Tim Efektif.</li>
<li>Rencana kerja dan jadwal pelaksanaan.</li>
</ol>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">2</span>
<h3 class="font-bold text-lg">Sinkronisasi Instrumen Usulan Bersama Pemda dan OPD 6 Bidang SPM</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Minggu IV – VI
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Tervalidasinya instrumen pertanyaan usulan kegiatan dengan OPD 6 bidang SPM di salah satu Kabupaten <span class="italic text-slate-800 font-semibold">(Pilot Projectting di Kabupaten Bone Bolango)</span>.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>2.1.</strong> Koordinasi teknis dengan OPD 6 bidang SPM.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>2.2.</strong> Penjelasan Teknis Maksud dan Tujuan Penyusunan Instrumen Usulan Kegiatan yang akan diisi Masyarakat.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>2.3.</strong> Sharing konsep dan draft instrumen usulan kegiatan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>2.4.</strong> Usulan kegiatan bidang kesehatan, pendidikan, PU, PR, Trantibumlinmas dan Sosial.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>2.5.</strong> Penetapan usulan kegiatan pembinaan dan tindak lanjut hasil monitoring.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>2.6.</strong> Integrasi data dengan "MOTA KELOLA PANDU" yang sudah ditetapkan bersama.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Draft Instrumen Usulan kegiatan.</li>
<li>Instrumen Hasil kesepakatan OPD 6 bidang SPM.</li>
</ol>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">3</span>
<h3 class="font-bold text-lg">Terujinya Instrumen Usulan Kegiatan di Posyandu</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Minggu VI – VII
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Memastikan sistem berjalan sesuai kebutuhan pengguna dan indikator yang telah ditetapkan di salah satu desa di Kabupaten Bone Bolango.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>3.1.</strong> Uji coba instrumen usulan kegiatan di salah satu desa.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>3.2.</strong> Uji validitas data dan pelaporan oleh sekdes.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>3.3.</strong> Uji sinkronisasi usulan dengan program OPD.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>3.4.</strong> Identifikasi kendala dan kebutuhan penyempurnaan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>3.5.</strong> Penyempurnaan sistem berdasarkan hasil uji coba.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>3.6.</strong> Penyusunan panduan MOTA KELOLA PANDU.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Hasil uji coba.</li>
<li>Instrumen yg telah disempurnakan.</li>
<li>Panduan penggunaan.</li>
<li>Berita acara hasil uji coba.</li>
</ol>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">4</span>
<h3 class="font-bold text-lg">Terwujudnya Model Tata Kelola Pembinaan Kelembagaan Posyandu</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Minggu VII – VIII
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Membuktikan manfaat MOTA KELOLA PANDU melalui implementasi awal pada lokus yang ditetapkan dan seluruh wilayah Provinsi Gorontalo.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.1.</strong> Sosialisasi MOTA KELOLA PANDU kepada OPD dan Desa.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.2.</strong> Orientasi/pelatihan pengguna.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.3.</strong> Penetapan lokus Posyandu pilot.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.4.</strong> Input dan pemutakhiran data awal.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.5.</strong> Pelaksanaan monitoring transformasi Posyandu berbasis 6 SPM.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.6.</strong> Penyusunan hasil analisis dashboard.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.7.</strong> Penyampaian rekomendasi pembinaan berdasarkan hasil monitoring.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>4.8.</strong> Evaluasi pelaksanaan <em>quick win</em>.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>MOTA KELOLA PANDU terimplementasi pada lokus pilot.</li>
<li>Data awal Posyandu tersedia.</li>
<li>Dashboard monitoring aktif.</li>
<li>Laporan hasil implementasi awal.</li>
<li>Rekomendasi pembinaan.</li>
</ol>
</div>
</div>
</div>
</div>
<!-- TAB CONTENT: JANGKA MENENGAH -->
<div id="tab-menengah" class="tab-content hidden space-y-8">
<!-- Item 1 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">6</span>
<h3 class="font-bold text-lg">Sinkronisasi Hasil Isian Instrumen Usulan Kegiatan Masyarakat</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Bulan ke-7 s.d. ke-9
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Memperluas pemanfaatan MOTA KELOLA PANDU dari lokus pilot menuju seluruh wilayah/lokus prioritas.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>6.1.</strong> Evaluasi hasil implementasi pilot.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>6.2.</strong> Penyempurnaan sistem berdasarkan feedback pengguna.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>6.3.</strong> Perluasan implementasi ke kabupaten/kota.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>6.4.</strong> Pendampingan operator/pengelola data.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>6.5.</strong> Pemutakhiran data Posyandu secara berkala.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>6.6.</strong> Monitoring tingkat kepatuhan dan pemanfaatan sistem.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>MOTA KELOLA PANDU digunakan pada lebih banyak lokus.</li>
<li>Data Posyandu terintegrasi.</li>
<li>Laporan monitoring penggunaan sistem.</li>
</ol>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">7</span>
<h3 class="font-bold text-lg">Pembinaan dan Monitoring Berbasis Bukti melalui Dashboard</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Bulan ke-9 s.d. ke-10
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Menjadikan dashboard sebagai instrumen pembinaan dan monitoring berbasis bukti bagi Sekretariat Posyandu 6 SPM Provinsi Gorontalo.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>7.1.</strong> Analisis capaian 6 SPM melalui evaluasi Sekretariat Posyandu dan OPD.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>7.2.</strong> Identifikasi Posyandu berdasarkan tingkat capaian/kinerja.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>7.3.</strong> Penyusunan prioritas pembinaan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>7.4.</strong> Pelaksanaan pembinaan berdasarkan hasil evaluasi Sekretariat Posyandu dan OPD.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>7.5.</strong> Pemantauan tindak lanjut hasil pembinaan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>7.6.</strong> Penyusunan laporan evaluasi berkala.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Profil kinerja Posyandu.</li>
<li>Peta/prioritas pembinaan.</li>
<li>Laporan monitoring dan evaluasi.</li>
<li>Rekomendasi tindak lanjut.</li>
</ol>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">8</span>
<h3 class="font-bold text-lg">Terintegrasinya Usulan Posyandu 6 SPM Desa dalam Pengambilan Keputusan</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Bulan ke-10 s.d. ke-12
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Menjadikan data evaluasi Sekretariat Posyandu dan OPD sebagai sumber informasi bagi pimpinan dalam menentukan kebijakan dan intervensi.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>8.1.</strong> Penyusunan analisis tren capaian Posyandu.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>8.2.</strong> Penyusunan executive capaian/informasi strategis.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>8.3.</strong> Penyusunan policy brief/rekomendasi kebijakan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>8.4.</strong> Penyampaian hasil analisis kepada pimpinan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>8.5.</strong> Pemanfaatan data sebagai bahan rapat evaluasi dan perencanaan program.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Executive dashboard.</li>
<li>Policy brief.</li>
<li>Rekomendasi kebijakan.</li>
<li>Data dashboard digunakan dalam rapat evaluasi/perencanaan.</li>
</ol>
</div>
</div>
</div>
</div>
<!-- TAB CONTENT: JANGKA PANJANG -->
<div id="tab-panjang" class="tab-content hidden space-y-8">
<!-- Item 1 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">9</span>
<h3 class="font-bold text-lg">Terlembaganya Usulan Masyarakat sebagai Sistem Pembinaan Posyandu</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Tahun ke-2
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Menjamin keberlanjutan dan legitimasi MOTA KELOLA PANDU sebagai instrumen pembinaan Posyandu secara permanen.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>9.1.</strong> Evaluasi menyeluruh implementasi MOTA KELOLA PANDU.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>9.2.</strong> Penyusunan regulasi/pedoman pemanfaatan MOTA KELOLA PANDU.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>9.3.</strong> Penyusunan SOP pembinaan, monitoring dan evaluasi berbasis dashboard.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>9.4.</strong> Integrasi MOTA KELOLA PANDU dalam mekanisme kerja perangkat daerah.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>9.5.</strong> Penguatan kapasitas SDM pengelola sistem.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Pedoman/SOP MOTA KELOLA PANDU T.</li>
<li>Regulasi/keputusan terkait pemanfaatan sistem menjadi bagian mekanisme kerja.</li>
</ol>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">10</span>
<h3 class="font-bold text-lg">Terwujudnya Integrasi Data Posyandu sebagai Basis Kebijakan</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Tahun ke-2
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Mewujudkan ekosistem data Posyandu yang berkelanjutan, terintegrasi dan mendukung perencanaan pembangunan.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>10.1.</strong> Pengembangan integrasi data dengan sistem informasi terkait.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>10.2.</strong> Pemutakhiran dan standardisasi data secara berkelanjutan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>10.3.</strong> Pengembangan analitik tren dan capaian Posyandu.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>10.4.</strong> Pemanfaatan data untuk perencanaan program dan penganggaran.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>10.5.</strong> Pengembangan rekomendasi intervensi berbasis data.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Database Posyandu terintegrasi.</li>
<li>Analisis tren kinerja Posyandu.</li>
<li>Rekomendasi program/intervensi berbasis data.</li>
</ol>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
<div class="bg-brand-blue text-white p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="w-8 h-8 rounded-lg bg-brand-yellow text-brand-blue font-bold flex items-center justify-center">11</span>
<h3 class="font-bold text-lg">Terwujudnya Usulan Masyarakat Saat Pelaksanaan Posyandu 6 SPM</h3>
</div>
<span class="px-3 py-1 rounded-full bg-blue-900/60 text-brand-yellow font-medium text-xs border border-brand-yellow/30">
<i class="fa-regular fa-clock mr-1"></i> Tahun ke-2
</span>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-4 bg-brand-softblue/60 p-4 rounded-xl border border-blue-100">
<span class="text-xs font-bold text-brand-blue uppercase tracking-wider block mb-1">Sasaran Utama</span>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Menjadikan MOTA KELOLA PANDU sebagai instrumen strategis Pemerintah Provinsi Gorontalo dalam pembinaan, monitoring, evaluasi dan perumusan kebijakan akhir secara online.
</p>
</div>
<div class="md:col-span-5 space-y-2">
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">Rincian Kegiatan</span>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>11.1.</strong> Evaluasi dampak pemanfaatan MOTA KELOLA PANDU terhadap kualitas pembinaan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>11.2.</strong> Pengukuran peningkatan kualitas monitoring dan evaluasi.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>11.3.</strong> Dokumentasi praktik baik dan inovasi.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>11.4.</strong> Replikasi dan pengembangan fitur berdasarkan kebutuhan organisasi.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>11.5.</strong> Pemanfaatan hasil analisis sebagai bahan perumusan kebijakan.</span></li>
<li class="flex items-start gap-2"><i class="fa-solid fa-circle-check text-brand-blue text-xs mt-1"></i><span><strong>11.6.</strong> Pengembangan keberlanjutan dan inovasi MOTA KELOLA PANDU.</span></li>
</ul>
</div>
<div class="md:col-span-3 bg-brand-lightyellow/50 p-4 rounded-xl border border-yellow-200/60">
<span class="text-xs font-bold text-brand-darkyellow uppercase tracking-wider block mb-2">Output Target</span>
<ol class="list-decimal list-inside space-y-1.5 text-xs text-slate-700 font-medium">
<li>Laporan evaluasi dampak.</li>
<li>Praktik baik MOTA KELOLA PANDU.</li>
<li>Rekomendasi kebijakan.</li>
<li>MOTA KELOLA PANDU ART berkelanjutan sebagai instrumen pengambilan keputusan.</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-brand-slate text-white mt-16 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-center sm:text-left">
<div>
<h4 class="font-bold text-brand-yellow">MOTA KELOLA PANDU</h4>
<p class="text-xs text-slate-400 mt-0.5">Sistem Pembinaan & Monitoring Kelembagaan Posyandu 6 SPM Gorontalo</p>
</div>
<p class="text-xs text-slate-400">
© 2026 Pemerintah Provinsi Gorontalo. All rights reserved.
</p>
</div>
</footer>
<!-- Tab Script -->
<script>
function switchTab(tabName) {
// Hide all contents
document.querySelectorAll('.tab-content').forEach(el => {
el.classList.add('hidden');
el.classList.remove('block');
});
// Remove active style from all buttons
document.querySelectorAll('.tab-btn').forEach(el => {
el.classList.remove('active');
});
// Show current tab content & activate button
document.getElementById('tab-' + tabName).classList.remove('hidden');
document.getElementById('tab-' + tabName).classList.add('block');
document.getElementById('btn-' + tabName).classList.add('active');
}
</script>
</body>
</html>
"""
with open("mota_kelola_pandu.html", "w", encoding="utf-8") as f:
f.write(html_code)
print("File mota_kelola_pandu.html successfully generated.")