69 lines
5.2 KiB
PHP
69 lines
5.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 Dashboard - Johanes Satria Christio</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-900 text-white min-h-screen flex flex-col justify-between">
|
|
|
|
<header class="text-center pt-16 px-4">
|
|
<span class="text-teal-400 text-xs font-bold tracking-widest uppercase bg-teal-400/10 px-4 py-1.5 rounded-full">Tugas Mandiri SIG Kelas B</span>
|
|
<h1 class="text-4xl md:text-5xl font-extrabold mt-4 tracking-tight">
|
|
WebGIS <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-indigo-400">Dashboard</span>
|
|
</h1>
|
|
<p class="text-slate-400 mt-2 max-w-md mx-auto text-sm md:text-base">
|
|
Kumpulan berkas proyek Sistem Informasi Geografis terintegrasi milik Johanes Satria Christio.
|
|
</p>
|
|
</header>
|
|
|
|
<main class="max-w-5xl w-full mx-auto px-6 my-12">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<div class="bg-slate-800/50 border border-slate-700/50 p-6 rounded-3xl flex flex-col justify-between hover:border-teal-500/50 transition-all duration-300 shadow-xl group">
|
|
<div>
|
|
<div class="w-12 h-12 bg-teal-500/10 rounded-2xl flex items-center justify-center text-teal-400 mb-4 group-hover:bg-teal-500 group-hover:text-slate-950 transition-all duration-300">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">WebGIS SPBU</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">Manajemen spasial titik objek (Point) lokasi SPBU Kota Pontianak lengkap dengan kontrol Layer Groups.</p>
|
|
</div>
|
|
<a href="Projek SPBU 24 JAM/" class="mt-6 inline-flex items-center justify-center bg-teal-500 text-slate-950 text-sm font-semibold py-2.5 px-4 rounded-xl hover:bg-teal-400 transition-all text-center">Buka Aplikasi</a>
|
|
</div>
|
|
|
|
<div class="bg-slate-800/50 border border-slate-700/50 p-6 rounded-3xl flex flex-col justify-between hover:border-indigo-500/50 transition-all duration-300 shadow-xl group">
|
|
<div>
|
|
<div class="w-12 h-12 bg-indigo-500/10 rounded-2xl flex items-center justify-center text-indigo-400 mb-4 group-hover:bg-indigo-500 group-hover:text-slate-950 transition-all duration-300">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 4L9 7"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Manajemen Jalan</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">Manajemen data garis (Line/Polyline) infrastruktur jalan dengan klasifikasi warna status dan hitung panjang otomatis.</p>
|
|
</div>
|
|
<a href="Projek Jalan/" class="mt-6 inline-flex items-center justify-center bg-indigo-500 text-white text-sm font-semibold py-2.5 px-4 rounded-xl hover:bg-indigo-400 transition-all text-center">Buka Aplikasi</a>
|
|
</div>
|
|
|
|
<div class="bg-slate-800/50 border border-slate-700/50 p-6 rounded-3xl flex flex-col justify-between hover:border-rose-500/50 transition-all duration-300 shadow-xl group">
|
|
<div>
|
|
<div class="w-12 h-12 bg-rose-500/10 rounded-2xl flex items-center justify-center text-rose-400 mb-4 group-hover:bg-rose-500 group-hover:text-slate-950 transition-all duration-300">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Parsil Tanah</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">Manajemen area bidang (Polygon) kepemilikan kavling tanah menggunakan fungsi kalkulasi luas Shoelace formula.</p>
|
|
</div>
|
|
<a href="Projek Tanah/manajemen_parsil/" class="mt-6 inline-flex items-center justify-center bg-rose-500 text-white text-sm font-semibold py-2.5 px-4 rounded-xl hover:bg-rose-400 transition-all text-center">Buka Aplikasi</a>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="text-center pb-8 text-xs text-slate-600">
|
|
© 2026 WebGIS Dashboard - Johanes Satria Christio (D1041231076)
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |