muthianura
262 lines
12 KiB
PHP
262 lines
12 KiB
PHP
<?php
|
||
// Semua project di-deploy dalam satu folder — gunakan relative path
|
||
$url_spbu = 'spbu/';
|
||
$url_miskin = 'povertymap/';
|
||
$url_jalantanah = 'parsiljalan/';
|
||
$url_choropleth = 'choropleth/';
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>WebGIS Pontianak — Portal</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #eff6ff; --white: #ffffff; --border: #bfdbfe;
|
||
--text: #1e293b; --text2: #475569; --text3: #94a3b8;
|
||
--blue-primary: #1d4ed8; --blue-light: #dbeafe; --blue-hover: #1e40af;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'Inter', sans-serif; color: var(--text);
|
||
background: var(--bg); min-height: 100vh;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
|
||
.navbar {
|
||
background: var(--white);
|
||
padding: 20px 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
||
}
|
||
|
||
.nav-brand {
|
||
display: flex; align-items: center; gap: 10px;
|
||
font-weight: 700; font-size: 18px; color: var(--blue-primary);
|
||
}
|
||
|
||
.hero {
|
||
background: linear-gradient(135deg, var(--white) 0%, var(--blue-light) 100%);
|
||
padding: 80px 24px; text-align: center;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 12px; font-weight: 600;
|
||
letter-spacing: .05em; text-transform: uppercase;
|
||
color: var(--blue-primary); background: rgba(37,99,235,.1);
|
||
padding: 6px 14px; border-radius: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.hero h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: #1e293b; }
|
||
.hero p {
|
||
font-size: 16px; color: var(--text2); max-width: 600px;
|
||
margin: 0 auto; line-height: 1.7;
|
||
}
|
||
|
||
.main { max-width: 1140px; margin: 60px auto; padding: 0 24px; flex: 1; width: 100%; }
|
||
|
||
.projects {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.projects {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.projects {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.project-card {
|
||
background: var(--white); border: 1px solid var(--border);
|
||
border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
|
||
display: flex; flex-direction: column;
|
||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
|
||
}
|
||
.project-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
|
||
border-color: #3b82f6;
|
||
}
|
||
.project-card:hover .pc-icon {
|
||
background: var(--blue-primary);
|
||
color: var(--white);
|
||
transform: scale(1.08) rotate(2deg);
|
||
}
|
||
.project-card:hover .pc-link svg {
|
||
transform: translateX(6px);
|
||
}
|
||
.pc-head {
|
||
padding: 30px 24px 20px; border-bottom: 1px solid var(--border);
|
||
display: flex; flex-direction: column; align-items: center; text-align: center;
|
||
}
|
||
.pc-icon {
|
||
width: 56px; height: 56px; border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 18px;
|
||
background: var(--blue-light); color: var(--blue-primary);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.pc-icon svg { width: 28px; height: 28px; }
|
||
.pc-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1e293b; }
|
||
.pc-head p { font-size: 14px; color: var(--text2); line-height: 1.6; }
|
||
.pc-body { padding: 20px 24px; flex: 1; background: #fafafa; }
|
||
.pc-features { list-style: none; font-size: 13.5px; color: var(--text2); line-height: 1.8; }
|
||
.pc-features li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||
.pc-features li svg { width: 16px; height: 16px; color: var(--blue-primary); flex-shrink: 0; }
|
||
.pc-foot {
|
||
padding: 16px 24px; border-top: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
background: var(--white);
|
||
}
|
||
.pc-link {
|
||
font-size: 14px; font-weight: 600; color: var(--blue-primary);
|
||
display: flex; align-items: center; gap: 4px;
|
||
}
|
||
.pc-link svg {
|
||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.pc-tag {
|
||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||
letter-spacing: .05em; padding: 4px 10px; border-radius: 6px;
|
||
background: var(--blue-light); color: var(--blue-primary);
|
||
}
|
||
|
||
.site-foot {
|
||
text-align: center; padding: 32px 24px; font-size: 14px; color: var(--text3);
|
||
border-top: 1px solid var(--border); background: var(--white);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="navbar">
|
||
<div class="nav-brand">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||
<circle cx="12" cy="10" r="3"></circle>
|
||
</svg>
|
||
WebGIS Pontianak
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="hero-badge">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
||
Sistem Informasi Geografis
|
||
</div>
|
||
<h1>Portal Terpadu WebGIS</h1>
|
||
<p>Pusat akses untuk aplikasi pemetaan wilayah Pontianak, Kalimantan Barat. Pilih modul di bawah untuk membuka project yang sesuai dengan kebutuhan Anda.</p>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<div class="projects">
|
||
|
||
<a class="project-card" href="<?= htmlspecialchars($url_spbu) ?>">
|
||
<div class="pc-head">
|
||
<div class="pc-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22v-8p2 2 0 0 1 4 0h10a2 2 0 0 1 2 2v4"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg>
|
||
</div>
|
||
<h2>Sistem Informasi Geografis SPBU</h2>
|
||
<p>Pemetaan lokasi Stasiun Pengisian Bahan Bakar Umum beserta status operasional 24 jam.</p>
|
||
</div>
|
||
<div class="pc-body">
|
||
<ul class="pc-features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta interaktif titik SPBU</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Filter status buka 24 jam</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Tambah & kelola data depot</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pc-foot">
|
||
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||
<span class="pc-tag">SIG SPBU</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="project-card" href="<?= htmlspecialchars($url_miskin) ?>">
|
||
<div class="pc-head">
|
||
<div class="pc-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||
</div>
|
||
<h2>Pemetaan Kemiskinan Terpadu</h2>
|
||
<p>SIG penduduk miskin dan rumah ibadah untuk perencanaan program binaan.</p>
|
||
</div>
|
||
<div class="pc-body">
|
||
<ul class="pc-features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta rumah ibadah & KK miskin</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Analisis radius binaan</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Dashboard super admin</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pc-foot">
|
||
<span class="pc-link">Masuk ke aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||
<span class="pc-tag">SIG Miskin</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="project-card" href="<?= htmlspecialchars($url_jalantanah) ?>">
|
||
<div class="pc-head">
|
||
<div class="pc-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||
</div>
|
||
<h2>Sistem Informasi Infrastruktur Jalan</h2>
|
||
<p>Pemetaan jalan tanah, kavling tanah, dan titik kerusakan infrastruktur wilayah.</p>
|
||
</div>
|
||
<div class="pc-body">
|
||
<ul class="pc-features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Klasifikasi jalan nasional–kab</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Data kavling & status sertifikat</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Input titik jalan rusak</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pc-foot">
|
||
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||
<span class="pc-tag">SIG Jalan</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="project-card" href="<?= htmlspecialchars($url_choropleth) ?>">
|
||
<div class="pc-head">
|
||
<div class="pc-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="9" cy="7" r="4"></circle>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||
</svg>
|
||
</div>
|
||
<h2>Kepadatan Penduduk Pontianak</h2>
|
||
<p>Peta tematik choropleth wilayah Kota Pontianak berdasarkan jumlah kepadatan penduduk per kecamatan.</p>
|
||
</div>
|
||
<div class="pc-body">
|
||
<ul class="pc-features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta choropleth interaktif</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Data populasi per kecamatan</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Informasi detail saat hover</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pc-foot">
|
||
<span class="pc-link">Buka peta tematik <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||
<span class="pc-tag">Choropleth</span>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="site-foot">WebGIS Pontianak · Kalimantan Barat · <?= date('Y') ?></footer>
|
||
|
||
</body>
|
||
</html>
|