125 lines
5.6 KiB
HTML
125 lines
5.6 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 | Leaflet & WebGIS Peduli</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css?v=8">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<a class="brand" href="#home" aria-label="Portal WebGIS">
|
|
<span class="brand-mark" aria-hidden="true">WG</span>
|
|
<span class="brand-text">
|
|
<strong>WebGIS Portal</strong>
|
|
<small>Leaflet Project Hub</small>
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="nav-links" aria-label="Navigasi utama">
|
|
<a href="#projects">Project</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="home">
|
|
<section class="hero-section">
|
|
<div class="hero-bg" aria-hidden="true"></div>
|
|
<div class="hero-overlay" aria-hidden="true"></div>
|
|
|
|
<div class="hero-content">
|
|
<p class="eyebrow">Portal terpadu WebGIS</p>
|
|
<h1>Semua project peta Leaflet dalam satu pintu masuk.</h1>
|
|
<p class="hero-lead">
|
|
Akses cepat ke WebGIS SPBU, manajemen jalan dan parsil, serta dashboard WebGIS Peduli untuk data rumah ibadah, warga kurang mampu, radius layanan, bantuan, dan laporan.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="projects-section" id="projects">
|
|
<div class="section-heading">
|
|
<p class="eyebrow">Project aktif</p>
|
|
<h2>Pilih aplikasi yang ingin digunakan</h2>
|
|
<p>Setiap kartu langsung mengarah ke halaman utama project yang berada di folder XAMPP.</p>
|
|
</div>
|
|
|
|
<div class="project-grid">
|
|
<article class="project-card project-one">
|
|
<div class="project-visual" aria-hidden="true">
|
|
<div class="mini-map">
|
|
<span class="route route-a"></span>
|
|
<span class="route route-b"></span>
|
|
<span class="route route-c"></span>
|
|
<span class="pin pin-red"></span>
|
|
<span class="pin pin-blue"></span>
|
|
<span class="parcel parcel-one"></span>
|
|
<span class="parcel parcel-two"></span>
|
|
</div>
|
|
</div>
|
|
<div class="project-content">
|
|
<span class="project-kicker">Project 1</span>
|
|
<h3>WebGIS SPBU, Jalan, dan Parsil</h3>
|
|
<p>Menampilkan titik SPBU dan menyediakan pengelolaan geometri jalan serta bidang parsil melalui peta Leaflet interaktif.</p>
|
|
<div class="tag-list" aria-label="Fitur Project 1">
|
|
<span>SPBU</span>
|
|
<span>Jalan</span>
|
|
<span>Parsil</span>
|
|
</div>
|
|
<div class="project-links">
|
|
<a class="btn btn-primary" href="Leaflet/leaf.html">WebGIS SPBU</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="project-card project-two">
|
|
<div class="project-visual" aria-hidden="true">
|
|
<div class="dashboard-mock">
|
|
<span class="dash-line wide"></span>
|
|
<span class="dash-line"></span>
|
|
<span class="dash-card green"></span>
|
|
<span class="dash-card amber"></span>
|
|
<span class="dash-card red"></span>
|
|
<span class="radius-ring"></span>
|
|
<span class="help-pin"></span>
|
|
</div>
|
|
</div>
|
|
<div class="project-content">
|
|
<span class="project-kicker">Project 2</span>
|
|
<h3>WebGIS Peduli</h3>
|
|
<p>Dashboard untuk memetakan rumah ibadah, warga miskin/kurang mampu, radius layanan, prioritas bantuan, riwayat, dan laporan.</p>
|
|
<div class="tag-list" aria-label="Fitur Project 2">
|
|
<span>Dashboard</span>
|
|
<span>Bantuan</span>
|
|
<span>Laporan</span>
|
|
</div>
|
|
<div class="project-links">
|
|
<a class="btn btn-primary" href="Leaflet2/login.php">Masuk Admin</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
const header = document.querySelector(".site-header");
|
|
|
|
function updateHeaderState() {
|
|
header.classList.toggle("is-scrolled", window.scrollY > 80);
|
|
}
|
|
|
|
updateHeaderState();
|
|
requestAnimationFrame(updateHeaderState);
|
|
window.addEventListener("load", updateHeaderState);
|
|
window.addEventListener("scroll", updateHeaderState, { passive: true });
|
|
window.addEventListener("hashchange", () => {
|
|
requestAnimationFrame(updateHeaderState);
|
|
setTimeout(updateHeaderState, 120);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|