Anderi Saputra
739 lines
17 KiB
PHP
739 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Portal WebGIS yang memuat Project Infrastruktur dan Project Kemiskinan Kota Pontianak.">
|
|
<title>Portal Project WebGIS</title>
|
|
<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=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--navy: #0b2545;
|
|
--navy-light: #163b67;
|
|
--blue: #246bfd;
|
|
--blue-soft: #eaf1ff;
|
|
--orange: #f97316;
|
|
--orange-soft: #fff0e6;
|
|
--ink: #10233f;
|
|
--muted: #65758b;
|
|
--line: #dfe7f1;
|
|
--surface: #ffffff;
|
|
--background: #f4f7fb;
|
|
--shadow: 0 22px 55px rgba(13, 43, 78, .12);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 8% 5%, rgba(36, 107, 253, .09), transparent 25rem),
|
|
radial-gradient(circle at 92% 42%, rgba(249, 115, 22, .08), transparent 24rem),
|
|
var(--background);
|
|
font-family: "DM Sans", sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-shell {
|
|
width: min(1180px, calc(100% - 40px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 84px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 800;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
color: #fff;
|
|
background: var(--navy);
|
|
border-radius: 13px;
|
|
box-shadow: 0 8px 18px rgba(11, 37, 69, .18);
|
|
}
|
|
|
|
.brand-mark svg {
|
|
width: 23px;
|
|
height: 23px;
|
|
}
|
|
|
|
.header-note {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--orange);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 5px rgba(249, 115, 22, .12);
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.15fr .85fr;
|
|
align-items: center;
|
|
min-height: 430px;
|
|
padding: 58px 0 68px;
|
|
gap: 70px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-bottom: 20px;
|
|
padding: 8px 12px;
|
|
color: var(--blue);
|
|
background: var(--blue-soft);
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.eyebrow svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 720px;
|
|
color: var(--navy);
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: clamp(42px, 6vw, 70px);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -.055em;
|
|
}
|
|
|
|
h1 span {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 650px;
|
|
margin-top: 24px;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.hero-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
padding: 13px 19px;
|
|
color: #fff;
|
|
background: var(--navy);
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
transition: transform .2s ease, background .2s ease;
|
|
}
|
|
|
|
.hero-action:hover {
|
|
background: var(--navy-light);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero-action svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.map-visual {
|
|
position: relative;
|
|
min-height: 330px;
|
|
border: 1px solid rgba(255, 255, 255, .5);
|
|
border-radius: 32px;
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
|
|
repeating-linear-gradient(35deg, transparent 0 28px, rgba(36, 107, 253, .2) 29px 31px),
|
|
repeating-linear-gradient(125deg, transparent 0 38px, rgba(249, 115, 22, .18) 39px 41px);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map-visual::before,
|
|
.map-visual::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(2px);
|
|
}
|
|
|
|
.map-visual::before {
|
|
width: 210px;
|
|
height: 210px;
|
|
top: -65px;
|
|
right: -45px;
|
|
background: rgba(36, 107, 253, .12);
|
|
}
|
|
|
|
.map-visual::after {
|
|
width: 180px;
|
|
height: 180px;
|
|
bottom: -60px;
|
|
left: -40px;
|
|
background: rgba(249, 115, 22, .13);
|
|
}
|
|
|
|
.visual-center {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.pin {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 92px;
|
|
height: 92px;
|
|
color: #fff;
|
|
background: var(--blue);
|
|
border: 12px solid rgba(255, 255, 255, .96);
|
|
border-radius: 50% 50% 50% 12px;
|
|
box-shadow: 0 18px 35px rgba(36, 107, 253, .32);
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.pin svg {
|
|
width: 37px;
|
|
height: 37px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.map-label {
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
background: rgba(255, 255, 255, .95);
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 25px rgba(16, 35, 63, .1);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.map-label.one {
|
|
top: 50px;
|
|
left: 28px;
|
|
}
|
|
|
|
.map-label.two {
|
|
right: 24px;
|
|
bottom: 42px;
|
|
}
|
|
|
|
.label-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
color: var(--blue);
|
|
background: var(--blue-soft);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.map-label.two .label-icon {
|
|
color: var(--blue);
|
|
background: var(--blue-soft);
|
|
}
|
|
|
|
.label-icon svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.map-label.one .label-icon {
|
|
color: var(--orange);
|
|
background: var(--orange-soft);
|
|
}
|
|
|
|
.projects-section {
|
|
padding: 30px 0 84px;
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.section-kicker {
|
|
margin-bottom: 7px;
|
|
color: var(--blue);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--navy);
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: clamp(28px, 4vw, 38px);
|
|
letter-spacing: -.035em;
|
|
}
|
|
|
|
.project-count {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.project-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.project-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 375px;
|
|
padding: 32px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
box-shadow: 0 12px 35px rgba(16, 35, 63, .06);
|
|
overflow: hidden;
|
|
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
|
|
}
|
|
|
|
.project-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 160px;
|
|
height: 160px;
|
|
top: -70px;
|
|
right: -55px;
|
|
background: var(--orange-soft);
|
|
border-radius: 50%;
|
|
transition: transform .3s ease;
|
|
}
|
|
|
|
.project-card.blue::after {
|
|
background: var(--blue-soft);
|
|
}
|
|
|
|
.project-card:hover {
|
|
border-color: #c9d8ec;
|
|
box-shadow: 0 20px 45px rgba(16, 35, 63, .12);
|
|
transform: translateY(-6px);
|
|
}
|
|
|
|
.project-card:hover::after {
|
|
transform: scale(1.18);
|
|
}
|
|
|
|
.card-top {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.project-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 58px;
|
|
height: 58px;
|
|
color: var(--orange);
|
|
background: var(--orange-soft);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.blue .project-icon {
|
|
color: var(--blue);
|
|
background: var(--blue-soft);
|
|
}
|
|
|
|
.project-icon svg {
|
|
width: 29px;
|
|
height: 29px;
|
|
}
|
|
|
|
.project-number {
|
|
color: #a9b5c5;
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: .12em;
|
|
}
|
|
|
|
.project-card h3 {
|
|
color: var(--navy);
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 25px;
|
|
letter-spacing: -.025em;
|
|
}
|
|
|
|
.project-card p {
|
|
margin-top: 13px;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 22px 0 26px;
|
|
}
|
|
|
|
.tag {
|
|
padding: 6px 10px;
|
|
color: #4f6178;
|
|
background: #f1f5f9;
|
|
border-radius: 8px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.project-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-top: auto;
|
|
padding: 14px 16px;
|
|
color: var(--orange);
|
|
background: var(--orange-soft);
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
transition: color .2s ease, background .2s ease;
|
|
}
|
|
|
|
.blue .project-link {
|
|
color: var(--blue);
|
|
background: var(--blue-soft);
|
|
}
|
|
|
|
.project-link:hover {
|
|
color: #fff;
|
|
background: var(--orange);
|
|
}
|
|
|
|
.blue .project-link:hover {
|
|
background: var(--blue);
|
|
}
|
|
|
|
.project-link svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
transition: transform .2s ease;
|
|
}
|
|
|
|
.project-link:hover svg {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.footer-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 82px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.footer-inner strong {
|
|
color: var(--navy);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
gap: 44px;
|
|
padding-top: 48px;
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.map-visual {
|
|
min-height: 300px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.page-shell {
|
|
width: min(100% - 28px, 1180px);
|
|
}
|
|
|
|
.site-header {
|
|
min-height: 74px;
|
|
}
|
|
|
|
.header-note {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
min-height: auto;
|
|
padding: 40px 0 58px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(39px, 13vw, 56px);
|
|
}
|
|
|
|
.hero-copy {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.map-visual {
|
|
min-height: 260px;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.pin {
|
|
width: 76px;
|
|
height: 76px;
|
|
}
|
|
|
|
.map-label.one {
|
|
top: 28px;
|
|
left: 16px;
|
|
}
|
|
|
|
.map-label.two {
|
|
right: 16px;
|
|
bottom: 28px;
|
|
}
|
|
|
|
.section-heading {
|
|
align-items: start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-card {
|
|
min-height: 360px;
|
|
padding: 26px;
|
|
}
|
|
|
|
.footer-inner {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 22px 0;
|
|
gap: 7px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-duration: .01ms !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="page-shell site-header">
|
|
<a class="brand" href="./" aria-label="Portal Project WebGIS">
|
|
<span class="brand-mark" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<path d="M4 6.5 9 4l6 2.5L20 4v13.5L15 20l-6-2.5L4 20V6.5Z"/>
|
|
<path d="M9 4v13.5M15 6.5V20"/>
|
|
</svg>
|
|
</span>
|
|
<span>Portal WebGIS</span>
|
|
</a>
|
|
<div class="header-note">
|
|
<span class="status-dot" aria-hidden="true"></span>
|
|
Dua project tersedia
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="page-shell hero">
|
|
<div>
|
|
<div class="eyebrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 21s7-4.35 7-11A7 7 0 1 0 5 10c0 6.65 7 11 7 11Z"/>
|
|
<circle cx="12" cy="10" r="2.5"/>
|
|
</svg>
|
|
Sistem Informasi Geografis
|
|
</div>
|
|
<h1>Jelajahi data melalui <span>peta interaktif.</span></h1>
|
|
<p class="hero-copy">
|
|
Portal terintegrasi untuk mengakses seluruh project WebGIS. Pilih project di bawah untuk melihat informasi spasial, data, dan analisis pada wilayah Kota Pontianak.
|
|
</p>
|
|
<a class="hero-action" href="#daftar-project">
|
|
Lihat daftar project
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m6 9 6 6 6-6"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="map-visual" aria-hidden="true">
|
|
<div class="map-label one">
|
|
<span class="label-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 20V10l8-6 8 6v10"/>
|
|
<path d="M8 20v-6h8v6M3 20h18"/>
|
|
</svg>
|
|
</span>
|
|
Infrastruktur
|
|
</div>
|
|
<div class="visual-center">
|
|
<div class="pin">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<path d="M4 6.5 9 4l6 2.5L20 4v13.5L15 20l-6-2.5L4 20V6.5Z"/>
|
|
<path d="M9 4v13.5M15 6.5V20"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="map-label two">
|
|
<span class="label-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</span>
|
|
Kemiskinan
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="page-shell projects-section" id="daftar-project">
|
|
<div class="section-heading">
|
|
<div>
|
|
<div class="section-kicker">Daftar Project</div>
|
|
<h2>Pilih project untuk dibuka</h2>
|
|
</div>
|
|
<div class="project-count">2 project WebGIS</div>
|
|
</div>
|
|
|
|
<div class="project-grid">
|
|
<article class="project-card">
|
|
<div class="card-top">
|
|
<div class="project-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-5h6v5"/>
|
|
<path d="M8 10h2M14 10h2M8 13h2M14 13h2"/>
|
|
</svg>
|
|
</div>
|
|
<span class="project-number">PROJECT 01</span>
|
|
</div>
|
|
<h3>WebGIS Infrastruktur</h3>
|
|
<p>
|
|
Pemetaan fasilitas dan infrastruktur Kota Pontianak untuk membantu visualisasi lokasi serta pengelolaan data spasial.
|
|
</p>
|
|
<div class="tags" aria-label="Cakupan data">
|
|
<span class="tag">SPBU</span>
|
|
<span class="tag">Jalan</span>
|
|
<span class="tag">Kavling</span>
|
|
</div>
|
|
<a class="project-link" href="infrastruktur/">
|
|
Buka Project Infrastruktur
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14M13 6l6 6-6 6"/>
|
|
</svg>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card blue">
|
|
<div class="card-top">
|
|
<div class="project-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M19 8v6M16 11h6"/>
|
|
</svg>
|
|
</div>
|
|
<span class="project-number">PROJECT 02</span>
|
|
</div>
|
|
<h3>WebGIS Kemiskinan</h3>
|
|
<p>
|
|
Pemetaan kemiskinan berbasis partisipasi rumah ibadah untuk mendukung pendataan rumah, bantuan, dan analisis sosial.
|
|
</p>
|
|
<div class="tags" aria-label="Cakupan data">
|
|
<span class="tag">Data Rumah</span>
|
|
<span class="tag">Rumah Ibadah</span>
|
|
<span class="tag">Bantuan</span>
|
|
</div>
|
|
<a class="project-link" href="kemiskinan/">
|
|
Buka Project Kemiskinan
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14M13 6l6 6-6 6"/>
|
|
</svg>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|