Belimbing 46
Belimbing 46
Smart Village & Digital Community
Selamat Datang
Sistem Informasi RT Digital Belimbing 46
Belum Ada Data
Data akan muncul setelah ditambahkan.
:root{
--primary:#16a34a;
--secondary:#2563eb;
--white:#ffffff;
--gray:#f3f4f6;
--text:#1f2937;
--shadow:
0 4px 15px rgba(0,0,0,.08);
}
.dark{
--white:#0f172a;
--gray:#1e293b;
--text:#f8fafc;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:
Segoe UI,
sans-serif;
}
body{
background:var(--gray);
color:var(--text);
}
.hidden{
display:none;
}
#splash-screen{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:
linear-gradient(
135deg,
#16a34a,
#2563eb
);
color:white;
}
.splash-content{
text-align:center;
}
.logo-box{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:white;
color:#16a34a;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
}
.loader{
margin-top:20px;
width:40px;
height:40px;
border:4px solid white;
border-top:4px solid transparent;
border-radius:50%;
animation:
spin 1s linear infinite;
}
@keyframes spin{
100%{
transform:rotate(360deg);
}
}
.topbar{
background:white;
padding:15px 20px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:var(--shadow);
}
.welcome-card{
margin:20px;
padding:20px;
background:white;
border-radius:15px;
box-shadow:var(--shadow);
}
.empty-state{
margin:20px;
padding:40px;
background:white;
border-radius:15px;
text-align:center;
box-shadow:var(--shadow);
}
.empty-state i{
font-size:50px;
margin-bottom:15px;
color:#9ca3af;
}
window.onload = () => {
setTimeout(() => {
document
.getElementById("splash-screen")
.style.display = "none";
document
.getElementById("app")
.classList.remove("hidden");
},2500);
};
const themeToggle =
document.getElementById(
"themeToggle"
);
themeToggle.addEventListener(
"click",
() => {
document.body.classList.toggle(
"dark"
);
});
Selamat Datang
Belimbing 46 adalah aplikasi digital RT untuk pelayanan masyarakat yang modern dan mudah digunakan.
Pengajuan Surat
Ajukan berbagai kebutuhan administrasi secara online.
UMKM Digital
Jelajahi produk UMKM lingkungan secara mudah.
Informasi RT
Dapatkan informasi, pengumuman dan berita terbaru.
Selanjutnya
Login Guest
Silakan masuk untuk melanjutkan.
.screen{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}
.onboarding-container{
max-width:400px;
width:100%;
background:white;
padding:30px;
border-radius:20px;
box-shadow:var(--shadow);
text-align:center;
}
.slide{
display:none;
}
.slide.active{
display:block;
}
.slide-icon{
font-size:70px;
color:var(--primary);
margin-bottom:20px;
}
.onboarding-buttons{
margin-top:25px;
}
.btn-primary,
#nextSlide{
background:var(--primary);
color:white;
border:none;
padding:12px 25px;
border-radius:10px;
cursor:pointer;
}
.login-card{
width:100%;
max-width:420px;
background:white;
padding:30px;
border-radius:20px;
box-shadow:var(--shadow);
}
.login-logo{
text-align:center;
font-size:60px;
color:var(--primary);
margin-bottom:20px;
}
.input-group{
margin-top:15px;
}
.input-group label{
display:block;
margin-bottom:5px;
}
.input-group input{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:10px;
}
.password-box{
display:flex;
gap:10px;
}
.password-box button{
padding:0 15px;
border:none;
background:#eee;
border-radius:10px;
cursor:pointer;
}
const onboarding =
document.getElementById(
"onboarding"
);
const slides =
document.querySelectorAll(
".slide"
);
let currentSlide = 0;
function showSlide(index){
slides.forEach(slide => {
slide.classList.remove(
"active"
);
});
slides[index].classList.add(
"active"
);
}
document
.getElementById("nextSlide")
.addEventListener("click", () => {
currentSlide++;
if(currentSlide < slides.length){
showSlide(currentSlide);
}else{
onboarding.classList.add(
"hidden"
);
document
.getElementById(
"guestLogin"
)
.classList.remove(
"hidden"
);
}
});
setTimeout(() => {
document
.getElementById(
"splash-screen"
)
.style.display = "none";
onboarding.classList.remove(
"hidden"
);
},2500);
Blog/Kampung Blimbingan
RT. 046, RW. 009,
Dusun Sooko,
Desa Prambon,
Kecamatan Tugu,
Kabupaten Trenggalek,
Jawa Timur,
Indonesia.
Warga Baru
Status Pengajuan
Pengaduan Surat
Kontak RT
Belum Ada Berita
Belum Ada Statistik
Home
UMKM
Keperluan
Notif
Profil
.guest-header{
padding:20px;
background:white;
box-shadow:var(--shadow);
}
.guest-content{
padding:15px;
padding-bottom:90px;
}
.hero-card{
background:white;
padding:20px;
border-radius:15px;
margin-bottom:15px;
box-shadow:var(--shadow);
}
.shortcut-grid{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:15px;
margin-bottom:15px;
}
.shortcut-card{
background:white;
padding:20px;
border-radius:15px;
text-align:center;
box-shadow:var(--shadow);
}
.shortcut-card i{
font-size:25px;
margin-bottom:10px;
color:var(--primary);
}
.empty-card{
background:white;
padding:30px;
border-radius:15px;
text-align:center;
margin-bottom:15px;
box-shadow:var(--shadow);
}
.empty-card i{
font-size:40px;
margin-bottom:15px;
color:#94a3b8;
}
.bottom-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:70px;
background:white;
display:flex;
justify-content:space-around;
align-items:center;
box-shadow:0 -3px 15px rgba(0,0,0,.08);
}
.nav-btn{
border:none;
background:none;
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
font-size:12px;
}
.nav-btn i{
font-size:20px;
margin-bottom:3px;
}
.active-nav{
color:var(--primary);
font-weight:600;
}
.tab-content{
display:none;
}
.active-tab{
display:block;
}
.profile-card{
background:white;
padding:30px;
text-align:center;
border-radius:15px;
margin-bottom:15px;
box-shadow:var(--shadow);
}
.profile-card i{
font-size:60px;
margin-bottom:15px;
color:var(--primary);
}
.menu-list{
display:flex;
flex-direction:column;
gap:10px;
}
.menu-item{
background:white;
padding:15px;
border-radius:12px;
box-shadow:var(--shadow);
cursor:pointer;
}
document
.getElementById(
"btnGuestLogin"
)
.addEventListener(
"click",
() => {
document
.getElementById(
"guestLogin"
)
.classList.add(
"hidden"
);
document
.getElementById(
"guestDashboard"
)
.classList.remove(
"hidden"
);
});
const navButtons =
document.querySelectorAll(
".nav-btn"
);
const tabs =
document.querySelectorAll(
".tab-content"
);
navButtons.forEach(btn => {
btn.addEventListener(
"click",
() => {
navButtons.forEach(b =>
b.classList.remove(
"active-nav"
));
tabs.forEach(tab =>
tab.classList.remove(
"active-tab"
));
btn.classList.add(
"active-nav"
);
document
.getElementById(
btn.dataset.tab
)
.classList.add(
"active-tab"
);
});
});
.register-container{
max-width:600px;
margin:20px auto;
background:white;
padding:20px;
border-radius:20px;
box-shadow:var(--shadow);
}
.step-indicator{
display:flex;
justify-content:center;
gap:20px;
margin:20px 0;
}
.step{
width:40px;
height:40px;
border-radius:50%;
background:#cbd5e1;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}
.active-step{
background:var(--primary);
color:white;
}
.register-step{
display:none;
flex-direction:column;
gap:15px;
}
.active-register-step{
display:flex;
}
.register-step input,
.register-step select,
.register-step textarea{
padding:12px;
border:1px solid #d1d5db;
border-radius:10px;
width:100%;
}
.preview-image{
width:100%;
max-height:220px;
object-fit:cover;
border-radius:10px;
display:none;
}
.btn-group{
display:flex;
gap:10px;
}
.btn-group button,
#nextStep1,
#submitRegister{
flex:1;
padding:12px;
border:none;
background:var(--primary);
color:white;
border-radius:10px;
cursor:pointer;
}
.info-box{
padding:15px;
background:#ecfdf5;
border-radius:10px;
font-size:14px;
}
function showRegisterStep(step){
document
.querySelectorAll(".register-step")
.forEach(el => {
el.classList.remove(
"active-register-step"
);
});
document
.getElementById(
"step" + step
)
.classList.add(
"active-register-step"
);
document
.querySelectorAll(".step")
.forEach(el => {
el.classList.remove(
"active-step"
);
});
document
.getElementById(
"step" + step + "Indicator"
)
.classList.add(
"active-step"
);
}
document
.getElementById("nextStep1")
.addEventListener(
"click",
() => showRegisterStep(2)
);
document
.getElementById("backStep2")
.addEventListener(
"click",
() => showRegisterStep(1)
);
document
.getElementById("nextStep2")
.addEventListener(
"click",
() => showRegisterStep(3)
);
document
.getElementById("backStep3")
.addEventListener(
"click",
() => showRegisterStep(2)
);
function previewImage(inputId,imageId){
const input =
document.getElementById(
inputId
);
const image =
document.getElementById(
imageId
);
input.addEventListener(
"change",
e => {
const file =
e.target.files[0];
if(file){
image.src =
URL.createObjectURL(file);
image.style.display =
"block";
}
});
}
previewImage(
"fotoProfil",
"previewProfil"
);
previewImage(
"fotoKtp",
"previewKtp"
);
previewImage(
"fotoKk",
"previewKk"
);
.forgot-container{
max-width:600px;
margin:20px auto;
padding:20px;
background:white;
border-radius:20px;
box-shadow:var(--shadow);
}
.forgot-header{
text-align:center;
margin-bottom:20px;
}
.forgot-form{
display:flex;
flex-direction:column;
gap:15px;
}
.forgot-form input{
padding:12px;
border:1px solid #d1d5db;
border-radius:10px;
}
.captcha-box{
padding:20px;
background:#f1f5f9;
border-radius:10px;
text-align:center;
}
#sendForgot{
padding:12px;
border:none;
background:var(--primary);
color:white;
border-radius:10px;
cursor:pointer;
}
previewImage(
"forgotPhoto",
"forgotPreview"
);
document
.getElementById(
"sendForgot"
)
.addEventListener(
"click",
() => {
alert(
"Permintaan berhasil dikirim. Menunggu persetujuan Admin."
);
});
Kampung Blimbingan
RT.046 RW.009
Dusun Sooko
Desa Prambon
Kecamatan Tugu
Kabupaten Trenggalek
Surat
Pengumuman
Voting
Musyawarah
Belum Ada Pengumuman
Belum Ada Berita
Home
UMKM
Keuangan
Piket
Profil
.warga-header{
padding:20px;
background:white;
box-shadow:var(--shadow);
}
.warga-content{
padding:15px;
padding-bottom:90px;
}
.warga-tab{
display:none;
}
.active-warga-tab{
display:block;
}
.active-warga-nav{
color:var(--primary);
font-weight:600;
}
const wargaNav =
document.querySelectorAll(
".warga-nav"
);
const wargaTab =
document.querySelectorAll(
".warga-tab"
);
wargaNav.forEach(btn => {
btn.addEventListener(
"click",
() => {
wargaNav.forEach(item => {
item.classList.remove(
"active-warga-nav"
);
});
wargaTab.forEach(item => {
item.classList.remove(
"active-warga-tab"
);
});
btn.classList.add(
"active-warga-nav"
);
document
.getElementById(
btn.dataset.warga
)
.classList.add(
"active-warga-tab"
);
});
});
Jadwal Piket
Belum Ada Jadwal Piket
Belum Ada Riwayat Piket
Belum Ada Statistik Piket
.piket-card{
background:white;
padding:20px;
border-radius:15px;
margin-bottom:15px;
box-shadow:var(--shadow);
}
.piket-card select,
.piket-card textarea,
.piket-card input{
width:100%;
padding:12px;
margin-top:10px;
border:1px solid #d1d5db;
border-radius:10px;
}
.piket-card button{
width:100%;
margin-top:15px;
padding:12px;
border:none;
border-radius:10px;
background:var(--primary);
color:white;
cursor:pointer;
}
.warning-box{
background:#fef3c7;
padding:15px;
border-radius:10px;
margin-bottom:15px;
}
previewImage(
"fotoPiket",
"previewPiket"
);
const kirimAbsensi =
document.getElementById(
"kirimAbsensi"
);
if(kirimAbsensi){
kirimAbsensi.addEventListener(
"click",
() => {
alert(
"Absensi berhasil dikirim."
);
});
}
Dashboard Utama
Warga Tetap
Belum Ada Data
Belum Ada Permintaan Persetujuan
Hak Akses Admin
Belum Ada Admin Tambahan
#adminDashboard{
display:flex;
min-height:100vh;
background:#f8fafc;
}
.sidebar{
width:280px;
background:#0f172a;
color:white;
padding:20px;
}
.sidebar-header{
margin-bottom:30px;
}
.sidebar-menu{
list-style:none;
}
.sidebar-menu li{
padding:15px;
margin-bottom:10px;
border-radius:10px;
cursor:pointer;
}
.sidebar-menu li:hover{
background:#1e293b;
}
.active-admin-menu{
background:#16a34a;
}
.admin-content{
flex:1;
padding:20px;
overflow:auto;
}
.admin-page{
display:none;
}
.active-admin-page{
display:block;
}
.stats-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:15px;
}
.stat-card{
background:white;
padding:20px;
border-radius:15px;
box-shadow:var(--shadow);
}
const adminMenu =
document.querySelectorAll(
".admin-menu"
);
const adminPages =
document.querySelectorAll(
".admin-page"
);
adminMenu.forEach(menu => {
menu.addEventListener(
"click",
() => {
adminMenu.forEach(item => {
item.classList.remove(
"active-admin-menu"
);
});
adminPages.forEach(item => {
item.classList.remove(
"active-admin-page"
);
});
menu.classList.add(
"active-admin-menu"
);
document
.getElementById(
menu.dataset.admin
)
.classList.add(
"active-admin-page"
);
});
});
Kelola Admin
Tambah Admin
Belum Ada Admin Tambahan
.primary-btn{
background:#16a34a;
color:white;
padding:12px 20px;
border:none;
border-radius:10px;
cursor:pointer;
}
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
.modal-content{
background:white;
width:90%;
max-width:700px;
max-height:90vh;
overflow:auto;
padding:25px;
border-radius:20px;
}
.modal-content input{
width:100%;
padding:12px;
margin-bottom:10px;
border:1px solid #d1d5db;
border-radius:10px;
}
.permission-list{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));
gap:10px;
margin-top:20px;
}
.permission-list label{
background:#f8fafc;
padding:10px;
border-radius:10px;
}
.modal-actions{
display:flex;
gap:10px;
margin-top:20px;
}
.modal-actions button{
flex:1;
padding:12px;
border:none;
border-radius:10px;
cursor:pointer;
}
const modalAdmin =
document.getElementById(
"modalAdmin"
);
document
.getElementById(
"btnTambahAdmin"
)
.addEventListener(
"click",
() => {
modalAdmin.classList.remove(
"hidden"
);
});
document
.getElementById(
"closeAdminModal"
)
.addEventListener(
"click",
() => {
modalAdmin.classList.add(
"hidden"
);
});
document
.getElementById(
"saveAdmin"
)
.addEventListener(
"click",
() => {
alert(
"Admin berhasil ditambahkan."
);
modalAdmin.classList.add(
"hidden"
);
});
const adminAccounts = [
{
role:"Ketua RT",
username:"admin_rt046_ketua",
password:"Mahkota@2026RT#8246",
superAdmin:true
},
{
role:"Sekretaris",
username:"admin_rt046_sekretaris",
password:"Dokum/2026RT#5173",
superAdmin:false
},
{
role:"Bendahara",
username:"admin_rt046_bendahara",
password:"Saldo$2026RT#6382",
superAdmin:false
}
];
.locked-feature{
background:#fef2f2;
color:#dc2626;
padding:20px;
border-radius:15px;
text-align:center;
}
alert(
"Anda tidak memiliki hak akses untuk menggunakan fitur ini. Silakan hubungi Ketua RT."
);
#jenisSurat,
#deskripsiSurat{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #d1d5db;
border-radius:10px;
}
#kirimSurat{
width:100%;
padding:12px;
border:none;
background:#16a34a;
color:white;
border-radius:10px;
cursor:pointer;
margin-bottom:15px;
}
const kirimSurat =
document.getElementById(
"kirimSurat"
);
if(kirimSurat){
kirimSurat.addEventListener(
"click",
() => {
alert(
"Pengajuan surat berhasil dikirim."
);
});
}
Pengajuan Surat
Belum Ada Pengajuan Surat
Data pengajuan surat akan muncul di sini.
Download Surat
#kategoriPengaduan,
#subKategoriPengaduan,
#isiPengaduan{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #d1d5db;
border-radius:10px;
}
#kirimPengaduan{
width:100%;
padding:12px;
border:none;
background:#dc2626;
color:white;
border-radius:10px;
cursor:pointer;
margin-bottom:15px;
}
previewImage(
"fotoPengaduan",
"previewPengaduan"
);
const kategoriPengaduan =
document.getElementById(
"kategoriPengaduan"
);
const subKategori =
document.getElementById(
"subKategoriPengaduan"
);
if(kategoriPengaduan){
kategoriPengaduan.addEventListener(
"change",
() => {
subKategori.innerHTML = "";
let data = [];
switch(
kategoriPengaduan.value
){
case "Ketertiban dan Keamanan":
data = [
"Gangguan Suara",
"Parkir Liar",
"Pencurian atau Keamanan",
"Aktivitas Ilegal",
"Lainnya"
];
break;
case "Kebersihan dan Lingkungan":
data = [
"Sampah",
"Saluran Air",
"Pohon Mengganggu",
"Hewan Peliharaan",
"Lainnya"
];
break;
case "Konflik Sosial Antarwarga":
data = [
"Batas Tanah",
"Perselisihan Pribadi",
"Lainnya"
];
break;
case "Pelayanan dan Transparansi RT":
data = [
"Pungutan Liar",
"Ketidaktransparan Dana",
"Pelayanan Surat",
"Lainnya"
];
break;
default:
data = [
"Lainnya"
];
}
data.forEach(item => {
const option =
document.createElement(
"option"
);
option.textContent = item;
subKategori.appendChild(
option
);
});
});
}
const kirimPengaduan =
document.getElementById(
"kirimPengaduan"
);
if(kirimPengaduan){
kirimPengaduan.addEventListener(
"click",
() => {
alert(
"Pengaduan berhasil dikirim."
);
});
}
Pengaduan Lingkungan
Belum Ada Pengaduan
Toko UMKM
Belanja produk UMKM lingkungan.
Belum Ada Produk UMKM
.search-box{
margin-bottom:15px;
}
.search-box input{
width:100%;
padding:12px;
border:1px solid #d1d5db;
border-radius:10px;
}
.product-card{
background:white;
padding:15px;
border-radius:15px;
box-shadow:var(--shadow);
margin-bottom:15px;
}
.product-image{
height:180px;
background:#e5e7eb;
border-radius:10px;
margin-bottom:10px;
}
.product-title{
font-weight:600;
margin-bottom:10px;
}
.product-price{
color:#16a34a;
font-weight:bold;
}
Detail Produk
Belum Ada Detail Produk
Tambah ke Keranjang
Keranjang Belanja
Keranjang Masih Kosong
Pesanan Saya
Belum Ada Pesanan
Tambah Produk
Belum Ada Produk
Simpan Produk
Keuangan RT
Total Pemasukan
Belum Ada Data
Total Pengeluaran
Belum Ada Data
Belum Ada Statistik Keuangan
Riwayat Transaksi
Belum Ada Riwayat Transaksi
Statistik Keuangan
Belum Ada Data Statistik
.chart-box{
background:white;
padding:30px;
border-radius:15px;
text-align:center;
box-shadow:var(--shadow);
min-height:250px;
}
Informasi Keuangan RT
Transparansi keuangan lingkungan.
Belum Ada Data Keuangan
Export PDF
Export Excel
Voting
Voting Warga
Ikuti voting yang sedang berlangsung.
Belum Ada Voting Aktif
Judul Voting
Deskripsi Voting
Pilihan 1
Pilihan 2
Pilihan 3
Hasil Voting
Belum Ada Hasil Voting
Musyawarah Digital
Diskusi dan musyawarah warga secara online.
Kirim Komentar
Belum Ada Diskusi
Kelola Voting
Buat Voting Baru
Belum Ada Voting
Simpan Voting
Musyawarah Digital
Belum Ada Musyawarah
Belum Ada Pengumuman
Belum Ada Berita
Pengumuman RT
Informasi resmi dari pengurus RT.
Belum Ada Pengumuman
Berita Lingkungan
Informasi dan kegiatan terbaru.
Belum Ada Berita
Notifikasi
Belum Ada Notifikasi
Pengumuman
Buat Pengumuman
Belum Ada Pengumuman
Publikasikan
Berita
Buat Berita
Belum Ada Berita
Publikasikan Berita
Broadcast Pesan
Kirim Broadcast
Push Notification
Kirim Notifikasi
Monitoring Sistem
Total Warga
Belum Ada Data
Admin Aktif
Belum Ada Data
Surat Aktif
Belum Ada Data
Pengaduan Aktif
Belum Ada Data
Voting Aktif
Belum Ada Data
Logo Aplikasi
Upload Logo
Banner Aplikasi
Upload Banner
Keamanan Sistem
Backup Database
Backup Sekarang
Restore Database
Restore Data
Audit Log Aktivitas
Belum Ada Aktivitas
Monitoring Admin
Belum Ada Aktivitas Admin
Monitoring Warga
Belum Ada Aktivitas Warga
