152 lines
6.4 KiB
HTML
152 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Portal WebGIS – Kumpulan tugas praktikum sistem informasi geografis berbasis web">
|
||
<title>Portal WebGIS</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="bg-grid"></div>
|
||
<div class="bg-glow bg-glow-1"></div>
|
||
<div class="bg-glow bg-glow-2"></div>
|
||
|
||
<header class="site-header">
|
||
<div class="logo">
|
||
<span class="logo-icon">🌐</span>
|
||
<div>
|
||
<strong>Portal WebGIS</strong>
|
||
</div>
|
||
</div>
|
||
<div class="header-badge">
|
||
<span class="pulse-dot"></span>
|
||
Laragon · PHP · MySQL · LeafletJS
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<p class="hero-label">Selamat datang</p>
|
||
<h1>Portal Tugas WebGIS<br></h1>
|
||
<p class="hero-desc">
|
||
Muhammad Farras (D1041231005)
|
||
</p>
|
||
</section>
|
||
|
||
<section class="cards-grid">
|
||
<!-- Tugas 1: SPBU -->
|
||
<article class="project-card" data-accent="orange">
|
||
<div class="card-top">
|
||
<div class="card-icon">⛽</div>
|
||
<span class="card-tag">Pertemuan 2</span>
|
||
</div>
|
||
<h2>WebGIS SPBU Pontianak</h2>
|
||
<p>Layer Groups & Layers Control untuk data SPBU. Marker dikelompokkan berdasarkan status buka 24
|
||
jam.</p>
|
||
<ul class="card-features">
|
||
<li>Layer Group: Buka 24 Jam / Tidak 24 Jam</li>
|
||
<li>Base map OSM & Citra Satelit</li>
|
||
<li>CRUD data SPBU via PHP API</li>
|
||
</ul>
|
||
<div class="card-footer">
|
||
<span class="tech-stack">Leaflet · PHP · MySQL</span>
|
||
<a href="./WebGIS_SPBU/index.html" class="btn-primary">
|
||
Buka Aplikasi
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Tugas 2: Jalan & Parsil -->
|
||
<article class="project-card" data-accent="indigo">
|
||
<div class="card-top">
|
||
<div class="card-icon">🛣️</div>
|
||
<span class="card-tag">Pertemuan 1</span>
|
||
</div>
|
||
<h2>Manajemen Jalan & Parsil</h2>
|
||
<p>Sistem manajemen data jalan (LineString) dan parsil tanah/kavling (Polygon) dengan pengukuran
|
||
otomatis.</p>
|
||
<ul class="card-features">
|
||
<li>Draw & edit geometri di peta</li>
|
||
<li>Hitung panjang jalan & luas parsil</li>
|
||
<li>Filter berdasarkan status administrasi</li>
|
||
</ul>
|
||
<div class="card-footer">
|
||
<span class="tech-stack">Leaflet · PHP · MySQL</span>
|
||
<a href="./Manajemen_Jalan_dan_Parsil/index.html" class="btn-primary">
|
||
Buka Aplikasi
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Tugas 3: Poverty Map -->
|
||
<article class="project-card card-wide" data-accent="purple">
|
||
<div class="card-top">
|
||
<div class="card-icon">🕌</div>
|
||
<span class="card-tag"></span>
|
||
</div>
|
||
<h2>WebGIS Pemetaan Kemiskinan</h2>
|
||
<p>Website pemberantas kemiskinan berbasis partisipasi rumah ibadah. Dilengkapi autentikasi multi-role
|
||
dan dashboard analitik.</p>
|
||
<ul class="card-features">
|
||
<li>Login: Admin, Pengurus, Walikota</li>
|
||
<li>Pemetaan titik kemiskinan & Rumah Ibadah</li>
|
||
<li>Dashboard statistik untuk Walikota</li>
|
||
</ul>
|
||
<div class="card-footer card-footer-multi">
|
||
<span class="tech-stack">Leaflet · PHP · MySQL · RBAC</span>
|
||
<div class="btn-group">
|
||
<a href="./WebGIS_PovertyMap/login.html" class="btn-primary">
|
||
Login
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
<a href="./WebGIS_PovertyMap/index.html" class="btn-secondary">Peta Utama</a>
|
||
<a href="./WebGIS_PovertyMap/dashboard_walikota.html" class="btn-secondary">Dashboard</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="info-bar">
|
||
<div class="info-item">
|
||
<span class="info-num">3</span>
|
||
<span class="info-label">Tugas WebGIS</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-num">LeafletJS</span>
|
||
<span class="info-label">Library Peta</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-num">GeoJSON</span>
|
||
<span class="info-label">Format Geometri</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-num">Pontianak</span>
|
||
<span class="info-label">Area Studi</span>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p>Portal WebGIS — Proyek Akhir Sistem Informasi Geografis</p>
|
||
</footer>
|
||
</body>
|
||
|
||
</html> |