ceciliayg/UAS_WebGIS_CeciliaYvonGunawan_D1041231056
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing page: update project URLs

Browse Source
This commit is contained in:
cygouw
2026-06-12 09:00:21 +07:00
parent 50f64afbe7
commit 61cd292163
1 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+51 -21
View File
@@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id"> <html lang="id">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal WebGIS & Aplikasi Spasial</title> <title>Portal WebGIS & Aplikasi Spasial</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<style> <style>
:root { :root {
--primary: #2563EB; --primary: #2563EB;
@@ -339,10 +341,12 @@
border-radius: 30px; border-radius: 30px;
transition: var(--tr); transition: var(--tr);
} }
.user-badge:hover { .user-badge:hover {
background: #E0EEFF; background: #E0EEFF;
border-color: rgba(37, 99, 235, 0.25); border-color: rgba(37, 99, 235, 0.25);
} }
.user-avatar { .user-avatar {
width: 28px; width: 28px;
height: 28px; height: 28px;
@@ -355,16 +359,19 @@
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
} }
.user-info { .user-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
} }
.user-name { .user-name {
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
} }
.user-nim { .user-nim {
font-size: 10px; font-size: 10px;
color: var(--text-secondary); color: var(--text-secondary);
@@ -376,25 +383,31 @@
.hero { .hero {
padding: 40px 16px 20px; padding: 40px 16px 20px;
} }
.hero h1 { .hero h1 {
font-size: 30px; font-size: 30px;
} }
.hero p { .hero p {
font-size: 14px; font-size: 14px;
} }
main { main {
padding: 0 16px 60px; padding: 0 16px 60px;
} }
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 20px; gap: 20px;
} }
.card { .card {
padding: 24px; padding: 24px;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<!-- HEADER --> <!-- HEADER -->
@@ -421,7 +434,8 @@
<section class="hero"> <section class="hero">
<div class="hero-tag">Kumpulan Proyek SIG</div> <div class="hero-tag">Kumpulan Proyek SIG</div>
<h1>Kumpulan Project <span>WebGIS Interaktif</span></h1> <h1>Kumpulan Project <span>WebGIS Interaktif</span></h1>
<p>Hub aplikasi spasial interaktif hasil pengerjaan tugas praktikum dan Ujian Akhir Semester (UAS) untuk mata kuliah Sistem Informasi Geografis.</p> <p>Hub aplikasi spasial interaktif hasil pengerjaan tugas praktikum dan Ujian Akhir Semester (UAS) untuk mata kuliah
Sistem Informasi Geografis.</p>
</section> </section>
<!-- MAIN CONTAINER --> <!-- MAIN CONTAINER -->
@@ -429,15 +443,19 @@
<div class="grid"> <div class="grid">
<!-- PROJECT 1: Poverty Map --> <!-- PROJECT 1: Poverty Map -->
<a href="http://localhost/webgis/povertymap/" target="_blank" class="card" style="--accent: #4F46E5; --accent-bg: #EEF2FF;"> <a href="http://qk4k4swws4kcg4s4ko0o8g04.203.24.51.230.sslip.io/" target="_blank" class="card"
style="--accent: #4F46E5; --accent-bg: #EEF2FF;">
<div class="card-icon-wrap"> <div class="card-icon-wrap">
<!-- Hand holding heart / charity icon --> <!-- Hand holding heart / charity icon -->
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none"
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> stroke-linecap="round" stroke-linejoin="round">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg> </svg>
</div> </div>
<h3>WebGIS Poverty Mapping</h3> <h3>WebGIS Poverty Mapping</h3>
<p>Sistem informasi geografis untuk memetakan sebaran kemiskinan warga di sekitar wilayah tempat ibadah guna penargetan program bantuan sosial.</p> <p>Sistem informasi geografis untuk memetakan sebaran kemiskinan warga di sekitar wilayah tempat ibadah guna
penargetan program bantuan sosial.</p>
<div class="badges"> <div class="badges">
<span class="badge">Leaflet.js</span> <span class="badge">Leaflet.js</span>
<span class="badge">MySQL</span> <span class="badge">MySQL</span>
@@ -447,22 +465,26 @@
<div class="card-action"> <div class="card-action">
<span>Buka Aplikasi</span> <span>Buka Aplikasi</span>
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round"
stroke-linejoin="round" />
</svg> </svg>
</div> </div>
</a> </a>
<!-- PROJECT 2: SPBU Map --> <!-- PROJECT 2: SPBU Map -->
<a href="http://localhost/webgis/spbu/" target="_blank" class="card" style="--accent: #0D9488; --accent-bg: #F0FDF4;"> <a href="http://ggwccs0gwg0cw00w800sgw80.203.24.51.230.sslip.io/" target="_blank" class="card"
style="--accent: #0D9488; --accent-bg: #F0FDF4;">
<div class="card-icon-wrap"> <div class="card-icon-wrap">
<!-- Gas pump icon --> <!-- Gas pump icon -->
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none"
<path d="M3 22V2h10v20M13 10h5M18 10l3 3v6M18 20v2M9 6h1"/> stroke-linecap="round" stroke-linejoin="round">
<circle cx="8.5" cy="11.5" r="1.5"/> <path d="M3 22V2h10v20M13 10h5M18 10l3 3v6M18 20v2M9 6h1" />
<circle cx="8.5" cy="11.5" r="1.5" />
</svg> </svg>
</div> </div>
<h3>WebGIS SPBU</h3> <h3>WebGIS SPBU</h3>
<p>Aplikasi pemetaan lokasi Stasiun Pengisian Bahan Bakar Umum (SPBU) di wilayah Pontianak, lengkap dengan informasi status operasional 24 jam.</p> <p>Aplikasi pemetaan lokasi Stasiun Pengisian Bahan Bakar Umum (SPBU) di wilayah Pontianak, lengkap dengan
informasi status operasional 24 jam.</p>
<div class="badges"> <div class="badges">
<span class="badge">Leaflet.js</span> <span class="badge">Leaflet.js</span>
<span class="badge">MySQL</span> <span class="badge">MySQL</span>
@@ -472,21 +494,25 @@
<div class="card-action"> <div class="card-action">
<span>Buka Aplikasi</span> <span>Buka Aplikasi</span>
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round"
stroke-linejoin="round" />
</svg> </svg>
</div> </div>
</a> </a>
<!-- PROJECT 3: Parsil Jalan Laporan --> <!-- PROJECT 3: Parsil Jalan Laporan -->
<a href="http://localhost/webgis/parsil_jalan_jalanrusak/" target="_blank" class="card" style="--accent: #2563EB; --accent-bg: #EFF6FF;"> <a href="http://is8s0kookkswgg0csc844w8k.203.24.51.230.sslip.io/" target="_blank" class="card"
style="--accent: #2563EB; --accent-bg: #EFF6FF;">
<div class="card-icon-wrap"> <div class="card-icon-wrap">
<!-- Road/infrastructure icon --> <!-- Road/infrastructure icon -->
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none"
<path d="M3 20h18M6 20v-4a6 6 0 0112 0v4M12 3v10M12 17h.01M9 7l3-3 3 3"/> stroke-linecap="round" stroke-linejoin="round">
<path d="M3 20h18M6 20v-4a6 6 0 0112 0v4M12 3v10M12 17h.01M9 7l3-3 3 3" />
</svg> </svg>
</div> </div>
<h3>WebGIS Jalan, Parsil Tanah, & Jalan Rusak</h3> <h3>WebGIS Jalan, Parsil Tanah, & Jalan Rusak</h3>
<p>Portal pemetaan spasial terintegrasi untuk jaringan rute jalan raya, batas legalitas parsil tanah, serta pelaporan kerusakan jalan berbasis partisipasi warga.</p> <p>Portal pemetaan spasial terintegrasi untuk jaringan rute jalan raya, batas legalitas parsil tanah, serta
pelaporan kerusakan jalan berbasis partisipasi warga.</p>
<div class="badges"> <div class="badges">
<span class="badge">Turf.js</span> <span class="badge">Turf.js</span>
<span class="badge">Leaflet.js</span> <span class="badge">Leaflet.js</span>
@@ -496,7 +522,8 @@
<div class="card-action"> <div class="card-action">
<span>Buka Aplikasi</span> <span>Buka Aplikasi</span>
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round"
stroke-linejoin="round" />
</svg> </svg>
</div> </div>
</a> </a>
@@ -507,11 +534,14 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<div class="footer-container"> <div class="footer-container">
<p style="font-weight: 700; color: var(--text-primary); margin-bottom: 2px;">Cecilia Yvon Gunawan — NIM D1041231056</p> <p style="font-weight: 700; color: var(--text-primary); margin-bottom: 2px;">Cecilia Yvon Gunawan — NIM
D1041231056</p>
<p>&copy; 2026 Portal WebGIS Spasial. All rights reserved.</p> <p>&copy; 2026 Portal WebGIS Spasial. All rights reserved.</p>
<p style="font-size: 11px; color: var(--text-muted);">Dikembangkan menggunakan HTML5, Vanilla CSS, Javascript & LeafletJS.</p> <p style="font-size: 11px; color: var(--text-muted);">Dikembangkan menggunakan HTML5, Vanilla CSS, Javascript &
LeafletJS.</p>
</div> </div>
</footer> </footer>
</body> </body>
</html>
</html>