antv
247 lines
16 KiB
PHP
247 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>GMO-Z.com RUNSYSTEM - {{ __('auth.login') }}</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
.floating-group {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.floating-input {
|
|
width: 100%;
|
|
height: 56px;
|
|
padding-left: 2.75rem;
|
|
padding-right: 1rem;
|
|
font-size: 0.875rem;
|
|
color: #1e293b;
|
|
background-color: transparent;
|
|
border: 1px solid #c4c4c4;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
.floating-input:hover {
|
|
border-color: #475569;
|
|
}
|
|
.floating-input:focus {
|
|
border: 2px solid #0f4c81;
|
|
padding-left: calc(2.75rem - 1px);
|
|
}
|
|
.floating-label {
|
|
position: absolute;
|
|
left: 2.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #94a3b8;
|
|
font-size: 0.875rem;
|
|
pointer-events: none;
|
|
transition: all 0.2s ease-in-out;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
.floating-input:focus ~ .floating-label,
|
|
.floating-input:not(:placeholder-shown) ~ .floating-label {
|
|
top: 0;
|
|
transform: translateY(-50%);
|
|
font-size: 0.75rem;
|
|
color: #0f4c81;
|
|
background-color: #ffffff;
|
|
padding: 0 6px;
|
|
left: 2.5rem;
|
|
}
|
|
.floating-input:not(:focus):not(:placeholder-shown) ~ .floating-label {
|
|
color: #64748b;
|
|
}
|
|
.floating-icon {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #94a3b8;
|
|
pointer-events: none;
|
|
transition: color 0.2s ease-in-out;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.floating-input:focus ~ .floating-icon {
|
|
color: #0f4c81;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center font-sans antialiased overflow-x-hidden relative bg-gradient-to-br from-[#ffffff] via-[#f8fafc] to-[#eef2f6]">
|
|
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden z-0 select-none">
|
|
<svg class="absolute bottom-0 left-0 w-[45%] h-[40%] min-w-[320px] max-w-[600px] text-[#0f4c81]/[0.04]" viewBox="0 0 100 100" preserveAspectRatio="none" fill="currentColor">
|
|
<path d="M 0,100 C 30,85 55,60 70,30 C 85,10 95,5 100,0 L 0,0 Z" transform="rotate(180, 50, 50)" />
|
|
<path d="M 0,100 C 40,75 60,50 75,25 C 90,5 95,0 100,0 L 0,0 Z" transform="rotate(180, 50, 50)" opacity="0.5" />
|
|
</svg>
|
|
<svg class="absolute top-10 right-10 w-[180px] h-[180px] text-[#0f4c81]/[0.03]" viewBox="0 0 100 100" fill="currentColor">
|
|
<circle cx="10" cy="10" r="1.5" /> <circle cx="30" cy="10" r="1.5" /> <circle cx="50" cy="10" r="1.5" /> <circle cx="70" cy="10" r="1.5" /> <circle cx="90" cy="10" r="1.5" />
|
|
<circle cx="10" cy="30" r="1.5" /> <circle cx="30" cy="30" r="1.5" /> <circle cx="50" cy="30" r="1.5" /> <circle cx="70" cy="30" r="1.5" /> <circle cx="90" cy="30" r="1.5" />
|
|
<circle cx="10" cy="50" r="1.5" /> <circle cx="30" cy="50" r="1.5" /> <circle cx="50" cy="50" r="1.5" /> <circle cx="70" cy="50" r="1.5" /> <circle cx="90" cy="50" r="1.5" />
|
|
<circle cx="10" cy="70" r="1.5" /> <circle cx="30" cy="70" r="1.5" /> <circle cx="50" cy="70" r="1.5" /> <circle cx="70" cy="70" r="1.5" /> <circle cx="90" cy="70" r="1.5" />
|
|
<circle cx="10" cy="90" r="1.5" /> <circle cx="30" cy="90" r="1.5" /> <circle cx="50" cy="90" r="1.5" /> <circle cx="70" cy="90" r="1.5" /> <circle cx="90" cy="90" r="1.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="relative w-full max-w-6xl mx-auto px-6 flex flex-col lg:flex-row items-center justify-between gap-16 py-12 z-10">
|
|
|
|
<div class="flex-1 flex flex-col items-center w-full">
|
|
<div class="relative w-full max-w-[620px] bg-[#263238] rounded-t-[16px] p-2 sm:p-4 shadow-2xl border border-slate-700/60 transition-all duration-300">
|
|
<div class="w-full bg-white rounded-[6px] overflow-hidden flex flex-col justify-between p-6 aspect-[16/10.5] min-h-[440px] relative shadow-inner">
|
|
|
|
<div class="flex justify-start items-center">
|
|
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-8 w-auto object-contain">
|
|
</div>
|
|
|
|
<div class="w-full max-w-[360px] mx-auto space-y-4 my-auto">
|
|
<h3 class="text-xl font-bold text-center text-[#0f4c81] tracking-wide">{{ __('auth.login') }}</h3>
|
|
|
|
<form action="{{ route('login') }}" method="POST" class="space-y-4">
|
|
@csrf
|
|
|
|
<div class="min-h-[52px] flex items-center justify-center transition-all duration-300" aria-live="polite">
|
|
@if($errors->any())
|
|
<div class="w-full bg-red-50 text-red-600 text-xs font-semibold p-2.5 rounded border border-red-200 shadow-sm flex items-start gap-2 animate-fade-in transition-opacity duration-300 ease-in-out opacity-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 mt-0.5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<span class="leading-normal">{{ $errors->first() }}</span>
|
|
</div>
|
|
@else
|
|
<div class="w-full opacity-0 pointer-events-none select-none" aria-hidden="true">
|
|
<div class="p-2.5 text-xs border border-transparent flex items-start gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24"></svg>
|
|
<span class="leading-normal"> </span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="floating-group">
|
|
<input type="email" name="mail" id="mail" placeholder=" " required value="{{ old('mail') }}" class="floating-input" />
|
|
<label for="mail" class="floating-label">
|
|
{{ __('auth.email') }} <span class="text-red-500">*</span>
|
|
</label>
|
|
<span class="floating-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="floating-group">
|
|
<input type="password" name="password" id="password" placeholder=" " required class="floating-input" />
|
|
<label for="password" class="floating-label">
|
|
{{ __('auth.password') }} <span class="text-red-500">*</span>
|
|
</label>
|
|
<span class="floating-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0V10.5m-2.812 10.5h14.625c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125H3.75c-.621 0-1.125.504-1.125 1.125v7.875c0 .621.504 1.125 1.125 1.125z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full h-[48px] bg-[#0f4c81] hover:bg-[#0a3a63] text-white font-semibold rounded shadow-md hover:shadow-lg transition-all duration-200 tracking-wide uppercase text-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0f4c81]">
|
|
{{ __('auth.login') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="text-center mt-auto">
|
|
<span class="text-[11px] text-slate-400 font-medium">© {{ __('auth.developed_by') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative w-full max-w-[690px] h-2 sm:h-3 bg-[#b0bec5] rounded-b-[16px] border-t border-white/20 shadow-xl transition-all duration-300">
|
|
<div class="absolute left-1/2 -translate-x-1/2 top-0 w-20 sm:w-24 h-1 sm:h-1.5 bg-[#90a4ae] rounded-b-[4px]"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 hidden lg:flex justify-center items-center relative min-h-[480px]">
|
|
<div class="relative z-10 w-full max-w-[440px]">
|
|
<svg viewBox="0 0 500 500" class="w-full h-auto">
|
|
<circle cx="250" cy="250" r="180" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="6,6" opacity="0.6" />
|
|
|
|
<rect x="60" y="80" width="120" height="70" rx="4" fill="none" stroke="#cbd5e1" stroke-width="2" />
|
|
<line x1="60" y1="120" x2="180" y2="120" stroke="#cbd5e1" stroke-width="2" />
|
|
<rect x="75" y="95" width="12" height="25" fill="#94a3b8" />
|
|
<rect x="90" y="90" width="14" height="30" fill="#cbd5e1" />
|
|
<rect x="110" y="100" width="14" height="20" fill="#94a3b8" transform="rotate(15, 110, 100)" />
|
|
|
|
<rect x="340" y="60" width="100" height="130" rx="6" fill="none" stroke="#cbd5e1" stroke-width="2" />
|
|
<line x1="390" y1="60" x2="390" y2="190" stroke="#cbd5e1" stroke-width="1.5" />
|
|
<line x1="340" y1="120" x2="440" y2="120" stroke="#cbd5e1" stroke-width="1.5" />
|
|
|
|
<ellipse cx="250" cy="455" rx="55" ry="9" fill="#cbd5e1" opacity="0.4" />
|
|
|
|
<line x1="230" y1="360" x2="215" y2="450" stroke="#d29a0f" stroke-width="4.5" stroke-linecap="round" />
|
|
<line x1="270" y1="360" x2="285" y2="450" stroke="#d29a0f" stroke-width="4.5" stroke-linecap="round" />
|
|
<line x1="250" y1="360" x2="250" y2="450" stroke="#9a6a00" stroke-width="3.5" stroke-linecap="round" />
|
|
<ellipse cx="250" cy="415" rx="20" ry="4" fill="none" stroke="#d29a0f" stroke-width="2" />
|
|
<ellipse cx="250" cy="435" rx="24" ry="5" fill="none" stroke="#d29a0f" stroke-width="2" />
|
|
<rect x="220" y="348" width="60" height="12" rx="5" fill="#fbbf24" />
|
|
|
|
<polygon points="150,450 170,450 166,415 154,415" fill="#94a3b8" />
|
|
<path d="M 160,415 Q 145,390 135,385" fill="none" stroke="#cbd5e1" stroke-width="2.5" stroke-linecap="round" />
|
|
<path d="M 160,415 Q 165,380 175,370" fill="none" stroke="#cbd5e1" stroke-width="2.5" stroke-linecap="round" />
|
|
<circle cx="135" cy="385" r="7" fill="#cbd5e1" />
|
|
<circle cx="175" cy="370" r="9" fill="#94a3b8" />
|
|
|
|
<path d="M 230,358 Q 220,400 225,435" fill="none" stroke="#334155" stroke-width="12" stroke-linecap="round" />
|
|
<path d="M 252,358 Q 262,400 258,435" fill="none" stroke="#334155" stroke-width="12" stroke-linecap="round" />
|
|
<path d="M 225,435 L 218,443 L 230,443 Z" fill="#fbbf24" stroke="#fbbf24" stroke-width="3" stroke-linejoin="round" />
|
|
<path d="M 258,435 L 265,443 L 253,443 Z" fill="#fbbf24" stroke="#fbbf24" stroke-width="3" stroke-linejoin="round" />
|
|
|
|
<path d="M 222,275 C 222,275 258,275 258,275 L 252,325 C 252,325 228,325 228,325 Z" fill="#ffffff" />
|
|
<rect x="242" y="285" width="8" height="10" rx="1.5" fill="#ef222e" />
|
|
|
|
<rect x="235" y="260" width="10" height="16" fill="#fed7aa" />
|
|
|
|
<circle cx="240" cy="242" r="16" fill="#fed7aa" />
|
|
<circle cx="236" cy="240" r="18" fill="#1e293b" />
|
|
<path d="M 220,245 C 205,245 195,255 198,270 C 208,265 218,255 222,250 Z" fill="#1e293b" />
|
|
<path d="M 226,232 Q 242,225 252,238 C 252,238 246,228 234,228 Z" fill="#1e293b" />
|
|
<path d="M 228,230 Q 240,223 248,232" fill="none" stroke="#fbbf24" stroke-width="3.5" stroke-linecap="round" />
|
|
|
|
<polygon points="270,305 305,305 295,332 260,332" fill="#e2e8f0" />
|
|
<polygon points="273,308 302,308 293,329 264,329" fill="#0f4c81" opacity="0.1" />
|
|
<polygon points="252,332 295,332 290,338 247,338" fill="#cbd5e1" />
|
|
|
|
<path d="M 222,275 Q 240,312 265,315" fill="none" stroke="#fed7aa" stroke-width="7" stroke-linecap="round" />
|
|
<path d="M 242,275 Q 255,295 272,300" fill="none" stroke="#fed7aa" stroke-width="7" stroke-linecap="round" />
|
|
<circle cx="265" cy="315" r="4.5" fill="#fed7aa" />
|
|
<circle cx="272" cy="300" r="4.5" fill="#fed7aa" />
|
|
|
|
<g transform="translate(45, -20)">
|
|
<path d="M 266,160 C 266,120 305,100 335,120 C 355,130 365,150 365,170 C 365,190 345,210 325,205 L 312,222 L 309,204 C 282,198 266,180 266,160 Z" fill="#ffffff" filter="drop-shadow(0 4px 6px rgba(0,0,0,0.06))" />
|
|
|
|
<g transform="translate(302, 138)">
|
|
<path d="M 8,10 L 8,6 C 8,2.5 18,2.5 18,6 L 18,10" stroke="#0f4c81" stroke-width="2.5" stroke-linecap="round" fill="none" />
|
|
<rect x="3" y="10" width="20" height="15" rx="3.5" fill="#fbbf24" />
|
|
<circle cx="13" cy="16.5" r="1.5" fill="#0f4c81" />
|
|
<line x1="13" y1="18" x2="13" y2="21" stroke="#0f4c81" stroke-width="1.8" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|