Menambahkan landing page yang yang hubungkan ke 3 proyek saya
This commit is contained in:
+148
@@ -0,0 +1,148 @@
|
||||
<!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>
|
||||
<span>Koleksi Tugas Praktikum</span>
|
||||
</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>Semua Tugas WebGIS<br><span class="gradient-text">Dalam Satu Tempat</span></h1>
|
||||
<p class="hero-desc">
|
||||
Pilih modul di bawah untuk membuka aplikasi WebGIS. Setiap modul menggunakan
|
||||
LeafletJS, PHP REST API, dan MySQL sebagai backend.
|
||||
</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–3</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">Tugas Utama</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">Proyek Akhir</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, Petugas, Pengurus, Walikota</li>
|
||||
<li>Pemetaan titik kemiskinan & masjid</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">Modul 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 — Praktikum Sistem Informasi Geografis</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user