152 lines
7.8 KiB
PHP
152 lines
7.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SLHD | Dinas Lingkungan Hidup</title>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo3.png')}}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo3.png')}}">
|
|
<!-- Tailwind CSS CDN -->
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="{{ asset('assets/js/tailwind.js') }}"></script>
|
|
<!-- Google Fonts -->
|
|
<link href="{{ asset('assets/css/font.css') }}" rel="stylesheet">
|
|
<!-- Lucide Icons -->
|
|
<script src="{{ asset('assets/js/lucide.js') }}"></script>
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.login-gradient {
|
|
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
|
|
}
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-4">
|
|
|
|
<!-- Login Container -->
|
|
<div class="max-w-5xl w-full bg-white rounded-[2rem] shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[600px]">
|
|
|
|
<!-- Left Side: Illustration & Branding -->
|
|
<div class="md:w-1/2 login-gradient p-12 text-white flex flex-col justify-between relative overflow-hidden">
|
|
<!-- Decorative Circles -->
|
|
<div class="absolute -top-20 -left-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
|
|
<div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-400/20 rounded-full blur-3xl"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="flex items-center space-x-3 mb-0 md:mb-12">
|
|
<div class="bg-white p-2 rounded-xl text-blue-600">
|
|
<img src="{{asset('assets/logo3.png')}}" width="40" alt="">
|
|
</div>
|
|
<div>
|
|
<h1 class="font-bold text-2xl tracking-tight leading-none uppercase text-white mb-2">SLHD</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-blue-100 font-bold">Status Lingkungan Hidup Daerah</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="hidden md:block text-4xl font-extrabold leading-tight mb-6">Kelola Data Lingkungan Secara Terintegrasi</h2>
|
|
<p class="hidden md:block text-blue-100 text-lg leading-relaxed mb-8">Selamat datang kembali di Portal Internal SLHD. Silakan masuk untuk mengakses dasbor pengelolaan data lingkungan hidup.</p>
|
|
</div>
|
|
|
|
<!-- Stats/Glass Card -->
|
|
<div class="hidden md:block relative z-10 glass-effect p-6 rounded-2xl">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="bg-white/20 p-3 rounded-full">
|
|
<i data-lucide="shield-check" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-wider text-blue-100">Keamanan Terjamin</p>
|
|
<p class="text-sm">Enkripsi data dua arah untuk setiap sesi login pengguna.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: Login Form -->
|
|
<div class="md:w-1/2 p-8 md:p-16 flex flex-col justify-center">
|
|
<div class="mb-10">
|
|
<h3 class="text-3xl font-bold text-slate-900 mb-2">Login Portal</h3>
|
|
<p class="text-slate-500 font-medium">Masukkan kredensial Anda untuk melanjutkan.</p>
|
|
</div>
|
|
|
|
<form action="{{ url('login') }}" method="POST" id="login-form" class="space-y-6">
|
|
{{ csrf_field() }}
|
|
<!-- Username -->
|
|
<div class="space-y-2">
|
|
<label for="username" class="text-sm font-bold text-slate-700 ml-1">Nama Pengguna / Email</label>
|
|
<div class="relative">
|
|
<i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
|
|
<input type="text" id="username" name="email" placeholder="contoh: admin_dlh"
|
|
class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center px-1">
|
|
<label for="password" class="text-sm font-bold text-slate-700">Kata Sandi</label>
|
|
{{-- <a href="#" class="text-x s font-bold text-blue-600 hover:text-blue-700 transition-colors">Lupa Password?</a> --}}
|
|
</div>
|
|
<div class="relative">
|
|
<i data-lucide="lock" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
|
|
<input type="password" id="password" name="password" placeholder="••••••••"
|
|
class="w-full pl-12 pr-12 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
|
|
<button type="button" id="togglePassword" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
|
|
<i data-lucide="eye" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button class="btnlogin w-full bg-blue-600 text-white py-4 rounded-2xl font-bold text-lg hover:bg-blue-700 transform hover:-translate-y-0.5 transition-all shadow-xl shadow-blue-200 flex items-center justify-center group">
|
|
Masuk Sekarang
|
|
<i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Bottom Link -->
|
|
<div class="mt-auto pt-12 flex justify-center">
|
|
<a href="{{ url('/') }}" class="flex items-center text-xs font-bold text-slate-400 hover:text-blue-600 transition-colors">
|
|
<i data-lucide="chevron-left" class="w-4 h-4 mr-1"></i> Kembali ke Beranda
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery CDN -->
|
|
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
lucide.createIcons();
|
|
|
|
// Simple Form Handling
|
|
$('.btnlogin').on('click', function(e) {
|
|
// e.preventDefault();
|
|
const btn = $(this);
|
|
const originalText = btn.html();
|
|
|
|
// Show loading state
|
|
btn.addClass('opacity-70').html('<i data-lucide="refresh-cw" class="w-5 h-5 animate-spin"></i>');
|
|
lucide.createIcons();
|
|
});
|
|
});
|
|
$('#togglePassword').on('click', function() {
|
|
let passwordField = $('#password');
|
|
let icon = $(this).find('i');
|
|
|
|
// Cek apakah input saat ini bertipe password
|
|
if (passwordField.attr('type') === 'password') {
|
|
passwordField.attr('type', 'text'); // Ubah ke teks
|
|
icon.attr('data-lucide', 'eye-off');
|
|
} else {
|
|
passwordField.attr('type', 'password'); // Ubah ke password
|
|
icon.attr('data-lucide', 'eye');
|
|
}
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |