michelle_olivia/UAS_WEBGIS_MichelleOlivia_D1041231016
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revisi index.html

Browse Source
This commit is contained in:
L4zyL4mb
2026-06-13 11:55:17 +07:00
parent 7944ce5597
commit 5d3cc007de
1 changed files with 81 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+81 -103
View File
@@ -5,16 +5,12 @@
<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 Pontianak — SIG Hub</title> <title>Portal WebGIS Pontianak — SIG Hub</title>
<!-- Modern Typography (Plus Jakarta Sans) -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome CDN for micro-icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
/* Design Tokens (Light/Bright Mode) */
:root { :root {
--bg-light: hsl(210, 40%, 98%); --bg-light: hsl(210, 40%, 98%);
--bg-card: hsla(0, 0%, 100%, 0.8); --bg-card: hsla(0, 0%, 100%, 0.8);
@@ -22,26 +18,23 @@
--text-main: hsl(222, 47%, 12%); --text-main: hsl(222, 47%, 12%);
--text-muted: hsl(215, 15%, 35%); --text-muted: hsl(215, 15%, 35%);
--text-dim: hsl(215, 15%, 55%); --text-dim: hsl(215, 15%, 55%);
/* Glowing colors for individual projects (adjusted for light theme readability) */
--color-road-primary: hsl(199, 89%, 42%); --color-road-primary: hsl(199, 89%, 42%);
--color-road-bg: hsla(199, 89%, 42%, 0.08); --color-road-bg: hsla(199, 89%, 42%, 0.08);
--color-spbu-primary: hsl(30, 95%, 45%); --color-spbu-primary: hsl(30, 95%, 45%);
--color-spbu-bg: hsla(30, 95%, 45%, 0.08); --color-spbu-bg: hsla(30, 95%, 45%, 0.08);
--color-poverty-primary: hsl(142, 65%, 32%); --color-poverty-primary: hsl(142, 65%, 32%);
--color-poverty-bg: hsla(142, 65%, 32%, 0.08); --color-poverty-bg: hsla(142, 65%, 32%, 0.08);
--color-choropleth-primary: hsl(354, 70%, 40%);
--color-choropleth-bg: hsla(354, 70%, 40%, 0.08);
--font-family: 'Plus Jakarta Sans', sans-serif; --font-family: 'Plus Jakarta Sans', sans-serif;
} }
/* Base Styling */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body { body {
font-family: var(--font-family); font-family: var(--font-family);
@@ -56,13 +49,10 @@
position: relative; position: relative;
} }
/* Ambient Background Glows */
.bg-ambient { .bg-ambient {
position: fixed; position: fixed;
top: 0; top: 0; left: 0;
left: 0; width: 100vw; height: 100vh;
width: 100vw;
height: 100vh;
z-index: -1; z-index: -1;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@@ -77,39 +67,39 @@
} }
.blob-1 { .blob-1 {
width: 40vw; width: 40vw; height: 40vw;
height: 40vw;
background: radial-gradient(circle, var(--color-road-primary) 0%, transparent 80%); background: radial-gradient(circle, var(--color-road-primary) 0%, transparent 80%);
top: -10%; top: -10%; right: 10%;
right: 10%;
animation-delay: 0s; animation-delay: 0s;
} }
.blob-2 { .blob-2 {
width: 35vw; width: 35vw; height: 35vw;
height: 35vw;
background: radial-gradient(circle, var(--color-poverty-primary) 0%, transparent 80%); background: radial-gradient(circle, var(--color-poverty-primary) 0%, transparent 80%);
bottom: -10%; bottom: -10%; left: 10%;
left: 10%;
animation-delay: -5s; animation-delay: -5s;
} }
.blob-3 { .blob-3 {
width: 30vw; width: 30vw; height: 30vw;
height: 30vw;
background: radial-gradient(circle, var(--color-spbu-primary) 0%, transparent 80%); background: radial-gradient(circle, var(--color-spbu-primary) 0%, transparent 80%);
top: 40%; top: 40%; left: 45%;
left: 45%;
animation-delay: -10s; animation-delay: -10s;
} }
.blob-4 {
width: 28vw; height: 28vw;
background: radial-gradient(circle, var(--color-choropleth-primary) 0%, transparent 80%);
top: 20%; left: 5%;
animation-delay: -15s;
}
@keyframes float { @keyframes float {
0% { transform: translate(0, 0) scale(1) rotate(0deg); } 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
50% { transform: translate(6%, 4%) scale(1.05) rotate(180deg); } 50% { transform: translate(6%, 4%) scale(1.05) rotate(180deg); }
100% { transform: translate(-4%, -6%) scale(0.95) rotate(360deg); } 100% { transform: translate(-4%, -6%) scale(0.95) rotate(360deg); }
} }
/* Grid Overlay Pattern */
.grid-overlay { .grid-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -121,7 +111,6 @@
pointer-events: none; pointer-events: none;
} }
/* Header Panel */
header { header {
width: 100%; width: 100%;
max-width: 1300px; max-width: 1300px;
@@ -140,8 +129,7 @@
} }
.logo-icon { .logo-icon {
width: 42px; width: 42px; height: 42px;
height: 42px;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(135deg, hsl(200, 100%, 45%), hsl(260, 100%, 55%)); background: linear-gradient(135deg, hsl(200, 100%, 45%), hsl(260, 100%, 55%));
display: flex; display: flex;
@@ -183,12 +171,11 @@
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); box-shadow: 0 2px 10px rgba(0,0,0,0.02);
} }
.status-dot { .status-dot {
width: 8px; width: 8px; height: 8px;
height: 8px;
border-radius: 50%; border-radius: 50%;
background-color: hsl(142, 72%, 45%); background-color: hsl(142, 72%, 45%);
position: relative; position: relative;
@@ -205,11 +192,10 @@
} }
@keyframes pulse { @keyframes pulse {
0% { transform: scale(1); opacity: 1; } 0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; }
} }
/* Main Container */
main { main {
flex: 1; flex: 1;
width: 100%; width: 100%;
@@ -222,7 +208,6 @@
z-index: 5; z-index: 5;
} }
/* Hero Section */
.hero { .hero {
text-align: center; text-align: center;
margin-bottom: 4rem; margin-bottom: 4rem;
@@ -260,15 +245,13 @@
line-height: 1.6; line-height: 1.6;
} }
/* Project Cards Grid */
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem; gap: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
/* Card Item */
.card { .card {
background-color: var(--bg-card); background-color: var(--bg-card);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@@ -282,21 +265,18 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); box-shadow: 0 4px 20px rgba(0,0,0,0.02);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
} }
/* Hover effect */
.card:hover { .card:hover {
transform: translateY(-8px); transform: translateY(-8px);
background-color: #ffffff; background-color: #ffffff;
border-color: var(--card-hover-border); border-color: var(--card-hover-border);
box-shadow: box-shadow: 0 20px 40px -15px rgba(0,0,0,0.06),
0 20px 40px -15px rgba(0, 0, 0, 0.06), 0 0 20px -2px var(--card-glow);
0 0 20px -2px var(--card-glow);
} }
/* Colors and values specific to each card */
.card-road { .card-road {
--card-theme-color: var(--color-road-primary); --card-theme-color: var(--color-road-primary);
--card-theme-bg: var(--color-road-bg); --card-theme-bg: var(--color-road-bg);
@@ -318,13 +298,18 @@
--card-glow: hsla(142, 65%, 32%, 0.1); --card-glow: hsla(142, 65%, 32%, 0.1);
} }
/* Card Top Decoration */ .card-choropleth {
--card-theme-color: var(--color-choropleth-primary);
--card-theme-bg: var(--color-choropleth-bg);
--card-hover-border: hsla(354, 70%, 40%, 0.3);
--card-glow: hsla(354, 70%, 40%, 0.1);
}
.card-icon-container { .card-icon-container {
width: 54px; width: 54px; height: 54px;
height: 54px;
border-radius: 16px; border-radius: 16px;
background-color: var(--card-theme-bg); background-color: var(--card-theme-bg);
border: 1px solid rgba(0, 0, 0, 0.02); border: 1px solid rgba(0,0,0,0.02);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -338,9 +323,7 @@
transform: scale(1.1) rotate(5deg); transform: scale(1.1) rotate(5deg);
} }
.card-body { .card-body { margin-bottom: 2.25rem; }
margin-bottom: 2.25rem;
}
.card-title { .card-title {
font-size: 1.35rem; font-size: 1.35rem;
@@ -351,9 +334,7 @@
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.card:hover .card-title { .card:hover .card-title { color: var(--card-theme-color); }
color: var(--card-theme-color);
}
.card-desc { .card-desc {
font-size: 0.88rem; font-size: 0.88rem;
@@ -362,7 +343,6 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
/* Badges / Tech tags */
.tech-tags { .tech-tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -374,12 +354,11 @@
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
background-color: hsla(0, 0%, 0%, 0.03); background-color: hsla(0, 0%, 0%, 0.03);
border: 1px solid rgba(0, 0, 0, 0.04); border: 1px solid rgba(0,0,0,0.04);
padding: 4px 10px; padding: 4px 10px;
border-radius: 6px; border-radius: 6px;
} }
/* Card Action Link styles */
.card-action { .card-action {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -396,16 +375,13 @@
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.card:hover .action-text { .card:hover .action-text { color: var(--text-main); }
color: var(--text-main);
}
.action-arrow { .action-arrow {
width: 36px; width: 36px; height: 36px;
height: 36px;
border-radius: 50%; border-radius: 50%;
background-color: hsla(0, 0%, 0%, 0.03); background-color: hsla(0, 0%, 0%, 0.03);
border: 1px solid rgba(0, 0, 0, 0.04); border: 1px solid rgba(0,0,0,0.04);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -421,7 +397,6 @@
transform: translateX(4px); transform: translateX(4px);
} }
/* Footer */
footer { footer {
width: 100%; width: 100%;
max-width: 1300px; max-width: 1300px;
@@ -443,11 +418,8 @@
transition: color 0.2s; transition: color 0.2s;
} }
footer a:hover { footer a:hover { color: var(--text-main); }
color: var(--text-main);
}
/* Responsive Design */
@media (max-width: 768px) { @media (max-width: 768px) {
header { header {
flex-direction: column; flex-direction: column;
@@ -455,23 +427,17 @@
text-align: center; text-align: center;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
} }
.status-panel { .status-panel {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
main { main { padding: 1.5rem 1rem; }
padding: 1.5rem 1rem;
}
.hero h2 { .hero h2 { font-size: 2rem; }
font-size: 2rem;
}
.grid { .grid { grid-template-columns: 1fr; }
grid-template-columns: 1fr;
}
footer { footer {
flex-direction: column; flex-direction: column;
@@ -483,15 +449,14 @@
</head> </head>
<body> <body>
<!-- Background decorations -->
<div class="bg-ambient"> <div class="bg-ambient">
<div class="blob blob-1"></div> <div class="blob blob-1"></div>
<div class="blob blob-2"></div> <div class="blob blob-2"></div>
<div class="blob blob-3"></div> <div class="blob blob-3"></div>
<div class="blob blob-4"></div>
</div> </div>
<div class="grid-overlay"></div> <div class="grid-overlay"></div>
<!-- Header -->
<header> <header>
<div class="logo-container"> <div class="logo-container">
<div class="logo-icon"> <div class="logo-icon">
@@ -502,7 +467,6 @@
<p>Sistem Informasi Geografis Terintegrasi</p> <p>Sistem Informasi Geografis Terintegrasi</p>
</div> </div>
</div> </div>
<div class="status-panel"> <div class="status-panel">
<div class="status-badge"> <div class="status-badge">
<div class="status-dot"></div> <div class="status-dot"></div>
@@ -511,7 +475,6 @@
</div> </div>
</header> </header>
<!-- Main Content -->
<main> <main>
<div class="hero"> <div class="hero">
<span class="hero-tag">Geographic Information System</span> <span class="hero-tag">Geographic Information System</span>
@@ -519,9 +482,8 @@
<p>Akses cepat ke berbagai modul pemetaan interaktif Kota Pontianak. Dibuat menggunakan teknologi web modern dan visualisasi data spasial secara real-time.</p> <p>Akses cepat ke berbagai modul pemetaan interaktif Kota Pontianak. Dibuat menggunakan teknologi web modern dan visualisasi data spasial secara real-time.</p>
</div> </div>
<!-- Grid of Projects -->
<div class="grid"> <div class="grid">
<!-- Card 1: SIG Jalan & Parsil Tanah --> <!-- Card 1: SIG Jalan & Parsil Tanah -->
<a href="http://e8kkc4gs80cc8gsg8cs8s8ks.203.24.51.230.sslip.io" class="card card-road"> <a href="http://e8kkc4gs80cc8gsg8cs8s8ks.203.24.51.230.sslip.io" class="card card-road">
<div> <div>
@@ -541,9 +503,7 @@
</div> </div>
<div class="card-action"> <div class="card-action">
<span class="action-text">Buka Aplikasi</span> <span class="action-text">Buka Aplikasi</span>
<div class="action-arrow"> <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
<i class="fa-solid fa-arrow-right"></i>
</div>
</div> </div>
</a> </a>
@@ -566,9 +526,7 @@
</div> </div>
<div class="card-action"> <div class="card-action">
<span class="action-text">Buka Aplikasi</span> <span class="action-text">Buka Aplikasi</span>
<div class="action-arrow"> <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
<i class="fa-solid fa-arrow-right"></i>
</div>
</div> </div>
</a> </a>
@@ -591,16 +549,36 @@
</div> </div>
<div class="card-action"> <div class="card-action">
<span class="action-text">Buka Aplikasi</span> <span class="action-text">Buka Aplikasi</span>
<div class="action-arrow"> <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
<i class="fa-solid fa-arrow-right"></i> </div>
</a>
<!-- Card 4: Choropleth Kepadatan Penduduk -->
<a href="http://guxzrn2nagog3wwwqjdlca9w.203.24.51.230.sslip.io" class="card card-choropleth">
<div>
<div class="card-icon-container">
<i class="fa-solid fa-chart-area"></i>
</div> </div>
<div class="card-body">
<h3 class="card-title">Choropleth Kepadatan Penduduk</h3>
<p class="card-desc">Visualisasi choropleth persebaran dan kepadatan penduduk Kota Pontianak per kecamatan, dilengkapi data jumlah penduduk dan peta interaktif berbasis Leaflet.</p>
<div class="tech-tags">
<span class="tag">Leaflet.js</span>
<span class="tag">Choropleth</span>
<span class="tag">GeoJSON</span>
<span class="tag">HTML/CSS</span>
</div>
</div>
</div>
<div class="card-action">
<span class="action-text">Buka Aplikasi</span>
<div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
</div> </div>
</a> </a>
</div> </div>
</main> </main>
<!-- Footer -->
<footer> <footer>
<div> <div>
&copy; 2026 <strong>SIG Pontianak Hub</strong>. Semua Hak Cipta Dilindungi. &copy; 2026 <strong>SIG Pontianak Hub</strong>. Semua Hak Cipta Dilindungi.
@@ -608,4 +586,4 @@
</footer> </footer>
</body> </body>
</html> </html>