1061 lines
26 KiB
PHP
1061 lines
26 KiB
PHP
<!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: #070a12;
|
|
--bg2: #0d1424;
|
|
--panel: rgba(18, 25, 42, .72);
|
|
--panel2: rgba(255, 255, 255, .075);
|
|
--line: rgba(180, 208, 255, .20);
|
|
--text: #f5f8ff;
|
|
--muted: #a7b5ce;
|
|
--cyan: #35f3ff;
|
|
--blue: #5b7cff;
|
|
--violet: #b86cff;
|
|
--gold: #ffcf66;
|
|
--green: #52ffbd;
|
|
--red: #ff5d7d;
|
|
--shadow: 0 28px 80px rgba(0, 0, 0, .48);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 18% 14%, rgba(53, 243, 255, .22), transparent 28%),
|
|
radial-gradient(circle at 82% 18%, rgba(184, 108, 255, .20), transparent 30%),
|
|
radial-gradient(circle at 50% 100%, rgba(255, 207, 102, .12), transparent 28%),
|
|
linear-gradient(135deg, #050710 0%, #0c1324 42%, #060912 100%);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -3;
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
|
|
background-size: 58px 58px;
|
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), rgba(0, 0, 0, .18));
|
|
animation: gridMove 18s linear infinite;
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -2;
|
|
background:
|
|
linear-gradient(120deg, transparent 0 40%, rgba(53, 243, 255, .12) 48%, transparent 56%),
|
|
repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px);
|
|
mix-blend-mode: screen;
|
|
animation: scan 7s ease-in-out infinite;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.aurora {
|
|
position: fixed;
|
|
inset: auto auto 8% -14%;
|
|
width: 44vw;
|
|
height: 44vw;
|
|
min-width: 360px;
|
|
min-height: 360px;
|
|
z-index: -1;
|
|
border-radius: 999px;
|
|
background: radial-gradient(circle, rgba(53, 243, 255, .22), transparent 64%);
|
|
filter: blur(10px);
|
|
animation: floatOrb 11s ease-in-out infinite;
|
|
}
|
|
|
|
.aurora.second {
|
|
inset: 4% -12% auto auto;
|
|
background: radial-gradient(circle, rgba(184, 108, 255, .22), transparent 62%);
|
|
animation-duration: 13s;
|
|
animation-delay: -3s;
|
|
}
|
|
|
|
.pontianak-backdrop {
|
|
position: absolute;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
top: 58px;
|
|
left: 50%;
|
|
width: min(1080px, 96vw);
|
|
height: 560px;
|
|
transform: translateX(-50%);
|
|
opacity: .20;
|
|
filter: drop-shadow(0 0 28px rgba(53, 243, 255, .26));
|
|
}
|
|
|
|
.pontianak-backdrop .land {
|
|
fill: rgba(53, 243, 255, .10);
|
|
stroke: rgba(178, 239, 255, .62);
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.pontianak-backdrop .land.alt {
|
|
fill: rgba(184, 108, 255, .09);
|
|
stroke: rgba(218, 187, 255, .52);
|
|
}
|
|
|
|
.pontianak-backdrop .river {
|
|
fill: none;
|
|
stroke: rgba(255, 207, 102, .62);
|
|
stroke-width: 4.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: .58;
|
|
}
|
|
|
|
.pontianak-backdrop .river-thin {
|
|
fill: none;
|
|
stroke: rgba(53, 243, 255, .48);
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 9 10;
|
|
animation: roadFlow 6s linear infinite;
|
|
}
|
|
|
|
.pontianak-backdrop .map-title {
|
|
fill: rgba(245, 248, 255, .32);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
letter-spacing: 7px;
|
|
}
|
|
|
|
.topbar,
|
|
main,
|
|
.footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.topbar {
|
|
width: min(1200px, calc(100% - 42px));
|
|
margin: 0 auto;
|
|
padding: 22px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 1px solid rgba(255, 255, 255, .28);
|
|
border-radius: 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #061019;
|
|
font-weight: 900;
|
|
letter-spacing: .4px;
|
|
background: linear-gradient(135deg, #eef7ff, #54edff 34%, #7382ff 68%, #ffd36d);
|
|
box-shadow: 0 0 28px rgba(53, 243, 255, .32), inset 0 0 18px rgba(255, 255, 255, .55);
|
|
}
|
|
|
|
.brand strong {
|
|
display: block;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.brand span span {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.nav-pill {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 11px 15px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--text);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035));
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 30px rgba(0, 0, 0, .22);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-pill::before {
|
|
content: "";
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 99px;
|
|
background: var(--green);
|
|
box-shadow: 0 0 16px var(--green);
|
|
}
|
|
|
|
.hero {
|
|
width: min(1200px, calc(100% - 42px));
|
|
margin: 18px auto 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 450px;
|
|
gap: 30px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero-copy {
|
|
padding: 38px 0 26px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 13px;
|
|
border: 1px solid rgba(53, 243, 255, .28);
|
|
border-radius: 999px;
|
|
background: rgba(53, 243, 255, .09);
|
|
color: #d9fbff;
|
|
box-shadow: 0 0 34px rgba(53, 243, 255, .12);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
content: "";
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 99px;
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 0 6px rgba(53, 243, 255, .13), 0 0 22px var(--cyan);
|
|
}
|
|
|
|
h1 {
|
|
margin: 18px 0 14px;
|
|
max-width: 800px;
|
|
font-size: clamp(44px, 6.6vw, 86px);
|
|
line-height: .92;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.metal-text {
|
|
display: inline-block;
|
|
color: transparent;
|
|
background: linear-gradient(100deg, #ffffff 0%, #9fefff 22%, #b7c0ff 45%, #ffffff 58%, #ffd875 76%, #ffffff 100%);
|
|
background-size: 220% auto;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
filter: drop-shadow(0 0 24px rgba(53, 243, 255, .18));
|
|
animation: metalShine 5.5s ease-in-out infinite;
|
|
}
|
|
|
|
.lead {
|
|
margin: 0;
|
|
max-width: 700px;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-actions {
|
|
margin-top: 26px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.primary-cta,
|
|
.secondary-cta {
|
|
min-height: 48px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
border-radius: 8px;
|
|
padding: 13px 18px;
|
|
font-weight: 900;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.primary-cta {
|
|
color: #051018;
|
|
background: linear-gradient(135deg, #ffffff, var(--cyan) 45%, var(--gold));
|
|
box-shadow: 0 0 26px rgba(53, 243, 255, .25), 0 18px 38px rgba(0, 0, 0, .28);
|
|
}
|
|
|
|
.secondary-cta {
|
|
border: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, .065);
|
|
color: var(--text);
|
|
}
|
|
|
|
.quick-stats {
|
|
margin-top: 28px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
max-width: 720px;
|
|
}
|
|
|
|
.stat {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
|
|
}
|
|
|
|
.stat::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .18), transparent);
|
|
transform: translateX(-120%);
|
|
animation: cardGlint 6s ease-in-out infinite;
|
|
}
|
|
|
|
.stat b {
|
|
display: block;
|
|
color: var(--cyan);
|
|
font-size: 28px;
|
|
text-shadow: 0 0 18px rgba(53, 243, 255, .35);
|
|
}
|
|
|
|
.stat span {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.holo-map {
|
|
min-height: 430px;
|
|
border: 1px solid rgba(214, 231, 255, .22);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(90deg, rgba(53, 243, 255, .08) 1px, transparent 1px),
|
|
linear-gradient(rgba(53, 243, 255, .08) 1px, transparent 1px),
|
|
radial-gradient(circle at center, rgba(53, 243, 255, .12), transparent 58%),
|
|
linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
|
|
background-size: 34px 34px, 34px 34px, auto, auto;
|
|
box-shadow: var(--shadow), inset 0 0 60px rgba(53, 243, 255, .09);
|
|
position: relative;
|
|
overflow: hidden;
|
|
animation: mapPulse 4.8s ease-in-out infinite;
|
|
}
|
|
|
|
.holo-map::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 22px;
|
|
border: 1px solid rgba(53, 243, 255, .26);
|
|
border-radius: 8px;
|
|
clip-path: polygon(0 0, 38% 0, 38% 8px, 62% 8px, 62% 0, 100% 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
.holo-map::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -30%;
|
|
right: -30%;
|
|
top: 50%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
|
|
box-shadow: 0 0 22px var(--cyan);
|
|
animation: radarSweep 4.2s linear infinite;
|
|
}
|
|
|
|
.orbit {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 50%;
|
|
top: 46%;
|
|
width: 260px;
|
|
height: 260px;
|
|
margin: -130px 0 0 -130px;
|
|
border: 1px solid rgba(53, 243, 255, .24);
|
|
border-radius: 999px;
|
|
animation: spin 14s linear infinite;
|
|
}
|
|
|
|
.orbit.two {
|
|
width: 180px;
|
|
height: 180px;
|
|
margin: -90px 0 0 -90px;
|
|
border-color: rgba(255, 207, 102, .25);
|
|
animation-duration: 9s;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.orbit::before,
|
|
.orbit.two::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
right: 28px;
|
|
top: 22px;
|
|
border-radius: 99px;
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 18px var(--cyan);
|
|
}
|
|
|
|
.orbit.two::before {
|
|
background: var(--gold);
|
|
box-shadow: 0 0 18px var(--gold);
|
|
}
|
|
|
|
.route {
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: 74px;
|
|
right: 66px;
|
|
top: 95px;
|
|
bottom: 105px;
|
|
border-left: 4px solid var(--cyan);
|
|
border-bottom: 4px solid var(--cyan);
|
|
border-radius: 0 0 0 58px;
|
|
filter: drop-shadow(0 0 12px rgba(53, 243, 255, .65));
|
|
}
|
|
|
|
.route::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 62%;
|
|
height: 4px;
|
|
right: -22px;
|
|
top: 68px;
|
|
background: var(--violet);
|
|
transform: rotate(-18deg);
|
|
transform-origin: right center;
|
|
box-shadow: 0 0 16px rgba(184, 108, 255, .72);
|
|
}
|
|
|
|
.pin {
|
|
position: absolute;
|
|
z-index: 4;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 4px solid rgba(255, 255, 255, .95);
|
|
border-radius: 99px;
|
|
background: var(--red);
|
|
box-shadow: 0 0 20px currentColor, 0 12px 26px rgba(0, 0, 0, .42);
|
|
animation: pinPulse 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
.pin.one { left: 92px; top: 82px; color: var(--red); }
|
|
.pin.two { right: 94px; top: 158px; color: var(--gold); background: var(--gold); animation-delay: -.5s; }
|
|
.pin.three { left: 154px; bottom: 118px; color: var(--green); background: var(--green); animation-delay: -.9s; }
|
|
.pin.four { right: 128px; bottom: 82px; color: var(--blue); background: var(--blue); animation-delay: -1.3s; }
|
|
|
|
.map-label {
|
|
position: absolute;
|
|
z-index: 5;
|
|
left: 24px;
|
|
right: 24px;
|
|
bottom: 22px;
|
|
padding: 17px;
|
|
border: 1px solid rgba(214, 231, 255, .22);
|
|
border-radius: 8px;
|
|
background: rgba(7, 10, 18, .64);
|
|
backdrop-filter: blur(14px);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
|
|
}
|
|
|
|
.city-map {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 44px 34px 78px;
|
|
width: calc(100% - 68px);
|
|
height: calc(100% - 122px);
|
|
opacity: .72;
|
|
filter: drop-shadow(0 0 14px rgba(53, 243, 255, .28));
|
|
}
|
|
|
|
.city-map .district {
|
|
fill: rgba(53, 243, 255, .055);
|
|
stroke: rgba(53, 243, 255, .30);
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.city-map .district.gold {
|
|
fill: rgba(255, 207, 102, .06);
|
|
stroke: rgba(255, 207, 102, .28);
|
|
}
|
|
|
|
.city-map .road {
|
|
fill: none;
|
|
stroke: rgba(210, 241, 255, .34);
|
|
stroke-width: 1.35;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.city-map .main-road {
|
|
fill: none;
|
|
stroke: rgba(53, 243, 255, .62);
|
|
stroke-width: 2.6;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 10 8;
|
|
animation: roadFlow 3.8s linear infinite;
|
|
}
|
|
|
|
.city-map .river {
|
|
fill: none;
|
|
stroke: rgba(255, 207, 102, .48);
|
|
stroke-width: 5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.city-map .label {
|
|
fill: rgba(245, 248, 255, .36);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.map-label b {
|
|
display: block;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.map-label span {
|
|
display: block;
|
|
margin-top: 6px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.projects {
|
|
width: min(1200px, calc(100% - 42px));
|
|
margin: 36px auto 56px;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
gap: 18px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-head h2 {
|
|
margin: 0;
|
|
font-size: 27px;
|
|
}
|
|
|
|
.section-head p {
|
|
margin: 7px 0 0;
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.project-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.project-card {
|
|
position: relative;
|
|
min-height: 268px;
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035)),
|
|
rgba(12, 18, 31, .84);
|
|
box-shadow: 0 18px 44px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .13);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
transform: translateY(0);
|
|
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
|
|
animation: riseIn .7s ease both;
|
|
}
|
|
|
|
.project-card:nth-child(2) { animation-delay: .08s; }
|
|
.project-card:nth-child(3) { animation-delay: .16s; }
|
|
.project-card:nth-child(4) { animation-delay: .24s; }
|
|
.project-card:nth-child(5) { animation-delay: .32s; }
|
|
|
|
.project-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 8px;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, rgba(53, 243, 255, .55), transparent 38%, rgba(255, 207, 102, .45));
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
opacity: .54;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.project-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .16), transparent);
|
|
transform: translateX(-130%);
|
|
transition: transform .55s ease;
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: translateY(-8px);
|
|
border-color: rgba(53, 243, 255, .55);
|
|
box-shadow: 0 28px 70px rgba(0, 0, 0, .44), 0 0 34px rgba(53, 243, 255, .12);
|
|
}
|
|
|
|
.project-card:hover::after {
|
|
transform: translateX(130%);
|
|
}
|
|
|
|
.project-no {
|
|
width: 42px;
|
|
height: 42px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
color: #031018;
|
|
background: linear-gradient(135deg, #ffffff, var(--cyan));
|
|
box-shadow: 0 0 22px rgba(53, 243, 255, .28);
|
|
font-weight: 950;
|
|
}
|
|
|
|
.project-card:nth-child(2) .project-no { background: linear-gradient(135deg, #ffffff, #8ea2ff); }
|
|
.project-card:nth-child(3) .project-no { background: linear-gradient(135deg, #ffffff, var(--gold)); }
|
|
.project-card:nth-child(4) .project-no { background: linear-gradient(135deg, #ffffff, var(--green)); }
|
|
.project-card:nth-child(5) .project-no { background: linear-gradient(135deg, #ffffff, var(--red)); }
|
|
|
|
.project-card h3 {
|
|
margin: 17px 0 9px;
|
|
font-size: 18px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.project-card p {
|
|
margin: 0;
|
|
min-height: 68px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 16px;
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 7px 10px;
|
|
border: 1px solid rgba(82, 255, 189, .28);
|
|
border-radius: 999px;
|
|
background: rgba(82, 255, 189, .10);
|
|
color: #c7ffe9;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.status::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 99px;
|
|
background: var(--green);
|
|
box-shadow: 0 0 12px var(--green);
|
|
}
|
|
|
|
.status.locked {
|
|
border-color: rgba(255, 93, 125, .30);
|
|
background: rgba(255, 93, 125, .11);
|
|
color: #ffd5dd;
|
|
}
|
|
|
|
.status.locked::before {
|
|
background: var(--red);
|
|
box-shadow: 0 0 12px var(--red);
|
|
}
|
|
|
|
.open-link {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: auto;
|
|
min-height: 46px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 13px;
|
|
border-radius: 8px;
|
|
color: #061018;
|
|
background: linear-gradient(135deg, #ffffff, var(--cyan) 46%, #8795ff);
|
|
box-shadow: 0 12px 28px rgba(53, 243, 255, .18);
|
|
font-size: 14px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.open-link span:last-child {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.project-card:nth-child(5) .open-link {
|
|
background: linear-gradient(135deg, #ffffff, #ff96aa 45%, var(--red));
|
|
box-shadow: 0 12px 28px rgba(255, 93, 125, .18);
|
|
}
|
|
|
|
.footer {
|
|
margin-top: auto;
|
|
border-top: 1px solid var(--line);
|
|
background: rgba(6, 10, 18, .62);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.footer-inner {
|
|
width: min(1200px, calc(100% - 42px));
|
|
margin: 0 auto;
|
|
padding: 18px 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
from { background-position: 0 0, 0 0; }
|
|
to { background-position: 58px 58px, 58px 58px; }
|
|
}
|
|
|
|
@keyframes scan {
|
|
0%, 100% { opacity: .32; transform: translateX(-10%); }
|
|
50% { opacity: .72; transform: translateX(10%); }
|
|
}
|
|
|
|
@keyframes floatOrb {
|
|
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
|
|
50% { transform: translate3d(12%, -7%, 0) scale(1.08); }
|
|
}
|
|
|
|
@keyframes metalShine {
|
|
0%, 100% { background-position: 0% center; }
|
|
50% { background-position: 100% center; }
|
|
}
|
|
|
|
@keyframes cardGlint {
|
|
0%, 48% { transform: translateX(-120%); }
|
|
62%, 100% { transform: translateX(120%); }
|
|
}
|
|
|
|
@keyframes mapPulse {
|
|
0%, 100% { box-shadow: var(--shadow), inset 0 0 60px rgba(53, 243, 255, .09); }
|
|
50% { box-shadow: var(--shadow), inset 0 0 95px rgba(53, 243, 255, .17), 0 0 44px rgba(184, 108, 255, .10); }
|
|
}
|
|
|
|
@keyframes radarSweep {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pinPulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.22); }
|
|
}
|
|
|
|
@keyframes riseIn {
|
|
from { opacity: 0; transform: translateY(18px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes roadFlow {
|
|
from { stroke-dashoffset: 0; }
|
|
to { stroke-dashoffset: -36; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: .001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1080px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-copy {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.holo-map {
|
|
min-height: 320px;
|
|
}
|
|
|
|
.project-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.topbar,
|
|
.hero,
|
|
.projects,
|
|
.footer-inner {
|
|
width: min(100% - 28px, 1200px);
|
|
}
|
|
|
|
.topbar,
|
|
.section-head,
|
|
.footer-inner {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-pill {
|
|
white-space: normal;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 44px;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.quick-stats,
|
|
.project-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-card {
|
|
min-height: 230px;
|
|
}
|
|
|
|
.project-card p {
|
|
min-height: auto;
|
|
}
|
|
|
|
.holo-map {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.route {
|
|
left: 50px;
|
|
right: 48px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="aurora"></div>
|
|
<div class="aurora second"></div>
|
|
<svg class="pontianak-backdrop" viewBox="0 0 900 520" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
<path class="land" d="M420 52 L566 38 L704 94 L746 174 L704 258 L748 348 L660 458 L516 438 L430 476 L318 438 L198 464 L114 374 L152 264 L116 176 L224 96 Z"></path>
|
|
<path class="land alt" d="M430 78 L540 76 L628 120 L612 218 L520 238 L430 196 Z"></path>
|
|
<path class="land" d="M210 128 L326 94 L414 166 L376 254 L246 260 L164 200 Z"></path>
|
|
<path class="land alt" d="M136 286 L258 282 L340 352 L284 430 L168 408 L104 350 Z"></path>
|
|
<path class="land" d="M384 276 L520 260 L640 318 L602 426 L472 442 L376 378 Z"></path>
|
|
<path class="land alt" d="M622 230 L734 192 L790 270 L730 352 L646 322 Z"></path>
|
|
<path class="river" d="M84 322 C194 270 290 276 380 244 S560 168 808 170"></path>
|
|
<path class="river-thin" d="M144 190 C250 224 334 210 446 184 S630 122 766 104"></path>
|
|
<path class="river-thin" d="M174 404 C262 342 374 360 470 316 S626 246 776 254"></path>
|
|
<text class="map-title" x="450" y="506" text-anchor="middle">PONTIANAK MAP</text>
|
|
</svg>
|
|
|
|
<header class="topbar">
|
|
<a class="brand" href="./" aria-label="Portal WebGIS Terpadu">
|
|
<span class="brand-mark">GIS</span>
|
|
<span>
|
|
<strong>Portal WebGIS Terpadu</strong>
|
|
<span>Tugas SIG - Pontianak</span>
|
|
</span>
|
|
</a>
|
|
<a class="nav-pill" href="#project-list">5 project aktif</a>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero" aria-labelledby="page-title">
|
|
<div class="hero-copy">
|
|
<span class="eyebrow">Futuristic Spatial Gateway</span>
|
|
<h1 id="page-title"><span class="metal-text">Portal WebGIS Terpadu</span></h1>
|
|
<p class="lead">Akses cepat ke seluruh project pemetaan, digitasi, choropleth, dan dashboard analisis dalam satu portal visual yang elegan.</p>
|
|
|
|
<div class="hero-actions">
|
|
<a class="primary-cta" href="#project-list">Pilih Project <span aria-hidden="true">›</span></a>
|
|
<a class="secondary-cta" href="05/index.php">Masuk Project 05</a>
|
|
</div>
|
|
|
|
<div class="quick-stats" aria-label="Ringkasan akses project">
|
|
<div class="stat">
|
|
<b>04</b>
|
|
<span>Project publik tanpa login</span>
|
|
</div>
|
|
<div class="stat">
|
|
<b>01</b>
|
|
<span>Project khusus dengan login</span>
|
|
</div>
|
|
<div class="stat">
|
|
<b>05</b>
|
|
<span>Modul WebGIS dalam satu portal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="holo-map" aria-hidden="true">
|
|
<svg class="city-map" viewBox="0 0 420 300" preserveAspectRatio="none">
|
|
<path class="district" d="M42 46 L126 28 L196 70 L178 128 L86 140 L34 94 Z"></path>
|
|
<path class="district gold" d="M204 40 L354 54 L382 120 L306 160 L214 124 Z"></path>
|
|
<path class="district" d="M68 154 L180 144 L238 208 L190 266 L56 244 Z"></path>
|
|
<path class="district gold" d="M246 170 L384 142 L394 242 L296 274 L226 224 Z"></path>
|
|
<path class="district" d="M168 78 L230 36 L284 96 L248 150 L184 126 Z"></path>
|
|
<path class="river" d="M16 188 C86 150 150 162 216 136 S318 84 404 96"></path>
|
|
<path class="road" d="M18 90 C80 84 112 112 168 102 S278 62 402 88"></path>
|
|
<path class="road" d="M42 220 C110 174 170 192 224 152 S312 104 386 128"></path>
|
|
<path class="road" d="M118 24 C132 82 122 126 142 172 S182 236 198 284"></path>
|
|
<path class="road" d="M286 40 C262 94 280 142 268 184 S240 238 256 286"></path>
|
|
<path class="road" d="M26 168 L104 154 L158 176 L238 158 L314 184 L400 174"></path>
|
|
<path class="main-road" d="M20 258 C92 214 120 138 190 132 S292 176 400 54"></path>
|
|
<text class="label" x="210" y="292" text-anchor="middle">PONTIANAK</text>
|
|
</svg>
|
|
<div class="orbit"></div>
|
|
<div class="orbit two"></div>
|
|
<div class="route"></div>
|
|
<span class="pin one"></span>
|
|
<span class="pin two"></span>
|
|
<span class="pin three"></span>
|
|
<span class="pin four"></span>
|
|
<div class="map-label">
|
|
<b>Spatial Control Center</b>
|
|
<span>Visualisasi WebGIS Pontianak dengan akses project publik dan project login.</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="projects" id="project-list" aria-labelledby="project-title">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2 id="project-title">Pilih Project</h2>
|
|
<p>Masuk ke modul WebGIS yang ingin digunakan.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-grid">
|
|
<article class="project-card">
|
|
<div class="project-no">01</div>
|
|
<h3>Peta SPBU</h3>
|
|
<p>Pemetaan lokasi SPBU beserta status operasional dan pengelolaan titik.</p>
|
|
<span class="status">Tanpa login</span>
|
|
<a class="open-link" href="01/index.php">
|
|
<span>Buka Project</span>
|
|
<span aria-hidden="true">›</span>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card">
|
|
<div class="project-no">02</div>
|
|
<h3>Jalan & Tanah</h3>
|
|
<p>Digitasi, pencarian, dan pengelolaan data jalan serta bidang tanah.</p>
|
|
<span class="status">Tanpa login</span>
|
|
<a class="open-link" href="02/index.php">
|
|
<span>Buka Project</span>
|
|
<span aria-hidden="true">›</span>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card">
|
|
<div class="project-no">03</div>
|
|
<h3>Choropleth Pontianak</h3>
|
|
<p>Visualisasi tematik kepadatan penduduk wilayah Pontianak.</p>
|
|
<span class="status">Tanpa login</span>
|
|
<a class="open-link" href="03/index.html">
|
|
<span>Buka Project</span>
|
|
<span aria-hidden="true">›</span>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card">
|
|
<div class="project-no">04</div>
|
|
<h3>Layer SPBU</h3>
|
|
<p>Peta SPBU dengan kontrol layer untuk membedakan kategori operasional.</p>
|
|
<span class="status">Tanpa login</span>
|
|
<a class="open-link" href="04/index.php">
|
|
<span>Buka Project</span>
|
|
<span aria-hidden="true">›</span>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card">
|
|
<div class="project-no">05</div>
|
|
<h3>WebGIS UAS</h3>
|
|
<p>Dashboard analisis kemiskinan, fasilitas, laporan, dan data pendukung.</p>
|
|
<span class="status locked">Perlu login</span>
|
|
<a class="open-link" href="05/index.php">
|
|
<span>Masuk Project</span>
|
|
<span aria-hidden="true">›</span>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="footer-inner">
|
|
<span>Portal WebGIS Terpadu</span>
|
|
<span>Project 01-04 publik, Project 05 menggunakan login.</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|