108 lines
5.0 KiB
PHP
108 lines
5.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Lupa Password | 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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #0B192C 0%, #1A365D 50%, #0A66C2 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased hero-gradient min-h-screen flex items-center justify-center px-4 py-12">
|
|
|
|
<div class="w-full max-w-md">
|
|
|
|
{{-- Logo --}}
|
|
<div class="text-center mb-8">
|
|
{{-- Ganti yang lama dengan ini --}}
|
|
<a href="{{ route('home') }}" class="font-heading font-bold text-2xl text-white hover:opacity-80 transition whitespace-nowrap inline-block">
|
|
<i class="bi bi-droplet-half text-cyan-400 text-3xl align-middle"></i><span class="align-middle">FiFresh</span><span class="text-accent align-middle">Checker</span>
|
|
</a>
|
|
</div>
|
|
|
|
{{-- Card --}}
|
|
<div class="bg-white rounded-3xl shadow-2xl px-8 py-10">
|
|
|
|
{{-- Icon --}}
|
|
<div class="flex justify-center mb-6">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center">
|
|
<i class="bi bi-envelope-check text-primary text-3xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="font-heading text-2xl font-bold text-gray-900 text-center mb-2">Lupa Password?</h2>
|
|
<p class="text-gray-500 text-sm text-center mb-6 leading-relaxed">
|
|
Masukkan email yang terdaftar, lalu kamu bisa langsung membuat password baru.
|
|
</p>
|
|
|
|
{{-- Session Status --}}
|
|
@if (session('status'))
|
|
<div class="mb-5 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
|
|
|
|
<form method="POST" action="{{ route('password.email') }}" class="space-y-5">
|
|
@csrf
|
|
|
|
{{-- Email --}}
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold text-gray-700 mb-1.5">Alamat Email</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
|
<i class="bi bi-envelope"></i>
|
|
</span>
|
|
<input id="email" type="email" name="email" value="{{ old('email') }}"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition @error('email') border-red-400 @enderror"
|
|
placeholder="contoh@email.com" required autofocus>
|
|
</div>
|
|
@error('email')
|
|
<p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Submit --}}
|
|
<button type="submit"
|
|
class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 rounded-xl transition-all hover:shadow-lg text-sm flex items-center justify-center gap-2">
|
|
<i class="bi bi-arrow-right-circle"></i> Lanjutkan
|
|
</button>
|
|
|
|
{{-- Back to login --}}
|
|
<div class="text-center pt-1">
|
|
<a href="{{ route('login') }}" class="text-sm text-gray-500 hover:text-primary transition-colors flex items-center justify-center gap-1.5">
|
|
<i class="bi bi-arrow-left text-xs"></i> Kembali ke halaman masuk
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="text-center text-white/30 text-xs mt-6">© 2026 FiFreshChecker. Tugas Akhir D3 Manajemen Informatika.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |