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
+74 -96
View File
@@ -5,16 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.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">
<!-- 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">
<style>
/* Design Tokens (Light/Bright Mode) */
:root {
--bg-light: hsl(210, 40%, 98%);
--bg-card: hsla(0, 0%, 100%, 0.8);
@@ -23,7 +19,6 @@
--text-muted: hsl(215, 15%, 35%);
--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-bg: hsla(199, 89%, 42%, 0.08);
@@ -33,15 +28,13 @@
--color-poverty-primary: hsl(142, 65%, 32%);
--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;
}
/* Base Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-family);
@@ -56,13 +49,10 @@
position: relative;
}
/* Ambient Background Glows */
.bg-ambient {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: -1;
overflow: hidden;
pointer-events: none;
@@ -77,39 +67,39 @@
}
.blob-1 {
width: 40vw;
height: 40vw;
width: 40vw; height: 40vw;
background: radial-gradient(circle, var(--color-road-primary) 0%, transparent 80%);
top: -10%;
right: 10%;
top: -10%; right: 10%;
animation-delay: 0s;
}
.blob-2 {
width: 35vw;
height: 35vw;
width: 35vw; height: 35vw;
background: radial-gradient(circle, var(--color-poverty-primary) 0%, transparent 80%);
bottom: -10%;
left: 10%;
bottom: -10%; left: 10%;
animation-delay: -5s;
}
.blob-3 {
width: 30vw;
height: 30vw;
width: 30vw; height: 30vw;
background: radial-gradient(circle, var(--color-spbu-primary) 0%, transparent 80%);
top: 40%;
left: 45%;
top: 40%; left: 45%;
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 {
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
50% { transform: translate(6%, 4%) scale(1.05) rotate(180deg); }
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
50% { transform: translate(6%, 4%) scale(1.05) rotate(180deg); }
100% { transform: translate(-4%, -6%) scale(0.95) rotate(360deg); }
}
/* Grid Overlay Pattern */
.grid-overlay {
position: fixed;
inset: 0;
@@ -121,7 +111,6 @@
pointer-events: none;
}
/* Header Panel */
header {
width: 100%;
max-width: 1300px;
@@ -140,8 +129,7 @@
}
.logo-icon {
width: 42px;
height: 42px;
width: 42px; height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, hsl(200, 100%, 45%), hsl(260, 100%, 55%));
display: flex;
@@ -183,12 +171,11 @@
font-weight: 600;
color: var(--text-muted);
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 {
width: 8px;
height: 8px;
width: 8px; height: 8px;
border-radius: 50%;
background-color: hsl(142, 72%, 45%);
position: relative;
@@ -205,11 +192,10 @@
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; }
}
/* Main Container */
main {
flex: 1;
width: 100%;
@@ -222,7 +208,6 @@
z-index: 5;
}
/* Hero Section */
.hero {
text-align: center;
margin-bottom: 4rem;
@@ -260,15 +245,13 @@
line-height: 1.6;
}
/* Project Cards Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
/* Card Item */
.card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
@@ -282,21 +265,18 @@
position: relative;
overflow: hidden;
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);
}
/* Hover effect */
.card:hover {
transform: translateY(-8px);
background-color: #ffffff;
border-color: var(--card-hover-border);
box-shadow:
0 20px 40px -15px rgba(0, 0, 0, 0.06),
0 0 20px -2px var(--card-glow);
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.06),
0 0 20px -2px var(--card-glow);
}
/* Colors and values specific to each card */
.card-road {
--card-theme-color: var(--color-road-primary);
--card-theme-bg: var(--color-road-bg);
@@ -318,13 +298,18 @@
--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 {
width: 54px;
height: 54px;
width: 54px; height: 54px;
border-radius: 16px;
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;
align-items: center;
justify-content: center;
@@ -338,9 +323,7 @@
transform: scale(1.1) rotate(5deg);
}
.card-body {
margin-bottom: 2.25rem;
}
.card-body { margin-bottom: 2.25rem; }
.card-title {
font-size: 1.35rem;
@@ -351,9 +334,7 @@
transition: color 0.3s ease;
}
.card:hover .card-title {
color: var(--card-theme-color);
}
.card:hover .card-title { color: var(--card-theme-color); }
.card-desc {
font-size: 0.88rem;
@@ -362,7 +343,6 @@
margin-bottom: 1.5rem;
}
/* Badges / Tech tags */
.tech-tags {
display: flex;
flex-wrap: wrap;
@@ -374,12 +354,11 @@
font-weight: 600;
color: var(--text-muted);
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;
border-radius: 6px;
}
/* Card Action Link styles */
.card-action {
display: flex;
align-items: center;
@@ -396,16 +375,13 @@
transition: color 0.3s ease;
}
.card:hover .action-text {
color: var(--text-main);
}
.card:hover .action-text { color: var(--text-main); }
.action-arrow {
width: 36px;
height: 36px;
width: 36px; height: 36px;
border-radius: 50%;
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;
align-items: center;
justify-content: center;
@@ -421,7 +397,6 @@
transform: translateX(4px);
}
/* Footer */
footer {
width: 100%;
max-width: 1300px;
@@ -443,11 +418,8 @@
transition: color 0.2s;
}
footer a:hover {
color: var(--text-main);
}
footer a:hover { color: var(--text-main); }
/* Responsive Design */
@media (max-width: 768px) {
header {
flex-direction: column;
@@ -461,17 +433,11 @@
justify-content: center;
}
main {
padding: 1.5rem 1rem;
}
main { padding: 1.5rem 1rem; }
.hero h2 {
font-size: 2rem;
}
.hero h2 { font-size: 2rem; }
.grid {
grid-template-columns: 1fr;
}
.grid { grid-template-columns: 1fr; }
footer {
flex-direction: column;
@@ -483,15 +449,14 @@
</head>
<body>
<!-- Background decorations -->
<div class="bg-ambient">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
</div>
<div class="grid-overlay"></div>
<!-- Header -->
<header>
<div class="logo-container">
<div class="logo-icon">
@@ -502,7 +467,6 @@
<p>Sistem Informasi Geografis Terintegrasi</p>
</div>
</div>
<div class="status-panel">
<div class="status-badge">
<div class="status-dot"></div>
@@ -511,7 +475,6 @@
</div>
</header>
<!-- Main Content -->
<main>
<div class="hero">
<span class="hero-tag">Geographic Information System</span>
@@ -519,7 +482,6 @@
<p>Akses cepat ke berbagai modul pemetaan interaktif Kota Pontianak. Dibuat menggunakan teknologi web modern dan visualisasi data spasial secara real-time.</p>
</div>
<!-- Grid of Projects -->
<div class="grid">
<!-- Card 1: SIG Jalan & Parsil Tanah -->
@@ -541,9 +503,7 @@
</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 class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
</div>
</a>
@@ -566,9 +526,7 @@
</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 class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
</div>
</a>
@@ -591,16 +549,36 @@
</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 class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
</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 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>
</a>
</div>
</main>
<!-- Footer -->
<footer>
<div>
&copy; 2026 <strong>SIG Pontianak Hub</strong>. Semua Hak Cipta Dilindungi.