155 lines
13 KiB
PHP
155 lines
13 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 - Sistem Informasi Geografis</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-800-normal.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', sans-serif; overflow-x: hidden; overflow-y: auto; }
|
|
|
|
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
|
|
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
|
|
@keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
|
|
|
|
.animate-float { animation: float 6s ease-in-out infinite; }
|
|
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
|
|
.animate-fade-in { animation: fadeIn 1.2s ease-out forwards; }
|
|
.animate-gradient { background-size: 200% 200%; animation: gradientShift 8s ease infinite; }
|
|
.animate-pulse-slow { animation: pulse 3s ease-in-out infinite; }
|
|
.animate-slide-left { animation: slideInLeft 0.8s ease-out forwards; }
|
|
.animate-slide-right { animation: slideInRight 0.8s ease-out forwards; }
|
|
.delay-100 { animation-delay: 0.1s; }
|
|
.delay-200 { animation-delay: 0.2s; }
|
|
.delay-300 { animation-delay: 0.3s; }
|
|
.delay-400 { animation-delay: 0.4s; }
|
|
.delay-500 { animation-delay: 0.5s; }
|
|
|
|
.card-hover { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
|
.card-hover:hover { transform: translateY(-12px) scale(1.02); }
|
|
.card-hover:hover .card-glow { opacity: 1; }
|
|
.card-glow { opacity: 0; transition: opacity 0.4s ease; }
|
|
|
|
.glass { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.12); }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen relative" style="background: #0a0a0f;">
|
|
|
|
<div class="fixed inset-0 z-0">
|
|
<div class="absolute inset-0 animate-gradient" style="background: radial-gradient(ellipse at 20% 50%, rgba(20, 184, 166, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%), #0a0a0f;"></div>
|
|
<div class="absolute inset-0" style="background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.03"><circle cx="30" cy="30" r="1"/></g></g></svg>');"></div>
|
|
</div>
|
|
|
|
<div class="fixed top-20 left-10 w-72 h-72 rounded-full blur-3xl animate-pulse-slow pointer-events-none" style="background: rgba(20, 184, 166, 0.1); z-index: 0;"></div>
|
|
<div class="fixed bottom-20 right-10 w-96 h-96 rounded-full blur-3xl animate-pulse-slow pointer-events-none" style="background: rgba(99, 102, 241, 0.1); z-index: 0; animation-delay: 2s;"></div>
|
|
<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full blur-3xl animate-pulse-slow pointer-events-none" style="background: rgba(236, 72, 153, 0.06); z-index: 0; animation-delay: 1s;"></div>
|
|
|
|
<div class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 py-12 md:py-16">
|
|
|
|
<div class="text-center mb-10 md:mb-16 animate-fade-in-up">
|
|
<div class="inline-flex items-center gap-3 mb-6 glass rounded-2xl px-5 py-2.5">
|
|
<svg class="w-5 h-5 text-teal-400" 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>
|
|
<span class="text-xs font-semibold text-teal-300 tracking-widest uppercase">Sistem Informasi Geografis</span>
|
|
</div>
|
|
|
|
<h1 class="text-3xl md:text-5xl lg:text-7xl font-extrabold mb-4 tracking-tight">
|
|
<span class="bg-gradient-to-r from-teal-400 via-indigo-400 to-rose-400 bg-clip-text text-transparent animate-gradient">
|
|
WebGIS Dashboard
|
|
</span>
|
|
</h1>
|
|
<p class="text-base md:text-lg lg:text-xl text-slate-400 max-w-2xl mx-auto animate-fade-in-up delay-100 px-4">
|
|
Platform terintegrasi untuk mengelola data geospasial dan pelaporan jalan rusak
|
|
</p>
|
|
<div class="w-24 h-1 bg-gradient-to-r from-teal-500 to-indigo-500 rounded-full mx-auto mt-6 animate-fade-in-up delay-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 w-full max-w-6xl px-4">
|
|
|
|
<div class="animate-slide-left delay-300">
|
|
<a href="SPBU/" class="card-hover block relative group cursor-pointer">
|
|
<div class="card-glow absolute -inset-1 rounded-3xl opacity-0 transition-opacity duration-400" style="background: linear-gradient(135deg, rgba(20, 184, 166, 0.4), rgba(20, 184, 166, 0.1));"></div>
|
|
<div class="relative glass rounded-3xl p-6 md:p-8 h-full flex flex-col items-center text-center">
|
|
<div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl flex items-center justify-center mb-4 md:mb-6" style="background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0.05));">
|
|
<svg class="w-8 h-8 md:w-10 md:h-10 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
<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"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg md:text-xl font-bold text-white mb-2 md:mb-3">WebGIS SPBU</h3>
|
|
<p class="text-slate-400 text-xs md:text-sm mb-4 md:mb-6 leading-relaxed">Manajemen data SPBU dengan visualisasi peta interaktif</p>
|
|
<div class="mt-auto">
|
|
<span class="inline-flex items-center gap-2 px-4 py-2 md:px-5 md:py-2.5 rounded-xl text-xs md:text-sm font-semibold text-white transition-all hover:shadow-lg" style="background: linear-gradient(135deg, #14b8a6, #0d9488);">
|
|
Buka Aplikasi
|
|
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="animate-fade-in-up delay-400">
|
|
<a href="Layer-Group/" class="card-hover block relative group cursor-pointer">
|
|
<div class="card-glow absolute -inset-1 rounded-3xl opacity-0 transition-opacity duration-400" style="background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(99, 102, 241, 0.1));"></div>
|
|
<div class="relative glass rounded-3xl p-6 md:p-8 h-full flex flex-col items-center text-center">
|
|
<div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl flex items-center justify-center mb-4 md:mb-6" style="background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));">
|
|
<svg class="w-8 h-8 md:w-10 md:h-10 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg md:text-xl font-bold text-white mb-2 md:mb-3">Layer Control</h3>
|
|
<p class="text-slate-400 text-xs md:text-sm mb-4 md:mb-6 leading-relaxed">Kontrol layer peta lengkap dengan berbagai tipe basemap, toggle SPBU 24 jam & terbatas</p>
|
|
<div class="mt-auto">
|
|
<span class="inline-flex items-center gap-2 px-4 py-2 md:px-5 md:py-2.5 rounded-xl text-xs md:text-sm font-semibold text-white transition-all hover:shadow-lg" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
|
|
Buka Aplikasi
|
|
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="animate-slide-right delay-500 md:col-span-2 lg:col-span-1">
|
|
<a href="Jalan-Rusak/" class="card-hover block relative group cursor-pointer">
|
|
<div class="card-glow absolute -inset-1 rounded-3xl opacity-0 transition-opacity duration-400" style="background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(236, 72, 153, 0.1));"></div>
|
|
<div class="relative glass rounded-3xl p-6 md:p-8 h-full flex flex-col items-center text-center">
|
|
<div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl flex items-center justify-center mb-4 md:mb-6" style="background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05));">
|
|
<svg class="w-8 h-8 md:w-10 md:h-10 text-rose-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2 17l10 5 10-5"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg md:text-xl font-bold text-white mb-2 md:mb-3">Jalan Rusak</h3>
|
|
<p class="text-slate-400 text-xs md:text-sm mb-4 md:mb-6 leading-relaxed">Manajemen data SPBU, jalan, dan parsil tanah serta pelaporan jalan rusak</p>
|
|
<div class="mt-auto">
|
|
<span class="inline-flex items-center gap-2 px-4 py-2 md:px-5 md:py-2.5 rounded-xl text-xs md:text-sm font-semibold text-white transition-all hover:shadow-lg" style="background: linear-gradient(135deg, #ec4899, #be185d);">
|
|
Buka Aplikasi
|
|
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 md:mt-16 text-center animate-fade-in-up delay-500 px-4">
|
|
<p class="text-[10px] md:text-xs text-slate-600 mt-4">© 2026 WebGIS Dashboard - Sistem Informasi Geografis Terintegrasi</p>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |