{"id":16,"date":"2026-06-24T08:05:45","date_gmt":"2026-06-24T08:05:45","guid":{"rendered":"https:\/\/sinergyrt.com\/?page_id=16"},"modified":"2026-06-24T08:37:28","modified_gmt":"2026-06-24T08:37:28","slug":"demo-web-rt","status":"publish","type":"page","link":"https:\/\/sinergyrt.com\/demo-web-rt\/","title":{"rendered":"Demo Web RT"},"content":{"rendered":"\n<style>\n    \/* ==========================================================================\n       1. PEMBERSIH TEMA & PENCEGAH SCROLL SAMPING\n       ========================================================================== *\/\n    \/* Menyembunyikan header \"Sinergy RT Digital\" bawaan tema agar bersih *\/\n    header, .site-header, .wp-block-template-part, .entry-header { \n        display: none !important; \n    }\n    \n    \/* Mencegah layar bergoyang atau muncul scrollbar bawah *\/\n    body, html {\n        overflow-x: hidden !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        background-color: #f1f5f9 !important;\n    }\n\n    \/* ==========================================================================\n       2. TRIK MATEMATIS MELEBARKAN KONTEN (BLEED-OUT)\n       ========================================================================== *\/\n    .rt-full-width-wrapper { \n        font-family: 'Segoe UI', Arial, sans-serif; \n        background-color: #f1f5f9; \n        color: #1e293b; \n        \n        \/* Ini kunci utamanya: Menarik paksa ke ujung kiri dan kanan 100% layar *\/\n        width: 100vw !important;\n        max-width: 100vw !important;\n        margin-left: calc(50% - 50vw) !important;\n        margin-right: calc(50% - 50vw) !important;\n        \n        box-sizing: border-box;\n        padding-bottom: 50px;\n    }\n    \n    \/* ==========================================================================\n       3. DESAIN APLIKASI\n       ========================================================================== *\/\n    \/* Navigation *\/\n    .rt-nav { background: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top:0; z-index: 1000; box-sizing: border-box; width: 100%; }\n    .rt-nav .logo { font-size: 20px; font-weight: bold; color: #1e3a8a; }\n    .rt-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; flex-wrap: wrap;}\n    .rt-nav ul li a { text-decoration: none; color: #1e293b; font-weight: 500; font-size: 14px; transition: color 0.3s; }\n    .rt-nav ul li a:hover { color: #0284c7; }\n\n    \/* Hero & Banner *\/\n    .rt-hero { background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%); color: white; padding: 60px 5%; text-align: center; box-sizing: border-box; width: 100%; }\n    .rt-hero h1 { margin: 0 0 10px 0; font-size: 32px; color: white !important; }\n    .rt-hero p { margin: 0; opacity: 0.9; font-size: 16px; color: white !important; }\n\n    \/* Marquee Scrolling Text *\/\n    .marquee-container { background: #0f172a; color: #38bdf8; padding: 12px 0; overflow: hidden; white-space: nowrap; font-weight: bold; font-size: 14px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); box-sizing: border-box; width: 100%; }\n    .marquee-text { display: inline-block; animation: rtmarquee 25s linear infinite; padding-left: 100%; }\n    @keyframes rtmarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }\n\n    \/* Main Layout *\/\n    .rt-main-content { max-width: 1200px; margin: 30px auto; padding: 0 20px; box-sizing: border-box; }\n    .rt-section { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 30px; box-sizing: border-box; }\n    .rt-section h2 { color: #1e3a8a !important; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; font-size: 22px; text-align: left; }\n    .rt-section h3 { color: #1e3a8a !important; margin-top: 0; text-align: left; }\n\n    \/* Grid System *\/\n    .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }\n    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }\n\n    \/* Tables *\/\n    .rt-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }\n    .rt-table th { background: #f8fafc; text-align: left; padding: 10px; border-bottom: 2px solid #e2e8f0; color: #1e3a8a; }\n    .rt-table td { padding: 10px; border-bottom: 1px solid #e2e8f0; color: #1e293b; text-align: left; }\n    .sub-total { font-weight: bold; background: #f1f5f9; }\n    .grand-total { font-weight: bold; background: #e0f2fe; color: #1e3a8a; }\n\n    \/* Cards & Articles *\/\n    .card-stat { background: #f8fafc; border-left: 4px solid #0284c7; padding: 15px; border-radius: 0 8px 8px 0; text-align: center; }\n    .card-stat .num { font-size: 24px; font-weight: bold; color: #1e3a8a; }\n    .card-stat .label { font-size: 12px; color: #64748b; margin-top: 5px; }\n    \n    .article-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; text-align: left; }\n    .article-card .date { font-size: 12px; color: #0284c7; font-weight: bold; margin-bottom: 5px; }\n    .article-card p { margin: 0; font-size: 13px; color: #475569; line-height: 1.5; }\n\n    \/* Forms *\/\n    .form-group { margin-bottom: 15px; text-align: left; }\n    .form-group label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #1e293b; }\n    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font-size: 14px; background: white; color: #1e293b; }\n    .btn { background: #1e3a8a; color: white !important; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%; font-size: 14px; transition: background 0.3s; }\n    .btn:hover { background: #0284c7; }\n    .btn-wa { background: #25d366; }\n    .btn-wa:hover { background: #20ba5a; }\n<\/style>\n\n<div class=\"rt-full-width-wrapper\">\n\n    <!-- Navigasi -->\n    <div class=\"rt-nav\">\n        <div class=\"logo\">Sinergy RT<\/div>\n        <ul>\n            <li><a href=\"#tentang\">Tentang Kami<\/a><\/li>\n            <li><a href=\"#berita\">Berita &#038; Kegiatan<\/a><\/li>\n            <li><a href=\"#keuangan\">Laporan Keuangan<\/a><\/li>\n            <li><a href=\"#demografi\">Demografi Warga<\/a><\/li>\n            <li><a href=\"#layanan\">Layanan &#038; Saran<\/a><\/li>\n        <\/ul>\n    <\/div>\n\n    <!-- Banner Utama \/ Hero -->\n    <div class=\"rt-hero\">\n        <h1>Transformasi Menuju Modernisasi RT Digital<\/h1>\n        <p>Sistem Informasi Manajemen Transparan, Akurat, dan Mandiri untuk Lingkungan Warga<\/p>\n    <\/div>\n\n    <!-- Teks Berjalan Visi Misi -->\n    <div class=\"marquee-container\">\n        <div class=\"marquee-text\">\n            \ud83c\udf1f VISI: Terwujudnya tata kelola lingkungan RT yang modern, transparan, aman, dan rukun berbasis teknologi informasi digital. \n            \ud83d\ude80 MISI: 1. Menyelenggarakan administrasi keuangan sosial yang terbuka secara real-time. 2. Memberikan pelayanan surat pengantar mandiri yang cepat via WhatsApp. 3. Membangun kebersamaan warga yang sinergis.\n        <\/div>\n    <\/div>\n\n    <div class=\"rt-main-content\">\n\n        <!-- TENTANG KAMI, STRUKTUR, TUGAS -->\n        <div class=\"rt-section\" id=\"tentang\">\n            <h2>Tentang Kami &#038; Struktur Organisasi RT<\/h2>\n            <div class=\"grid-2\">\n                <div>\n                    <h3>Struktur Organisasi RT<\/h3>\n                    <table class=\"rt-table\">\n                        <tr><td><strong>Ketua RT<\/strong><\/td><td>Eko Hadi Kurniawan<\/td><\/tr>\n                        <tr><td><strong>Sekretaris RT<\/strong><\/td><td>Arif Rahman, S.Kom<\/td><\/tr>\n                        <tr><td><strong>Bendahara RT<\/strong><\/td><td>Hj. Siti Aminah<\/td><\/tr>\n                        <tr><td><strong>Seksi Keamanan<\/strong><\/td><td>Bpk. Bambang Supeno<\/td><\/tr>\n                        <tr><td><strong>Seksi Kebersihan<\/strong><\/td><td>Bpk. Jaka Kelana<\/td><\/tr>\n                    <\/table>\n                <\/div>\n                <div>\n                    <h3>Tugas &#038; Wewenang<\/h3>\n                    <p style=\"font-size: 14px; line-height: 1.6; margin: 0; text-align: left;\">\n                        Ketua RT bersama jajaran pengurus bertanggung jawab memelihara kerukunan hidup warga, menyelenggarakan pelayanan administrasi kependudukan, mengelola keuangan swadaya warga (IPL) secara transparan, serta menjembatani program kerja dari RW dan Kelurahan\/Kasun untuk pembangunan infrastruktur fisik maupun sosial lingkungan.\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- BERITA & KEGIATAN WARGA -->\n        <div class=\"rt-section\" id=\"berita\">\n            <h2>\ud83d\udcf0 Berita &#038; Kegiatan Warga RT<\/h2>\n            <div class=\"grid-3\">\n                <div class=\"article-card\">\n                    <div class=\"date\">24 Juni 2026<\/div>\n                    <h3>Agenda Fogging Massal Antisipasi DBD<\/h3>\n                    <p>Mengantisipasi musim pancaroba, pengurus RT bekerja sama dengan Puskesmas akan mengadakan pengasapan (fogging) massal pada Minggu esok di seluruh area rumah warga gang 1-5.<\/p>\n                <\/div>\n                <div class=\"article-card\">\n                    <div class=\"date\">20 Juni 2026<\/div>\n                    <h3>Realisasi Perbaikan Lampu Jalan Blok B<\/h3>\n                    <p>Guna meningkatkan keamanan lingkungan di malam hari, seksi operasional RT telah merampungkan pemasangan 5 titik lampu LED hemat energi baru di area remang-remang Blok B.<\/p>\n                <\/div>\n                <div class=\"article-card\">\n                    <div class=\"date\">15 Juni 2026<\/div>\n                    <h3>Kegiatan Rutin Posyandu Balita &#038; Lansia<\/h3>\n                    <p>Telah terlaksana pemeriksaan berkala kesehatan balita dan lansia di Balai RT. Terima kasih atas partisipasi aktif kader PKK dan ibu-ibu sekalian yang menjaga kesehatan lingkungan kita.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- LAPORAN KEUANGAN -->\n        <div class=\"rt-section\" id=\"keuangan\">\n            <h2>\ud83d\udcca Laporan Keuangan Sosial &#038; Neraca RT<\/h2>\n            <div class=\"grid-2\" style=\"margin-bottom: 20px;\">\n                <!-- Surplus Defisit -->\n                <div>\n                    <h3 style=\"font-size: 16px; color: #0284c7 !important;\">1. Laporan Surplus \/ Defisit (Bulan Berjalan)<\/h3>\n                    <table class=\"rt-table\">\n                        <tr><th>Keterangan Pendapatan Sosial<\/th><th>Jumlah (Rp)<\/th><\/tr>\n                        <tr><td>Iuran Pengelolaan Lingkungan (IPL)<\/td><td>4.500.000<\/td><\/tr>\n                        <tr><td>Donasi \/ Kas Sosial Warga<\/td><td>1.000.000<\/td><\/tr>\n                        <tr class=\"sub-total\"><td>Total Pendapatan<\/td><td>5.500.000<\/td><\/tr>\n                        <tr><th>Keterangan Beban Operasional<\/th><th>Jumlah (Rp)<\/th><\/tr>\n                        <tr><td>Biaya Kebersihan Lingkungan &#038; Sampah<\/td><td>1.200.000<\/td><\/tr>\n                        <tr><td>Honorarium Petugas Keamanan (Satpam)<\/td><td>2.500.000<\/td><\/tr>\n                        <tr><td>Biaya Listrik Fasilitas Umum &#038; Penerangan Jalan<\/td><td>300.000<\/td><\/tr>\n                        <tr class=\"sub-total\"><td>Total Beban Pengeluaran<\/td><td>4.000.000<\/td><\/tr>\n                        <tr class=\"grand-total\"><td>SURPLUS BULAN INI (Sisa Kas)<\/td><td>1.500.000<\/td><\/tr>\n                    <\/table>\n                <\/div>\n                <!-- Neraca -->\n                <div>\n                    <h3 style=\"font-size: 16px; color: #0284c7 !important;\">2. Laporan Neraca &#038; Perubahan Modal<\/h3>\n                    <table class=\"rt-table\">\n                        <tr><th>KOMPONEN ASET (KIRI)<\/th><th>Jumlah (Rp)<\/th><\/tr>\n                        <tr><td>Kas Tunai &#038; Bank (Saldo)<\/td><td>15.500.000<\/td><\/tr>\n                        <tr><td>Peralatan &#038; Perlengkapan RT<\/td><td>2.000.000<\/td><\/tr>\n                        <tr><td>Aset Tetap (Fisik Bangunan Pos RT)<\/td><td>25.000.000<\/td><\/tr>\n                        <tr class=\"grand-total\"><td>TOTAL ASET<\/td><td>42.500.000<\/td><\/tr>\n                        <tr><th>KEWAJIBAN &#038; MODAL (KANAN)<\/th><th>Jumlah (Rp)<\/th><\/tr>\n                        <tr><td>Hutang Bank \/ Pihak Ketiga<\/td><td>0<\/td><\/tr>\n                        <tr><td>Modal Awal \/ Dana Abadi Warga<\/td><td>41.000.000<\/td><\/tr>\n                        <tr><td>Surplus Berjalan Bulan Ini<\/td><td>1.500.000<\/td><\/tr>\n                        <tr class=\"grand-total\"><td>TOTAL KEWAJIBAN &#038; MODAL<\/td><td>42.500.000<\/td><\/tr>\n                    <\/table>\n                <\/div>\n            <\/div>\n            <div style=\"font-size: 13px; color: #64748b; font-style: italic; text-align: right;\">*Laporan ini dihasilkan otomatis melalui sistem Penjurnalan &#038; Buku Besar internal.<\/div>\n        <\/div>\n\n        <!-- DEMOGRAFI PENDUDUK -->\n        <div class=\"rt-section\" id=\"demografi\">\n            <h2>\ud83d\udc65 Peta Demografi Penduduk (Total: 100 Warga)<\/h2>\n            <div class=\"grid-3\">\n                <div class=\"card-stat\">\n                    <div class=\"num\">100<\/div>\n                    <div class=\"label\">Total Jiwa<\/div>\n                <\/div>\n                <div class=\"card-stat\" style=\"border-color: #3b82f6;\">\n                    <div class=\"num\">40 \/ 60<\/div>\n                    <div class=\"label\">Laki-Laki \/ Perempuan<\/div>\n                <\/div>\n                <div class=\"card-stat\" style=\"border-color: #10b981;\">\n                    <div class=\"num\">75 \/ 25<\/div>\n                    <div class=\"label\">Warga Tetap (KTP) \/ Kontrak<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"grid-2\" style=\"margin-top: 20px;\">\n                <div>\n                    <h3>Klasifikasi Pendidikan<\/h3>\n                    <table class=\"rt-table\">\n                        <tr><td>Pendidikan SD &#8211; SMP<\/td><td>15 Orang<\/td><\/tr>\n                        <tr><td>SMA \/ Sederajat<\/td><td>50 Orang<\/td><\/tr>\n                        <tr><td>Diploma \/ Sarjana (S1-S3)<\/td><td>35 Orang<\/td><\/tr>\n                    <\/table>\n                <\/div>\n                <div>\n                    <h3>Klasifikasi Rentang Usia<\/h3>\n                    <table class=\"rt-table\">\n                        <tr><td>Balita &#038; Anak-anak (0 &#8211; 12 Tahun)<\/td><td>20 Jiwa<\/td><\/tr>\n                        <tr><td>Usia Produktif (13 &#8211; 59 Tahun)<\/td><td>65 Jiwa<\/td><\/tr>\n                        <tr><td>Lansia (60+ Tahun)<\/td><td>15 Jiwa<\/td><\/tr>\n                    <\/table>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- LAYANAN SURAT & SARAN EMAIL -->\n        <div class=\"rt-section\" id=\"layanan\">\n            <div class=\"grid-2\">\n                <!-- FORM SURAT PENGANTAR (WA) -->\n                <div>\n                    <h3 style=\"color: #1e3a8a !important;\">\u2709\ufe0f Pengajuan Surat Pengantar (WhatsApp)<\/h3>\n                    <form id=\"formSurat\" onsubmit=\"kirimKeWA(event)\">\n                        <div class=\"form-group\">\n                            <label>Nama Lengkap Warga<\/label>\n                            <input type=\"text\" id=\"nama_warga\" placeholder=\"Contoh: Budi Santoso\" required>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>NIK (Nomor Induk Kependudukan)<\/label>\n                            <input type=\"number\" id=\"nik_warga\" placeholder=\"3578xxxxxxxxxxxx\" required>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>Keperluan Surat Pengantar<\/label>\n                            <select id=\"keperluan_surat\">\n                                <option value=\"Pengurusan KTP Baru \/ Perpanjangan\">Pengurusan KTP Baru \/ Perpanjangan<\/option>\n                                <option value=\"Pengurusan Kartu Keluarga (KK)\">Pengurusan Kartu Keluarga (KK)<\/option>\n                                <option value=\"Surat Keterangan Domisili\">Surat Keterangan Domisili<\/option>\n                                <option value=\"Surat Pengantar Nikah\">Surat Pengantar Nikah<\/option>\n                            <\/select>\n                        <\/div>\n                        <button type=\"submit\" class=\"btn btn-wa\">\ud83d\ude80 Kirim ke WhatsApp Ketua RT<\/button>\n                    <\/form>\n                <\/div>\n\n                <!-- FORM KOTAK SARAN (EMAIL) -->\n                <div>\n                    <h3 style=\"color: #1e3a8a !important;\">\ud83d\udce5 Kotak Saran &#038; Masukan Pengurus<\/h3>\n                    <form action=\"https:\/\/formspree.io\/f\/xoqgkyre\" method=\"POST\">\n                        <div class=\"form-group\">\n                            <label>Email Pengirim \/ Warga<\/label>\n                            <input type=\"email\" name=\"email_pengirim\" placeholder=\"warga@email.com\" required>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>Isi Saran \/ Masukan Untuk RT<\/label>\n                            <textarea name=\"pesan_saran\" rows=\"4\" placeholder=\"Tulis masukan Anda di sini...\" required><\/textarea>\n                        <\/div>\n                        <input type=\"hidden\" name=\"_to\" value=\"ekohadikurnia@gmail.com\">\n                        <button type=\"submit\" class=\"btn\">\ud83d\udce8 Kirim Masukan ke Email RT<\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    function kirimKeWA(event) {\n        event.preventDefault();\n        const nama = document.getElementById('nama_warga').value;\n        const nik = document.getElementById('nik_warga').value;\n        const keperluan = document.getElementById('keperluan_surat').value;\n        \n        const text = `Halo Pak RT, saya ingin mengajukan Surat Pengantar Digital.\\n\\n*Data Pemohon:*\\n- Nama: ${nama}\\n- NIK: ${nik}\\n- Keperluan: ${keperluan}\\n\\nMohon untuk diverifikasi dan disetujui. Terima kasih!`;\n        const encodedText = encodeURIComponent(text);\n        \n        const nomorWA = \"6281216530399\"; \n        \n        window.open(`https:\/\/api.whatsapp.com\/send?phone=${nomorWA}&text=${encodedText}`, '_blank');\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Sinergy RT Tentang Kami Berita &#038; Kegiatan Laporan Keuangan Demografi Warga Layanan &#038; Saran Transformasi Menuju Modernisasi RT Digital Sistem Informasi Manajemen Transparan, Akurat, dan Mandiri untuk Lingkungan Warga \ud83c\udf1f VISI: Terwujudnya tata kelola lingkungan RT yang modern, transparan, aman, dan rukun berbasis teknologi informasi digital. \ud83d\ude80 MISI: 1. Menyelenggarakan administrasi keuangan sosial yang terbuka [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","has-post-thumbnail","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":10,"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/pages\/16\/revisions\/26"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/media\/15"}],"wp:attachment":[{"href":"https:\/\/sinergyrt.com\/demo-web-rt\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}