From f609c1efa77d012a44f76bc3464c8a7fdf493663 Mon Sep 17 00:00:00 2001
From: GuavaPopper <radityaindraputranto@gmail.com>
Date: Tue, 2 Jun 2026 19:28:26 +0700
Subject: [PATCH] feat: add custom login view with map background

---
 resources/views/auth/login.blade.php | 136 +++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 resources/views/auth/login.blade.php
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
new file mode 100644
index 0000000..dd3fa32
--- /dev/null
+++ b/resources/views/auth/login.blade.php
@@ -0,0 +1,136 @@
+<!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>
+        * { 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);
+        }
+        .login-container {
+            position: relative;
+            z-index: 10;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.92);
+            backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-base-200 flex items-center justify-center overflow-hidden p-4">
+
+    <!-- Background Map -->
+    <div id="bgMap"></div>
+
+    <div class="login-container w-full max-w-sm">
+        <div class="glass-card rounded-3xl p-8">
+
+            <div class="text-center mb-7">
+                <div class="text-5xl mb-3">🏘️</div>
+                <h1 class="text-xl font-bold text-primary leading-tight">WebGIS Pemetaan Kemiskinan</h1>
+                <p class="text-sm text-base-content/50 mt-1">Masuk ke akun Anda untuk melanjutkan</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 &copy; {{ 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>
