Dwi F Sukmana
110 lines
7.2 KiB
PHP
110 lines
7.2 KiB
PHP
<x-guest-layout>
|
|
{{-- Title Browser Dinamis --}}
|
|
<x-slot name="title">Masuk | {{ $setting->app_name ?? config('app.name') }}</x-slot>
|
|
|
|
<div class="min-h-screen flex bg-white overflow-hidden">
|
|
|
|
{{-- SISI KIRI: BRANDING (Optimasi Proporsi) --}}
|
|
<div class="hidden lg:flex lg:w-[35%] relative bg-slate-900 justify-center items-center p-8">
|
|
<div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop');"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 opacity-95"></div>
|
|
|
|
<div class="relative z-10 text-center w-full max-w-xs">
|
|
{{-- Logo: Dibuat lebih proporsional --}}
|
|
<div class="inline-flex p-4 mb-6 bg-white/5 backdrop-blur-xl rounded-[2rem] border border-white/10 shadow-2xl">
|
|
@if(isset($setting) && isset($setting->app_logo))
|
|
<img src="{{ asset('storage/' . $setting->app_logo) }}"
|
|
alt="Logo"
|
|
class="h-20 w-auto max-w-[150px] object-contain filter drop-shadow-2xl">
|
|
@else
|
|
<div class="w-20 h-20 bg-indigo-600 rounded-2xl flex items-center justify-center text-3xl font-black text-white italic">I</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Nama Aplikasi: Tidak oversized --}}
|
|
<h2 class="text-2xl xl:text-3xl font-black text-white tracking-tight mb-2 break-words">
|
|
{{ $setting->app_name ?? 'Ily Cattery' }}
|
|
</h2>
|
|
|
|
{{-- Slogan: Lebih ramping --}}
|
|
<p class="text-indigo-300 text-[10px] font-bold uppercase tracking-[0.2em] leading-relaxed italic opacity-80">
|
|
{{ $setting->app_slogan ?? 'Professional Cattery Management' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SISI KANAN: FORM LOGIN (Dibuat Lebih Center & Proporsional) --}}
|
|
<div class="flex-1 flex items-center justify-center p-6 sm:p-12 lg:p-16 bg-slate-50/50">
|
|
{{-- max-w-md: Lebar standar form agar tidak terlihat meluber --}}
|
|
<div class="w-full max-w-md space-y-8">
|
|
|
|
<div class="space-y-2 text-center lg:text-left">
|
|
{{-- Logo Mobile: Center di layar kecil --}}
|
|
<div class="lg:hidden flex justify-center">
|
|
@if(isset($setting) && isset($setting->app_logo))
|
|
<img src="{{ asset('storage/' . $setting->app_logo) }}" class="h-14 w-auto mb-6">
|
|
@endif
|
|
</div>
|
|
<h3 class="text-2xl lg:text-3xl font-black text-slate-900 tracking-tight">Selamat Datang.</h3>
|
|
<p class="text-slate-500 font-medium text-sm lg:text-base">Silakan masuk untuk mengelola cattery Anda.</p>
|
|
</div>
|
|
|
|
<x-auth-session-status class="mb-4" :status="session('status')" />
|
|
|
|
<form method="POST" action="{{ route('login') }}" class="space-y-6">
|
|
@csrf
|
|
|
|
{{-- Email Input --}}
|
|
<div class="group">
|
|
<label for="email" class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Email / ID Pengguna</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
|
<i class="fas fa-envelope text-slate-300 group-focus-within:text-indigo-600 transition-colors"></i>
|
|
</div>
|
|
<input id="email"
|
|
class="block w-full pl-12 pr-4 py-4 bg-white border border-slate-100 rounded-2xl text-slate-900 text-sm font-semibold shadow-sm focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all placeholder:text-slate-300"
|
|
type="email" name="email" :value="old('email')" required autofocus placeholder="nama@cattery.com" />
|
|
</div>
|
|
<x-input-error :messages="$errors->get('email')" class="mt-1" />
|
|
</div>
|
|
|
|
{{-- Password Input --}}
|
|
<div class="group">
|
|
<div class="flex items-center justify-between mb-2 px-1">
|
|
<label for="password" class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Kata Sandi</label>
|
|
@if (Route::has('password.request'))
|
|
<!-- <a class="text-[10px] font-bold text-indigo-600 hover:text-indigo-800 italic transition-colors" href="{{ route('password.request') }}">Lupa?</a> -->
|
|
@endif
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
|
<i class="fas fa-lock text-slate-300 group-focus-within:text-indigo-600 transition-colors"></i>
|
|
</div>
|
|
<input id="password"
|
|
class="block w-full pl-12 pr-4 py-4 bg-white border border-slate-100 rounded-2xl text-slate-900 text-sm font-semibold shadow-sm focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all placeholder:text-slate-300"
|
|
type="password" name="password" required placeholder="••••••••" />
|
|
</div>
|
|
<x-input-error :messages="$errors->get('password')" class="mt-1" />
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-1">
|
|
<label for="remember_me" class="inline-flex items-center cursor-pointer group">
|
|
<input id="remember_me" type="checkbox" class="w-5 h-5 rounded border-slate-200 text-indigo-600 shadow-sm focus:ring-indigo-500/20 cursor-pointer" name="remember">
|
|
<span class="ml-3 text-xs font-bold text-slate-500 group-hover:text-slate-800 transition-colors">Ingat sesi</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full flex justify-center py-4 px-4 rounded-2xl shadow-xl shadow-indigo-600/20 text-sm font-black text-white bg-slate-900 hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500/20 transition-all duration-300 hover:translate-y-[-1px] uppercase tracking-widest">
|
|
Masuk Sistem
|
|
</button>
|
|
</form>
|
|
|
|
<div class="pt-6 text-center">
|
|
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest italic opacity-50">
|
|
© {{ date('Y') }} {{ $setting->app_name ?? 'ILY CATTERY' }} • SECURE ACCESS
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-guest-layout> |