112 lines
5.5 KiB
PHP
112 lines
5.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#FFB7C5">
|
|
<title>Cathy's App - Login</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
<body class="bg-cream font-sans antialiased min-h-screen flex items-center justify-center px-4"
|
|
x-data="{ show: false, shaking: false }">
|
|
|
|
{{-- ── Decorative blobs ───────────────────────────────────────── --}}
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none select-none" aria-hidden="true">
|
|
<div class="absolute -top-32 -left-32 w-96 h-96 rounded-full opacity-20"
|
|
style="background: radial-gradient(circle, #FFB7C5, transparent)"></div>
|
|
<div class="absolute -bottom-32 -right-32 w-96 h-96 rounded-full opacity-20"
|
|
style="background: radial-gradient(circle, #E8D5F5, transparent)"></div>
|
|
<div class="absolute top-1/2 left-1/4 w-48 h-48 rounded-full opacity-10"
|
|
style="background: radial-gradient(circle, #FFC8DD, transparent)"></div>
|
|
</div>
|
|
|
|
{{-- ── Login card ─────────────────────────────────────────────── --}}
|
|
<div class="relative z-10 w-full max-w-sm">
|
|
|
|
{{-- Logo / header --}}
|
|
<div class="text-center mb-8 select-none">
|
|
<div class="text-7xl mb-3 inline-block animate-bounce" style="animation-duration:2s">🐱</div>
|
|
<h1 class="text-2xl font-extrabold text-pink-500 leading-tight">Cathy's App</h1>
|
|
<p class="text-sm text-gray-400 mt-1">Your Purr-fect Assistant</p>
|
|
</div>
|
|
|
|
{{-- Card --}}
|
|
<div class="bg-white rounded-3xl shadow-xl border border-pink-100 p-8">
|
|
|
|
<h2 class="text-base font-bold text-gray-700 mb-1">Welcome back 👋</h2>
|
|
<p class="text-xs text-gray-400 mb-6">Enter the app password to continue.</p>
|
|
|
|
{{-- Error --}}
|
|
@error('password')
|
|
<div class="flex items-center gap-2 bg-red-50 border border-red-200 text-red-600 text-xs px-4 py-3 rounded-2xl mb-4"
|
|
x-data x-init="$el.closest('[x-data]').shaking = true; setTimeout(() => $el.closest('[x-data]').shaking = false, 500)">
|
|
<span class="text-base">😿</span>
|
|
<span>{{ $message }}</span>
|
|
</div>
|
|
@enderror
|
|
|
|
<form method="POST" action="{{ route('gate.attempt') }}"
|
|
:class="shaking ? 'animate-[shake_0.4s_ease-in-out]' : ''">
|
|
@csrf
|
|
|
|
{{-- Password field --}}
|
|
<div class="relative mb-5">
|
|
<label for="password" class="block text-xs font-semibold text-gray-500 mb-1.5">
|
|
Password
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
:type="show ? 'text' : 'password'"
|
|
id="password"
|
|
name="password"
|
|
autocomplete="current-password"
|
|
autofocus
|
|
placeholder="Enter password…"
|
|
class="w-full rounded-2xl border border-pink-100 bg-pink-50/40 px-4 py-3 pr-11 text-sm text-gray-700
|
|
placeholder-gray-300 outline-none transition
|
|
focus:border-pink-300 focus:ring-2 focus:ring-pink-100
|
|
@error('password') border-red-300 bg-red-50/40 @enderror"
|
|
>
|
|
{{-- Show/hide toggle --}}
|
|
<button type="button"
|
|
@click="show = !show"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-pink-400 transition-colors select-none"
|
|
tabindex="-1"
|
|
:title="show ? 'Hide password' : 'Show password'">
|
|
<span x-text="show ? '🙈' : '👁️'" class="text-base leading-none"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Submit --}}
|
|
<button type="submit"
|
|
class="w-full py-3 rounded-2xl font-bold text-sm text-white shadow-md
|
|
transition-all duration-200 active:scale-95 hover:shadow-lg hover:brightness-105"
|
|
style="background: linear-gradient(135deg, #FFB7C5, #E8A0B4)">
|
|
🐾 Enter the App
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- Footer hint --}}
|
|
<p class="text-center text-xs text-gray-400 mt-5">
|
|
<!-- Session lasts 24 hours after login. -->
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Shake keyframe --}}
|
|
<style>
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
20% { transform: translateX(-6px); }
|
|
40% { transform: translateX(6px); }
|
|
60% { transform: translateX(-4px); }
|
|
80% { transform: translateX(4px); }
|
|
}
|
|
</style>
|
|
|
|
</body>
|
|
</html>
|