ocabacaa
321 lines
11 KiB
PHP
321 lines
11 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>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
|
|
background:
|
|
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
|
radial-gradient(circle at top right, #dbeafe 0%, transparent 30%),
|
|
radial-gradient(circle at bottom left, #e0f2fe 0%, transparent 30%),
|
|
#f8fafc;
|
|
|
|
background-size:
|
|
40px 40px,
|
|
40px 40px,
|
|
auto,
|
|
auto,
|
|
auto;
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="min-h-screen">
|
|
|
|
<section class="py-14">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
|
|
<h1 class="text-4xl md:text-5xl font-bold text-slate-800">
|
|
Portal WebGIS Terpadu
|
|
</h1>
|
|
|
|
<p class="mt-4 text-slate-600 text-lg">
|
|
Pilih salah satu aplikasi WebGIS untuk membuka peta interaktif.
|
|
</p>
|
|
|
|
<div class="mt-6 flex justify-center">
|
|
<div class="bg-white px-6 py-3 rounded-2xl shadow border border-slate-200">
|
|
<p class="text-slate-700 font-medium">
|
|
Clara Oxana Azalia
|
|
</p>
|
|
<p class="text-slate-500 text-sm">
|
|
NIM D1041231051
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Hero -->
|
|
<div class="bg-white rounded-3xl shadow-lg p-8 border border-slate-100 mb-10">
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-8">
|
|
|
|
<div class="flex-1">
|
|
|
|
<h2 class="text-2xl font-semibold text-slate-800 mb-3">
|
|
Sistem Informasi Geospasial Terintegrasi
|
|
</h2>
|
|
|
|
<p class="text-slate-600 leading-relaxed">
|
|
Portal WebGIS Terpadu merupakan sistem yang
|
|
mengintegrasikan beberapa aplikasi WebGIS dalam
|
|
satu platform untuk memudahkan akses,
|
|
visualisasi, dan analisis data spasial secara
|
|
interaktif.
|
|
</p>
|
|
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
|
|
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">
|
|
WebGIS
|
|
</span>
|
|
|
|
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm">
|
|
Spatial Analysis
|
|
</span>
|
|
|
|
<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">
|
|
Interactive Mapping
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="text-8xl">
|
|
🌎
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Statistik -->
|
|
<div class="grid md:grid-cols-3 gap-6 mb-12">
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow border border-slate-100 text-center">
|
|
|
|
<h3 class="text-3xl font-bold text-blue-600">
|
|
3
|
|
</h3>
|
|
|
|
<p class="text-slate-600">
|
|
Aplikasi WebGIS
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow border border-slate-100 text-center">
|
|
|
|
<h3 class="text-3xl font-bold text-green-600">
|
|
3
|
|
</h3>
|
|
|
|
<p class="text-slate-600">
|
|
Tema Geospasial
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow border border-slate-100 text-center">
|
|
|
|
<h3 class="text-3xl font-bold text-purple-600">
|
|
1
|
|
</h3>
|
|
|
|
<p class="text-slate-600">
|
|
Portal Terintegrasi
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Cards -->
|
|
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-8">
|
|
|
|
<!-- Parsil -->
|
|
<a href="webgis-parsiltanah/"
|
|
class="card-hover bg-white rounded-3xl shadow-lg p-7 border border-slate-100 hover:border-blue-400 flex flex-col">
|
|
|
|
<div class="text-5xl mb-4">🛣️</div>
|
|
|
|
<span class="inline-block mb-3 bg-blue-100 text-blue-700 text-xs px-3 py-1 rounded-full">
|
|
Spatial Layer
|
|
</span>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-800 mb-2">
|
|
WebGIS Parsil Tanah
|
|
</h3>
|
|
|
|
<p class="text-slate-600">
|
|
Menampilkan data spasial bidang tanah dan informasi
|
|
parsil secara interaktif.
|
|
</p>
|
|
|
|
<div class="mt-auto pt-6 text-blue-600 font-medium">
|
|
Buka Aplikasi →
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<!-- Poverty -->
|
|
<a href="webgis-poverty/"
|
|
class="card-hover bg-white rounded-3xl shadow-lg p-7 border border-slate-100 hover:border-red-400 flex flex-col">
|
|
|
|
<div class="text-5xl mb-4">📊</div>
|
|
|
|
<span class="inline-block mb-3 bg-red-100 text-red-700 text-xs px-3 py-1 rounded-full">
|
|
Choropleth Map
|
|
</span>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-800 mb-2">
|
|
WebGIS Kemiskinan
|
|
</h3>
|
|
|
|
<p class="text-slate-600">
|
|
Visualisasi data kemiskinan wilayah menggunakan
|
|
peta dan statistik spasial.
|
|
</p>
|
|
|
|
<div class="mt-auto pt-6 text-red-600 font-medium">
|
|
Buka Aplikasi →
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<!-- SPBU -->
|
|
<a href="gis-spbu/"
|
|
class="card-hover bg-white rounded-3xl shadow-lg p-7 border border-slate-100 hover:border-green-400 flex flex-col">
|
|
|
|
<div class="text-5xl mb-4">⛽</div>
|
|
|
|
<span class="inline-block mb-3 bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">
|
|
Point Location
|
|
</span>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-800 mb-2">
|
|
WebGIS SPBU
|
|
</h3>
|
|
|
|
<p class="text-slate-600">
|
|
Menampilkan lokasi SPBU beserta informasi dan
|
|
layanan yang tersedia.
|
|
</p>
|
|
|
|
<div class="mt-auto pt-6 text-green-600 font-medium">
|
|
Buka Aplikasi →
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!-- Cara Penggunaan -->
|
|
<div class="mt-16 bg-white rounded-3xl shadow-lg p-8 border border-slate-100">
|
|
|
|
<h2 class="text-2xl font-semibold text-slate-800 mb-6">
|
|
Cara Penggunaan
|
|
</h2>
|
|
|
|
<ol class="space-y-3 text-slate-600">
|
|
|
|
<li>
|
|
<b>1.</b> Pilih aplikasi WebGIS yang ingin digunakan.
|
|
</li>
|
|
|
|
<li>
|
|
<b>2.</b> Klik kartu aplikasi pada halaman utama.
|
|
</li>
|
|
|
|
<li>
|
|
<b>3.</b> Sistem akan membuka halaman peta interaktif.
|
|
</li>
|
|
|
|
<li>
|
|
<b>4.</b> Gunakan fitur zoom dan navigasi peta untuk menjelajahi data.
|
|
</li>
|
|
|
|
<li>
|
|
<b>5.</b> Klik objek peta untuk melihat informasi detail.
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
<!-- Tentang -->
|
|
<div class="mt-12 bg-slate-800 text-white rounded-3xl p-8">
|
|
|
|
<h2 class="text-2xl font-semibold mb-4">
|
|
Tentang Portal
|
|
</h2>
|
|
|
|
<p class="text-slate-300 leading-relaxed">
|
|
Portal WebGIS Terpadu dikembangkan sebagai media
|
|
integrasi berbagai aplikasi WebGIS yang mencakup
|
|
pemetaan lokasi SPBU, data parsil tanah, dan
|
|
visualisasi kemiskinan wilayah. Sistem ini
|
|
dirancang untuk mempermudah pengguna dalam
|
|
mengakses informasi geospasial secara terpusat
|
|
dan interaktif.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<footer class="border-t border-slate-200 py-8">
|
|
|
|
<div class="max-w-7xl mx-auto px-6 text-center">
|
|
|
|
<h3 class="font-semibold text-slate-700">
|
|
Portal WebGIS Terpadu
|
|
</h3>
|
|
|
|
<p class="text-slate-500 mt-2">
|
|
Integrasi Aplikasi WebGIS untuk Visualisasi dan Analisis Data Spasial
|
|
</p>
|
|
|
|
<p class="text-slate-400 text-sm mt-4">
|
|
Clara Oxana Azalia (D1041231051)
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |