99 lines
5.0 KiB
HTML
99 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" data-theme="forest">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>CLQMS - Login</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
|
|
<link rel="stylesheet" href="shared.css">
|
||
|
|
</head>
|
||
|
|
<body class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-emerald-50/20 flex items-center justify-center">
|
||
|
|
<div class="hero min-h-screen">
|
||
|
|
<div class="hero-content flex-col">
|
||
|
|
<!-- Logo Section -->
|
||
|
|
<div class="text-center mb-6">
|
||
|
|
<div class="w-20 h-20 mx-auto rounded-2xl bg-emerald-100 flex items-center justify-center mb-4 shadow-lg border-2 border-emerald-200">
|
||
|
|
<svg class="w-12 h-12 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h1 class="text-4xl font-bold text-emerald-600 mb-2">CLQMS</h1>
|
||
|
|
<p class="text-base-content/60">Clinical Laboratory Quality Management System</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Login Card -->
|
||
|
|
<div class="card bg-base-100 w-full max-w-sm shadow-2xl border-t-4 border-emerald-500">
|
||
|
|
<div class="card-body p-8">
|
||
|
|
<h2 class="text-2xl font-bold text-center text-emerald-700 mb-6">Welcome Back</h2>
|
||
|
|
|
||
|
|
<form>
|
||
|
|
<!-- Username Field -->
|
||
|
|
<div class="form-control mb-4">
|
||
|
|
<label class="label">
|
||
|
|
<span class="label-text font-medium">Username</span>
|
||
|
|
</label>
|
||
|
|
<div class="relative">
|
||
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
|
|
<svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<input type="text" placeholder="Enter your username" class="input input-bordered w-full pl-10 focus:border-emerald-500 focus:ring-emerald-500" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Password Field -->
|
||
|
|
<div class="form-control mb-4">
|
||
|
|
<label class="label">
|
||
|
|
<span class="label-text font-medium">Password</span>
|
||
|
|
</label>
|
||
|
|
<div class="relative">
|
||
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
|
|
<svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<input type="password" placeholder="Enter your password" class="input input-bordered w-full pl-10 focus:border-emerald-500 focus:ring-emerald-500" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Remember Me & Forgot Password -->
|
||
|
|
<div class="flex items-center justify-between mb-6">
|
||
|
|
<label class="label cursor-pointer flex items-center gap-2">
|
||
|
|
<input type="checkbox" class="checkbox checkbox-sm checkbox-emerald" />
|
||
|
|
<span class="label-text text-sm">Remember me</span>
|
||
|
|
</label>
|
||
|
|
<a href="#" class="text-sm text-emerald-600 hover:text-emerald-700 hover:underline">Forgot password?</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Login Button -->
|
||
|
|
<div class="form-control">
|
||
|
|
<button class="btn bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg hover:shadow-xl transition-all">
|
||
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
|
||
|
|
</svg>
|
||
|
|
Sign In
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Divider -->
|
||
|
|
<div class="divider text-sm text-base-content/40">or</div>
|
||
|
|
|
||
|
|
<!-- Help Text -->
|
||
|
|
<p class="text-center text-sm text-base-content/60">
|
||
|
|
Need help? Contact your system administrator
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<div class="mt-8 text-center">
|
||
|
|
<p class="text-sm text-base-content/40">© 2024 CLQMS. All rights reserved.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|