Nama Kamu
804 lines
22 KiB
HTML
804 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portal WebGIS Terpadu</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f6f9fb;
|
|
--surface: rgba(255, 255, 255, 0.76);
|
|
--surface-strong: rgba(255, 255, 255, 0.92);
|
|
--text: #16212d;
|
|
--muted: #657486;
|
|
--line: rgba(154, 170, 185, 0.36);
|
|
--chrome: #dbe4ec;
|
|
--silver: #f7fafc;
|
|
--green: #0f8c7c;
|
|
--teal: #119eb3;
|
|
--blue: #3e6fb6;
|
|
--amber: #c98d28;
|
|
--rose: #b95473;
|
|
--shadow: 0 24px 60px rgba(42, 58, 74, 0.17);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
linear-gradient(90deg, rgba(72, 105, 130, 0.1) 1px, transparent 1px),
|
|
linear-gradient(rgba(72, 105, 130, 0.08) 1px, transparent 1px),
|
|
linear-gradient(115deg, rgba(255, 255, 255, 0.9), rgba(221, 233, 241, 0.52) 42%, rgba(255, 255, 255, 0.84)),
|
|
radial-gradient(circle at 16% 18%, rgba(17, 158, 179, 0.18), transparent 30%),
|
|
radial-gradient(circle at 84% 12%, rgba(201, 141, 40, 0.16), transparent 26%),
|
|
var(--bg);
|
|
background-size: 52px 52px, 52px 52px, auto, auto, auto, auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::before {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
content: "";
|
|
background:
|
|
linear-gradient(128deg, transparent 0 43%, rgba(255, 255, 255, 0.9) 43% 44%, rgba(77, 114, 145, 0.16) 44% 45%, transparent 45%),
|
|
linear-gradient(35deg, transparent 0 58%, rgba(17, 158, 179, 0.12) 58% 59%, rgba(255, 255, 255, 0.7) 59% 60%, transparent 60%);
|
|
opacity: 0.86;
|
|
pointer-events: none;
|
|
animation: drift-lines 16s ease-in-out infinite alternate;
|
|
}
|
|
|
|
body::after {
|
|
position: fixed;
|
|
inset: -20%;
|
|
z-index: -2;
|
|
content: "";
|
|
background:
|
|
conic-gradient(from 130deg at 50% 50%, rgba(255, 255, 255, 0), rgba(182, 199, 214, 0.34), rgba(255, 255, 255, 0), rgba(17, 158, 179, 0.15), rgba(255, 255, 255, 0));
|
|
filter: blur(26px);
|
|
opacity: 0.8;
|
|
animation: rotate-halo 26s linear infinite;
|
|
}
|
|
|
|
.page {
|
|
width: min(1120px, calc(100% - 40px));
|
|
margin: 0 auto;
|
|
padding: 56px 0 48px;
|
|
animation: page-rise 650ms ease both;
|
|
}
|
|
|
|
.map-orbit {
|
|
position: fixed;
|
|
top: 34px;
|
|
right: max(20px, calc((100vw - 1120px) / 2));
|
|
z-index: -1;
|
|
width: 310px;
|
|
aspect-ratio: 1;
|
|
border: 1px solid rgba(78, 100, 120, 0.13);
|
|
border-radius: 50%;
|
|
background:
|
|
repeating-radial-gradient(circle, transparent 0 28px, rgba(61, 95, 123, 0.08) 29px 30px),
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(190, 207, 221, 0.16));
|
|
box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.72);
|
|
opacity: 0.88;
|
|
pointer-events: none;
|
|
animation: float-orbit 8s ease-in-out infinite;
|
|
}
|
|
|
|
.map-orbit span {
|
|
position: absolute;
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 5px rgba(17, 158, 179, 0.14), 0 0 22px rgba(17, 158, 179, 0.48);
|
|
}
|
|
|
|
.map-orbit span:nth-child(1) {
|
|
top: 22%;
|
|
left: 52%;
|
|
}
|
|
|
|
.map-orbit span:nth-child(2) {
|
|
top: 64%;
|
|
left: 30%;
|
|
box-shadow: 0 0 0 5px rgba(201, 141, 40, 0.16), 0 0 22px rgba(201, 141, 40, 0.42);
|
|
}
|
|
|
|
.map-orbit span:nth-child(3) {
|
|
top: 48%;
|
|
right: 17%;
|
|
box-shadow: 0 0 0 5px rgba(62, 111, 182, 0.14), 0 0 22px rgba(62, 111, 182, 0.42);
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.title-block {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
color: #0e7f88;
|
|
font-size: 0.84rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 3px solid #20a8b3;
|
|
border-radius: 50%;
|
|
content: "";
|
|
background: var(--surface);
|
|
box-shadow: 0 0 18px rgba(32, 168, 179, 0.5);
|
|
animation: pulse-dot 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
color: transparent;
|
|
background: linear-gradient(95deg, #15212d 0%, #627689 34%, #f8fbfd 47%, #184d62 62%, #172534 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
font-size: clamp(2rem, 4vw, 4rem);
|
|
line-height: 1.05;
|
|
letter-spacing: 0;
|
|
text-shadow: 0 12px 36px rgba(46, 68, 88, 0.13);
|
|
}
|
|
|
|
.description {
|
|
max-width: 620px;
|
|
margin: 16px 0 0;
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.status-panel {
|
|
width: 250px;
|
|
min-width: 250px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(219, 228, 236, 0.7) 45%, rgba(255, 255, 255, 0.86));
|
|
box-shadow: 0 16px 34px rgba(42, 58, 74, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.pontianak-map {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 154px;
|
|
border: 1px solid rgba(154, 170, 185, 0.3);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(90deg, rgba(89, 119, 145, 0.1) 1px, transparent 1px),
|
|
linear-gradient(rgba(89, 119, 145, 0.08) 1px, transparent 1px),
|
|
linear-gradient(145deg, #f9fcfd, #dfe9f0 48%, #ffffff);
|
|
background-size: 18px 18px, 18px 18px, auto;
|
|
}
|
|
|
|
.pontianak-map::before {
|
|
position: absolute;
|
|
inset: -45%;
|
|
content: "";
|
|
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.96), transparent, rgba(17, 158, 179, 0.16), transparent);
|
|
animation: rotate-halo 11s linear infinite;
|
|
}
|
|
|
|
.pontianak-map svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
filter: drop-shadow(0 12px 18px rgba(42, 58, 74, 0.16));
|
|
}
|
|
|
|
.map-region {
|
|
stroke: rgba(255, 255, 255, 0.94);
|
|
stroke-width: 2;
|
|
transition: transform 220ms ease, filter 220ms ease;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.pontianak-map:hover .map-region {
|
|
filter: brightness(1.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.map-river {
|
|
fill: none;
|
|
stroke: rgba(30, 136, 163, 0.7);
|
|
stroke-width: 8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.map-pin {
|
|
animation: pulse-pin 2.2s ease-in-out infinite;
|
|
transform-origin: 124px 78px;
|
|
}
|
|
|
|
.map-caption {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 9px 4px 0;
|
|
color: #395065;
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.map-caption span:last-child {
|
|
color: #0e7f88;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.project-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
}
|
|
|
|
.project-card {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 220px;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
padding: 22px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
background:
|
|
linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(224, 233, 241, 0.78) 48%, rgba(255, 255, 255, 0.9)),
|
|
var(--surface);
|
|
box-shadow: 0 10px 26px rgba(42, 58, 74, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(18px);
|
|
transform: translateY(0);
|
|
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-position 220ms ease;
|
|
animation: card-enter 560ms ease both;
|
|
}
|
|
|
|
.project-card::before {
|
|
position: absolute;
|
|
inset: -30%;
|
|
content: "";
|
|
background:
|
|
linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, 0.95) 45%, transparent 56%),
|
|
radial-gradient(circle at 20% 10%, var(--accent-soft), transparent 36%);
|
|
opacity: 0.68;
|
|
pointer-events: none;
|
|
transform: translateX(-34%);
|
|
transition: transform 650ms ease;
|
|
}
|
|
|
|
.project-card::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background:
|
|
linear-gradient(90deg, rgba(90, 115, 138, 0.08) 1px, transparent 1px),
|
|
linear-gradient(rgba(90, 115, 138, 0.06) 1px, transparent 1px);
|
|
background-size: 18px 18px;
|
|
mask-image: linear-gradient(180deg, transparent, #000 18%, transparent 82%);
|
|
opacity: 0.34;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.project-card:hover,
|
|
.project-card:focus-visible {
|
|
border-color: var(--accent);
|
|
box-shadow: var(--shadow);
|
|
transform: translateY(-7px) scale(1.01);
|
|
outline: none;
|
|
}
|
|
|
|
.project-card:hover::before,
|
|
.project-card:focus-visible::before {
|
|
transform: translateX(34%);
|
|
}
|
|
|
|
.project-card:focus-visible {
|
|
box-shadow: 0 0 0 4px rgba(31, 154, 138, 0.2), var(--shadow);
|
|
}
|
|
|
|
.card-top,
|
|
.card-bottom {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.icon-wrap {
|
|
display: grid;
|
|
width: 52px;
|
|
height: 52px;
|
|
place-items: center;
|
|
margin-bottom: 22px;
|
|
border-radius: 8px;
|
|
color: #ffffff;
|
|
background:
|
|
linear-gradient(145deg, var(--accent), rgba(255, 255, 255, 0.42)),
|
|
var(--accent);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 26px var(--accent-glow);
|
|
animation: icon-hover 4.6s ease-in-out infinite;
|
|
}
|
|
|
|
.icon-wrap svg {
|
|
width: 29px;
|
|
height: 29px;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 1.35rem;
|
|
line-height: 1.28;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.meta {
|
|
margin: 10px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.93rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.card-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-top: 28px;
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.arrow {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, var(--accent), rgba(255, 255, 255, 0.46));
|
|
box-shadow: 0 10px 20px var(--accent-glow);
|
|
transition: transform 180ms ease;
|
|
}
|
|
|
|
.project-card:hover .arrow,
|
|
.project-card:focus-visible .arrow {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.arrow svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: currentColor;
|
|
stroke-width: 2.4;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.spbu {
|
|
--accent: var(--green);
|
|
--accent-soft: rgba(20, 125, 100, 0.13);
|
|
--accent-glow: rgba(15, 140, 124, 0.28);
|
|
}
|
|
|
|
.jalan {
|
|
--accent: var(--blue);
|
|
--accent-soft: rgba(49, 95, 155, 0.13);
|
|
--accent-glow: rgba(62, 111, 182, 0.28);
|
|
}
|
|
|
|
.choro {
|
|
--accent: var(--teal);
|
|
--accent-soft: rgba(31, 154, 138, 0.14);
|
|
--accent-glow: rgba(17, 158, 179, 0.28);
|
|
}
|
|
|
|
.upgrade {
|
|
--accent: var(--amber);
|
|
--accent-soft: rgba(199, 119, 29, 0.15);
|
|
--accent-glow: rgba(201, 141, 40, 0.3);
|
|
}
|
|
|
|
.kemiskinan {
|
|
--accent: var(--rose);
|
|
--accent-soft: rgba(184, 69, 90, 0.13);
|
|
--accent-glow: rgba(185, 84, 115, 0.28);
|
|
}
|
|
|
|
.project-card:nth-child(1) {
|
|
animation-delay: 80ms;
|
|
}
|
|
|
|
.project-card:nth-child(2) {
|
|
animation-delay: 160ms;
|
|
}
|
|
|
|
.project-card:nth-child(3) {
|
|
animation-delay: 240ms;
|
|
}
|
|
|
|
.project-card:nth-child(4) {
|
|
animation-delay: 320ms;
|
|
}
|
|
|
|
.project-card:nth-child(5) {
|
|
animation-delay: 400ms;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 28px;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
}
|
|
|
|
footer a {
|
|
color: #0e7f88;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer a:hover,
|
|
footer a:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@keyframes page-rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes card-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(22px) scale(0.98);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-halo {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes drift-lines {
|
|
from {
|
|
transform: translate3d(-14px, -8px, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(14px, 8px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes float-orbit {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(18px) rotate(4deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.18);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-pin {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.18);
|
|
opacity: 0.78;
|
|
}
|
|
}
|
|
|
|
@keyframes icon-hover {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 1ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 1ms !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.status-panel {
|
|
width: min(100%, 280px);
|
|
min-width: 0;
|
|
}
|
|
|
|
.project-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.page {
|
|
width: min(100% - 28px, 1120px);
|
|
padding: 34px 0 30px;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 0.98rem;
|
|
}
|
|
|
|
.project-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.project-card {
|
|
min-height: 190px;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="map-orbit" aria-hidden="true">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<main class="page">
|
|
<header>
|
|
<div class="title-block">
|
|
<div class="eyebrow">Katalog aplikasi peta</div>
|
|
<h1>Portal WebGIS Terpadu</h1>
|
|
<p class="description">Pilih salah satu aplikasi WebGIS untuk membuka peta interaktif.</p>
|
|
</div>
|
|
<div class="status-panel" aria-label="Gambar peta Pontianak">
|
|
<div class="pontianak-map">
|
|
<svg viewBox="0 0 240 150" role="img" aria-label="Peta Pontianak">
|
|
<defs>
|
|
<linearGradient id="mapSilver" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#ffffff"></stop>
|
|
<stop offset="0.52" stop-color="#d8e4ec"></stop>
|
|
<stop offset="1" stop-color="#f7fbfd"></stop>
|
|
</linearGradient>
|
|
<linearGradient id="mapCyan" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#7bd7df"></stop>
|
|
<stop offset="1" stop-color="#0f8c9c"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path class="map-region" fill="url(#mapSilver)" d="M93 15 133 9 164 27 156 58 128 69 99 58 76 35Z"></path>
|
|
<path class="map-region" fill="#c7d6e1" d="M43 46 76 35 99 58 91 91 55 96 31 73Z"></path>
|
|
<path class="map-region" fill="#eef4f8" d="M156 58 198 45 221 71 204 102 164 101 128 69Z"></path>
|
|
<path class="map-region" fill="#d7e7ee" d="M55 96 91 91 117 118 91 141 51 132 28 105Z"></path>
|
|
<path class="map-region" fill="#bfcfdc" d="M91 91 128 69 164 101 153 135 117 118Z"></path>
|
|
<path class="map-region" fill="#f5fafc" d="M164 101 204 102 218 126 191 143 153 135Z"></path>
|
|
<path class="map-river" d="M24 84 C62 78 83 70 108 82 S151 104 215 91"></path>
|
|
<path class="map-river" d="M118 20 C112 51 115 78 130 132"></path>
|
|
<g class="map-pin">
|
|
<circle cx="124" cy="78" r="14" fill="rgba(17, 158, 179, 0.18)"></circle>
|
|
<circle cx="124" cy="78" r="6" fill="url(#mapCyan)" stroke="#ffffff" stroke-width="3"></circle>
|
|
</g>
|
|
</svg>
|
|
<div class="map-caption">
|
|
<span>Peta Pontianak</span>
|
|
<span>Preview GIS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="project-grid" aria-label="Daftar project WebGIS">
|
|
<a class="project-card spbu" href="01/index.php">
|
|
<div class="card-top">
|
|
<div class="icon-wrap" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path>
|
|
<path d="M8 7h4"></path>
|
|
<path d="M8 11h4"></path>
|
|
<path d="M16 8h2l2 2v8a2 2 0 0 1-4 0v-4"></path>
|
|
<path d="M3 21h14"></path>
|
|
</svg>
|
|
</div>
|
|
<h2>Webgis SPBU Point</h2>
|
|
<p class="meta">Pemetaan titik lokasi SPBU dengan informasi spasial.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 12h14"></path>
|
|
<path d="m13 6 6 6-6 6"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="project-card jalan" href="02/index.php">
|
|
<div class="card-top">
|
|
<div class="icon-wrap" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M4 19c4-5 4-9 8-14"></path>
|
|
<path d="M12 19c2-5 4-9 8-14"></path>
|
|
<path d="M7 14h4"></path>
|
|
<path d="M12 9h4"></path>
|
|
<path d="M3 21h18"></path>
|
|
</svg>
|
|
</div>
|
|
<h2>Webgis Jalan Parsil</h2>
|
|
<p class="meta">Inventarisasi dan visualisasi data jalan berbasis peta.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 12h14"></path>
|
|
<path d="m13 6 6 6-6 6"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="project-card choro" href="03/choropleth.html">
|
|
<div class="card-top">
|
|
<div class="icon-wrap" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3Z"></path>
|
|
<path d="M9 3v15"></path>
|
|
<path d="M15 6v15"></path>
|
|
<path d="M6 12h3"></path>
|
|
<path d="M15 12h3"></path>
|
|
</svg>
|
|
</div>
|
|
<h2>Webgis Choropleth</h2>
|
|
<p class="meta">Peta tematik untuk membaca pola wilayah secara visual.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 12h14"></path>
|
|
<path d="m13 6 6 6-6 6"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="project-card upgrade" href="04/index.php">
|
|
<div class="card-top">
|
|
<div class="icon-wrap" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 21s7-5.2 7-11a7 7 0 0 0-14 0c0 5.8 7 11 7 11Z"></path>
|
|
<path d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
|
|
<path d="M12 16v-3"></path>
|
|
<path d="m9.8 8.8 2.2-2.2 2.2 2.2"></path>
|
|
</svg>
|
|
</div>
|
|
<h2>Webgis SPBU 24 Ja Upgrade</h2>
|
|
<p class="meta">Versi pengembangan untuk pengelolaan titik SPBU.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 12h14"></path>
|
|
<path d="m13 6 6 6-6 6"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="project-card kemiskinan" href="05/login.php">
|
|
<div class="card-top">
|
|
<div class="icon-wrap" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M4 19V5"></path>
|
|
<path d="M4 19h17"></path>
|
|
<path d="M8 16v-5"></path>
|
|
<path d="M13 16V8"></path>
|
|
<path d="M18 16v-9"></path>
|
|
<path d="M7 7h12"></path>
|
|
</svg>
|
|
</div>
|
|
<h2>Webgis Kemiskinan</h2>
|
|
<p class="meta">Data wilayah dan indikator sosial dalam tampilan spasial.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 12h14"></path>
|
|
<path d="m13 6 6 6-6 6"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</section>
|
|
|
|
<footer>
|
|
Portal utama untuk memilih aplikasi WebGIS pada folder project gabungan. <a href="manual-book.html">Manual book</a>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|