| <?php |
| defined('_JEXEC') or die; |
|
|
| use Joomla\CMS\Factory; |
| use Joomla\CMS\Language\Text; |
| use Joomla\CMS\Uri\Uri; |
|
|
| $app = Factory::getApplication(); |
| $status = $this->error->getCode(); |
| $message = $this->error->getMessage(); |
|
|
| if ($status == 404) { |
| $heading = Text::_('JERROR_LAYOUT_PAGE_NOT_FOUND'); |
| $subtext = 'The page you are looking for might have been removed or is temporarily unavailable.'; |
| } else { |
| $heading = 'An Error Occurred'; |
| $subtext = $message; |
| } |
| ?> |
| <!DOCTYPE html> |
| <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Error <?php echo $status; ?> - <?php echo $app->get('sitename'); ?></title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| body { |
| font-family: 'Nunito', sans-serif; |
| background: linear-gradient(135deg, #FF8C42 0%, #7B68EE 100%); |
| } |
| .breathing { |
| animation: breathe 4s ease-in-out infinite; |
| } |
| @keyframes breathe { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.1); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| <div class="max-w-md w-full bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl p-8 text-center"> |
| <div class="w-24 h-24 mx-auto mb-6 bg-orange-100 rounded-full flex items-center justify-center breathing"> |
| <i data-lucide="cloud-off" class="w-12 h-12 text-orange-500"></i> |
| </div> |
| |
| <h1 class="text-6xl font-bold text-gray-800 mb-2"><?php echo $status; ?></h1> |
| <h2 class="text-2xl font-bold text-gray-700 mb-4"><?php echo $heading; ?></h2> |
| <p class="text-gray-600 mb-8"><?php echo $subtext; ?></p> |
| |
| <a href="<?php echo Uri::base(); ?>" class="inline-flex items-center justify-center px-6 py-3 rounded-full bg-orange-500 text-white font-semibold hover:bg-orange-600 transition-all shadow-lg hover:shadow-xl"> |
| <i data-lucide="home" class="w-5 h-5 mr-2"></i> |
| Take me home |
| </a> |
| </div> |
| |
| <script> |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
