wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
4491d23bea9c4b9410d0416c148f32fa4519d48e
desa-darmasaba/src/app/percobaan/index.html

685 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HIPMI Feature Checklist</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
color: #333;
text-align: center;
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
h3 {
color: #444;
margin-top: 20px;
background-color: #e0e0e0;
padding: 10px;
border-radius: 5px;
}
h4 {
color: #4e4242;
margin-top: 20px;
background-color: #e0e0e0;
padding: 10px;
border-radius: 5px;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
background-color: #fff;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}
li:hover {
background-color: #f0f0f0;
}
li.checked {
text-decoration: line-through;
color: #888;
background-color: #f0f0f0;
}
#progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
}
#progress {
width: 0%;
height: 20px;
background-color: #4caf50;
border-radius: 5px;
transition: width 0.5s ease;
}
#reset-btn {
display: block;
width: 100%;
padding: 10px;
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}
#reset-btn:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<h1>Desa Darmasaba Feature Checklist</h1>
<!-- <div id="progress-bar">
<div id="progress"></div>
</div> -->
<!-- <div id="progress-percentage" style="text-align: center; font-weight: bold; margin-top: 5px; font-size: 1.2em;">0%</div> -->
<div id="checklist">
<!-- Menu Landing Page -->
<h3>Menu Landing Page</h3>
<!-- SubMenu Profile -->
<h4>Profile</h4>
<!-- Program Inovasi -->
<h4>Program Inovasi :</h4>
<ul>
<li>
<input type="checkbox" id="1" /> <label for="1">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="2" /> <label for="2">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="3" />
<label for="3">Create Program Inovasi</label>
</li>
<li>
<input type="checkbox" id="4" />
<label for="4">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="5" />
<label for="5">Hapus program inovasi bekerja</label>
</li>
<li>
<input type="checkbox" id="6" />
<label for="6">Edit / Update program inovasi bekerja</label>
</li>
<li>
<input type="checkbox" id="6_1" />
<label for="6_1">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="6_2" />
<label for="6_2">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- Pejabat Desa -->
<h4>Pejabat Desa : </h4>
<ul>
<li>
<input type="checkbox" id="8" /> <label for="8">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="9" />
<label for="9">Data seed pejabat desa berfungsi</label>
</li>
<li>
<input type="checkbox" id="10" />
<label for="10">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="12" />
<label for="12">Edit / Update pejabat desa bekerja</label>
</li>
<li>
<input type="checkbox" id="12_1" />
<label for="12_1">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- media sosial -->
<h4>Media Sosial : </h4>
<ul>
<li>
<input type="checkbox" id="13" /> <label for="13">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="14" /> <label for="14">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="15" />
<label for="15">Create media sosial</label>
</li>
<li>
<input type="checkbox" id="16" />
<label for="16">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="17" />
<label for="17">Hapus media sosial bekerja</label>
</li>
<li>
<input type="checkbox" id="18" />
<label for="18">Edit / Update media sosial bekerja</label>
</li>
<li>
<input type="checkbox" id="18_1" />
<label for="18_1">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="18_2" />
<label for="18_2">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Desa Anti Korupsi -->
<h4>Desa Anti Korupsi</h4>
<!-- List Desa Anti Korupsi -->
<h4>List Desa Anti Korupsi</h4>
<ul>
<li>
<input type="checkbox" id="19" /> <label for="19">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="20" /> <label for="20">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="21" />
<label for="21">Create list desa anti korupsi</label>
</li>
<li>
<input type="checkbox" id="22" />
<label for="22">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="23" />
<label for="23">Hapus list desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="24" />
<label for="24">Edit / Update list desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="25" />
<label for="25">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="25_1" />
<label for="25_1">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- kategori desa Anti Korupsi -->
<h4>Kategori Desa Anti Korupsi</h4>
<ul>
<li>
<input type="checkbox" id="26" /> <label for="26">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="27" /> <label for="27">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="28" />
<label for="28">Create kategori desa anti korupsi</label>
</li>
<li>
<input type="checkbox" id="29" />
<label for="29">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="30" />
<label for="30">Hapus kategori desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="31" />
<label for="31">Edit / Update kategori desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="32" />
<label for="32">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="32_1" />
<label for="32_1">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID) -->
<h4>Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID)</h4>
<!-- List Responden -->
<h4>List Desa Anti Korupsi</h4>
<ul>
<li>
<input type="checkbox" id="19" /> <label for="19">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="20" /> <label for="20">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="21" />
<label for="21">Create list desa anti korupsi</label>
</li>
<li>
<input type="checkbox" id="22" />
<label for="22">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="23" />
<label for="23">Hapus list desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="24" />
<label for="24">Edit / Update list desa anti korupsi bekerja</label>
</li>
<li>
<h4>List Responden</h4>
<ul>
<li>
<input type="checkbox" id="33" />
<label for="33">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="34" />
<label for="34">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="35" />
<label for="35">Create list responden</label>
</li>
<li>
<input type="checkbox" id="36" />
<label for="36">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="37" />
<label for="37">Hapus list responden bekerja</label>
</li>
<li>
<input type="checkbox" id="38" />
<label for="38">Edit / Update list responden bekerja</label>
</li>
<li>
<input type="checkbox" id="39" />
<label for="39">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="40" />
<label for="40">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu SDGs Desa -->
<h4>SDGs Desa</h4>
<!-- List SDGs Desa -->
<h4>List SDGs Desa</h4>
<ul>
<li>
<input type="checkbox" id="41" />
<label for="41">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="42" />
<label for="42">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="43" />
<label for="43">Create list SDGs Desa</label>
</li>
<li>
<input type="checkbox" id="44" />
<label for="44">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="45" />
<label for="45">Hapus list SDGs Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="46" />
<label for="46">Edit / Update list SDGs Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="47" />
<label for="47">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="48" />
<label for="48">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu APBDes -->
<h4>APBDes</h4>
<!-- List APBDes -->
<h4>List APBDes</h4>
<ul>
<li>
<input type="checkbox" id="49" />
<label for="49">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="50" />
<label for="50">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="51" />
<label for="51">Create list APBDes</label>
</li>
<li>
<input type="checkbox" id="52" />
<label for="52">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="53" />
<label for="53">Hapus list APBDes bekerja</label>
</li>
<li>
<input type="checkbox" id="54" />
<label for="54">Edit / Update list APBDes bekerja</label>
</li>
<li>
<input type="checkbox" id="55" />
<label for="55">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="56" />
<label for="56">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Prestasi Desa -->
<h4>Prestasi Desa</h4>
<!-- List Prestasi Desa -->
<h4>List Prestasi Desa</h4>
<ul>
<li>
<input type="checkbox" id="57" />
<label for="57">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="58" />
<label for="58">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="59" />
<label for="59">Create list Prestasi Desa</label>
</li>
<li>
<input type="checkbox" id="60" />
<label for="60">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="61" />
<label for="61">Hapus list Prestasi Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="62" />
<label for="62">Edit / Update list Prestasi Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="63" />
<label for="63">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="64" />
<label for="64">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- Menu PPID -->
<h3>Menu PPID</h3>
<!-- SubMenu Profile PPID -->
<h4>Profile PPID</h4>
<ul>
<li>
<input type="checkbox" id="65" />
<label for="65">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="66" />
<label for="66">Edit / Update Profile PPID</label>
</li>
<li>
<input type="checkbox" id="67" />
<label for="67">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Struktur PPID -->
<h4>Struktur PPID</h4>
<h4>Pegawai</h4>
<ul>
<li>
<input type="checkbox" id="68" />
<label for="68">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="69" />
<label for="69">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="70" />
<label for="70">Create list Pegawai</label>
</li>
<li>
<input type="checkbox" id="71" />
<label for="71">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="72" />
<label for="72">Hapus list Pegawai bekerja</label>
</li>
<li>
<input type="checkbox" id="73" />
<label for="73">Edit / Update list Pegawai bekerja</label>
</li>
<li>
<input type="checkbox" id="74" />
<label for="74">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="75" />
<label for="75">Sinkronisasi ke UI</label>
</li>
</ul>
<h4>Posisi Organisasi PPID</h4>
<ul>
<li>
<input type="checkbox" id="76" />
<label for="76">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="77" />
<label for="77">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="78" />
<label for="78">Create list Posisi Organisasi PPID</label>
</li>
<li>
<input type="checkbox" id="79" />
<label for="79">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="80" />
<label for="80">Hapus list Posisi Organisasi PPID bekerja</label>
</li>
<li>
<input type="checkbox" id="81" />
<label for="81">Edit / Update list Posisi Organisasi PPID bekerja</label>
</li>
<li>
<input type="checkbox" id="82" />
<label for="82">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="83" />
<label for="83">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Visi Misi PPID -->
<h4>Visi Misi PPID</h4>
<ul>
<li>
<input type="checkbox" id="84" />
<label for="84">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="85" />
<label for="85">Edit / Update Visi Misi PPID</label>
</li>
<li>
<input type="checkbox" id="86" />
<label for="86">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Dasar Hukum PPID -->
<h4>Dasar Hukum PPID</h4>
<ul>
<li>
<input type="checkbox" id="87" />
<label for="87">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="88" />
<label for="88">Edit / Update Dasar Hukum PPID</label>
</li>
<li>
<input type="checkbox" id="89" />
<label for="89">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Permohonan Informasi Publik -->
<h4>Permohonan Informasi Publik</h4>
<ul>
<li>
<input type="checkbox" id="90" />
<label for="90">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="91" />
<label for="91">Create Permohonan Informasi Publik</label>
</li>
<li>
<input type="checkbox" id="92" />
<label for="92">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Permohonan Keberatan Informasi Publik -->
<h4>Permohonan Keberatan Informasi Publik</h4>
<ul>
<li>
<input type="checkbox" id="93" />
<label for="93">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="94" />
<label for="94">Create Permohonan Keberatan Informasi Publik</label>
</li>
<li>
<input type="checkbox" id="95" />
<label for="95">Sinkronisasi ke UI</label>
</li>
</ul>
</div>
<button id="reset-btn">Reset Semua Checklist</button>
<div id="progress-bar">
<div id="progress"></div>
<span id="progress-percentage"></span>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const progressBar = document.getElementById("progress");
const progressPercentage = document.getElementById("progress-percentage");
const resetBtn = document.getElementById("reset-btn");
// Load saved state from localStorage
checkboxes.forEach((checkbox) => {
const savedState = localStorage.getItem(checkbox.id);
if (savedState === "checked") {
checkbox.checked = true;
checkbox.parentElement.classList.add("checked");
}
});
// Update progress
function updateProgress() {
const totalCheckboxes = checkboxes.length;
const checkedCheckboxes = document.querySelectorAll(
'input[type="checkbox"]:checked'
).length;
const progressPercentage = Math.round((checkedCheckboxes / totalCheckboxes) * 100);
progressBar.style.width = progressPercentage + "%";
document.getElementById('progress-percentage').textContent = progressPercentage + '%';
}
// Initial progress update
updateProgress();
// Add event listeners to checkboxes
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
// Toggle 'checked' class on parent li
checkbox.parentElement.classList.toggle(
"checked",
checkbox.checked
);
// Save state to localStorage
localStorage.setItem(
checkbox.id,
checkbox.checked ? "checked" : "unchecked"
);
// Update progress bar
updateProgress();
});
});
// Reset button functionality
resetBtn.addEventListener("click", () => {
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
checkbox.parentElement.classList.remove("checked");
localStorage.removeItem(checkbox.id);
});
updateProgress();
});
});
</script>
</body>
</html>
`
Reference in New Issue View Git Blame Copy Permalink