function doGet() {
const sheet = SpreadsheetApp.openById("1Gu7Q1N39FTCyGw1oTZ4d98zN7gt-
uc6u_t7HxwM50Tg").getSheetByName("Sheet1");
const data = sheet.getDataRange().getValues().filter(row => row[0]);
const json = JSON.stringify(data.slice(1)); // exclude header
const html = `
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f7f7f7;
}
h2 {
text-align: center;
}
#searchInput {
width: 100%;
max-width: 400px;
padding: 10px;
margin: 0 auto 20px auto;
display: block;
border-radius: 6px;
border: 1px solid #ccc;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
width: 260px;
overflow: hidden;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.02);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 15px;
}
.card-content h3 {
margin: 0 0 10px 0;
font-size: 18px;
}
.card-content p {
margin: 4px 0;
font-size: 14px;
}
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination button {
margin: 2px;
padding: 6px 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>Profil Penyuluh KB</h2>
<input type="text" id="searchInput" placeholder="Cari nama, desa,
kabupaten..." oninput="filterData()">
<div class="card-container" id="cardContainer"></div>
<div class="pagination" id="paginationContainer"></div>
<script>
const data = ${json};
let filteredData = [...data];
let currentPage = 1;
const cardsPerPage = 12;
function renderCards(data, page) {
const start = (page - 1) * cardsPerPage;
const end = start + cardsPerPage;
const pageData = data.slice(start, end);
let html = '';
pageData.forEach(row => {
const foto = row[1] ? \`<img src="\${row[1]}" alt="Foto">\` : '<div
style="width:100%;height:200px;background:#ccc;"></div>';
html += \`
<div class="card">
\${foto}
<div class="card-content">
<h3>\${row[6]}</h3>
<p><strong>Status:</strong> \${row[2]}</p>
<p><strong>Jabatan:</strong> \${row[3]}</p>
<p><strong>NIP:</strong> \${row[4]}</p>
<p><strong>Pangkat:</strong> \${row[5]}</p>
<p><strong>Kabupaten:</strong> \${row[7]}</p>
<p><strong>Kecamatan:</strong> \${row[8]}</p>
<p><strong>Desa:</strong> \${row[9]}</p>
</div>
</div>
\`;
});
document.getElementById("cardContainer").innerHTML = html;
renderPagination(data.length, page);
}
function renderPagination(total, currentPage) {
const totalPages = Math.ceil(total / cardsPerPage);
let buttons = '';
for (let i = 1; i <= totalPages; i++) {
buttons += \`<button onclick="goToPage(\${i})"\${i === currentPage ? '
style="font-weight:bold"' : ''}>\${i}</button>\`;
}
document.getElementById("paginationContainer").innerHTML = buttons;
}
function goToPage(page) {
currentPage = page;
renderCards(filteredData, currentPage);
}
function filterData() {
const keyword =
document.getElementById("searchInput").value.toLowerCase();
filteredData = data.filter(row => row.join("
").toLowerCase().includes(keyword));
goToPage(1);
}
renderCards(filteredData, currentPage);
</script>
</body>
</html>
`;
return
HtmlService.createHtmlOutput(html).setXFrameOptionsMode(HtmlService.XFrameOptionsMo
de.ALLOWALL);
}
