130 lines
4.8 KiB
HTML
130 lines
4.8 KiB
HTML
{{define "login"}}
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Login — CpOne Dashboard</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] },
|
|
colors: {
|
|
brand: {
|
|
50: '#eef0fb',
|
|
100: '#dde2f7',
|
|
200: '#bbc5ef',
|
|
300: '#8f9fe4',
|
|
400: '#6677d6',
|
|
500: '#3b50a0',
|
|
600: '#2d3d7a',
|
|
700: '#212d5a',
|
|
800: '#161e3c',
|
|
900: '#0b0f1e',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-100 font-sans text-slate-800">
|
|
<main class="grid min-h-screen lg:grid-cols-2">
|
|
|
|
<!-- Left panel -->
|
|
<section class="relative hidden overflow-hidden lg:flex lg:flex-col lg:justify-between lg:p-12">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-brand-800 via-brand-700 to-brand-500"></div>
|
|
<div class="absolute -left-24 -top-16 h-80 w-80 rounded-full bg-white/5 blur-3xl"></div>
|
|
<div class="absolute -bottom-20 right-0 h-96 w-96 rounded-full bg-white/5 blur-3xl"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="inline-flex rounded-lg bg-white px-4 py-2">
|
|
<img src="{{b "/static/img/logo.png"}}" alt="Logo" class="h-8 w-auto">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative z-10 space-y-4 text-white">
|
|
<p class="inline-flex rounded-full border border-white/25 bg-white/10 px-4 py-1.5 text-sm backdrop-blur">
|
|
Corporate MCU Platform
|
|
</p>
|
|
<h1 class="max-w-md text-3xl font-semibold leading-snug">
|
|
Monitor Arrival, Sampling, dan Lab Verification dalam Satu Tempat
|
|
</h1>
|
|
<p class="max-w-sm text-sm text-brand-200">
|
|
Real-time dashboard untuk visibilitas operasional MCU perusahaan.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Right panel -->
|
|
<section class="flex items-center justify-center p-6 sm:p-10">
|
|
<div class="w-full max-w-md">
|
|
|
|
<!-- Logo mobile -->
|
|
<div class="mb-8 flex justify-center lg:hidden">
|
|
<div class="rounded-xl bg-brand-500 px-5 py-3">
|
|
<img src="{{b "/static/img/logo.png"}}" alt="Logo" class="h-10 w-auto brightness-0 invert">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-7 shadow-sm sm:p-8">
|
|
<div class="mb-7 space-y-1">
|
|
<h2 class="text-xl font-semibold">Masuk ke akun Anda</h2>
|
|
<p class="text-sm text-slate-500">Gunakan username dan password yang terdaftar.</p>
|
|
</div>
|
|
|
|
{{if .Error}}
|
|
<div class="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
{{.Error}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<form method="POST" action="{{b "/mcu-login"}}" class="space-y-5">
|
|
<div class="space-y-1.5">
|
|
<label for="username" class="block text-sm font-medium">Username</label>
|
|
<input
|
|
id="username"
|
|
name="username"
|
|
type="text"
|
|
required
|
|
autocomplete="username"
|
|
placeholder="Masukkan username"
|
|
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label for="password" class="block text-sm font-medium">Password</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
autocomplete="current-password"
|
|
placeholder="Masukkan password"
|
|
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full rounded-xl bg-brand-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-600 active:bg-brand-700"
|
|
>
|
|
Masuk
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="mt-5 text-center text-xs text-slate-400">CpOne Dashboard — Laboratorium & Klinik Westerindo</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
{{end}}
|