antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: login and my page

Browse Source
This commit is contained in:
antv
2026-07-02 15:42:47 +07:00
parent c993f848cb
commit 89790539b7
41 changed files with 1062 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/login.blade.php
+166 -228
View File
@@ -5,242 +5,180 @@
<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>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
@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]">
<body class="min-h-screen flex items-center justify-center font-sans antialiased overflow-hidden relative bg-[#f0f4f9] p-4 sm:p-6 lg:p-10">
<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">
<!-- Main Card -->
<div class="w-full max-w-[1100px] bg-white rounded-[24px] shadow-2xl flex flex-col lg:flex-row overflow-hidden min-h-[650px] relative 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">&nbsp;</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">&copy; {{ __('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>
<!-- LEFT COLUMN: Login Form -->
<div class="w-full lg:w-[50%] p-8 sm:p-12 lg:p-16 flex flex-col relative bg-white">
<!-- Decorative Elements Left -->
<!-- Heart icon -->
<div class="absolute top-12 left-10 w-10 h-10 opacity-90 hidden sm:block">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50 88C50 88 15 62 15 35C15 20 28 10 40 15C45 17 50 24 50 24C50 24 55 17 60 15C72 10 85 20 85 35C85 62 50 88 50 88Z" fill="#ff4d6d"/>
<path d="M50 88C50 88 15 62 15 35C15 20 28 10 40 15C45 17 50 24 50 24C50 24 55 17 60 15C72 10 85 20 85 35C85 62 50 88 50 88Z" fill="url(#paint0_linear)" opacity="0.3"/>
<defs>
<linearGradient id="paint0_linear" x1="15" y1="35" x2="85" y2="35" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- Star bottom left -->
<div class="absolute bottom-16 left-12 w-6 h-6 hidden sm:block">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" fill="#ffb703"/>
</svg>
</div>
<!-- Squiggle middle left -->
<div class="absolute top-1/2 -mt-10 left-6 w-5 h-12 hidden sm:block">
<svg viewBox="0 0 20 50" fill="none" stroke="#a78bfa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M10,5 C18,10 2,20 10,25 C18,30 2,40 10,45" />
</svg>
</div>
<!-- Blue dot top right (left col) -->
<div class="absolute top-20 right-12 w-4 h-4 hidden sm:block">
<svg viewBox="0 0 24 24" fill="#3b82f6" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0L15.5 8.5L24 12L15.5 15.5L12 24L8.5 15.5L0 12L8.5 8.5L12 0Z" />
</svg>
</div>
<!-- Logo -->
<div class="flex justify-start mb-10 relative z-10">
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-6 sm:h-8 w-auto object-contain">
</div>
<!-- Header -->
<div class="text-center mb-8 relative z-10">
<h1 class="text-3xl font-bold text-[#1e293b] mb-3 flex items-center justify-center gap-2">
Welcome back! <span class="text-2xl origin-bottom-right hover:animate-bounce">👋</span>
</h1>
<p class="text-[13px] text-gray-500 font-medium max-w-[320px] mx-auto leading-relaxed">
Đăng nhập để tiếp tục lan tỏa những lời cảm ơn và tạo nên môi trường làm việc tích cực.
</p>
</div>
<!-- Form -->
<div class="w-full max-w-[380px] mx-auto flex-1 relative z-10">
<form action="{{ route('login') }}" method="POST" class="space-y-5">
@csrf
<div class="min-h-[40px] flex items-center justify-center transition-all duration-300" aria-live="polite">
@if($errors->any())
<div id="login-errors" class="w-full bg-red-50 text-red-600 text-[13px] font-semibold p-2.5 rounded-lg border border-red-200 flex items-start gap-2" role="alert">
<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>{{ $errors->first() }}</span>
</div>
@endif
</div>
<!-- Email Field -->
<div class="space-y-1.5">
<label for="mail" class="block text-[13px] font-bold text-gray-700">Email</label>
<div class="relative">
<span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.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>
<input type="email" name="mail" id="mail" placeholder="Nhập email của bạn" required value="{{ old('mail') }}" autocomplete="email" class="w-full h-[46px] pl-[42px] pr-4 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:border-[#2563eb] focus:ring-1 focus:ring-[#2563eb] outline-none transition-all shadow-sm placeholder:text-gray-400 @error('mail') border-red-500 @enderror" @error('mail') aria-invalid="true" aria-describedby="login-errors" @enderror />
</div>
</div>
<!-- Password Field -->
<div class="space-y-1.5">
<label for="password" class="block text-[13px] font-bold text-gray-700">Mật khẩu</label>
<div class="relative">
<span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.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>
<input type="password" name="password" id="password" placeholder="Nhập mật khẩu" required autocomplete="current-password" class="w-full h-[46px] pl-[42px] pr-12 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:border-[#2563eb] focus:ring-1 focus:ring-[#2563eb] outline-none transition-all shadow-sm placeholder:text-gray-400 @error('password') border-red-500 @enderror" @error('password') aria-invalid="true" aria-describedby="login-errors" @enderror />
<button type="button" onclick="togglePasswordVisibility('password', this)" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none" aria-label="Show password">
<!-- Eye Closed (Default) -->
<svg class="w-5 h-5 eye-icon-closed" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
<!-- Eye Open -->
<svg class="w-5 h-5 eye-icon-open hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
</button>
</div>
</div>
<div class="pt-4">
<button type="submit" class="w-full h-[46px] bg-[#1d4ed8] hover:bg-[#1e40af] text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all duration-200 text-[14px]">
Đăng nhập
</button>
</div>
</form>
</div>
<div class="text-center mt-auto pt-8 relative z-10">
<span class="text-[11px] font-medium text-gray-400">&copy; 2024 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
</div>
</div>
<!-- RIGHT COLUMN: Illustration Side -->
<div class="hidden lg:flex w-[50%] bg-[#f8faff] relative flex-col items-center justify-center p-12 overflow-hidden border-l border-gray-100">
<!-- Right Column Decorations -->
<div class="absolute inset-0 pointer-events-none">
<!-- Top left blue strokes -->
<svg class="absolute top-16 left-16 w-10 h-10 text-blue-500" viewBox="0 0 50 50" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round">
<path d="M10,20 L25,10" />
<path d="M15,35 L30,25" />
<path d="M30,40 L40,30" />
</svg>
<!-- Heart icon top right -->
<div class="absolute top-20 right-20 w-12 h-12 flex items-center justify-center">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50 88C50 88 15 62 15 35C15 20 28 10 40 15C45 17 50 24 50 24C50 24 55 17 60 15C72 10 85 20 85 35C85 62 50 88 50 88Z" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- Sparkle top right -->
<svg class="absolute top-12 right-12 w-6 h-6 text-purple-400" viewBox="0 0 24 24" fill="none">
<path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" fill="currentColor"/>
</svg>
<!-- Thumbs up bottom right -->
<div class="absolute bottom-32 right-16 w-14 h-14 bg-white rounded-lg flex items-center justify-center shadow-lg transform rotate-12 z-20">
<span class="text-3xl">👍</span>
</div>
<!-- Paper plane -->
<div class="absolute top-1/3 left-10 w-10 h-10 transform -rotate-12 z-20">
<svg viewBox="0 0 24 24" fill="#3b82f6" xmlns="http://www.w3.org/2000/svg">
<path d="M2 12L22 2L15 22L11 15L2 12Z"/>
</svg>
<!-- Dashed trail -->
<svg class="absolute top-full left-0 w-24 h-24 text-gray-300" style="transform: translate(-90%, -30%);" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4">
<path d="M100,0 Q50,50 0,100" />
</svg>
</div>
<!-- Purple squiggle bottom right -->
<svg class="absolute bottom-24 right-10 w-8 h-16 text-purple-400" viewBox="0 0 30 60" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M20,10 C5,20 25,30 10,40 C25,50 5,60 20,70" />
</svg>
</div>
<!-- Header Content -->
<div class="text-center mb-6 relative z-10 pt-4">
<h2 class="text-[40px] font-extrabold text-[#1e293b] flex items-center justify-center gap-3 mb-2">
Thanks <span class="text-[#ff7eb3] font-bold text-[48px] leading-none tracking-wider" style="font-family: 'Caveat', cursive;">card</span>
<svg class="w-8 h-8 text-[#3b82f6] transform -rotate-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</h2>
<p class="text-gray-700 font-medium text-[14px] max-w-[300px] mx-auto leading-relaxed">
Gửi lời cảm ơn chân thành đến đồng nghiệp và cùng nhau xây dựng văn hóa tích cực!
</p>
</div>
<!-- Illustration (Image) -->
<div class="relative w-full max-w-[460px] flex-1 flex items-end justify-center z-10 mt-4">
<img src="{{ asset('images/thanks_card_illustration.png') }}" alt="Thanks card illustration" class="w-full h-auto object-contain drop-shadow-xl hover:scale-[1.05] transition-transform duration-500 rounded-3xl" style="mix-blend-mode: multiply;">
</div>
</div>
</div>
</body>
</html>