| <?php |
| defined('_JEXEC') or die; |
|
|
| use Joomla\CMS\Factory; |
| use Joomla\CMS\Language\Text; |
| use Joomla\CMS\Uri\Uri; |
|
|
| $app = Factory::getApplication(); |
| $sitename = $app->get('sitename'); |
| $message = $app->get('offline_message') ?: 'We are currently performing maintenance. Please check back soon.'; |
| ?> |
| <!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><?php echo $sitename; ?> - Offline</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-color: |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| <div class="max-w-lg w-full text-center"> |
| <!-- Peaceful Illustration Placeholder --> |
| <div class="relative w-64 h-64 mx-auto mb-8 floating"> |
| <img src="http://static.photos/nature/640x360/123" alt="Peaceful nature" class="w-full h-full object-cover rounded-full shadow-2xl border-4 border-white"> |
| <div class="absolute inset-0 rounded-full bg-gradient-to-tr from-orange-200/30 to-purple-200/30"></div> |
| </div> |
| |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Taking a Moment</h1> |
| <p class="text-lg text-gray-600 mb-8 leading-relaxed"><?php echo $message; ?></p> |
| |
| <!-- Login Form --> |
| <div class="bg-white rounded-3xl shadow-lg p-8 border border-orange-100 max-w-sm mx-auto"> |
| <form action="<?php echo Uri::base(); ?>" method="post" id="form-login"> |
| <h2 class="text-lg font-semibold text-gray-700 mb-4">Administrator Login</h2> |
| |
| <div class="mb-4"> |
| <input type="text" name="username" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100 outline-none transition-all" placeholder="Username" required> |
| </div> |
| |
| <div class="mb-6"> |
| <input type="password" name="password" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-400 focus:ring-2 focus:ring-orange-100 outline-none transition-all" placeholder="Password" required> |
| </div> |
| |
| <button type="submit" name="Submit" class="w-full py-3 rounded-xl bg-gradient-to-r from-orange-400 to-purple-500 text-white font-semibold hover:shadow-lg hover:-translate-y-0.5 transition-all"> |
| Login |
| </button> |
| |
| <input type="hidden" name="option" value="com_login"> |
| <input type="hidden" name="task" value="login"> |
| <input type="hidden" name="return" value="<?php echo base64_encode(Uri::base()); ?>"> |
| <?php echo HTMLHelper::_('form.token'); ?> |
| </form> |
| </div> |
| |
| <p class="mt-8 text-sm text-gray-400">© <?php echo date('Y'); ?> <?php echo $sitename; ?></p> |
| </div> |
| |
| <script> |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
