nasyakhaira/D1041231084-WebGIS-PovertyMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: redesign landing page to premium dark theme EquatorGeo and update copy

Browse Source
This commit is contained in:
NASYA KHAIRA ADINIA
2026-06-11 03:28:08 +07:00
parent cd8c51abf7
commit 4d9fe5dfcf
1 changed files with 290 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+290 -240
View File
@@ -3,383 +3,414 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS Portal — Sistem Informasi Spasial Kota Pontianak</title>
<meta name="description" content="Portal terpadu sistem informasi geografis Kota Pontianak. Akses WebGIS Tata Ruang (SPBU, Jalan, Parsil) dan GeoSosial (Peta Kemiskinan) dalam satu platform.">
<title>Khatulistiwa GeoPortal — Sistem Analisis Spasial Terpadu</title>
<meta name="description" content="Portal informasi spasial dan analisis geospasial terpadu Kota Pontianak. Mengintegrasikan infrastruktur wilayah dan peta sosio-demografis secara digital.">
<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&family=Space+Grotesk:wght@500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--ink: #080e1f;
--ink2: #2d3a55;
--ink3: #7a88a4;
--paper: #f4f7ff;
--white: #ffffff;
--blue: #1a5fff;
--blue2: #0038cc;
--purple: #7c3aed;
--teal: #00c9aa;
--amber: #f59e0b;
--red: #f03e5a;
--bdr: rgba(11,17,32,.08);
--bg-main: #030712;
--bg-card: rgba(17, 24, 39, 0.75);
--border-card: rgba(255, 255, 255, 0.08);
--text-primary: #f3f4f6;
--text-muted: #9ca3af;
--text-dim: #6b7280;
--neon-blue: #00f2fe;
--neon-purple: #8b5cf6;
--neon-teal: #05faf0;
--neon-pink: #ec4899;
--neon-green: #10b981;
--glow-blue: rgba(0, 242, 254, 0.15);
--glow-purple: rgba(139, 92, 246, 0.15);
--glow-teal: rgba(5, 250, 240, 0.15);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--paper);
color: var(--ink);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
background: var(--bg-main);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* ── ANIMATED BACKGROUND ── */
/* ── ADVANCED NEON BACKGROUND MESH ── */
.bg-mesh {
position: fixed; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 80% 60% at 20% -10%, rgba(26,95,255,.12) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 110%, rgba(124,58,237,.10) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,201,170,.06) 0%, transparent 60%),
linear-gradient(180deg, #eef3ff 0%, #f4f7ff 50%, #f0f4ff 100%);
background:
radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.18) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(0, 242, 254, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(5, 250, 240, 0.05) 0%, transparent 60%);
}
/* Floating orbs */
/* Animated background orbs */
.orb {
position: fixed; border-radius: 50%; filter: blur(80px);
pointer-events: none; animation: float-orb 12s ease-in-out infinite;
position: fixed; border-radius: 50%; filter: blur(100px);
pointer-events: none; animation: float-orb 15s ease-in-out infinite;
}
.orb-1 {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(26,95,255,.15) 0%, transparent 70%);
top: -200px; left: -100px;
animation-duration: 14s;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
top: -300px; left: -150px;
animation-duration: 20s;
}
.orb-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 70%);
bottom: -150px; right: -80px;
animation-duration: 18s; animation-delay: -6s;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, transparent 70%);
bottom: -200px; right: -100px;
animation-duration: 25s; animation-delay: -5s;
}
.orb-3 {
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(0,201,170,.10) 0%, transparent 70%);
top: 40%; left: 50%;
animation-duration: 10s; animation-delay: -3s;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(236, 72, 153, 0.12) 0%, transparent 70%);
top: 35%; left: 45%;
animation-duration: 18s; animation-delay: -10s;
}
@keyframes float-orb {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.05); }
66% { transform: translate(-20px, 15px) scale(0.95); }
33% { transform: translate(50px, -40px) scale(1.08); }
66% { transform: translate(-40px, 30px) scale(0.92); }
}
/* Grid pattern */
/* Cybernetic Grid */
.bg-grid {
position: fixed; inset: 0; z-index: 0;
background-image:
linear-gradient(rgba(26,95,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,95,255,.04) 1px, transparent 1px);
background-size: 40px 40px;
linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
background-size: 50px 50px;
}
/* ── LAYOUT ── */
.page { position: relative; z-index: 1; }
.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-col: column; }
/* ── NAVBAR ── */
.nav {
position: sticky; top: 0; z-index: 100;
padding: 16px 40px;
padding: 20px 60px;
display: flex; align-items: center; justify-content: space-between;
background: rgba(255,255,255,.7);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--bdr);
background: rgba(3, 7, 18, 0.6);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-card);
}
.nav-brand {
display: flex; align-items: center; gap: 12px;
display: flex; align-items: center; gap: 14px;
text-decoration: none;
}
.nav-logo {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
width: 44px; height: 44px; border-radius: 14px;
background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
display: flex; align-items: center; justify-content: center;
font-size: 20px; box-shadow: 0 4px 16px rgba(26,95,255,.3);
box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-logo svg {
width: 24px; height: 24px; fill: #fff;
}
.nav-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px; font-weight: 700; color: var(--ink);
letter-spacing: -.3px;
font-size: 20px; font-weight: 700; color: var(--text-primary);
letter-spacing: -.5px;
}
.nav-sub { font-size: 11px; color: var(--ink3); margin-top: 1px; }
.nav-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; letter-spacing: 0.5px; }
.nav-pill {
display: flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 99px;
background: rgba(0,201,170,.1); border: 1px solid rgba(0,201,170,.25);
font-size: 11px; font-weight: 700; color: #00a88d; letter-spacing: .04em;
display: flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: 99px;
background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2);
font-size: 11px; font-weight: 700; color: #34d399; letter-spacing: .08em;
}
.nav-pill-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #00c9aa; animation: pulse-dot 2s ease-in-out infinite;
width: 8px; height: 8px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(.8); }
50% { opacity: .5; transform: scale(0.8); }
}
/* ── HERO ── */
.hero {
padding: 80px 40px 60px;
padding: 90px 40px 50px;
text-align: center;
max-width: 780px; margin: 0 auto;
max-width: 880px; margin: 0 auto;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px; border-radius: 99px;
background: rgba(26,95,255,.08); border: 1px solid rgba(26,95,255,.18);
font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .06em;
margin-bottom: 28px;
animation: fade-up .6s ease both;
padding: 8px 20px; border-radius: 99px;
background: rgba(0, 242, 254, 0.06); border: 1px solid rgba(0, 242, 254, 0.2);
font-size: 11px; font-weight: 700; color: var(--neon-blue); letter-spacing: .08em;
margin-bottom: 30px;
box-shadow: 0 0 15px rgba(0, 242, 254, 0.05);
animation: fade-up .7s ease both;
}
.hero-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(40px, 6vw, 72px);
font-weight: 900; line-height: 1.05; letter-spacing: -2px;
color: var(--ink);
animation: fade-up .6s ease .1s both;
font-size: clamp(36px, 5.5vw, 68px);
font-weight: 800; line-height: 1.1; letter-spacing: -1.5px;
color: var(--text-primary);
animation: fade-up .7s ease .1s both;
}
.hero-title span {
background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 50%, var(--neon-pink) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
margin-top: 20px;
font-size: 17px; line-height: 1.7; color: var(--ink3); font-weight: 400;
animation: fade-up .6s ease .2s both;
margin-top: 24px;
font-size: 16px; line-height: 1.75; color: var(--text-muted); font-weight: 400;
max-width: 720px; margin-left: auto; margin-right: auto;
animation: fade-up .7s ease .2s both;
}
.hero-cta-hint {
margin-top: 36px;
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 12px; font-weight: 600; color: var(--ink3); letter-spacing: .1em;
margin-top: 40px;
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: .15em;
text-transform: uppercase;
animation: fade-up .6s ease .3s both;
animation: fade-up .7s ease .3s both;
}
.hero-cta-hint::before,
.hero-cta-hint::after {
content: ''; flex: 1; max-width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--bdr));
content: ''; flex: 1; max-width: 80px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08));
}
.hero-cta-hint::after { background: linear-gradient(90deg, var(--bdr), transparent); }
.hero-cta-hint::after { background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent); }
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── PROJECT CARDS ── */
.cards-wrap {
max-width: 1100px; margin: 0 auto;
padding: 0 40px 80px;
max-width: 1200px; margin: 0 auto;
padding: 0 40px 90px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 28px;
animation: fade-up .7s ease .35s both;
gap: 32px;
animation: fade-up .8s ease .4s both;
}
.project-card {
position: relative;
background: rgba(255,255,255,.85);
backdrop-filter: blur(20px);
border-radius: 28px;
border: 1.5px solid rgba(255,255,255,.9);
box-shadow: 0 8px 40px rgba(11,17,32,.06), 0 2px 8px rgba(11,17,32,.04);
background: var(--bg-card);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-radius: 32px;
border: 1px solid var(--border-card);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
overflow: hidden;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
color: inherit;
display: flex; flex-direction: column;
cursor: pointer;
}
.project-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 24px 60px rgba(11,17,32,.12), 0 4px 12px rgba(11,17,32,.06);
transform: translateY(-8px);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 20px 60px rgba(0, 242, 254, 0.05), 0 0 1px 1px rgba(255, 255, 255, 0.1) inset;
}
.project-card:hover .card-arrow { transform: translateX(4px); }
.project-card:hover .card-arrow { transform: translateX(6px); }
/* Gradient top border */
/* Top border glows */
.project-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
border-radius: 28px 28px 0 0;
border-radius: 32px 32px 0 0;
z-index: 2;
}
.card-blue::before { background: linear-gradient(90deg, var(--blue), var(--purple)); }
.card-teal::before { background: linear-gradient(90deg, var(--teal), var(--blue)); }
.card-infra::before { background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); }
.card-welfare::before { background: linear-gradient(90deg, var(--neon-teal), var(--neon-green)); }
/* Glow on hover */
.project-card::after {
content: '';
position: absolute; inset: 0; border-radius: 28px;
opacity: 0; transition: opacity .35s ease;
position: absolute; inset: 0; border-radius: 32px;
opacity: 0; transition: opacity .4s ease;
pointer-events: none;
z-index: 1;
}
.card-blue::after { background: radial-gradient(ellipse at 30% 0%, rgba(26,95,255,.06) 0%, transparent 60%); }
.card-teal::after { background: radial-gradient(ellipse at 30% 0%, rgba(0,201,170,.06) 0%, transparent 60%); }
.card-infra::after { background: radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.08) 0%, transparent 60%); }
.card-welfare::after { background: radial-gradient(circle at 50% 0%, rgba(5, 250, 240, 0.08) 0%, transparent 60%); }
.project-card:hover::after { opacity: 1; }
.card-inner { padding: 36px 36px 32px; flex: 1; display: flex; flex-direction: column; }
.card-inner { padding: 42px 42px 36px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 3; }
.card-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; border-radius: 99px;
font-size: 10px; font-weight: 800; letter-spacing: .1em;
padding: 6px 14px; border-radius: 99px;
font-size: 10px; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; margin-bottom: 24px;
width: fit-content;
}
.badge-blue { background: rgba(26,95,255,.08); color: var(--blue); border: 1px solid rgba(26,95,255,.15); }
.badge-teal { background: rgba(0,201,170,.08); color: #00a88d; border: 1px solid rgba(0,201,170,.15); }
.badge-infra { background: rgba(0, 242, 254, 0.08); color: var(--neon-blue); border: 1px solid rgba(0, 242, 254, 0.18); }
.badge-welfare { background: rgba(5, 250, 240, 0.08); color: var(--neon-teal); border: 1px solid rgba(5, 250, 240, 0.18); }
.card-icon-wrap {
width: 64px; height: 64px; border-radius: 20px;
width: 68px; height: 68px; border-radius: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; margin-bottom: 20px;
margin-bottom: 24px;
position: relative; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.icon-blue {
background: linear-gradient(135deg, rgba(26,95,255,.12), rgba(124,58,237,.08));
border: 1.5px solid rgba(26,95,255,.15);
.icon-infra {
background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}
.icon-teal {
background: linear-gradient(135deg, rgba(0,201,170,.12), rgba(26,95,255,.08));
border: 1.5px solid rgba(0,201,170,.15);
.icon-welfare {
background: linear-gradient(135deg, rgba(5, 250, 240, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
box-shadow: 0 0 15px rgba(5, 250, 240, 0.15);
}
.card-icon-wrap svg {
width: 30px; height: 30px;
}
.card-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 26px; font-weight: 800; line-height: 1.15;
letter-spacing: -.5px; color: var(--ink);
margin-bottom: 12px;
font-size: 28px; font-weight: 800; line-height: 1.2;
letter-spacing: -.5px; color: var(--text-primary);
margin-bottom: 14px;
}
.card-desc {
font-size: 14px; line-height: 1.75; color: var(--ink3);
flex: 1; margin-bottom: 24px;
font-size: 14px; line-height: 1.8; color: var(--text-muted);
flex: 1; margin-bottom: 28px;
}
/* Feature tags */
.card-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 28px;
margin-bottom: 32px;
}
.tag {
display: flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 99px;
display: flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 99px;
font-size: 11px; font-weight: 600;
background: var(--paper); border: 1px solid var(--bdr);
color: var(--ink2);
background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-muted);
transition: all 0.3s ease;
}
.project-card:hover .tag {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
.tag-dot {
width: 6px; height: 6px; border-radius: 50%;
width: 7px; height: 7px; border-radius: 50%;
}
.dot-blue { background: var(--blue); }
.dot-purple { background: var(--purple); }
.dot-teal { background: var(--teal); }
.dot-red { background: var(--red); }
.dot-amber { background: var(--amber); }
.dot-blue { background: var(--neon-blue); box-shadow: 0 0 6px var(--neon-blue); }
.dot-purple { background: var(--neon-purple); box-shadow: 0 0 6px var(--neon-purple); }
.dot-teal { background: var(--neon-teal); box-shadow: 0 0 6px var(--neon-teal); }
.dot-pink { background: var(--neon-pink); box-shadow: 0 0 6px var(--neon-pink); }
.dot-green { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }
/* CTA Button */
.card-cta {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-radius: 16px;
padding: 16px 24px; border-radius: 18px;
font-size: 14px; font-weight: 700;
transition: all .25s ease;
transition: all 0.3s ease;
border: none; cursor: pointer; width: 100%; text-decoration: none;
}
.cta-blue {
background: linear-gradient(135deg, var(--blue) 0%, #4b6fff 100%);
color: #fff;
box-shadow: 0 6px 24px rgba(26,95,255,.28);
.cta-infra {
background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
color: #030712;
box-shadow: 0 6px 20px rgba(0, 242, 254, 0.25);
}
.cta-blue:hover {
box-shadow: 0 10px 32px rgba(26,95,255,.38);
transform: translateY(-1px);
.cta-infra:hover {
box-shadow: 0 10px 30px rgba(0, 242, 254, 0.4);
transform: translateY(-2px);
}
.cta-teal {
background: linear-gradient(135deg, #00b89a 0%, var(--teal) 100%);
color: #fff;
box-shadow: 0 6px 24px rgba(0,201,170,.28);
.cta-welfare {
background: linear-gradient(135deg, var(--neon-teal) 0%, var(--neon-green) 100%);
color: #030712;
box-shadow: 0 6px 20px rgba(5, 250, 240, 0.25);
}
.cta-teal:hover {
box-shadow: 0 10px 32px rgba(0,201,170,.38);
transform: translateY(-1px);
.cta-welfare:hover {
box-shadow: 0 10px 30px rgba(5, 250, 240, 0.4);
transform: translateY(-2px);
}
.card-arrow {
font-size: 18px; transition: transform .25s ease;
font-size: 18px; transition: transform .3s ease;
font-weight: 800;
}
/* Stats strip */
.card-stats {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 0; border-top: 1px solid var(--bdr);
border-top: 1px solid var(--border-card);
background: rgba(3, 7, 18, 0.3);
position: relative; z-index: 3;
}
.stat-item {
padding: 16px 20px; text-align: center;
border-right: 1px solid var(--bdr);
padding: 20px 24px; text-align: center;
border-right: 1px solid var(--border-card);
}
.stat-item:last-child { border-right: none; }
.stat-n {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--ink3); margin-bottom: 4px;
letter-spacing: .1em; color: var(--text-dim); margin-bottom: 6px;
}
.stat-v {
font-family: 'Space Grotesk', sans-serif;
font-size: 20px; font-weight: 800; color: var(--ink);
font-size: 24px; font-weight: 800; color: var(--text-primary);
}
.sv-blue { color: var(--blue); }
.sv-teal { color: var(--teal); }
.sv-purple { color: var(--purple); }
.sv-red { color: var(--red); }
.sv-blue { color: var(--neon-blue); text-shadow: 0 0 10px rgba(0, 242, 254, 0.2); }
.sv-purple { color: var(--neon-purple); text-shadow: 0 0 10px rgba(139, 92, 246, 0.2); }
.sv-teal { color: var(--neon-teal); text-shadow: 0 0 10px rgba(5, 250, 240, 0.2); }
.sv-green { color: var(--neon-green); text-shadow: 0 0 10px rgba(16, 185, 129, 0.2); }
/* ── BOTTOM INFO ── */
.bottom-info {
max-width: 1100px; margin: 0 auto;
padding: 0 40px 60px;
max-width: 1200px; margin: auto auto 0;
width: 100%;
padding: 40px 40px 60px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
animation: fade-up .7s ease .5s both;
flex-wrap: wrap; gap: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
position: relative; z-index: 10;
}
.info-left {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.info-chip {
display: flex; align-items: center; gap: 7px;
padding: 8px 14px; border-radius: 99px;
background: rgba(255,255,255,.8);
border: 1px solid var(--bdr);
font-size: 12px; font-weight: 600; color: var(--ink2);
backdrop-filter: blur(12px);
display: flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 99px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
font-size: 12px; font-weight: 600; color: var(--text-muted);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.info-chip-ic { font-size: 14px; }
.footer-text {
font-size: 12px; color: var(--ink3); text-align: right;
font-size: 12px; color: var(--text-dim); text-align: right;
line-height: 1.6;
}
/* ── RESPONSIVE ── */
@media (max-width: 860px) {
.nav { padding: 14px 20px; }
.hero { padding: 60px 20px 40px; }
.cards-wrap { grid-template-columns: 1fr; padding: 0 20px 60px; }
.bottom-info { padding: 0 20px 40px; flex-direction: column; align-items: flex-start; }
@media (max-width: 960px) {
.nav { padding: 16px 24px; }
.hero { padding: 60px 24px 30px; }
.cards-wrap { grid-template-columns: 1fr; padding: 0 24px 60px; gap: 24px; }
.bottom-info { padding: 30px 24px 40px; flex-direction: column; align-items: flex-start; }
.footer-text { text-align: left; }
.card-inner { padding: 28px 24px 24px; }
.card-inner { padding: 32px 28px 28px; }
}
/* ── HOVER GLOW EFFECT ── */
/* Mouse Glow Effect Spot */
.project-card .card-glow {
position: absolute;
width: 200px; height: 200px; border-radius: 50%;
filter: blur(60px); pointer-events: none;
width: 300px; height: 300px; border-radius: 50%;
filter: blur(80px); pointer-events: none;
opacity: 0; transition: opacity .4s ease;
transform: translate(-50%, -50%);
z-index: 1;
}
.project-card:hover .card-glow { opacity: .5; }
.glow-blue { background: rgba(26,95,255,.3); }
.glow-teal { background: rgba(0,201,170,.3); }
.project-card:hover .card-glow { opacity: 0.6; }
.glow-infra { background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, transparent 70%); }
.glow-welfare { background: radial-gradient(circle, rgba(5, 250, 240, 0.2) 0%, transparent 70%); }
</style>
</head>
@@ -397,109 +428,128 @@
<!-- Navbar -->
<nav class="nav">
<a href="#" class="nav-brand">
<div class="nav-logo">🌐</div>
<div class="nav-logo">
<svg viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
</svg>
</div>
<div>
<div class="nav-name">WebGIS Portal</div>
<div class="nav-sub">Kota Pontianak</div>
<div class="nav-name">EquatorGeo</div>
<div class="nav-sub">Portal Spasial Terpadu</div>
</div>
</a>
<div class="nav-pill">
<div class="nav-pill-dot"></div>
SISTEM AKTIF &amp; BERJALAN
DASHBOARD LIVE &amp; AKTIF
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-eyebrow">
🗺️ PLATFORM PEMETAAN DIGITAL
🛰️ KHATULISTIWA GEO-INTELLIGENCE SYSTEM
</div>
<h1 class="hero-title">
Portal Pemetaan<br>
<span>Spasial Digital</span>
Sistem Analisis Spasial<br>
<span>&amp; Sosio-Demografi</span>
</h1>
<p class="hero-sub">
Platform terpadu untuk eksplorasi data geografis Kota Pontianak.<br>
Pilih project di bawah ini untuk mulai menjelajah.
Platform geospasial terintegrasi untuk visualisasi penataan infrastruktur kota, pemetaan jaringan jalan,
dan analisis indikator kesejahteraan masyarakat Kota Pontianak secara akurat dan real-time.
</p>
<div class="hero-cta-hint">Pilih Project</div>
<div class="hero-cta-hint">Pilih Modul Sistem</div>
</section>
<!-- Cards -->
<div class="cards-wrap">
<!-- PROJECT 1: SPBU / WebGIS Tata Ruang -->
<div class="project-card card-blue" id="card-spbu" onclick="window.location='spbu/index.php'">
<div class="card-glow glow-blue" id="glow-spbu"></div>
<!-- PROJECT 1: Infrastruktur & Jaringan Spasial -->
<div class="project-card card-infra" id="card-spbu" onclick="window.location='spbu/index.php'">
<div class="card-glow glow-infra" id="glow-spbu"></div>
<div class="card-inner">
<div class="card-badge badge-blue">🔵 PROJECT 01</div>
<div class="card-icon-wrap icon-blue">🏗️</div>
<h2 class="card-title">Spatial Metrics<br>SPBU dan Infrastruktur</h2>
<div class="card-badge badge-infra">🛰️ MODUL INFRASTRUKTUR</div>
<div class="card-icon-wrap icon-infra">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="text-cyan-400">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="3" x2="9" y2="21"></line>
<line x1="15" y1="3" x2="15" y2="21"></line>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="3" y1="15" x2="21" y2="15"></line>
</svg>
</div>
<h2 class="card-title">Infrastruktur &amp;<br>Jaringan Transportasi</h2>
<p class="card-desc">
Pemetaan komprehensif Point of Interest SPBU, jaringan jalan, dan parsil tanah berbasis
administrasi kecamatan Kota Pontianak. Dilengkapi editor GIS interaktif.
Modul analisis dan inventarisasi point-of-interest SPBU kota, pemetaan konektivitas
jalan arteri utama, serta manajemen hak batas parsil tanah berbasis data administratif wilayah.
</p>
<div class="card-tags">
<span class="tag"><span class="tag-dot dot-blue"></span> SPBU &amp; POI</span>
<span class="tag"><span class="tag-dot dot-blue"></span> Dist. SPBU</span>
<span class="tag"><span class="tag-dot dot-purple"></span> Jaringan Jalan</span>
<span class="tag"><span class="tag-dot dot-teal"></span> Parsil Tanah</span>
<span class="tag"><span class="tag-dot dot-amber"></span> Editor GIS</span>
<span class="tag"><span class="tag-dot dot-teal"></span> Batas Parsil</span>
<span class="tag"><span class="tag-dot dot-pink"></span> Editor Spasial</span>
</div>
<a href="spbu/index.php" class="card-cta cta-blue" onclick="event.stopPropagation()">
<span>Buka Aplikasi</span>
<a href="spbu/index.php" class="card-cta cta-infra" onclick="event.stopPropagation()">
<span>Masuk Sistem</span>
<span class="card-arrow">→</span>
</a>
</div>
<div class="card-stats">
<div class="stat-item">
<div class="stat-n">SPBU</div>
<div class="stat-n">Outlet SPBU</div>
<div class="stat-v sv-blue" id="st-spbu">—</div>
</div>
<div class="stat-item">
<div class="stat-n">Jalan</div>
<div class="stat-n">Segment Jalan</div>
<div class="stat-v sv-purple" id="st-jalan">—</div>
</div>
<div class="stat-item">
<div class="stat-n">Parsil</div>
<div class="stat-n">Total Parsil</div>
<div class="stat-v sv-blue" id="st-parsil">—</div>
</div>
</div>
</div>
<!-- PROJECT 2: GeoSosial -->
<div class="project-card card-teal" id="card-geo" onclick="window.location='geososial/index.php'">
<div class="card-glow glow-teal" id="glow-geo"></div>
<!-- PROJECT 2: SosioDemografi & Kesejahteraan -->
<div class="project-card card-welfare" id="card-geo" onclick="window.location='geososial/index.php'">
<div class="card-glow glow-welfare" id="glow-geo"></div>
<div class="card-inner">
<div class="card-badge badge-teal">🟢 PROJECT 02</div>
<div class="card-icon-wrap icon-teal">👥</div>
<h2 class="card-title">GeoSosial<br><small style="font-size:.6em;font-weight:600;color:var(--ink3)">Peta Sosial</small></h2>
<div class="card-badge badge-welfare">👥 ANALISIS SOSIODEMOGRAFI</div>
<div class="card-icon-wrap icon-welfare">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="text-teal-400">
<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 class="card-title">Kesejahteraan Sosial<br>&amp; Demografis</h2>
<p class="card-desc">
Sistem informasi pemetaan kemiskinan berbasis Rumah Ibadah. Visualisasi sebaran KK
miskin, ekstrem, dan blank spot layanan sosial Kota Pontianak.
Modul monitoring indeks kemiskinan perkotaan berbasis integrasi spasial rumah ibadah,
analisis sebaran kesejahteraan keluarga, serta deteksi daerah blank-spot bantuan sosial.
</p>
<div class="card-tags">
<span class="tag"><span class="tag-dot dot-red"></span> Data KK Miskin</span>
<span class="tag"><span class="tag-dot dot-teal"></span> Rumah Ibadah</span>
<span class="tag"><span class="tag-dot dot-amber"></span> Laporan Warga</span>
<span class="tag"><span class="tag-dot dot-purple"></span> Dashboard</span>
<span class="tag"><span class="tag-dot dot-teal"></span> Peta KK Miskin</span>
<span class="tag"><span class="tag-dot dot-green"></span> Sentra Rumah Ibadah</span>
<span class="tag"><span class="tag-dot dot-pink"></span> Blank Spot Info</span>
<span class="tag"><span class="tag-dot dot-purple"></span> Laporan Warga</span>
</div>
<a href="geososial/index.php" class="card-cta cta-teal" onclick="event.stopPropagation()">
<span>Buka Aplikasi</span>
<a href="geososial/index.php" class="card-cta cta-welfare" onclick="event.stopPropagation()">
<span>Masuk Sistem</span>
<span class="card-arrow">→</span>
</a>
</div>
<div class="card-stats">
<div class="stat-item">
<div class="stat-n">Total KK</div>
<div class="stat-n">Data KK</div>
<div class="stat-v sv-teal" id="st-kk">—</div>
</div>
<div class="stat-item">
<div class="stat-n">Sgt Miskin</div>
<div class="stat-v sv-red" id="st-sm">—</div>
<div class="stat-n">Ekstrem/Miskin</div>
<div class="stat-v sv-green" id="st-sm">—</div>
</div>
<div class="stat-item">
<div class="stat-n">Kelurahan</div>
<div class="stat-v sv-teal">24</div>
<div class="stat-n">Kecamatan</div>
<div class="stat-v sv-teal">6</div>
</div>
</div>
</div>
@@ -507,28 +557,28 @@
</div>
<!-- Bottom Info -->
<div class="bottom-info">
<footer class="bottom-info">
<div class="info-left">
<div class="info-chip">
<span class="info-chip-ic">🏙️</span>
<span class="info-chip-ic">📍</span>
Kota Pontianak, Kalimantan Barat
</div>
<div class="info-chip">
<span class="info-chip-ic">📅</span>
Tahun Anggaran 2025–2026
Tahun Pemetaan 2026
</div>
<div class="info-chip">
<span class="info-chip-ic">🔒</span>
Sistem Terverifikasi
<span class="info-chip-ic">🛡️</span>
Node SSL Aman
</div>
</div>
<div class="footer-text">
Dinas Sosial &amp; Tata Ruang Kota Pontianak<br>
WebGIS Platform &copy; 2025
Modul Portal Geospasial Khatulistiwa Terpadu<br>
Khatulistiwa GeoPortal &copy; 2026 • Analisis Spasial Komprehensif
</div>
</div>
</footer>
</div><!-- /page -->
</div>
<script>
// Mouse-follow glow effect for each card