GuavaPopper
237 lines
8.3 KiB
PHP
237 lines
8.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>WebGIS Pemetaan Kemiskinan</title>
|
|
|
|
<!-- Leaflet -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<!-- DaisyUI + Tailwind -->
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<!-- Plus Jakarta Sans Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
#bgMap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
opacity: 0.78;
|
|
filter: saturate(0.88) brightness(0.96) contrast(0.92);
|
|
}
|
|
.landing-shell {
|
|
position: relative;
|
|
z-index: 10;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
align-items: end;
|
|
padding: 96px 24px 32px;
|
|
}
|
|
.landing-shell::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background:
|
|
linear-gradient(90deg, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.82) 42%, rgba(250, 250, 250, 0.22) 100%),
|
|
linear-gradient(180deg, rgba(250, 250, 250, 0.12) 0%, rgba(250, 250, 250, 0.84) 100%);
|
|
}
|
|
.landing-content {
|
|
max-width: 760px;
|
|
}
|
|
.brand-kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #6b6b6b;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
.brand-mark {
|
|
display: inline-grid;
|
|
width: 32px;
|
|
height: 32px;
|
|
place-items: center;
|
|
border: 1px solid #e8e8ec;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #0a0a0a;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.landing-title {
|
|
max-width: 720px;
|
|
margin-top: 24px;
|
|
color: #0a0a0a;
|
|
font-size: clamp(44px, 7vw, 72px);
|
|
line-height: 0.94;
|
|
}
|
|
.landing-copy {
|
|
max-width: 520px;
|
|
margin-top: 20px;
|
|
color: #6b6b6b;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
}
|
|
.landing-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 32px;
|
|
}
|
|
.landing-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 12px;
|
|
margin-top: 28px;
|
|
color: #6b6b6b;
|
|
font-size: 13px;
|
|
}
|
|
.redirect-strip {
|
|
width: min(420px, 100%);
|
|
margin-top: 40px;
|
|
}
|
|
.progress {
|
|
height: 4px;
|
|
background: #e8e8ec;
|
|
}
|
|
.progress::-webkit-progress-value {
|
|
background: #6366f1;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.landing-shell {
|
|
padding: 80px 20px 28px;
|
|
}
|
|
.landing-title {
|
|
font-size: 44px;
|
|
}
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="{{ asset('css/genesis.css') }}">
|
|
</head>
|
|
<body class="min-h-screen overflow-hidden">
|
|
|
|
<!-- Background Map -->
|
|
<div id="bgMap"></div>
|
|
|
|
<div class="landing-shell">
|
|
<div class="landing-content">
|
|
<div class="brand-kicker">
|
|
<span class="brand-mark">GIS</span>
|
|
Sistem informasi geografis desa
|
|
</div>
|
|
<h1 class="landing-title">Pemetaan kemiskinan berbasis radius layanan.</h1>
|
|
<p class="landing-copy">
|
|
Pantau sebaran keluarga kurang mampu, rumah ibadah, dan celah jangkauan bantuan dalam satu ruang kerja spasial yang ringkas.
|
|
</p>
|
|
|
|
<div class="landing-actions">
|
|
<a href="{{ url('/map') }}" class="btn btn-primary btn-lg gap-2">
|
|
<i class="fa-solid fa-map-location-dot"></i>
|
|
Buka Peta
|
|
</a>
|
|
<a href="{{ url('/data') }}" class="btn btn-outline btn-lg gap-2">
|
|
<i class="fa-solid fa-table-list"></i>
|
|
Lihat Data
|
|
</a>
|
|
</div>
|
|
|
|
<div class="landing-meta">
|
|
<span>{{ auth()->user()->name }}</span>
|
|
<span>/</span>
|
|
<span class="capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? '') }}</span>
|
|
<span>/</span>
|
|
<form method="POST" action="{{ route('logout') }}" class="inline">
|
|
@csrf
|
|
<button type="submit" class="hover:text-error transition-colors underline underline-offset-2">Keluar</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="redirect-strip">
|
|
<p class="text-xs text-base-content/50 mb-2">Mengarahkan ke halaman Peta dalam 5 detik</p>
|
|
<progress class="progress w-full" id="redirectProgress" value="0" max="100"></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Progress bar logic
|
|
let val = 0;
|
|
const bar = document.getElementById('redirectProgress');
|
|
const tick = setInterval(() => {
|
|
val += 100 / 50;
|
|
bar.value = val;
|
|
if (val >= 100) clearInterval(tick);
|
|
}, 100);
|
|
setTimeout(() => { window.location.href = '{{ url('/map') }}'; }, 5000);
|
|
|
|
// Background Map logic
|
|
const map = L.map('bgMap', {
|
|
zoomControl: false,
|
|
attributionControl: false,
|
|
dragging: false,
|
|
scrollWheelZoom: false,
|
|
doubleClickZoom: false
|
|
}).setView([-0.0553, 109.3463], 16);
|
|
|
|
// Satellite Hybrid (Imagery + Labels)
|
|
L.layerGroup([
|
|
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
maxZoom: 19
|
|
}),
|
|
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
|
|
maxZoom: 19
|
|
}),
|
|
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}', {
|
|
maxZoom: 19
|
|
})
|
|
]).addTo(map);
|
|
|
|
// Fetch markers to show on background
|
|
Promise.all([
|
|
fetch('{{ url('/api/ibadah') }}').then(r => r.json()),
|
|
fetch('{{ url('/api/miskin') }}').then(r => r.json())
|
|
]).then(([ibadah, miskin]) => {
|
|
const markers = [];
|
|
|
|
ibadah.forEach(item => {
|
|
L.circleMarker([+item.latitude, +item.longitude], {
|
|
radius: 7, fillColor: "#22c55e", color: "#fff", weight: 2, opacity: 1, fillOpacity: 0.8
|
|
}).addTo(map);
|
|
markers.push([+item.latitude, +item.longitude]);
|
|
});
|
|
|
|
miskin.forEach(item => {
|
|
L.circleMarker([+item.latitude, +item.longitude], {
|
|
radius: 5, fillColor: "#ef4444", color: "#fff", weight: 1, opacity: 1, fillOpacity: 0.7
|
|
}).addTo(map);
|
|
markers.push([+item.latitude, +item.longitude]);
|
|
});
|
|
|
|
if (markers.length) {
|
|
map.fitBounds(markers, { padding: [50, 50] });
|
|
}
|
|
|
|
// Subtle animation: slow pan
|
|
let lat = map.getCenter().lat;
|
|
setInterval(() => {
|
|
lat += 0.000005;
|
|
map.panTo([lat, map.getCenter().lng], { animate: true, duration: 1 });
|
|
}, 1000);
|
|
}).catch(() => {});
|
|
</script>
|
|
</body>
|
|
</html>
|