316 lines
11 KiB
HTML
316 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portal WebGIS & Poverty Mapping — Tiara Chontesa</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #2b5c8f;
|
|
--primary-dark: #1e3f63;
|
|
--secondary-color: #4a90e2;
|
|
--accent-color: #e28743;
|
|
--text-main: #2c3e50;
|
|
--text-muted: #7f8c8d;
|
|
--bg-light: #f4f7f6;
|
|
--bg-card: #ffffff;
|
|
--border-color: #e2e8f0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--bg-light);
|
|
color: var(--text-main);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
|
color: #ffffff;
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
header p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.meta-info {
|
|
display: inline-flex;
|
|
gap: 20px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 10px 25px;
|
|
border-radius: 30px;
|
|
font-size: 0.95rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.meta-info span strong {
|
|
color: #ffeb3b;
|
|
}
|
|
|
|
main {
|
|
max-width: 1200px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.overview-section {
|
|
background: var(--bg-card);
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin-bottom: 40px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
|
|
border-left: 5px solid var(--secondary-color);
|
|
}
|
|
|
|
.overview-section h2 {
|
|
margin-bottom: 15px;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 25px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--bg-card);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.card-header {
|
|
background: #f8fafc;
|
|
padding: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: relative;
|
|
}
|
|
|
|
.task-badge {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card-header h3 {
|
|
font-size: 1.25rem;
|
|
color: var(--primary-dark);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card-body p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-main);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.table-list {
|
|
list-style: none;
|
|
margin-top: 10px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.table-list li {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
padding: 4px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 20px;
|
|
background: #f8fafc;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn {
|
|
display: block;
|
|
text-align: center;
|
|
background: var(--primary-color);
|
|
color: #ffffff;
|
|
padding: 10px 20px;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
.btn-accent {
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.btn-accent:hover {
|
|
background: #d07431;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 30px 20px;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 60px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
header h1 { font-size: 2rem; }
|
|
.meta-info { flex-direction: column; gap: 5px; border-radius: 15px; }
|
|
.grid-container { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header-container">
|
|
<h1>Sistem Pemetaan Spasial Terpadu</h1>
|
|
<p>Integrasi WebGIS Geometri Sigma & Analisis Titik Kerawanan Kemiskinan (Poverty Mapping)</p>
|
|
<div class="meta-info">
|
|
<span>Nama: <strong>Tiara Chontesa</strong></span>
|
|
<span>NIM: <strong>D1041231070</strong></span>
|
|
<span>Database induk: <strong>db_poverty_mapping</strong></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="overview-section">
|
|
<h2>Tentang Proyek Integrasi</h2>
|
|
<p>Repositori ini dirancang khusus untuk mengonsolidasikan 4 tugas WebGIS ke dalam satu arsitektur terintegrasi. Dengan memanfaatkan satu database utama, seluruh modul kerja spasial mulai dari pengelolaan jaringan infrastruktur (jalan, persil, titik fasilitas umum) hingga penentuan zonasi Keluarga Penerima Manfaat (KPM) bantuan sosial dapat diakses secara langsung dan dinamis.</p>
|
|
</section>
|
|
|
|
<div class="grid-container">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="task-badge">Tugas 1</span>
|
|
<h3>Manajemen Geometri Polyline (Jaringan Jalan)</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Modul pemetaan spasial linear yang berfungsi untuk merekam, menghitung panjang secara otomatis menggunakan sistem koordinat Leaflet, serta memetakan data jaringan jalan berdasarkan klasifikasinya.</p>
|
|
<ul class="table-list">
|
|
<li>• Tabel Database: <code>data_jalan</code></li>
|
|
<li>• Format Spasial: GeoJSON LineString</li>
|
|
<li>• Klasifikasi: Nasional, Provinsi, Kabupaten</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="Tugas1/" class="btn">Buka Modul Tugas 1</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="task-badge">Tugas 2</span>
|
|
<h3>Zonasi Wilayah Polygon (Data Parsil Lahan)</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Modul analisis area yang memetakan batas-batas persil wilayah lahan atau pemukiman warga, lengkap dengan kalkulasi luas otomatis dalam satuan meter persegi (m²).</p>
|
|
<ul class="table-list">
|
|
<li>• Tabel Database: <code>data_parsil</code></li>
|
|
<li>• Format Spasial: GeoJSON Polygon</li>
|
|
<li>• Fungsi Utama: Batas administratif & tata guna lahan</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="Tugas2/" class="btn">Buka Modul Tugas 2</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="task-badge">Tugas 3</span>
|
|
<h3>Peta Sebaran Titik (Marker Fasilitas Umum)</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Modul penanda objek vital yang mengelola persebaran koordinat fasilitas umum, infrastruktur kota, serta objek-objek spasial berformat point lainnya di dalam peta interaktif.</p>
|
|
<ul class="table-list">
|
|
<li>• Tabel Database: <code>data_point</code>, <code>geometri_sigma</code></li>
|
|
<li>• Format Spasial: GeoJSON Point / Marker</li>
|
|
<li>• Fungsi Utama: Manajemen marker & kustomisasi icon</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="Tugas3/" class="btn">Buka Modul Tugas 3</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="border: 1px solid var(--accent-color);">
|
|
<div class="card-header" style="background-color: #fffaf5;">
|
|
<span class="task-badge" style="background-color: var(--accent-color);">Tugas 4</span>
|
|
<h3>WebGIS Poverty Mapping (Bantuan Sosial)</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Sistem informasi geografis tingkat lanjut untuk penanggulangan kemiskinan. Menampilkan radius bantuan rumah ibadah (buffer), status sebaran KPM, manajemen logistik bencana, serta kontrol akses 4 role pengguna.</p>
|
|
<ul class="table-list">
|
|
<li>• Tabel Database: <code>users</code>, <code>rumah_miskin</code>, <code>rumah_ibadah</code>, <code>bantuan_tersalur</code></li>
|
|
<li>• Fitur Kunci: Buffer spasial, Manajemen 4 Role User</li>
|
|
<li>• Status Bantuan: Deteksi Blank Spot area otomatis</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer" style="background-color: #fffaf5;">
|
|
<a href="Tugas4/" class="btn btn-accent">Buka Aplikasi Utama</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2026 Proyek Terintegrasi WebGIS Spasial. Dirancang oleh Tiara Chontesa (D1041231070).</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |