99 lines
5.6 KiB
PHP
99 lines
5.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Login - SARAKATA</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Inter', 'sans-serif'] },
|
|
colors: {
|
|
primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
.glass-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: white; transition: all 0.3s; }
|
|
.glass-input:focus { background: rgba(255,255,255,0.12); border-color: rgba(129,140,248,0.6); box-shadow: 0 0 20px rgba(99,102,241,0.15); outline: none; }
|
|
.glass-input::placeholder { color: rgba(165,180,252,0.5); }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center font-sans antialiased bg-gradient-to-br from-primary-900 via-gray-900 to-gray-900 relative overflow-hidden">
|
|
|
|
{{-- Decorative blobs --}}
|
|
<div class="absolute top-20 -left-20 w-96 h-96 bg-primary-600/20 rounded-full blur-3xl"></div>
|
|
<div class="absolute bottom-20 right-10 w-80 h-80 bg-purple-600/15 rounded-full blur-3xl"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-500/5 rounded-full blur-3xl"></div>
|
|
|
|
<div class="w-full max-w-md relative z-10 px-4">
|
|
{{-- Logo --}}
|
|
<div class="text-center mb-10">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center mx-auto shadow-2xl shadow-primary-500/30 mb-5">
|
|
<i class="fas fa-book-open text-white text-2xl"></i>
|
|
</div>
|
|
<h2 class="text-white text-3xl font-black tracking-tight">Sara<span class="gradient-text">kata</span></h2>
|
|
<p class="text-primary-300/60 text-sm mt-2 font-medium">Sistem Informasi Perpustakaan</p>
|
|
</div>
|
|
|
|
{{-- Login Card --}}
|
|
<div class="bg-white/[0.07] backdrop-blur-xl rounded-3xl p-8 border border-white/10 shadow-2xl">
|
|
<div class="mb-8">
|
|
<h3 class="text-white text-xl font-bold">Masuk ke Dashboard</h3>
|
|
<p class="text-primary-300/50 text-sm mt-1">Masukkan kredensial admin Anda.</p>
|
|
</div>
|
|
|
|
<form action="{{ route('login.admin.process') }}" method="POST" class="space-y-5">
|
|
@csrf
|
|
|
|
<div>
|
|
<label class="block text-primary-200/70 text-xs font-semibold mb-2 uppercase tracking-wider">Email</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i class="fas fa-envelope text-primary-400/40 text-sm"></i>
|
|
</div>
|
|
<input type="email" name="email" value="{{ old('email') }}"
|
|
class="w-full pl-11 pr-4 py-3.5 rounded-xl glass-input text-sm"
|
|
placeholder="admin@example.com" required>
|
|
</div>
|
|
@error('email') <span class="text-red-400 text-xs mt-1.5 block"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-primary-200/70 text-xs font-semibold mb-2 uppercase tracking-wider">Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i class="fas fa-lock text-primary-400/40 text-sm"></i>
|
|
</div>
|
|
<input type="password" name="password"
|
|
class="w-full pl-11 pr-4 py-3.5 rounded-xl glass-input text-sm"
|
|
placeholder="••••••••" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-1">
|
|
<label class="flex items-center text-xs text-primary-200/50 cursor-pointer gap-2">
|
|
<input type="checkbox" name="remember" class="rounded border-primary-400/30 bg-transparent text-primary-500 focus:ring-primary-500"> Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full py-3.5 bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-bold rounded-xl transition-all shadow-xl shadow-primary-500/25 active:scale-[0.98] text-sm tracking-wide">
|
|
<i class="fas fa-sign-in-alt mr-2"></i> Masuk
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="text-center text-primary-400/30 text-xs mt-8 font-medium">© {{ date('Y') }} Sarakata Library System</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|