264 lines
9.2 KiB
PHP
264 lines
9.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Pontianak - Pilih Proyek</title>
|
|
<meta name="description" content="Dashboard proyek WebGIS: geometri dasar, pemetaan SPBU, dan pengentasan kemiskinan.">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #0a0d14;
|
|
--panel: #111520;
|
|
--border: #1e2233;
|
|
--text: #e2e8f0;
|
|
--muted: #64748b;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
font-family: 'DM Sans', sans-serif;
|
|
background:
|
|
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
|
|
var(--bg);
|
|
background-size: 48px 48px;
|
|
color: var(--text);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px 20px;
|
|
}
|
|
|
|
.container {
|
|
width: min(1120px, 100%);
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
margin-bottom: 34px;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 14px;
|
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
|
border-radius: 999px;
|
|
background: rgba(74, 222, 128, 0.06);
|
|
color: #4ade80;
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.hero-badge::before {
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #4ade80;
|
|
box-shadow: 0 0 10px #4ade80;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: clamp(28px, 5vw, 44px);
|
|
line-height: 1.15;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.hero-title span { color: #4ade80; }
|
|
|
|
.hero-sub {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
}
|
|
|
|
.card {
|
|
min-height: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 26px;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
transition: transform .2s, border-color .2s, box-shadow .2s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.card-geometri:hover {
|
|
border-color: rgba(34, 197, 94, .55);
|
|
box-shadow: 0 18px 50px rgba(34, 197, 94, .12);
|
|
}
|
|
|
|
.card-spbu:hover {
|
|
border-color: rgba(59, 130, 246, .55);
|
|
box-shadow: 0 18px 50px rgba(59, 130, 246, .12);
|
|
}
|
|
|
|
.card-sosial:hover {
|
|
border-color: rgba(245, 158, 11, .55);
|
|
box-shadow: 0 18px 50px rgba(245, 158, 11, .12);
|
|
}
|
|
|
|
.card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 22px;
|
|
margin-bottom: 18px;
|
|
font-family: 'Space Mono', monospace;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.card-geometri .card-icon { background: rgba(34,197,94,.14); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
|
|
.card-spbu .card-icon { background: rgba(59,130,246,.14); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
|
|
.card-sosial .card-icon { background: rgba(245,158,11,.14); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
|
|
|
|
.card-title {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.card-geometri .card-title { color: #22c55e; }
|
|
.card-spbu .card-title { color: #60a5fa; }
|
|
.card-sosial .card-title { color: #f59e0b; }
|
|
|
|
.card-desc {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
margin-top: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tag {
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag-blue { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #60a5fa; }
|
|
.tag-cyan { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.3); color: #38bdf8; }
|
|
.tag-green2 { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #22c55e; }
|
|
.tag-green { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #34d399; }
|
|
.tag-purple { background: rgba(168,85,247,.1); border-color: rgba(168,85,247,.3); color: #c084fc; }
|
|
.tag-amber { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #f59e0b; }
|
|
.tag-pink { background: rgba(232,121,249,.1); border-color: rgba(232,121,249,.3); color: #e879f9; }
|
|
|
|
.card-cta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.card-geometri .card-cta { background: rgba(34,197,94,.12); color: #22c55e; }
|
|
.card-spbu .card-cta { background: rgba(59,130,246,.12); color: #60a5fa; }
|
|
.card-sosial .card-cta { background: rgba(245,158,11,.12); color: #f59e0b; }
|
|
|
|
.footer {
|
|
margin-top: 28px;
|
|
text-align: center;
|
|
font-family: 'Space Mono', monospace;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
letter-spacing: .05em;
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.cards { grid-template-columns: 1fr; }
|
|
.card { min-height: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<section class="hero">
|
|
<div class="hero-badge">Sistem Informasi Geografis</div>
|
|
<h1 class="hero-title">WEB<span>GIS</span> Pontianak</h1>
|
|
<p class="hero-sub">Pilih salah satu proyek WebGIS. Tiap folder sudah memiliki dashboard peta mandiri dan tetap memakai koneksi database yang sama.</p>
|
|
</section>
|
|
|
|
<section class="cards">
|
|
<a href="geometri/" class="card card-geometri">
|
|
<div class="card-icon">G</div>
|
|
<div class="card-title">WebGIS Geometri</div>
|
|
<p class="card-desc">Dashboard untuk menggambar dan mengelola data point, polyline, dan polygon.</p>
|
|
<div class="card-tags">
|
|
<span class="tag tag-green2">Point</span>
|
|
<span class="tag tag-purple">Polyline</span>
|
|
<span class="tag tag-green">Polygon</span>
|
|
</div>
|
|
<div class="card-cta"><span>Buka Geometri</span><span>→</span></div>
|
|
</a>
|
|
|
|
<a href="spbu/" class="card card-spbu">
|
|
<div class="card-icon">S</div>
|
|
<div class="card-title">WebGIS SPBU</div>
|
|
<p class="card-desc">Dashboard khusus untuk menambah, melihat, dan menghapus titik lokasi SPBU.</p>
|
|
<div class="card-tags">
|
|
<span class="tag tag-blue">Titik SPBU</span>
|
|
<span class="tag tag-green">24 Jam</span>
|
|
<span class="tag tag-purple">Tidak 24 Jam</span>
|
|
</div>
|
|
<div class="card-cta"><span>Buka SPBU</span><span>→</span></div>
|
|
</a>
|
|
|
|
<a href="sosial/" class="card card-sosial">
|
|
<div class="card-icon">K</div>
|
|
<div class="card-title">WebGIS Sosial</div>
|
|
<p class="card-desc">Dashboard pengentasan kemiskinan berbasis lokasi masjid, penduduk miskin, radius layanan, dan blind spot.</p>
|
|
<div class="card-tags">
|
|
<span class="tag tag-amber">Masjid</span>
|
|
<span class="tag tag-pink">Penduduk Miskin</span>
|
|
<span class="tag tag-amber">Analisis Radius</span>
|
|
</div>
|
|
<div class="card-cta"><span>Buka Sosial</span><span>→</span></div>
|
|
</a>
|
|
</section>
|
|
|
|
<p class="footer">© 2026 - WebGIS Pontianak</p>
|
|
</main>
|
|
</body>
|
|
</html>
|