177 lines
11 KiB
HTML
177 lines
11 KiB
HTML
<html lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-variant": "#e1e3e3",
|
|
"tertiary-container": "#7c4824",
|
|
"surface-container-high": "#e6e8e9",
|
|
"on-tertiary-fixed-variant": "#6b3a17",
|
|
"primary": "#00454c",
|
|
"secondary-container": "#cfe2f9",
|
|
"error": "#ba1a1a",
|
|
"outline": "#6f797a",
|
|
"secondary-fixed": "#d1e4fb",
|
|
"tertiary": "#60320f",
|
|
"inverse-on-surface": "#eff1f1",
|
|
"surface-bright": "#f8fafa",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed": "#001f23",
|
|
"on-primary-container": "#92d5df",
|
|
"on-surface-variant": "#3f484a",
|
|
"on-surface": "#191c1d",
|
|
"tertiary-fixed-dim": "#feb78a",
|
|
"surface-container-highest": "#e1e3e3",
|
|
"primary-fixed": "#aaeef8",
|
|
"surface-dim": "#d8dadb",
|
|
"on-primary-fixed-variant": "#004f57",
|
|
"on-tertiary-fixed": "#311300",
|
|
"surface-container": "#eceeee",
|
|
"primary-fixed-dim": "#8ed1db",
|
|
"inverse-primary": "#8ed1db",
|
|
"on-error-container": "#93000a",
|
|
"secondary": "#4e6073",
|
|
"on-secondary-fixed": "#091d2e",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#36485b",
|
|
"outline-variant": "#bfc8ca",
|
|
"on-background": "#191c1d",
|
|
"inverse-surface": "#2e3131",
|
|
"on-error": "#ffffff",
|
|
"on-tertiary-container": "#ffbb91",
|
|
"secondary-fixed-dim": "#b5c8df",
|
|
"primary-container": "#0d5e67",
|
|
"background": "#f8fafa",
|
|
"tertiary-fixed": "#ffdbc7",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"surface-tint": "#1d6871",
|
|
"surface-container-low": "#f2f4f4",
|
|
"surface": "#f8fafa",
|
|
"on-secondary-container": "#526478"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"gutter": "16px",
|
|
"container-margin": "24px",
|
|
"row-height-sm": "32px",
|
|
"row-height-md": "48px",
|
|
"compact-padding": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lot": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"h2": ["Inter"],
|
|
"h1": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"table-data": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
|
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background min-h-screen flex items-center justify-center">
|
|
<main class="w-full max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between p-container-margin md:gap-16">
|
|
<div class="hidden md:flex flex-1 flex-col items-center justify-center space-y-8">
|
|
<div class="relative w-full max-w-md aspect-square bg-surface-container rounded-xl overflow-hidden shadow-sm border border-outline-variant">
|
|
<img alt="Logo Sarang Inventory Pro" class="w-full h-full object-cover opacity-90" data-alt="Close-up of premium edible bird nests in a clean warehouse setting with soft teal lighting and professional atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcipFNsMUT4XbRCkOtm3g4GLHTvyM7vfgH6Gm5Myj-4UZjkQl4vATiJYgMjCA_oYCtIgtsRU5BYZLM-Xg-guZY8Bfze0zFTGqFAFyzFa8QTALIGK8I21csvMEzwummGnH7NnH4MTyLz_2IKacjh-uWve_mEpDPjNGqlqBi729kN5GCIC2mY9rPvSikxb93CLnon1DP4NaCWbftbG_3EqPIKnkLb8qoAaZlL2YlfsPXCAIQjcLoFmwvhu7JnQmngO9FQITX6zYkNw"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-primary/60 to-transparent flex flex-col justify-end p-8">
|
|
<h2 class="font-display-lot text-display-lot text-white mb-2">Sarang Inventory Pro</h2>
|
|
<p class="font-body-sm text-body-sm text-white/80">Solusi Manajemen Inventaris Sarang Burung Walet Profesional.</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="flex items-center justify-center gap-2 text-primary font-h2 text-h2 mb-2">
|
|
<span class="material-symbols-outlined" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
|
|
Terpercaya di Seluruh Indonesia
|
|
</div>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">Akurasi data untuk kualitas ekspor yang terjamin dan traceability lot yang presisi.</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-md bg-surface-container-lowest p-8 md:p-12 border border-outline-variant rounded-lg shadow-sm">
|
|
<div class="md:hidden flex justify-center mb-8">
|
|
<img alt="Sarang Logo" class="h-16 w-16 object-contain" data-alt="Minimalist teal logo icon representing an edible birds nest with clean lines and professional design" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUI1ZaqHRlTVChiRGNFMWvaFgxdk4cAjnlO_yoz99FFmzm84x9Ms10AYAc2JtFaeIgLEeccyr0IhzYyMyzVUHLYBrNBWOfg29tsj6yfIrs8wXm-Bh-KEJbNPz7FaEPbuYEPtJ4evPaXJuR9_wZI4DjrXERU0LgbSDZxMyl59dbYThBvDqLXOwWVQrbcYBnGd7v0f58cxjNnpWZIMZaAV_H0hxngvAPGNGtZJ54ne_nr8PS21B9F-P_9Pbx5RiHmsTlHTy3y0ttNw"/>
|
|
</div>
|
|
<header class="mb-10 text-left">
|
|
<h1 class="font-h1 text-h1 text-on-surface mb-2">Selamat Datang Kembali</h1>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Masuk ke Operational Hub SarangWMS untuk mengelola lot inventaris Anda.</p>
|
|
</header>
|
|
<form class="space-y-6" onsubmit="return false">
|
|
<div class="space-y-1.5">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider block" for="identity">Email atau Username</label>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-[20px]" data-icon="person">person</span>
|
|
<input class="w-full pl-10 pr-4 py-2.5 bg-surface border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-primary font-body-base text-body-base placeholder:text-outline/50 transition-all outline-none" id="identity" name="identity" placeholder="nama@perusahaan.com" type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<div class="flex justify-between items-end">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider block" for="password">Kata Sandi</label>
|
|
<a class="font-label-caps text-label-caps text-primary hover:underline" href="#">Lupa Password?</a>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-[20px]" data-icon="lock">lock</span>
|
|
<input class="w-full pl-10 pr-12 py-2.5 bg-surface border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-primary font-body-base text-body-base placeholder:text-outline/50 transition-all outline-none" id="password" name="password" placeholder="••••••••" type="password"/>
|
|
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-outline hover:text-primary transition-colors" type="button">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="visibility">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-3 py-1">
|
|
<input class="w-4 h-4 rounded border-outline-variant text-primary focus:ring-primary" id="remember" type="checkbox"/>
|
|
<label class="font-body-sm text-body-sm text-on-surface-variant" for="remember">Ingat perangkat ini</label>
|
|
</div>
|
|
<button class="w-full bg-primary text-on-primary font-h2 text-h2 py-3 rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-all flex items-center justify-center gap-2 group" type="submit">
|
|
Masuk Sekarang
|
|
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</form>
|
|
<footer class="mt-12 pt-8 border-t border-outline-variant/30 text-center space-y-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Belum memiliki akun operasional? <a class="text-primary font-h2 hover:underline" href="#">Hubungi Admin</a></p>
|
|
<div class="flex flex-wrap justify-center gap-x-6 gap-y-2 opacity-60">
|
|
<a class="font-label-caps text-label-caps hover:text-primary transition-colors" href="#">Bantuan</a>
|
|
<a class="font-label-caps text-label-caps hover:text-primary transition-colors" href="#">Kebijakan Privasi</a>
|
|
<a class="font-label-caps text-label-caps hover:text-primary transition-colors" href="#">Syarat & Ketentuan</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
<div class="fixed bottom-0 left-0 w-full p-4 flex justify-between items-center text-on-surface-variant/40 font-label-caps text-label-caps pointer-events-none">
|
|
<div>v2.4.0-PRO</div>
|
|
<div>© 2024 SarangWMS Global</div>
|
|
</div>
|
|
</body></html> |