GuavaPopper
153 lines
6.2 KiB
PHP
153 lines
6.2 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>Login - 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.62;
|
|
filter: saturate(0.82) brightness(0.96) contrast(0.9);
|
|
}
|
|
.login-container {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.login-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1;
|
|
background:
|
|
linear-gradient(90deg, rgba(250, 250, 250, 0.96) 0%, rgba(250, 250, 250, 0.86) 45%, rgba(250, 250, 250, 0.38) 100%),
|
|
linear-gradient(180deg, rgba(250, 250, 250, 0.2) 0%, rgba(250, 250, 250, 0.88) 100%);
|
|
}
|
|
.login-card {
|
|
background: #fff;
|
|
border: 1px solid #e8e8ec;
|
|
border-radius: 8px;
|
|
padding: 32px;
|
|
}
|
|
.login-mark {
|
|
display: inline-grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border: 1px solid #e8e8ec;
|
|
border-radius: 8px;
|
|
color: #0a0a0a;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="{{ asset('css/genesis.css') }}">
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center overflow-hidden p-4">
|
|
|
|
<!-- Background Map -->
|
|
<div id="bgMap"></div>
|
|
<div class="login-backdrop"></div>
|
|
|
|
<div class="login-container w-full max-w-sm">
|
|
<div class="login-card">
|
|
|
|
<div class="text-center mb-7">
|
|
<div class="login-mark mx-auto mb-4">GIS</div>
|
|
<p class="genesis-overline mb-2">Akses operator</p>
|
|
<h1 class="text-2xl font-bold leading-tight">WebGIS Pemetaan Kemiskinan</h1>
|
|
<p class="text-sm text-base-content/50 mt-2">Masuk untuk mengelola data spasial dan tabular.</p>
|
|
</div>
|
|
|
|
@if($errors->any())
|
|
<div class="alert alert-error mb-5 py-2.5 text-sm">
|
|
<i class="fa-solid fa-circle-exclamation shrink-0"></i>
|
|
<span>{{ $errors->first() }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('status'))
|
|
<div class="alert alert-success mb-5 py-2.5 text-sm">
|
|
<i class="fa-solid fa-circle-check shrink-0"></i>
|
|
<span>{{ session('status') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('login') }}" class="flex flex-col gap-4">
|
|
@csrf
|
|
|
|
<div class="form-control">
|
|
<label class="label py-1"><span class="label-text font-semibold text-sm">Email</span></label>
|
|
<input type="email" name="email" value="{{ old('email') }}"
|
|
placeholder="email@contoh.com"
|
|
class="input input-bordered w-full @error('email') input-error @enderror"
|
|
required autofocus autocomplete="username">
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label py-1"><span class="label-text font-semibold text-sm">Password</span></label>
|
|
<input type="password" name="password"
|
|
placeholder="••••••••"
|
|
class="input input-bordered w-full"
|
|
required autocomplete="current-password">
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<input type="checkbox" name="remember" id="remember" class="checkbox checkbox-primary checkbox-sm">
|
|
<label for="remember" class="text-sm cursor-pointer select-none">Ingat saya</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-full mt-2 gap-2">
|
|
<i class="fa-solid fa-right-to-bracket"></i>
|
|
Masuk
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="text-center text-xs text-base-content/30 mt-5">
|
|
WebGIS Pemetaan Kemiskinan © {{ date('Y') }}
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
const map = L.map('bgMap', {
|
|
zoomControl: false,
|
|
attributionControl: false,
|
|
dragging: false,
|
|
scrollWheelZoom: false,
|
|
doubleClickZoom: false
|
|
}).setView([-0.0553, 109.3463], 16);
|
|
|
|
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);
|
|
|
|
// Subtle animation: slow pan
|
|
let lat = map.getCenter().lat;
|
|
setInterval(() => {
|
|
lat += 0.000005;
|
|
map.panTo([lat, map.getCenter().lng], { animate: true, duration: 1 });
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|