508 lines
17 KiB
HTML
508 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Portal — Sistem Informasi Geografis</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--cyan: #06b6d4;
|
|
--cyan-dark: #0891b2;
|
|
--violet: #8b5cf6;
|
|
--violet-dark: #7c3aed;
|
|
--blue: #3b82f6;
|
|
--slate-50: #f8fafc;
|
|
--slate-100: #f1f5f9;
|
|
--slate-200: #e2e8f0;
|
|
--slate-400: #94a3b8;
|
|
--slate-500: #64748b;
|
|
--slate-700: #334155;
|
|
--slate-900: #0f172a;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: var(--slate-50);
|
|
color: var(--slate-900);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ── BACKGROUND ─────────────────────────────── */
|
|
.bg-layer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(90px);
|
|
mix-blend-mode: multiply;
|
|
opacity: .55;
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
.orb-1 { width: 520px; height: 520px; background: #a5f3fc; top: -120px; left: -120px; animation-delay: 0s; }
|
|
.orb-2 { width: 440px; height: 440px; background: #ddd6fe; top: 30%; right: -80px; animation-delay: -3s; }
|
|
.orb-3 { width: 360px; height: 360px; background: #bfdbfe; bottom: -80px; left: 30%; animation-delay: -5s; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(25px, -35px) scale(1.06); }
|
|
66% { transform: translate(-18px, 22px) scale(.95); }
|
|
}
|
|
|
|
/* grid mesh overlay */
|
|
.mesh {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(148,163,184,.12) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
}
|
|
|
|
/* ── LAYOUT ─────────────────────────────── */
|
|
.wrapper {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 24px 24px 64px;
|
|
}
|
|
|
|
/* ── NAVBAR ─────────────────────────────── */
|
|
nav {
|
|
width: 100%;
|
|
max-width: 780px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 38px; height: 38px;
|
|
background: linear-gradient(135deg, var(--cyan), var(--blue));
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 4px 14px rgba(6,182,212,.35);
|
|
}
|
|
.nav-icon svg { width: 20px; height: 20px; color: white; }
|
|
|
|
.nav-brand {
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
letter-spacing: -.01em;
|
|
color: var(--slate-900);
|
|
}
|
|
.nav-brand span { color: var(--cyan-dark); }
|
|
|
|
|
|
|
|
/* ── HERO ─────────────────────────────── */
|
|
.hero {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.hero-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: white;
|
|
border: 1px solid var(--slate-200);
|
|
border-radius: 99px;
|
|
padding: 6px 16px 6px 8px;
|
|
margin-bottom: 28px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.06);
|
|
}
|
|
.hero-dot {
|
|
width: 26px; height: 26px;
|
|
background: linear-gradient(135deg, #ecfeff, #cffafe);
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.pulse {
|
|
width: 8px; height: 8px;
|
|
background: var(--cyan);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 0 rgba(6,182,212,.5);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(6,182,212,.6); }
|
|
70% { box-shadow: 0 0 0 8px rgba(6,182,212,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(6,182,212,0); }
|
|
}
|
|
.hero-eyebrow-text {
|
|
font-size: .78rem;
|
|
font-weight: 600;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--slate-500);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2.6rem, 6vw, 4rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
letter-spacing: -.03em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-title .gradient {
|
|
background: linear-gradient(135deg, var(--cyan-dark) 0%, var(--blue) 50%, var(--violet) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: 1.05rem;
|
|
color: var(--slate-500);
|
|
line-height: 1.75;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ── DIVIDER ─────────────────────────────── */
|
|
.section-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
max-width: 780px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.section-label::before, .section-label::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--slate-200);
|
|
}
|
|
.section-label-text {
|
|
font-size: .72rem;
|
|
font-weight: 700;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--slate-400);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── CARDS ─────────────────────────────── */
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
width: 100%;
|
|
max-width: 780px;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: white;
|
|
border: 1.5px solid var(--slate-200);
|
|
border-radius: 28px;
|
|
padding: 32px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .25s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
transition: opacity .35s ease;
|
|
border-radius: 28px;
|
|
}
|
|
.card-1::before { background: linear-gradient(135deg, rgba(6,182,212,.04), rgba(59,130,246,.04)); }
|
|
.card-2::before { background: linear-gradient(135deg, rgba(139,92,246,.04), rgba(236,72,153,.04)); }
|
|
|
|
.card:hover {
|
|
transform: translateY(-8px) scale(1.01);
|
|
}
|
|
.card-1:hover {
|
|
border-color: rgba(6,182,212,.4);
|
|
box-shadow: 0 24px 60px -12px rgba(6,182,212,.22), 0 8px 20px rgba(0,0,0,.06);
|
|
}
|
|
.card-2:hover {
|
|
border-color: rgba(139,92,246,.4);
|
|
box-shadow: 0 24px 60px -12px rgba(139,92,246,.22), 0 8px 20px rgba(0,0,0,.06);
|
|
}
|
|
.card:hover::before { opacity: 1; }
|
|
|
|
/* card top bar accent */
|
|
.card-accent {
|
|
position: absolute;
|
|
top: 0; left: 32px; right: 32px;
|
|
height: 2px;
|
|
border-radius: 0 0 4px 4px;
|
|
transform: scaleX(0);
|
|
transition: transform .4s cubic-bezier(.34,1.56,.64,1);
|
|
transform-origin: left;
|
|
}
|
|
.card:hover .card-accent { transform: scaleX(1); }
|
|
.card-1 .card-accent { background: linear-gradient(90deg, var(--cyan), var(--blue)); }
|
|
.card-2 .card-accent { background: linear-gradient(90deg, var(--violet), #ec4899); }
|
|
|
|
/* icon */
|
|
.card-icon-wrap {
|
|
width: 58px; height: 58px;
|
|
border-radius: 16px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 24px;
|
|
transition: transform .35s cubic-bezier(.34,1.56,.64,1);
|
|
}
|
|
.card:hover .card-icon-wrap { transform: scale(1.12) rotate(-4deg); }
|
|
.card-1 .card-icon-wrap {
|
|
background: linear-gradient(135deg, #ecfeff, #cffafe);
|
|
border: 1.5px solid rgba(6,182,212,.25);
|
|
}
|
|
.card-2 .card-icon-wrap {
|
|
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
|
|
border: 1.5px solid rgba(139,92,246,.25);
|
|
}
|
|
.card-1 .card-icon-wrap svg { color: var(--cyan-dark); width: 28px; height: 28px; }
|
|
.card-2 .card-icon-wrap svg { color: var(--violet); width: 28px; height: 28px; }
|
|
|
|
/* tag */
|
|
.card-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: .7rem;
|
|
font-weight: 700;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
padding: 3px 10px;
|
|
border-radius: 99px;
|
|
margin-bottom: 10px;
|
|
width: fit-content;
|
|
}
|
|
.card-1 .card-tag { background: #ecfeff; color: var(--cyan-dark); }
|
|
.card-2 .card-tag { background: #f5f3ff; color: var(--violet-dark); }
|
|
|
|
.card-title {
|
|
font-size: 1.45rem;
|
|
font-weight: 700;
|
|
letter-spacing: -.02em;
|
|
line-height: 1.2;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: .9rem;
|
|
color: var(--slate-500);
|
|
line-height: 1.7;
|
|
flex-grow: 1;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
/* pills */
|
|
.card-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.pill {
|
|
font-size: .7rem;
|
|
font-weight: 600;
|
|
padding: 3px 10px;
|
|
border-radius: 99px;
|
|
background: var(--slate-100);
|
|
color: var(--slate-500);
|
|
border: 1px solid var(--slate-200);
|
|
}
|
|
|
|
/* cta */
|
|
.card-cta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: .88rem;
|
|
font-weight: 700;
|
|
border-radius: 99px;
|
|
padding: 12px 22px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: gap .3s ease, box-shadow .3s ease;
|
|
}
|
|
.card:hover .card-cta { gap: 14px; }
|
|
.card-1 .card-cta {
|
|
background: linear-gradient(135deg, var(--cyan), var(--blue));
|
|
color: white;
|
|
box-shadow: 0 6px 20px rgba(6,182,212,.3);
|
|
}
|
|
.card-1:hover .card-cta { box-shadow: 0 8px 28px rgba(6,182,212,.45); }
|
|
.card-2 .card-cta {
|
|
background: linear-gradient(135deg, var(--violet), #a855f7);
|
|
color: white;
|
|
box-shadow: 0 6px 20px rgba(139,92,246,.3);
|
|
}
|
|
.card-2:hover .card-cta { box-shadow: 0 8px 28px rgba(139,92,246,.45); }
|
|
.cta-arrow { transition: transform .3s ease; }
|
|
.card:hover .cta-arrow { transform: translateX(4px); }
|
|
|
|
|
|
|
|
|
|
|
|
/* ── FOOTER ─────────────────────────────── */
|
|
footer {
|
|
margin-top: 48px;
|
|
text-align: center;
|
|
font-size: .78rem;
|
|
color: var(--slate-400);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── RESPONSIVE ─────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.cards { grid-template-columns: 1fr; }
|
|
nav { flex-direction: column; gap: 12px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-layer">
|
|
<div class="mesh"></div>
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
|
|
<!-- NAVBAR -->
|
|
<nav>
|
|
<div class="nav-logo">
|
|
<div class="nav-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
</div>
|
|
<span class="nav-brand">Web<span>GIS</span></span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<div class="hero">
|
|
<div class="hero-eyebrow">
|
|
<div class="hero-dot"><div class="pulse"></div></div>
|
|
<span class="hero-eyebrow-text">Sistem Aktif & Berjalan</span>
|
|
</div>
|
|
<h1 class="hero-title">
|
|
Portal Pemetaan<br>
|
|
<span class="gradient">Spasial Digital</span>
|
|
</h1>
|
|
<p class="hero-desc">
|
|
Platform terpadu untuk eksplorasi data geografis Kota Pontianak.<br>
|
|
Pilih project di bawah ini untuk mulai menjelajah.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- SECTION LABEL -->
|
|
<div class="section-label">
|
|
<span class="section-label-text">Pilih Project</span>
|
|
</div>
|
|
|
|
<!-- CARDS -->
|
|
<div class="cards">
|
|
|
|
<!-- Card 1 -->
|
|
<a href="WEBGIS/01/" class="card card-1">
|
|
<div class="card-accent"></div>
|
|
|
|
<div class="card-icon-wrap">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="card-tag">Project 01</div>
|
|
<h2 class="card-title">Sistem Tata<br>Ruang Kota</h2>
|
|
<p class="card-desc">
|
|
Pemetaan komprehensif Point of Interest SPBU, jaringan jalan, dan parsil tanah berbasis administrasi kecamatan Kota Pontianak.
|
|
</p>
|
|
|
|
<div class="card-pills">
|
|
<span class="pill">📍 SPBU & POI</span>
|
|
<span class="pill">🛣️ Jaringan Jalan</span>
|
|
<span class="pill">🗺️ Parsil Tanah</span>
|
|
</div>
|
|
|
|
<div class="card-cta">
|
|
Buka Project
|
|
<svg class="cta-arrow" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Card 2 -->
|
|
<a href="webtugas/01/" class="card card-2">
|
|
<div class="card-accent"></div>
|
|
|
|
<div class="card-icon-wrap">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="card-tag">Project 02</div>
|
|
<h2 class="card-title">SiPetaSos<br><span style="font-weight:500;opacity:.6;font-size:1rem">Peta Sosial</span></h2>
|
|
<p class="card-desc">
|
|
Sistem informasi pemetaan kemiskinan berbasis Rumah Ibadah. Visualisasi sebaran KK miskin, ekstrem, dan blank spot layanan sosial.
|
|
</p>
|
|
|
|
<div class="card-pills">
|
|
<span class="pill">👥 Data KK Miskin</span>
|
|
<span class="pill">🕌 Rumah Ibadah</span>
|
|
<span class="pill">📊 Laporan</span>
|
|
</div>
|
|
|
|
<div class="card-cta">
|
|
Buka Project
|
|
<svg class="cta-arrow" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
© 2026 WebGIS Portal — Sistem Informasi Geografis Kota Pontianak
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|