Initial commit
This commit is contained in:
muthianura
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>WebGIS Pontianak — Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #eff6ff; --white: #ffffff; --border: #bfdbfe;
|
||||
--text: #1e293b; --text2: #475569; --text3: #94a3b8;
|
||||
--blue-primary: #1d4ed8; --blue-light: #dbeafe; --blue-hover: #1e40af;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Inter', sans-serif; color: var(--text);
|
||||
background: var(--bg); min-height: 100vh;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: var(--white);
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-weight: 700; font-size: 18px; color: var(--blue-primary);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, var(--white) 0%, var(--blue-light) 100%);
|
||||
padding: 80px 24px; text-align: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.hero-badge {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-size: 12px; font-weight: 600;
|
||||
letter-spacing: .05em; text-transform: uppercase;
|
||||
color: var(--blue-primary); background: rgba(37,99,235,.1);
|
||||
padding: 6px 14px; border-radius: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.hero h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: #1e293b; }
|
||||
.hero p {
|
||||
font-size: 16px; color: var(--text2); max-width: 600px;
|
||||
margin: 0 auto; line-height: 1.7;
|
||||
}
|
||||
|
||||
.main { max-width: 1140px; margin: 60px auto; padding: 0 24px; flex: 1; width: 100%; }
|
||||
|
||||
.projects {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||||
}
|
||||
@media (max-width: 900px) { .projects { grid-template-columns: 1fr; } }
|
||||
|
||||
.project-card {
|
||||
background: var(--white); border: 1px solid var(--border);
|
||||
border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
|
||||
display: flex; flex-direction: column;
|
||||
transition: all .25s ease;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
|
||||
}
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
.pc-head {
|
||||
padding: 30px 24px 20px; border-bottom: 1px solid var(--border);
|
||||
display: flex; flex-direction: column; align-items: center; text-align: center;
|
||||
}
|
||||
.pc-icon {
|
||||
width: 56px; height: 56px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
background: var(--blue-light); color: var(--blue-primary);
|
||||
}
|
||||
.pc-icon svg { width: 28px; height: 28px; }
|
||||
.pc-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1e293b; }
|
||||
.pc-head p { font-size: 14px; color: var(--text2); line-height: 1.6; }
|
||||
.pc-body { padding: 20px 24px; flex: 1; background: #fafafa; }
|
||||
.pc-features { list-style: none; font-size: 13.5px; color: var(--text2); line-height: 1.8; }
|
||||
.pc-features li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.pc-features li svg { width: 16px; height: 16px; color: var(--blue-primary); flex-shrink: 0; }
|
||||
.pc-foot {
|
||||
padding: 16px 24px; border-top: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: var(--white);
|
||||
}
|
||||
.pc-link {
|
||||
font-size: 14px; font-weight: 600; color: var(--blue-primary);
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.pc-tag {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: .05em; padding: 4px 10px; border-radius: 6px;
|
||||
background: var(--blue-light); color: var(--blue-primary);
|
||||
}
|
||||
|
||||
.site-foot {
|
||||
text-align: center; padding: 32px 24px; font-size: 14px; color: var(--text3);
|
||||
border-top: 1px solid var(--border); background: var(--white);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="nav-brand">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||||
<circle cx="12" cy="10" r="3"></circle>
|
||||
</svg>
|
||||
WebGIS Pontianak
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="hero-badge">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
||||
Sistem Informasi Geografis
|
||||
</div>
|
||||
<h1>Portal Terpadu WebGIS</h1>
|
||||
<p>Pusat akses untuk aplikasi pemetaan wilayah Pontianak, Kalimantan Barat. Pilih modul di bawah untuk membuka project yang sesuai dengan kebutuhan Anda.</p>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="projects">
|
||||
|
||||
<a class="project-card" href="SIG_spbu/index.php">
|
||||
<div class="pc-head">
|
||||
<div class="pc-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22v-8p2 2 0 0 1 4 0h10a2 2 0 0 1 2 2v4"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg>
|
||||
</div>
|
||||
<h2>Sistem Informasi Geografis SPBU</h2>
|
||||
<p>Pemetaan lokasi Stasiun Pengisian Bahan Bakar Umum beserta status operasional 24 jam.</p>
|
||||
</div>
|
||||
<div class="pc-body">
|
||||
<ul class="pc-features">
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta interaktif titik SPBU</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Filter status buka 24 jam</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Tambah & kelola data depot</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pc-foot">
|
||||
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-card" href="SIG_miskin/gis/login.php">
|
||||
<div class="pc-head">
|
||||
<div class="pc-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||||
</div>
|
||||
<h2>Pemetaan Kemiskinan Terpadu</h2>
|
||||
<p>SIG penduduk miskin dan rumah ibadah untuk perencanaan program binaan.</p>
|
||||
</div>
|
||||
<div class="pc-body">
|
||||
<ul class="pc-features">
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta rumah ibadah & KK miskin</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Analisis radius binaan</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Dashboard super admin</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pc-foot">
|
||||
<span class="pc-link">Masuk ke aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-card" href="SIG2_jalantanah/index.php">
|
||||
<div class="pc-head">
|
||||
<div class="pc-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<h2>Sistem Informasi Infrastruktur Jalan</h2>
|
||||
<p>Pemetaan jalan tanah, kavling tanah, dan titik kerusakan infrastruktur wilayah.</p>
|
||||
</div>
|
||||
<div class="pc-body">
|
||||
<ul class="pc-features">
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Klasifikasi jalan nasional–kab</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Data kavling & status sertifikat</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Input titik jalan rusak</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pc-foot">
|
||||
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-foot">WebGIS Pontianak · Kalimantan Barat · <?= date('Y') ?></footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user