136 lines
7.5 KiB
PHP
136 lines
7.5 KiB
PHP
<!DOCTYPE html>
|
|
<html class="light" lang="id">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Login - Laundry System</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link href="https://fonts.material.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#13a4ec",
|
|
"background-light": "#f6f7f8",
|
|
"background-dark": "#101c22",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col font-display">
|
|
|
|
<main class="flex-1 flex flex-col items-center justify-center p-2 sm:p-12 relative h-screen overflow-hidden">
|
|
<div class="absolute inset-0 z-0 opacity-10 pointer-events-none overflow-hidden">
|
|
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary rounded-full blur-3xl"></div>
|
|
<div class="absolute -bottom-24 -right-24 w-96 h-96 bg-primary rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<div class="z-10 w-full max-w-[400px] sm:max-w-[480px] bg-white dark:bg-[#1a262e] rounded-xl shadow-xl border border-gray-100 dark:border-gray-800 p-3 sm:p-8">
|
|
<div class="mb-2 sm:mb-6">
|
|
<h1 class="text-[#111618] dark:text-white tracking-tight text-lg sm:text-[32px] font-bold leading-tight text-center pb-0 sm:pb-1">Login</h1>
|
|
<p class="text-[#617c89] dark:text-gray-400 text-[9px] sm:text-sm font-normal leading-tight text-center mt-0.5 sm:mt-0">Kelola pesanan, layanan, dan laporan Anda dengan efisien.</p>
|
|
</div>
|
|
|
|
@if (session('status'))
|
|
<div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400 text-center">
|
|
{{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('login') }}" class="flex flex-col gap-1.5 sm:gap-4">
|
|
@csrf
|
|
|
|
<div class="flex flex-col gap-0.5 sm:gap-2">
|
|
<label class="text-[#111618] dark:text-gray-200 text-[10px] sm:text-sm font-medium leading-none">Alamat Email</label>
|
|
<input name="email" value="{{ old('email') }}" required autofocus
|
|
class="w-full rounded-lg text-[#111618] dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-[#dbe2e6] dark:border-gray-700 bg-white dark:bg-background-dark focus:border-primary h-8 sm:h-12 placeholder:text-[#617c89] px-2 py-1 text-[10px] sm:text-sm font-normal leading-normal"
|
|
placeholder="email@gmail.com" type="email" />
|
|
@error('email')
|
|
<p class="text-red-500 text-[9px] sm:text-xs mt-0.5">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-0.5 sm:gap-2">
|
|
<label class="text-[#111618] dark:text-gray-200 text-[10px] sm:text-sm font-medium leading-none">Kata Sandi</label>
|
|
<div class="flex w-full items-stretch rounded-lg group">
|
|
<input name="password" id="password" required
|
|
class="w-full rounded-l-lg text-[#111618] dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-[#dbe2e6] dark:border-gray-700 bg-white dark:bg-background-dark focus:border-primary h-8 sm:h-12 placeholder:text-[#617c89] px-2 py-1 border-r-0 pr-2 text-[10px] sm:text-sm font-normal leading-normal"
|
|
placeholder="Kata sandi" type="password" />
|
|
|
|
<div id="togglePassword" class="text-[#617c89] flex border border-[#dbe2e6] dark:border-gray-700 bg-white dark:bg-background-dark items-center justify-center pr-2 rounded-r-lg border-l-0 cursor-pointer hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-[14px] sm:text-lg" id="eyeIcon">visibility</span>
|
|
</div>
|
|
</div>
|
|
@error('password')
|
|
<p class="text-red-500 text-[9px] sm:text-xs mt-0.5">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between py-0">
|
|
<label class="flex items-center gap-1 sm:gap-2 cursor-pointer">
|
|
<input name="remember" id="remember_me" type="checkbox"
|
|
class="rounded text-primary focus:ring-primary border-gray-300 dark:border-gray-700 bg-white dark:bg-background-dark w-2.5 h-2.5 sm:w-4 sm:h-4" />
|
|
<span class="text-[9px] sm:text-sm text-[#617c89] dark:text-gray-400 font-normal">Ingat Saya</span>
|
|
</label>
|
|
|
|
@if (Route::has('password.request'))
|
|
<a class="text-[9px] sm:text-sm text-primary font-semibold hover:underline" href="{{ route('password.request') }}">Lupa Kata Sandi?</a>
|
|
@endif
|
|
</div>
|
|
|
|
<button type="submit" class="w-full flex items-center justify-center rounded-lg h-8 sm:h-12 bg-primary text-white text-[11px] sm:text-base font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 transition-all shadow-md active:scale-[0.98]">
|
|
Masuk
|
|
</button>
|
|
|
|
<div class="mt-0.5 sm:mt-2 text-center border-t border-gray-100 dark:border-gray-800 pt-1.5 sm:pt-4">
|
|
<p class="text-[9px] sm:text-sm text-[#617c89] dark:text-gray-400">
|
|
Belum punya akun?
|
|
<a href="{{ route('register') }}" class="text-primary font-bold hover:underline italic">
|
|
Daftar Sekarang
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const togglePassword = document.querySelector('#togglePassword');
|
|
const password = document.querySelector('#password');
|
|
const eyeIcon = document.querySelector('#eyeIcon');
|
|
|
|
togglePassword.addEventListener('click', function(e) {
|
|
// Toggle tipe input
|
|
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
password.setAttribute('type', type);
|
|
|
|
// Toggle ikon (visibility vs visibility_off)
|
|
eyeIcon.textContent = type === 'password' ? 'visibility' : 'visibility_off';
|
|
});
|
|
|
|
// Mencegah akses kembali ke halaman login dari cache saat pengguna sudah login
|
|
window.addEventListener('pageshow', function(event) {
|
|
if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |