antv
153 lines
11 KiB
PHP
153 lines
11 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#f0f4f9] min-h-screen flex items-center justify-center font-sans antialiased overflow-x-hidden">
|
|
<div class="relative w-full max-w-6xl mx-auto px-4 flex flex-col lg:flex-row items-center justify-between gap-12 py-10">
|
|
|
|
<div class="flex-1 flex flex-col items-center">
|
|
<div class="relative w-full max-w-[680px] min-h-[490px] lg:aspect-[16/10.5] lg:min-h-0 bg-[#1e293b] rounded-t-2xl p-3 shadow-2xl border border-slate-700">
|
|
<div class="w-full h-full bg-[#f0f4f9] rounded-lg overflow-hidden flex flex-col justify-between p-6 relative">
|
|
<div class="absolute inset-0 pointer-events-none opacity-20">
|
|
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<path d="M0,40 C30,45 70,30 100,40 L100,100 L0,100 Z" fill="#0f4c81"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center z-10">
|
|
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-10 w-auto object-contain">
|
|
</div>
|
|
|
|
<div class="w-full max-w-[380px] mx-auto z-10 space-y-4 my-auto">
|
|
<h3 class="text-2xl font-bold text-center text-[#1e293b]">{{ __('auth.login') }}</h3>
|
|
|
|
<form action="{{ route('login') }}" method="POST" class="space-y-3.5">
|
|
@csrf
|
|
|
|
<!-- Reserved Error Area to Prevent Layout Shift (CLS) -->
|
|
<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 sm:text-sm font-semibold p-2.5 rounded-lg 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-5 w-5 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 sm:text-sm border border-transparent flex items-start gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24"></svg>
|
|
<span class="leading-normal"> </span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label !mb-1.5 uppercase tracking-wider text-xs">{{ __('auth.email') }} <span class="text-red-500">*</span></label>
|
|
<div class="form-input-group">
|
|
<span class="form-input-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4.5 h-4.5 text-text-light">
|
|
<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>
|
|
<input type="email" name="mail" placeholder="{{ __('auth.email_placeholder') }}" class="form-input form-input-with-icon !bg-white" required value="{{ old('mail') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label !mb-1.5 uppercase tracking-wider text-xs">{{ __('auth.password') }} <span class="text-red-500">*</span></label>
|
|
<div class="form-input-group">
|
|
<span class="form-input-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4.5 h-4.5 text-text-light">
|
|
<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>
|
|
<input type="password" name="password" placeholder="{{ __('auth.password_placeholder') }}" class="form-input form-input-with-icon !bg-white" required>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary w-full shadow-md text-sm uppercase tracking-wide">
|
|
{{ __('auth.login') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="text-center z-10 mt-auto">
|
|
<span class="text-xs text-[#475569]/80 font-semibold">© {{ __('auth.developed_by') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative w-full max-w-[760px] h-3 bg-[#e2e8f0] rounded-b-2xl border-t border-white/20 shadow-lg">
|
|
<div class="absolute left-1/2 -translate-x-1/2 top-0 w-28 h-1.5 bg-[#cbd5e1] rounded-b-md"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 flex justify-center items-center relative min-h-[360px] lg:min-h-[480px]">
|
|
<div class="relative z-10 w-full max-w-[420px]">
|
|
<svg viewBox="0 0 500 500" class="w-full h-auto">
|
|
<circle cx="250" cy="400" r="80" fill="#e2e8f0" />
|
|
<rect x="235" y="320" width="30" height="90" fill="#78350f" />
|
|
<polygon points="210,410 290,410 270,440 230,440" fill="#451a03" />
|
|
<g transform="translate(0, -20)">
|
|
<path d="M 280,310 C 280,210 320,180 340,160 C 350,150 370,160 380,180 C 390,200 400,240 370,300 C 340,360 300,320 280,310 Z" fill="#334155" />
|
|
<path d="M 310,210 C 320,200 335,200 345,210 C 350,215 350,225 340,235 C 330,245 315,245 305,235 C 300,230 300,215 310,210 Z" fill="#fbcfe8" />
|
|
<circle cx="335" cy="205" r="16" fill="#fbcfe8" />
|
|
<path d="M 320,195 C 322,185 330,180 340,183 C 345,185 348,190 345,198 Z" fill="#1e293b" />
|
|
<ellipse cx="338" cy="203" rx="1" ry="2" fill="#1e293b" />
|
|
<path d="M 334,212 Q 338,216 342,212" stroke="#1e293b" stroke-width="1.5" fill="none" />
|
|
<path d="M 345,200 Q 365,190 350,175 Q 335,160 320,178 Z" fill="#1e293b" />
|
|
<path d="M 340,160 L 350,170 L 335,175 Z" fill="#fbbf24" />
|
|
</g>
|
|
<g transform="translate(0, -20)">
|
|
<path d="M 320,220 C 340,230 370,250 380,280 L 330,340 L 290,280 Z" fill="#ef222e" />
|
|
<rect x="330" y="270" width="22" height="18" fill="#ffffff" rx="2" />
|
|
<text x="332" y="282" font-size="8" font-family="sans-serif" font-weight="bold" fill="#ef222e">GMO-Z</text>
|
|
</g>
|
|
<g transform="translate(0, -20)">
|
|
<path d="M 285,280 L 245,360 C 235,380 250,400 270,400 L 325,400 L 340,335 Z" fill="#334155" />
|
|
<path d="M 315,335 L 340,400 C 345,410 360,400 355,390 L 330,335 Z" fill="#334155" />
|
|
<path d="M 245,360 L 220,375 C 210,380 220,400 235,395 L 255,385 Z" fill="#fde047" />
|
|
<path d="M 340,400 L 315,420 C 305,425 315,440 330,435 L 355,415 Z" fill="#fde047" />
|
|
</g>
|
|
<g transform="translate(-20, -10)">
|
|
<rect x="250" y="295" width="65" height="45" rx="4" fill="#cbd5e1" transform="rotate(-10, 250, 295)" />
|
|
<rect x="255" y="300" width="55" height="35" rx="2" fill="#94a3b8" transform="rotate(-10, 250, 295)" />
|
|
<circle cx="282" cy="318" r="4" fill="#ffffff" />
|
|
<rect x="278" y="338" width="40" height="4" rx="2" fill="#e2e8f0" transform="rotate(-10, 278, 338)" />
|
|
</g>
|
|
<g transform="translate(380, 110)">
|
|
<circle cx="50" cy="50" r="30" fill="#ffffff" stroke="#e2e8f0" stroke-width="2" />
|
|
<path d="M 47,40 L 53,40 L 53,46 L 47,46 Z" fill="#fbbf24" />
|
|
<path d="M 43,46 L 57,46 L 57,60 L 43,60 Z" fill="#fbbf24" rx="2" />
|
|
<circle cx="50" cy="53" r="2" fill="#1e293b" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-[#fbbf24] flex items-center justify-center shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|