246 lines
15 KiB
HTML
246 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GIS Portal Program Studi Informatika Untan</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Outfit', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
background: radial-gradient(circle at 10% 20%, rgb(240, 243, 248) 0%, rgb(220, 227, 240) 100.2%);
|
|
min-height: 100vh;
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(14px);
|
|
border: 1px solid rgba(255, 255, 255, 0.45);
|
|
}
|
|
.glowing-shadow:hover {
|
|
box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.25);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col text-slate-800">
|
|
|
|
<!-- Top Decorative Gradient Header -->
|
|
<div class="w-full bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-700 text-white shadow-lg relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_-20%,rgba(255,255,255,0.15),transparent)] pointer-events-none"></div>
|
|
<div class="max-w-6xl mx-auto px-6 py-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6 relative z-10">
|
|
<div>
|
|
<span class="text-xs font-extrabold uppercase tracking-widest bg-white/20 px-3.5 py-1.5 rounded-full backdrop-blur-md">
|
|
Portal GIS Informatika Untan
|
|
</span>
|
|
<h1 class="text-3xl md:text-4xl font-extrabold tracking-tight mt-3">Sistem Informasi Geografis Terpadu</h1>
|
|
<p class="text-sm text-indigo-100/90 mt-2 max-w-2xl font-light">
|
|
Akses visualisasi data spasial kota Pontianak, mulai dari sertifikasi parsel tanah, sebaran SPBU, jaringan jalan dan kondisi infrastruktur, hingga pengelolaan bantuan penduduk.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="shrink-0 flex items-center bg-white/10 px-5 py-4 rounded-2xl border border-white/10 backdrop-blur-md gap-3.5">
|
|
<div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] uppercase font-bold tracking-wider text-indigo-200">Database</div>
|
|
<div class="text-base font-extrabold leading-none mt-0.5">Koneksi Aktif</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Section -->
|
|
<main class="max-w-6xl w-full mx-auto px-6 py-12 flex-1 flex flex-col gap-10">
|
|
|
|
<!-- Section Title -->
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-500 uppercase tracking-widest text-center">Pilih Modul GIS</h2>
|
|
<div class="h-1 w-12 bg-indigo-600 mx-auto mt-2 rounded-full"></div>
|
|
</div>
|
|
|
|
<!-- Dashboard Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
|
|
<!-- Module 1: Parsil Tanah -->
|
|
<div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
|
|
<div>
|
|
<div class="w-14 h-14 rounded-2xl bg-indigo-50 border border-indigo-100 text-indigo-600 flex items-center justify-center shadow-inner">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mt-5 text-slate-800">Parsil Tanah (Land Parcel)</h3>
|
|
<p class="text-sm text-slate-500 mt-2 leading-relaxed">
|
|
Aplikasi pengukuran dan manajemen batas kepemilikan tanah. Mendukung visualisasi poligon, kalkulasi otomatis luas bidang, pencarian kepemilikan, dan pemetaan status sertifikat tanah (SHM, HGB, HGU, HP).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5 bg-indigo-50 text-indigo-700 px-3 py-1 rounded-xl text-xs font-semibold">
|
|
<span>Tercatat:</span>
|
|
<strong id="statParsel">...</strong>
|
|
</div>
|
|
<a href="fitur_parsil_tanah/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold shadow-md shadow-indigo-600/10 hover:shadow-indigo-600/25 transition">
|
|
<span>Buka Peta</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 2: SPBU -->
|
|
<div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
|
|
<div>
|
|
<div class="w-14 h-14 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-600 flex items-center justify-center shadow-inner">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5 7 13 7 13s7-8 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mt-5 text-slate-800">Lokasi SPBU</h3>
|
|
<p class="text-sm text-slate-500 mt-2 leading-relaxed">
|
|
Modul pemetaan stasiun bahan bakar umum di Pontianak. Menampilkan titik koordinat persis SPBU, kode nomor stasiun, status operasional (buka 24 jam atau jam operasional normal), dan fitur edit lokasi seret marker (drag-and-drop).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5 bg-emerald-50 text-emerald-700 px-3 py-1 rounded-xl text-xs font-semibold">
|
|
<span>Tercatat:</span>
|
|
<strong id="statSpbu">...</strong>
|
|
</div>
|
|
<a href="fitur_spbu/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-md shadow-emerald-600/10 hover:shadow-emerald-600/25 transition">
|
|
<span>Buka Peta</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 3: Jalan & Jalan Rusak -->
|
|
<div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
|
|
<div>
|
|
<div class="w-14 h-14 rounded-2xl bg-rose-50 border border-rose-100 text-rose-600 flex items-center justify-center shadow-inner">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 18l6-6 4 4 6-8"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mt-5 text-slate-800">Infrastruktur Jalan</h3>
|
|
<p class="text-sm text-slate-500 mt-2 leading-relaxed">
|
|
Pemetaan jaringan jalan kota beserta portal aduan kerusakan jalan oleh masyarakat. Mendukung penggambaran ruas jalan, kalkulasi panjang (meter/km), tingkat keparahan (ringan, sedang, berat), deskripsi, dan upload foto kondisi jalan secara dinamis.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex items-center gap-1.5 bg-rose-50 text-rose-700 px-3 py-1 rounded-xl text-xs font-semibold">
|
|
<span>Jalan:</span>
|
|
<strong id="statJalan">...</strong>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 bg-red-50 text-red-700 px-3 py-1 rounded-xl text-xs font-semibold">
|
|
<span>Rusak:</span>
|
|
<strong id="statJalanRusak">...</strong>
|
|
</div>
|
|
</div>
|
|
<a href="fitur_jalan/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-xs font-bold shadow-md shadow-rose-600/10 hover:shadow-rose-600/25 transition">
|
|
<span>Buka Peta</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module 4: Bantuan & Verifikasi -->
|
|
<div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
|
|
<div>
|
|
<div class="w-14 h-14 rounded-2xl bg-indigo-50 border border-indigo-100 text-indigo-700 flex items-center justify-center shadow-inner">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21c4.97 0 9-2.24 9-5V8l-9-5-9 5v8c0 2.76 4.03 5 9 5Z"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mt-5 text-slate-800">Manajemen Bantuan Sosial</h3>
|
|
<p class="text-sm text-slate-500 mt-2 leading-relaxed">
|
|
Sistem manajemen bantuan kesejahteraan warga. Menghitung sebaran tempat ibadah sebagai sentra bantuan, mencocokkan secara spasial keluarga miskin terdekat dalam radius pelayanan, melacak status bantuan, dan mendokumentasikan verifikasi petugas lapangan.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex items-center gap-1.5 bg-indigo-50 text-indigo-700 px-3 py-1 rounded-xl text-xs font-semibold">
|
|
<span>Ibadah:</span>
|
|
<strong id="statIbadah">...</strong>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 bg-emerald-50 text-emerald-700 px-3 py-1 rounded-xl text-xs font-semibold">
|
|
<span>Warga:</span>
|
|
<strong id="statMiskin">...</strong>
|
|
</div>
|
|
</div>
|
|
<a href="fitur_bantuan/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold shadow-md shadow-indigo-600/10 hover:shadow-indigo-600/25 transition">
|
|
<span>Buka Peta</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="w-full bg-slate-900 text-slate-400 py-8 text-center text-xs mt-12 border-t border-slate-800">
|
|
<p>© 2026 Program Studi Informatika Untan. Hak Cipta Dilindungi.</p>
|
|
<p class="mt-1 text-slate-600">Dikembangkan menggunakan Leaflet, Turf.js, Tailwind CSS, dan PHP-MySQL.</p>
|
|
</footer>
|
|
|
|
<!-- Stats Fetcher -->
|
|
<script>
|
|
async function fetchStats() {
|
|
try {
|
|
// 1. Parsil
|
|
const resParsel = await fetch('fitur_parsil_tanah/api/get_features.php');
|
|
const parsel = await resParsel.json();
|
|
document.getElementById('statParsel').textContent = `${parsel.length} bidang`;
|
|
|
|
// 2. SPBU
|
|
const resSpbu = await fetch('fitur_spbu/api/get_location.php');
|
|
const spbu = await resSpbu.json();
|
|
document.getElementById('statSpbu').textContent = `${spbu.length} lokasi`;
|
|
|
|
// 3. Jalan & Jalan Rusak
|
|
const resJalan = await fetch('fitur_jalan/api/get_features.php');
|
|
const jalan = await resJalan.json();
|
|
document.getElementById('statJalan').textContent = `${jalan.length} ruas`;
|
|
|
|
const resJalanRusak = await fetch('fitur_jalan/api/get_jalan_rusak.php');
|
|
const jalanRusak = await resJalanRusak.json();
|
|
document.getElementById('statJalanRusak').textContent = `${jalanRusak.length} titik`;
|
|
|
|
// 4. Ibadah & Warga Miskin
|
|
const resIbadah = await fetch('fitur_bantuan/api/get_rumah_ibadah.php');
|
|
const ibadah = await resIbadah.json();
|
|
document.getElementById('statIbadah').textContent = `${ibadah.length} titik`;
|
|
|
|
const resMiskin = await fetch('fitur_bantuan/api/get_penduduk_miskin.php');
|
|
const miskin = await resMiskin.json();
|
|
document.getElementById('statMiskin').textContent = `${miskin.length} KK`;
|
|
|
|
} catch (err) {
|
|
console.error("Gagal memuat stats:", err);
|
|
// Set fallback to 0
|
|
document.getElementById('statParsel').textContent = '0 bidang';
|
|
document.getElementById('statSpbu').textContent = '0 lokasi';
|
|
document.getElementById('statJalan').textContent = '0 ruas';
|
|
document.getElementById('statJalanRusak').textContent = '0 titik';
|
|
document.getElementById('statIbadah').textContent = '0 titik';
|
|
document.getElementById('statMiskin').textContent = '0 KK';
|
|
}
|
|
}
|
|
|
|
// Run fetch on load
|
|
fetchStats();
|
|
</script>
|
|
</body>
|
|
</html> |