87 lines
4.5 KiB
PHP
87 lines
4.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lupa Password - Perpustakaan Digital</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: 'Poppins', sans-serif; background-color: #f3f4f6; }
|
|
@keyframes float-icon {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
|
|
50% { transform: translateY(-10px) rotate(5deg); opacity: 0.2; }
|
|
}
|
|
.bg-icon { animation: float-icon 5s ease-in-out infinite; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-screen flex items-center justify-center p-4">
|
|
|
|
<div class="w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row relative">
|
|
|
|
<div class="w-full md:w-1/2 p-8 flex flex-col justify-between relative z-10 order-2 md:order-1">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold text-sm">P</div>
|
|
<span class="font-bold text-gray-800 text-lg">Perpustakaan</span>
|
|
</div>
|
|
|
|
<div class="py-4">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">Lupa Password?</h2>
|
|
<p class="text-sm text-gray-500 leading-relaxed">
|
|
Jangan khawatir. Cukup masukkan alamat email Anda dan kami akan mengirimkan tautan untuk mereset kata sandi Anda.
|
|
</p>
|
|
</div>
|
|
|
|
<a href="{{ route('login') }}" class="flex items-center text-xs text-gray-500 hover:text-blue-600 transition mt-4">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
|
|
Kembali ke Login
|
|
</a>
|
|
</div>
|
|
|
|
<div class="w-full md:w-1/2 bg-gradient-to-br from-blue-700 to-blue-900 relative p-8 flex flex-col justify-center order-1 md:order-2">
|
|
|
|
<div class="absolute top-0 bottom-0 -left-1 hidden md:block w-12 h-full">
|
|
<svg class="h-full w-full text-white fill-current" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<path d="M0 0 L0 100 Q 100 50 0 0 Z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<svg class="bg-icon absolute top-8 right-8 w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3 3.1-3 1.71 0 3.1 1.29 3.1 3v2z"/></svg>
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<h3 class="text-xl font-bold text-white text-center mb-6">Reset Password</h3>
|
|
|
|
@if (session('status'))
|
|
<div class="mb-4 bg-green-500/20 border border-green-500/50 text-white text-xs p-2.5 rounded-lg text-center backdrop-blur-sm">
|
|
{{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="mb-4 bg-red-500/20 border border-red-500/50 text-white text-xs p-2.5 rounded-lg text-center backdrop-blur-sm">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('password.email') }}" class="space-y-4">
|
|
@csrf
|
|
|
|
<div class="relative group">
|
|
<input type="email" name="email" required placeholder="Masukkan Email Terdaftar"
|
|
class="w-full px-4 py-3 text-sm bg-white/10 border border-white/20 rounded-lg text-white placeholder-blue-100/60 focus:outline-none focus:bg-white/20 focus:border-white transition backdrop-blur-sm shadow-sm">
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full py-3 bg-emerald-500 hover:bg-emerald-400 text-white font-semibold rounded-lg shadow-lg transform active:scale-95 transition-all duration-200 text-sm tracking-wide mt-2">
|
|
KIRIM LINK RESET
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|