<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Informasi Publik - BBPOPT</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2e7d32;
--primary-dark: #1b5e20;
--secondary: #f1f8e9;
--accent: #ffc107;
--text: #333;
--text-light: #666;
--border: #e0e0e0;
--bg: #f5f7fa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
/* Header */
.header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 30px 20px;
text-align: center;
}
.header h1 {
font-size: 1.8rem;
margin-bottom: 8px;
}
.header p {
opacity: 0.9;
font-size: 0.95rem;
}
/* Search Bar */
.search-section {
background: white;
padding: 15px 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.search-container {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.search-container input {
width: 100%;
padding: 12px 20px 12px 45px;
border: 2px solid var(--border);
border-radius: 25px;
font-size: 1rem;
font-family: inherit;
transition: all 0.3s;
}
.search-container input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1);
}
.search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
width: 20px;
height: 20px;
}
/* Info Box */
.info-box {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
.info-card {
background: #fff3cd;
border: 1px solid #ffeeba;
border-radius: 10px;
padding: 15px 20px;
color: #856404;
font-size: 0.9rem;
}
.info-card strong {
color: #721c24;
}
.info-card ul {
margin: 10px 0 0 20px;
}
.info-card li {
margin: 5px 0;
}
/* Table Container */
.table-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 30px;
}
.table-wrapper {
background: white;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
overflow: hidden;
}
/* Iframe */
.iframe-container {
width: 100%;
height: calc(100vh - 250px);
min-height: 500px;
border: none;
}
/* Loading State */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s;
}
.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid var(--secondary);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
margin-top: 20px;
color: var(--text-light);
font-size: 0.95rem;
}
/* Footer */
.footer {
background: var(--primary);
color: white;
text-align: center;
padding: 20px;
font-size: 0.85rem;
}
.footer a {
color: var(--accent);
text-decoration: none;
}
/* Responsive */
@media (max-width: 768px) {
.header h1 {
font-size: 1.4rem;
}
.iframe-container {
height: calc(100vh - 300px);
min-height: 400px;
}
}
</style>
</head>
<body>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
<p class="loading-text">Memuat Daftar Informasi Publik...</p>
</div>
<!-- Header -->
<div class="header">
<h1>📋 Daftar Informasi Publik</h1>
<p>Balai Besar Peramalan Organisme Pengganggu Tumbuhan (BBPOPT)</p>
</div>
<!-- Search Bar -->
<div class="search-section">
<div class="search-container">
<svg class="search-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<input type="text" id="searchInput" placeholder="Cari informasi publik..." onkeyup="searchInIframe(this.value)">
</div>
</div>
<!-- Info Box -->
<div class="info-box">
<div class="info-card">
<strong>💡 Keterangan:</strong>
<ul>
<li>Gunakan <strong>Ctrl + F</strong> di dalam tabel untuk pencarian cepat</li>
<li>Tekan tombol <strong>Berikutnya</strong> untuk melihat data selanjutnya</li>
<li>Jika tidak ada tombol unduh, dokumen berupa <strong>hardcopy</strong> - hubungi PPID untuk permintaan</li>
</ul>
</div>
</div>
<!-- Table Iframe -->
<div class="table-container">
<div class="table-wrapper">
<iframe
id="dataTable"
class="iframe-container"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSuDoNwD4BO6a2jNk5gOSMT4S5Ge6NPV3Qr9kemEmPODV6DYl536wNdTBitZmg1QhWeJjMbHbZTZQ-l/pubhtml?widget=true&headers=false"
onload="hideLoading()"
sandbox="allow-scripts allow-same-origin allow-forms">
</iframe>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2026 <a href="https://bbpopt.tanamanpangan.pertanian.go.id">BBPOPT</a> - Daftar Informasi Publik</p>
</div>
<script>
// Hide loading overlay when iframe is loaded
function hideLoading() {
setTimeout(() => {
document.getElementById('loadingOverlay').classList.add('hidden');
}, 1000);
}
// Search function (works with Google Sheets native search)
function searchInIframe(term) {
// For Google Sheets, the search is built-in
// This is a helper for page-level search
if (term.length > 2) {
const iframe = document.getElementById('dataTable');
try {
// Try to access iframe content (may not work due to CORS)
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const searchBox = iframeDoc.querySelector('input[type="search"], input[name="q"], #docs-findinput');
if (searchBox) {
searchBox.value = term;
searchBox.dispatchEvent(new Event('input', { bubbles: true }));
}
} catch (e) {
// CORS restriction - can't access iframe content
console.log('Gunakan Ctrl+F di dalam tabel untuk pencarian');
}
}
}
// Hide loading after 5 seconds max (fallback)
setTimeout(hideLoading, 5000);
</script>
