File size: 2,436 Bytes
e07769f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <?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> |