164 lines
7.3 KiB
PHP
164 lines
7.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Login | FiFreshChecker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
heading: ['Poppins', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
primary: '#0A66C2',
|
|
'primary-dark': '#004182',
|
|
accent: '#00C4CC',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<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=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="font-sans text-gray-800 antialiased selection:bg-primary/20 bg-gradient-to-br from-[#0B192C] via-[#1A365D] to-primary-dark min-h-screen flex items-center justify-center relative overflow-hidden">
|
|
|
|
<div class="absolute inset-0 opacity-5" style="background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); z-index: 0;"></div>
|
|
|
|
<div class="w-full max-w-md bg-white rounded-[24px] shadow-2xl p-8 sm:p-10 relative z-10 mx-4 border border-white/20">
|
|
|
|
<div class="text-center mb-8">
|
|
<a href="{{ route('home') }}" class="inline-flex items-center justify-center mb-4">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
|
<i class="bi bi-droplet-half text-cyan-500 text-2xl"></i>
|
|
</div>
|
|
</a>
|
|
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 font-heading mb-2">
|
|
Selamat Datang Kembali
|
|
</h2>
|
|
<p class="text-gray-500 text-sm sm:text-base">
|
|
Masuk untuk menyimpan & melihat riwayat klasifikasi ikan kamu.
|
|
</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('login') }}" class="space-y-5">
|
|
@csrf
|
|
|
|
{{-- Notif error login --}}
|
|
@if ($errors->any())
|
|
<div class="flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl px-4 py-3">
|
|
<i class="bi bi-exclamation-circle-fill text-red-500 mt-0.5 flex-shrink-0"></i>
|
|
<p class="text-sm text-red-600 font-medium">
|
|
Email atau kata sandi yang kamu masukkan salah.
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Session status --}}
|
|
@if (session('status'))
|
|
<div class="flex items-start gap-3 bg-green-50 border border-green-200 rounded-xl px-4 py-3">
|
|
<i class="bi bi-check-circle-fill text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<p class="text-sm text-green-700 font-medium">{{ session('status') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- EMAIL --}}
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Alamat Email
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
|
<i class="bi bi-envelope text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
value="{{ old('email') }}"
|
|
required
|
|
placeholder="contoh@email.com"
|
|
class="w-full border border-gray-300 rounded-xl pl-10 pr-4 py-3 text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-colors @error('email') border-red-400 @enderror"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- PASSWORD --}}
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Kata Sandi
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
|
<i class="bi bi-lock text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="password"
|
|
required
|
|
placeholder="••••••••"
|
|
class="w-full border border-gray-300 rounded-xl pl-10 pr-12 py-3 text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-colors"
|
|
>
|
|
<button type="button" onclick="togglePassword('password', 'icon-password')"
|
|
class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-primary transition-colors">
|
|
<i id="icon-password" class="bi bi-eye text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<input id="remember-me" name="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded cursor-pointer">
|
|
<label for="remember-me" class="ml-2 block text-sm text-gray-600 cursor-pointer">
|
|
Ingat saya
|
|
</label>
|
|
</div>
|
|
<div class="text-sm">
|
|
<a href="{{ route('password.request') }}" class="font-medium text-primary hover:text-primary-dark transition-colors">
|
|
Lupa sandi?
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-primary hover:bg-primary-dark text-white font-semibold py-3 px-4 rounded-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_20px_rgba(10,102,194,0.25)]"
|
|
>
|
|
Masuk Sekarang
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<div class="text-center mt-6 text-sm text-gray-600">
|
|
Belum memiliki akun?
|
|
<a href="{{ route('register') }}" class="font-semibold text-primary hover:text-primary-dark transition-colors hover:underline">
|
|
Daftar di sini
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |