ikan Uploader :
Directory : /var/www/new-ppid-app/
Upload File : |
| Current File : /var/www/new-ppid-app/layanan-desa.php |
<?php
/**
* Halaman publik: Layanan Desa — daftar tautan website layanan desa per kecamatan.
* Dilengkapi pencarian nama desa & pilihan tampilan grid / list.
*/
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/queries.php';
$keyword = get_param('q');
$grouped = get_layanan_desa_grouped($keyword);
$total = 0;
foreach ($grouped as $g) { $total += count($g); }
$pageTitle = t('Layanan Desa') . ' — ' . APP_NAME_SHORT;
$activeNav = 'layanan-desa';
require __DIR__ . '/partials/head.php';
require __DIR__ . '/partials/navbar.php';
?>
<section class="relative overflow-hidden bg-gradient-to-br from-mateng-green to-mateng-blue text-white py-14">
<?php require __DIR__ . '/partials/sekda-header.php'; ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav class="text-sm text-green-100 mb-3">
<a href="<?= e(url('index.php')) ?>" class="hover:underline"><?= e(t('Beranda')) ?></a><span class="mx-2">/</span><span><?= e(t('Layanan Desa')) ?></span>
</nav>
<h1 class="text-3xl md:text-4xl font-extrabold mb-2"><?= e(t('Layanan Website Desa')) ?></h1>
<p class="text-green-50 max-w-2xl"><?= e(t('Akses cepat ke situs resmi layanan desa di Kabupaten Mamuju Tengah. Klik nama desa untuk membuka situsnya.')) ?></p>
</div>
</section>
<style>
#desaWrap .desa-grid { display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:1rem; }
@media (min-width:640px){ #desaWrap .desa-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ #desaWrap .desa-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
#desaWrap.view-list .desa-grid { display:flex; flex-direction:column; gap:.5rem; }
</style>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 w-full">
<!-- Pencarian + toggle tampilan -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-8">
<form method="get" class="flex items-center bg-white border border-slate-200 rounded-lg px-3 py-2 focus-within:border-mateng-green transition-colors w-full sm:w-96">
<i class="fas fa-search text-slate-400 mr-2"></i>
<input type="text" name="q" value="<?= e($keyword) ?>" placeholder="Cari nama desa..." class="bg-transparent outline-none text-sm w-full text-slate-700">
<?php if ($keyword !== ''): ?><a href="<?= e(url('layanan-desa.php')) ?>" class="text-slate-400 hover:text-slate-600 ml-2"><i class="fas fa-xmark"></i></a><?php endif; ?>
</form>
<div class="flex items-center justify-between gap-3">
<p class="text-sm text-slate-500"><strong><?= $total ?></strong> <?= e(t('desa')) ?></p>
<div class="inline-flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm shrink-0">
<button type="button" data-view="grid" class="view-btn px-3 py-1.5 rounded-md text-sm transition-colors" title="Grid"><i class="fas fa-grip"></i></button>
<button type="button" data-view="list" class="view-btn px-3 py-1.5 rounded-md text-sm transition-colors" title="List"><i class="fas fa-list-ul"></i></button>
</div>
</div>
</div>
<?php if (empty($grouped)): ?>
<div class="text-center py-20 bg-white rounded-2xl border border-slate-100">
<i class="fas fa-house-flag text-5xl text-slate-300 mb-4"></i>
<p class="text-slate-500 font-medium"><?= $keyword !== '' ? 'Tidak ada desa cocok dengan "' . e($keyword) . '".' : e(t('Belum ada data layanan desa.')) ?></p>
</div>
<?php else: ?>
<div id="desaWrap" class="space-y-8">
<?php foreach ($grouped as $kecamatan => $items): ?>
<div>
<div class="flex items-center gap-2 mb-4">
<span class="w-8 h-8 rounded-lg bg-mateng-green/10 text-mateng-green flex items-center justify-center"><i class="fas fa-map-location-dot text-sm"></i></span>
<h2 class="text-lg font-bold text-slate-800"><?= e(t('Kecamatan')) ?> <?= e($kecamatan) ?></h2>
<span class="text-xs font-semibold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full"><?= count($items) ?></span>
</div>
<div class="desa-grid">
<?php foreach ($items as $d): ?>
<a href="<?= e($d['website']) ?>" target="_blank" rel="noopener noreferrer" class="desa-card group bg-white border border-slate-100 rounded-xl p-5 shadow-sm hover:shadow-md hover:border-mateng-green/40 transition-all flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-mateng-green text-white flex items-center justify-center text-lg shadow-md shrink-0"><i class="fas fa-house-chimney"></i></div>
<div class="min-w-0 flex-grow">
<p class="font-bold text-slate-800 group-hover:text-mateng-green transition-colors truncate">Desa <?= e($d['nama_desa']) ?></p>
<p class="text-xs text-slate-400 truncate"><i class="fas fa-link mr-1"></i><?= e(preg_replace('#^https?://#', '', $d['website'])) ?></p>
</div>
<i class="fas fa-arrow-up-right-from-square text-slate-300 group-hover:text-mateng-green transition-colors shrink-0"></i>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</main>
<script>
(function () {
var wrap = document.getElementById('desaWrap');
var btns = document.querySelectorAll('.view-btn');
if (!btns.length) return;
function apply(view) {
if (wrap) { wrap.classList.toggle('view-list', view === 'list'); }
btns.forEach(function (b) {
var on = b.getAttribute('data-view') === view;
b.className = 'view-btn px-3 py-1.5 rounded-md text-sm transition-colors ' + (on ? 'bg-mateng-green text-white' : 'text-slate-500 hover:text-slate-800');
});
try { localStorage.setItem('ppidDesaView', view); } catch (e) {}
}
var saved = 'grid';
try { saved = localStorage.getItem('ppidDesaView') || 'grid'; } catch (e) {}
apply(saved === 'list' ? 'list' : 'grid');
btns.forEach(function (b) { b.addEventListener('click', function () { apply(b.getAttribute('data-view')); }); });
})();
</script>
<?php require __DIR__ . '/partials/footer.php'; ?>
Kontol Shell Bypass