61 lines
2.6 KiB
PHP
61 lines
2.6 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" data-theme="clqms">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Login - CLQMS</title>
|
||
|
|
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
|
|
<script src="<?= base_url('assets/js/lucide.min.js') ?>"></script>
|
||
|
|
|
||
|
|
<style type="text/tailwindcss">
|
||
|
|
[data-theme="clqms"] {
|
||
|
|
--color-base-100: oklch(98% 0.005 240);
|
||
|
|
--color-base-200: oklch(95% 0.01 240);
|
||
|
|
--color-base-300: oklch(90% 0.015 240);
|
||
|
|
--color-base-content: oklch(25% 0.02 240);
|
||
|
|
--color-primary: oklch(55% 0.2 175);
|
||
|
|
--color-primary-content: oklch(100% 0 0);
|
||
|
|
--color-secondary: oklch(60% 0.15 250);
|
||
|
|
--color-secondary-content: oklch(100% 0 0);
|
||
|
|
--color-accent: oklch(70% 0.2 140);
|
||
|
|
--color-neutral: oklch(30% 0.02 250);
|
||
|
|
--color-neutral-content: oklch(95% 0.01 250);
|
||
|
|
--color-info: oklch(65% 0.2 230);
|
||
|
|
--color-success: oklch(65% 0.2 145);
|
||
|
|
--color-warning: oklch(80% 0.18 85);
|
||
|
|
--color-error: oklch(60% 0.25 25);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body { font-family: 'Inter', sans-serif; }
|
||
|
|
.auth-bg {
|
||
|
|
background: linear-gradient(135deg, oklch(95% 0.03 175) 0%, oklch(97% 0.02 200) 50%, oklch(96% 0.03 250) 100%);
|
||
|
|
}
|
||
|
|
.pattern-overlay {
|
||
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(45,212,191,0.06) 1px, transparent 1px);
|
||
|
|
background-size: 24px 24px;
|
||
|
|
}
|
||
|
|
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
|
||
|
|
.float-animation { animation: float 8s ease-in-out infinite; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="min-h-screen auth-bg flex items-center justify-center p-4 relative overflow-hidden">
|
||
|
|
<div class="absolute inset-0 pattern-overlay"></div>
|
||
|
|
<div class="absolute top-20 left-20 w-72 h-72 bg-primary/15 rounded-full blur-3xl float-animation"></div>
|
||
|
|
<div class="absolute bottom-20 right-20 w-80 h-80 bg-secondary/15 rounded-full blur-3xl float-animation" style="animation-delay:-4s"></div>
|
||
|
|
|
||
|
|
<div class="relative z-10 w-full max-w-md">
|
||
|
|
<?= $this->renderSection('content') ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>document.addEventListener('DOMContentLoaded',()=>{if(window.lucide)lucide.createIcons()});</script>
|
||
|
|
<?= $this->renderSection('script') ?>
|
||
|
|
</body>
|
||
|
|
</html>
|