initial commit

This commit is contained in:
2026-09-23 12:45:02 +07:00
parent d16f454083
commit 507fc6ccdf
235 changed files with 19587 additions and 2835 deletions
@@ -1,6 +1,6 @@
<x-guest-layout>
<div class="mb-4 text-sm text-gray-600">
{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
{{ __('Lupa kata sandi? Masukkan alamat email Anda dan kami akan mengirimkan tautan untuk mengatur ulang kata sandi.') }}
</div>
<!-- Session Status -->
@@ -18,7 +18,7 @@
<div class="flex items-center justify-end mt-4">
<x-primary-button>
{{ __('Email Password Reset Link') }}
{{ __('Kirim tautan atur ulang kata sandi') }}
</x-primary-button>
</div>
</form>
+27 -127
View File
@@ -1,139 +1,39 @@
<x-guest-layout>
{{-- 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 --}}
<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">
<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-24 w-auto max-w-[160px] object-contain filter drop-shadow-2xl">
<div class="min-h-screen bg-slate-50 px-4 py-10 sm:flex sm:items-center sm:justify-center">
<div class="mx-auto grid w-full max-w-4xl overflow-hidden border border-slate-200 bg-white shadow-sm lg:grid-cols-[0.9fr_1.1fr]">
<div class="hidden border-r border-slate-200 bg-slate-100 p-10 lg:flex lg:flex-col lg:justify-between">
<div>
@if(isset($setting->app_logo) && $setting->app_logo)
<img src="{{ asset('storage/'.$setting->app_logo) }}" alt="Logo" class="mb-8 h-16 w-auto object-contain">
@else
<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>
<div class="mb-8 flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-600 text-xl text-white"><i class="fas fa-cat"></i></div>
@endif
<h1 class="text-2xl font-bold text-slate-900">{{ $setting->app_name ?? 'ILY Cattery' }}</h1>
<p class="mt-3 max-w-sm text-sm leading-6 text-slate-600">Kelola data kucing, riwayat pembiakan, kesehatan, pedigree, dan persediaan dalam satu aplikasi.</p>
</div>
<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>
<p class="text-xs text-slate-500">Akses hanya untuk pengguna yang terdaftar.</p>
</div>
</div>
{{-- 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">
<div class="w-full max-w-md space-y-10">
<div class="space-y-2 text-center lg:text-left">
<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">
@endif
</div>
<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 class="p-6 sm:p-10 lg:p-12">
<div class="mb-8">
<h2 class="text-2xl font-bold text-slate-900">Masuk ke ILYCats</h2>
<p class="mt-2 text-sm text-slate-500">Gunakan email dan kata sandi akun Anda.</p>
</div>
<form method="POST" action="{{ route('login') }}" class="space-y-6">
@csrf
<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>
</div>
{{-- 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>
</div>
</div>
<div class="flex items-center justify-between px-1">
<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 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>
<x-auth-session-status class="mb-4" :status="session('status')" />
<form method="POST" action="{{ route('login') }}" class="space-y-5">@csrf
<div><label for="email" class="mb-2 block text-sm font-medium text-slate-700">Email</label><input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username" placeholder="nama@contoh.com" class="w-full border-slate-300 px-3 py-3 text-sm focus:border-indigo-500 focus:ring-indigo-500"></div>
<div x-data="{show:false}"><label for="password-field" class="mb-2 block text-sm font-medium text-slate-700">Kata sandi</label><div class="relative"><input id="password-field" :type="show?'text':'password'" name="password" required autocomplete="current-password" class="w-full border-slate-300 px-3 py-3 pr-12 text-sm focus:border-indigo-500 focus:ring-indigo-500"><button type="button" @click="show=!show" class="absolute inset-y-0 right-0 px-4 text-slate-400" :aria-label="show?'Sembunyikan kata sandi':'Tampilkan kata sandi'"><i class="fas" :class="show?'fa-eye-slash':'fa-eye'"></i></button></div></div>
<div class="flex items-center justify-between gap-4"><label class="flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" name="remember" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">Ingat saya di perangkat ini</label>@if(Route::has('password.request'))<a href="{{ route('password.request') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">Lupa kata sandi?</a>@endif</div>
<button type="submit" class="w-full bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">Masuk</button>
<button type="button" id="login-passkey" class="w-full border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50"><i class="fas fa-fingerprint mr-2 text-slate-500"></i>Masuk dengan biometrik</button>
</form>
<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>
<p class="mt-8 border-t border-slate-200 pt-5 text-center text-xs text-slate-400">{{ date('Y') }} {{ $setting->app_name ?? 'ILY Cattery' }} · Akses aman</p>
</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 type="module">
import WebAuthn from "{{ asset('vendor/webauthn/webauthn.js') }}";
const btn=document.getElementById('login-passkey');
if(btn){btn.addEventListener('click',async()=>{const original=btn.innerHTML;try{btn.disabled=true;btn.textContent='Memeriksa biometrik…';const response=await (new WebAuthn()).login();if(response)window.location.href="{{ route('dashboard') }}";}catch(e){alert('Biometrik tidak dapat digunakan. Pastikan biometrik sudah didaftarkan pada profil Anda.');}finally{btn.disabled=false;btn.innerHTML=original;}})}
</script>
</x-guest-layout>
</x-guest-layout>
+4 -4
View File
@@ -28,9 +28,9 @@
<x-input-error :messages="$errors->get('password')" class="mt-2" />
</div>
<!-- Confirm Password -->
<!-- Konfirmasi Kata Sandi -->
<div class="mt-4">
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
<x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')" />
<x-text-input id="password_confirmation" class="block mt-1 w-full"
type="password"
@@ -41,11 +41,11 @@
<div class="flex items-center justify-end mt-4">
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
{{ __('Already registered?') }}
{{ __('Sudah memiliki akun?') }}
</a>
<x-primary-button class="ms-4">
{{ __('Register') }}
{{ __('Daftar') }}
</x-primary-button>
</div>
</form>
@@ -19,9 +19,9 @@
<x-input-error :messages="$errors->get('password')" class="mt-2" />
</div>
<!-- Confirm Password -->
<!-- Konfirmasi Kata Sandi -->
<div class="mt-4">
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
<x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')" />
<x-text-input id="password_confirmation" class="block mt-1 w-full"
type="password"
@@ -32,7 +32,7 @@
<div class="flex items-center justify-end mt-4">
<x-primary-button>
{{ __('Reset Password') }}
{{ __('Atur ulang kata sandi') }}
</x-primary-button>
</div>
</form>
+1 -1
View File
@@ -24,7 +24,7 @@
@csrf
<button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ __('Log Out') }}
{{ __('Keluar') }}
</button>
</form>
</div>