feature: add error pages

2026-06-30 15:31:40 +07:00
parent 96eac88f36
commit 8cbdd93e56
21 changed files with 435 additions and 1 deletions
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.401_title'))
+@section('code', '401')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-401.svg') }}" alt="401 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.401_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="history.back();" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back') }}
+    </button>
+    <a href="{{ route('login') }}" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.back_to_login') }}
+    </a>
+@endsection
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.403_title'))
+@section('code', '403')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-403.svg') }}" alt="403 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.403_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="history.back();" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back') }}
+    </button>
+    <a href="{{ url('/') }}" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.back_to_home') }}
+    </a>
+@endsection
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.404_title'))
+@section('code', '404')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-404.svg') }}" alt="404 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.404_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="history.back();" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back') }}
+    </button>
+    <a href="{{ url('/') }}" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.back_to_home') }}
+    </a>
+@endsection
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.419_title'))
+@section('code', '419')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-419.svg') }}" alt="419 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.419_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="window.location.reload();" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.reload') }}
+    </button>
+    <a href="{{ url('/') }}" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back_to_home') }}
+    </a>
+@endsection
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.429_title'))
+@section('code', '429')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-429.svg') }}" alt="429 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.429_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="history.back();" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back') }}
+    </button>
+    <a href="{{ url('/') }}" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.back_to_home') }}
+    </a>
+@endsection
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.500_title'))
+@section('code', '500')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-500.svg') }}" alt="500 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.500_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="history.back();" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back') }}
+    </button>
+    <a href="{{ url('/') }}" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.back_to_home') }}
+    </a>
+@endsection
@@ -0,0 +1,25 @@
+@extends('errors.layout')
+
+@section('title', __('errors.503_title'))
+@section('code', '503')
+
+@section('illustration')
+    <div class="mb-4 flex justify-center">
+        <img src="{{ asset('images/icn-503.svg') }}" alt="503 Illustration" class="h-20 sm:h-24 w-auto object-contain">
+    </div>
+@endsection
+
+@section('message')
+    {!! __('errors.503_message') !!}
+@endsection
+
+@section('action')
+    <button onclick="window.location.reload();" 
+        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
+        {{ __('errors.retry') }}
+    </button>
+    <a href="{{ url('/') }}" 
+        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
+        {{ __('errors.back_to_home') }}
+    </a>
+@endsection
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>@yield('title') - GMO-Z.com RUNSYSTEM</title>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+</head>
+<body class="bg-[#f8fafc] text-text-dark font-sans antialiased min-h-screen flex items-center justify-center p-0 m-0">
+    <div class="w-full max-w-[480px] sm:w-[480px] bg-white border border-[#e2e8f0] p-6 sm:p-10 text-center transition-all duration-300 mx-4 my-auto sm:mx-0"
+         style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-radius: 24px;">
+        <!-- Logo -->
+        <div class="mb-6 sm:mb-8 flex justify-center">
+            <img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-8 sm:h-10 w-auto object-contain">
+        </div>
+        
+        <!-- Illustration -->
+        @yield('illustration')
+
+        <!-- Error Code -->
+        <div class="mb-2 sm:mb-4">
+            <span class="text-[80px] sm:text-[110px] font-[900] text-primary leading-none tracking-tighter block select-none">
+                @yield('code')
+            </span>
+        </div>
+        
+        <!-- Error Title -->
+        <h1 class="text-[14px] sm:text-[16px] font-[700] text-text-dark mb-3 sm:mb-4 uppercase tracking-wider">
+            @yield('title')
+        </h1>
+        
+        <!-- Error Message -->
+        <div class="text-[12px] sm:text-[13px] text-text-medium mb-6 sm:mb-8 leading-relaxed max-w-[360px] mx-auto">
+            @yield('message')
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="flex flex-col sm:flex-row justify-center items-center gap-3">
+            @yield('action')
+        </div>
+        
+        <!-- Copyright Footer -->
+        <div class="mt-8 sm:mt-12 pt-5 border-t border-[#f1f5f9]">
+            <span class="text-[10px] text-text-muted font-semibold">&copy; 2026 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
+        </div>
+    </div>
+</body>
+</html>