muthiaastarii/UAS_WebGIS_MuthiaNurainiAstari_D1041231019
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

keterangan commit

Browse Source
This commit is contained in:
muthianura
2026-06-13 14:23:23 +07:00
parent 9a49719508
commit 62a5a26fe0
2 changed files with 250 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+68 -9
View File
@@ -1,3 +1,10 @@
<?php
// Semua project di-deploy dalam satu folder — gunakan relative path
$url_spbu = 'SIG_spbu/';
$url_miskin = 'SIG_miskin/gis/';
$url_jalantanah = 'SIG2_jalantanah/';
$url_choropleth = 'Choropleth/ptk.html';
?>
<!DOCTYPE html>
<html lang="id">
<head>
@@ -21,7 +28,7 @@ body {
.navbar {
background: var(--white);
padding: 20px 40px;
display: flex;href
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border);
@@ -55,21 +62,40 @@ body {
.main { max-width: 1140px; margin: 60px auto; padding: 0 24px; flex: 1; width: 100%; }
.projects {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1100px) {
.projects {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.projects {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) { .projects { grid-template-columns: 1fr; } }
.project-card {
background: var(--white); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
display: flex; flex-direction: column;
transition: all .25s ease;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
border-color: #bfdbfe;
box-shadow: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
border-color: #3b82f6;
}
.project-card:hover .pc-icon {
background: var(--blue-primary);
color: var(--white);
transform: scale(1.08) rotate(2deg);
}
.project-card:hover .pc-link svg {
transform: translateX(6px);
}
.pc-head {
padding: 30px 24px 20px; border-bottom: 1px solid var(--border);
@@ -80,6 +106,7 @@ body {
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
background: var(--blue-light); color: var(--blue-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-icon svg { width: 28px; height: 28px; }
.pc-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1e293b; }
@@ -97,6 +124,9 @@ body {
font-size: 14px; font-weight: 600; color: var(--blue-primary);
display: flex; align-items: center; gap: 4px;
}
.pc-link svg {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-tag {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; padding: 4px 10px; border-radius: 6px;
@@ -133,7 +163,7 @@ body {
<main class="main">
<div class="projects">
<a class="project-card" href="http://zcgk444o4k8okss8ggcos4os.203.24.51.230.sslip.io">
<a class="project-card" href="<?= htmlspecialchars($url_spbu) ?>">
<div class="pc-head">
<div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22v-8p2 2 0 0 1 4 0h10a2 2 0 0 1 2 2v4"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg>
@@ -150,10 +180,11 @@ body {
</div>
<div class="pc-foot">
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">SIG SPBU</span>
</div>
</a>
<a class="project-card" href="http://vk04ckgok4s0wosoc884os48.203.24.51.230.sslip.io">
<a class="project-card" href="<?= htmlspecialchars($url_miskin) ?>">
<div class="pc-head">
<div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
@@ -170,10 +201,11 @@ body {
</div>
<div class="pc-foot">
<span class="pc-link">Masuk ke aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">SIG Miskin</span>
</div>
</a>
<a class="project-card" href="http://bggcs44gog844wkcko8sko04.203.24.51.230.sslip.io">
<a class="project-card" href="<?= htmlspecialchars($url_jalantanah) ?>">
<div class="pc-head">
<div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
@@ -190,6 +222,33 @@ body {
</div>
<div class="pc-foot">
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">SIG Jalan</span>
</div>
</a>
<a class="project-card" href="<?= htmlspecialchars($url_choropleth) ?>">
<div class="pc-head">
<div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<h2>Kepadatan Penduduk Pontianak</h2>
<p>Peta tematik choropleth wilayah Kota Pontianak berdasarkan jumlah kepadatan penduduk per kecamatan.</p>
</div>
<div class="pc-body">
<ul class="pc-features">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta choropleth interaktif</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Data populasi per kecamatan</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Informasi detail saat hover</li>
</ul>
</div>
<div class="pc-foot">
<span class="pc-link">Buka peta tematik <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">Choropleth</span>
</div>
</a>