From 17187459becf792d1f1f1c6881284a85fbe3f672 Mon Sep 17 00:00:00 2001
From: Dwi F Sukmana <dwi.sukmana@gmail.com>
Date: Mon, 9 Feb 2026 09:36:42 +0700
Subject: [PATCH] perbaikan login page

---
 resources/views/auth/login.blade.php | 149 ++++++++++++++++-----------
 1 file changed, 89 insertions(+), 60 deletions(-)

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 2e86a9d..4d1f86d 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,110 +1,139 @@
 <x-guest-layout>
-    {{-- Title Browser Dinamis --}}
+    {{-- 1. ANIMASI CUSTOM: DYNAMIC ZOOM + NEON GLOW --}}
+    <style>
+        @keyframes logo-breathing-glow {
+            0%, 100% { 
+                transform: scale(1);
+                box-shadow: 0 0 20px rgba(99, 102, 241, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05);
+                border-color: rgba(255, 255, 255, 0.1);
+            }
+            50% { 
+                transform: scale(1.08); 
+                box-shadow: 0 0 60px rgba(79, 70, 229, 0.6), inset 0 0 20px rgba(99, 102, 241, 0.4);
+                border-color: rgba(129, 140, 248, 0.5);
+            }
+        }
+
+        .animate-logo-glow {
+            animation: logo-breathing-glow 4s ease-in-out infinite;
+            will-change: transform, box-shadow;
+        }
+    </style>
+
     <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) --}}
+        {{-- SISI KIRI: BRANDING --}}
         <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">
+                <div class="inline-flex p-6 mb-8 bg-white/5 backdrop-blur-2xl rounded-[3rem] border border-white/10 animate-logo-glow transition-all">
                     @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">
+                        <img src="{{ asset('storage/' . $setting->app_logo) }}" alt="Logo" class="h-24 w-auto max-w-[160px] 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>
+                        <div class="w-24 h-24 bg-indigo-600 rounded-[2rem] flex items-center justify-center text-4xl 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>
+                <h2 class="text-3xl font-black text-white tracking-tighter mb-2 uppercase">{{ $setting->app_name ?? 'Ily Cattery' }}</h2>
+                <p class="text-indigo-300 text-[10px] font-bold uppercase tracking-[0.4em] leading-relaxed italic opacity-70">{{ $setting->app_slogan ?? 'Intelligence Cattery System' }}</p>
             </div>
         </div>
 
-        {{-- SISI KANAN: FORM LOGIN (Dibuat Lebih Center & Proporsional) --}}
+        {{-- SISI KANAN: FORM LOGIN --}}
         <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="w-full max-w-md space-y-10">
                 
                 <div class="space-y-2 text-center lg:text-left">
-                    {{-- Logo Mobile: Center di layar kecil --}}
-                    <div class="lg:hidden flex justify-center">
+                    <div class="lg:hidden flex justify-center mb-6">
                         @if(isset($setting) && isset($setting->app_logo))
-                            <img src="{{ asset('storage/' . $setting->app_logo) }}" class="h-14 w-auto mb-6">
+                            <img src="{{ asset('storage/' . $setting->app_logo) }}" class="h-14 w-auto">
                         @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>
+                    <h3 class="text-3xl font-black text-slate-900 tracking-tight">Access Portal</h3>
+                    <p class="text-slate-500 font-medium text-sm">Gunakan kredensial Anda untuk masuk.</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 class="space-y-4">
+                        {{-- Email --}}
+                        <div class="group">
+                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Email / Username</label>
+                            <div class="relative">
+                                <span class="absolute inset-y-0 left-0 pl-5 flex items-center text-slate-300 group-focus-within:text-indigo-600 transition-colors">
+                                    <i class="fas fa-user-shield"></i>
+                                </span>
+                                <input type="email" name="email" :value="old('email')" required autofocus 
+                                       class="block w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl text-slate-900 text-sm font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/30 transition-all outline-none shadow-sm"
+                                       placeholder="admin@ilycats.com">
                             </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>
+                        {{-- Password dengan Tombol View yang Proporsional --}}
+                        <div class="group">
+                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Password</label>
+                            <div class="relative flex items-center">
+                                <span class="absolute left-0 pl-5 flex items-center text-slate-300 group-focus-within:text-indigo-600 transition-colors">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                                
+                                <input id="password-field" type="password" name="password" required 
+                                       class="block w-full pl-12 pr-12 py-4 bg-white border border-slate-200 rounded-2xl text-slate-900 text-sm font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/30 transition-all outline-none shadow-sm" 
+                                       placeholder="••••••••">
+                                
+                                {{-- Tombol Toggle View: Diposisikan lebih proporsional --}}
+                                <button type="button" onclick="togglePassword()" 
+                                        class="absolute right-4 p-2 text-slate-300 hover:text-indigo-600 transition-colors focus:outline-none flex items-center justify-center">
+                                    <i id="toggle-icon" class="fas fa-eye text-sm"></i>
+                                </button>
                             </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 class="inline-flex items-center cursor-pointer group">
+                            <input type="checkbox" name="remember" class="w-5 h-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20">
+                            <span class="ml-3 text-xs font-bold text-slate-500 group-hover:text-slate-800 transition-colors">Ingat Sesi</span>
                         </label>
+                        @if (Route::has('password.request'))
+                            <!-- <a href="{{ route('password.request') }}" class="text-xs font-bold text-indigo-600 hover:text-indigo-700">Lupa Sandi?</a> -->
+                        @endif
                     </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">
+                    <button type="submit" class="w-full py-4 bg-slate-900 hover:bg-indigo-700 text-white text-xs font-black uppercase tracking-[0.2em] rounded-2xl shadow-xl shadow-indigo-200 transition-all hover:-translate-y-1">
                         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
+                <div class="pt-8 text-center border-t border-slate-100">
+                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest opacity-60">
+                        {{ date('Y') }} {{ $setting->app_name ?? 'ILY CATTERY' }} • Encrypted Intelligence Access
                     </p>
                 </div>
             </div>
         </div>
     </div>
+
+    {{-- 2. JAVASCRIPT: TOGGLE PASSWORD LOGIC --}}
+    <script>
+        function togglePassword() {
+            const passwordField = document.getElementById('password-field');
+            const toggleIcon = document.getElementById('toggle-icon');
+            
+            if (passwordField.type === 'password') {
+                passwordField.type = 'text';
+                toggleIcon.classList.remove('fa-eye');
+                toggleIcon.classList.add('fa-eye-slash');
+            } else {
+                passwordField.type = 'password';
+                toggleIcon.classList.remove('fa-eye-slash');
+                toggleIcon.classList.add('fa-eye');
+            }
+        }
+    </script>
 </x-guest-layout>
\ No newline at end of file