GuavaPopper
235 lines
8.9 KiB
PHP
235 lines
8.9 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">
|
|
<title>WebGIS SPBU</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>
|
|
* {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
}
|
|
body {
|
|
font-weight: 500;
|
|
}
|
|
h1, h2, h3, h4, h5, h6, .btn, .card-title, .stat-value {
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
#bgMap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
opacity: 0.5;
|
|
filter: saturate(1.2) brightness(0.7);
|
|
}
|
|
.hero {
|
|
position: relative;
|
|
z-index: 10;
|
|
background: transparent !important;
|
|
}
|
|
/* Glass effect for content */
|
|
.hero-content {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
padding: 3rem;
|
|
border-radius: 2rem;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
[data-theme="dark"] .hero-content {
|
|
background: rgba(15, 23, 42, 0.7);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Custom Leaflet Control Layers Styling */
|
|
.leaflet-control-layers {
|
|
border-radius: 12px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
padding: 8px 12px !important;
|
|
font-family: inherit !important;
|
|
font-weight: 700 !important;
|
|
font-size: 0.85rem !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
.leaflet-control-layers:hover {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25) !important;
|
|
}
|
|
.leaflet-control-layers-list label {
|
|
margin-bottom: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 6px;
|
|
border-radius: 6px;
|
|
font-weight: 600 !important;
|
|
}
|
|
.leaflet-control-layers-list label:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
.leaflet-control-layers-separator {
|
|
margin: 8px 0 !important;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
.leaflet-control-layers-selector {
|
|
accent-color: var(--lg-primary, #EA580C);
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 0 !important;
|
|
}
|
|
</style>
|
|
@include('partials.localguide-theme')
|
|
</head>
|
|
<body class="localguide-shell min-h-screen bg-base-200 flex flex-col items-center justify-center overflow-hidden">
|
|
|
|
<!-- Background Map -->
|
|
<div id="bgMap"></div>
|
|
|
|
<div class="hero min-h-screen">
|
|
<div class="hero-content localguide-hero-panel flex-col items-start gap-3">
|
|
<div class="localguide-kicker">
|
|
<i class="fa-solid fa-location-dot"></i>
|
|
Map-forward SPBU guide
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="text-6xl leading-none">⛽</div>
|
|
<div>
|
|
<h1 class="text-4xl font-bold tracking-tight">WebGIS <span class="localguide-highlight">SPBU</span></h1>
|
|
<span class="badge localguide-yellow-badge mt-2">Pontianak fuel station map</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="max-w-md text-base-content/70 mt-1 mb-2 leading-relaxed">
|
|
Sistem Informasi Geografis untuk pemetaan dan pengelolaan
|
|
titik-titik Stasiun Pengisian Bahan Bakar Umum.
|
|
</p>
|
|
|
|
<div class="localguide-filter-bar" aria-label="Ringkasan kategori SPBU">
|
|
<span class="localguide-filter-chip is-active">
|
|
<i class="fa-solid fa-map"></i> Peta utama
|
|
</span>
|
|
<span class="localguide-filter-chip">
|
|
<i class="fa-solid fa-clock"></i> Buka 24 jam
|
|
</span>
|
|
<span class="localguide-filter-chip">
|
|
<i class="fa-solid fa-table-list"></i> Data lokasi
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<a href="{{ route('spbu.input') }}" class="btn btn-primary btn-lg gap-2">
|
|
<i class="fa-solid fa-map-location-dot"></i>
|
|
Input Data SPBU
|
|
</a>
|
|
<a href="{{ route('spbu.data') }}" class="btn btn-outline btn-lg gap-2">
|
|
<i class="fa-solid fa-table-list"></i>
|
|
Lihat Data & Peta
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Redirect progress -->
|
|
<div class="mt-8 w-72">
|
|
<p class="text-xs text-base-content/50 mb-2">Mengarahkan ke halaman Input dalam 5 detik...</p>
|
|
<progress class="progress progress-primary 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; // Slower for effect (5s)
|
|
bar.value = val;
|
|
if (val >= 100) clearInterval(tick);
|
|
}, 100);
|
|
setTimeout(() => { window.location.href = '{{ route('spbu.input') }}'; }, 5000);
|
|
|
|
// Background Map logic
|
|
const map = L.map('bgMap', {
|
|
zoomControl: false,
|
|
attributionControl: false,
|
|
dragging: false,
|
|
scrollWheelZoom: false,
|
|
doubleClickZoom: false
|
|
}).setView([-0.0606, 109.345], 15);
|
|
|
|
// Satellite Base
|
|
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
// Standard Base (Optional)
|
|
const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19
|
|
});
|
|
|
|
// Layer Groups
|
|
const layer24h = L.layerGroup().addTo(map);
|
|
const layerRegular = L.layerGroup().addTo(map);
|
|
|
|
// Control (visible but subtle)
|
|
L.control.layers({ "Satelit": satellite, "Street": osm },
|
|
{ "Buka 24 Jam": layer24h, "Normal": layerRegular },
|
|
{ position: 'bottomleft' }).addTo(map);
|
|
|
|
// Fetch SPBU points to show on background
|
|
fetch('/api/spbu')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const markers = [];
|
|
data.forEach(spbu => {
|
|
const is24 = spbu.status === 'Buka 24 Jam';
|
|
const group = is24 ? layer24h : layerRegular;
|
|
const color = is24 ? "#EA580C" : "#0D9488";
|
|
|
|
L.circleMarker([+spbu.latitude, +spbu.longitude], {
|
|
radius: 6,
|
|
fillColor: color,
|
|
color: "#fff",
|
|
weight: 2,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
}).addTo(group);
|
|
markers.push([+spbu.latitude, +spbu.longitude]);
|
|
});
|
|
if (markers.length) {
|
|
map.fitBounds(markers, { padding: [50, 50] });
|
|
}
|
|
|
|
// Subtle animation: slow pan
|
|
let lat = map.getCenter().lat;
|
|
setInterval(() => {
|
|
lat += 0.00001;
|
|
map.panTo([lat, map.getCenter().lng], { animate: true, duration: 1 });
|
|
}, 1000);
|
|
})
|
|
.catch(() => {});
|
|
</script>
|
|
</body>
|
|
</html>
|