133 lines
5.6 KiB
HTML
133 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Login XPORT</title>
|
|
<!-- tailwind cdn -->
|
|
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
|
<!-- alpine cdn -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- wrapper -->
|
|
<div class=" lg:bg-white shadow-lg">
|
|
<!-- Screen phone & tablet start-->
|
|
<div class="relative w-full
|
|
bg-cover bg-center h-screen
|
|
lg:hidden">
|
|
<img src="../images/loginBgPhone.png" class="w-full h-full object-cover">
|
|
<!-- logo & title start -->
|
|
<img src="../images/logoServer.png" class="absolute top-28 left-1/2 mt-10
|
|
transform -translate-x-1/2 object-contain
|
|
mb-3" />
|
|
<div class="absolute top-32 left-1/2 mt-21
|
|
transform -translate-x-1/2 object-contain">
|
|
<h2 class="text-3xl font-bold text-white">Log in to your</h2>
|
|
<h2 class="text-3xl font-bold text-white text-center">Account</h2>
|
|
</div>
|
|
<!-- logo & title end -->
|
|
<!-- inputan username -->
|
|
<div class="absolute top-77 w-full object-contain px-10 mt-2">
|
|
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
|
outline-[#D9D9D9] bg-white
|
|
focus:outline-[#2196F3] focus:shadow-outline" id="username" type="text" placeholder="Username">
|
|
</div>
|
|
<!-- inputan password -->
|
|
<div class="absolute top-98 w-full object-contain px-10 mt-2">
|
|
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
|
outline-[#D9D9D9] bg-white
|
|
focus:outline-[#2196F3] focus:shadow-outline" id="password" type="password" placeholder="Password">
|
|
</div>
|
|
<!-- remember me & password -->
|
|
<div class="absolute top-120 flex justify-between w-full object-contain px-10 mt-2">
|
|
<div class="flex items-center space-x-2">
|
|
<input type="checkbox" class="size-4" /> <label
|
|
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
|
|
me</label>
|
|
</div>
|
|
<div>
|
|
<a href="#"
|
|
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
|
|
Password ?</a>
|
|
</div>
|
|
</div>
|
|
<!-- btn login -->
|
|
<div class="absolute top-140 flex justify-between w-full object-contain px-10 mt-2">
|
|
<button
|
|
class="w-full h-16 bg-[#1D61E7] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
|
|
type="button">
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Screen hone & tablet end -->
|
|
<!-- Screen lg up start -->
|
|
<div class="hidden lg:grid grid-cols-2 h-screen">
|
|
<!-- kiri -->
|
|
<div class="bg-[#F0F2F5] shadow-lg text-center">
|
|
<!-- wrapper box -->
|
|
<div class="mt-14">
|
|
<!-- paling luar -->
|
|
<!-- logo start -->
|
|
<div class="mt-3 ml-14 flex items-center space-x-2">
|
|
<img src="../images/logoServer.png" class="mr-3">
|
|
<p class="lg:text-[2.5vh] xl:text-[3vh] text-[#2196F3] font-normal">Port Server</p>
|
|
</div>
|
|
<!-- logo end -->
|
|
<!-- form login start -->
|
|
<div class="lg:px-24 lg:py-12 xl:px-32 xl:py-16 2xl:px-40 2xl:py-16">
|
|
<!-- welcome text -->
|
|
<h2 class="lg:text-[4vh] xl:text-[5vh] 2xl:text-[6vh] font-semibold mb-2">Welcome Back</h2>
|
|
<!-- Log in into your account -->
|
|
<p class="lg:text-[2vh] xl:text-[2.5vh] font-normal mb-16">Log in into your account</p>
|
|
|
|
<!-- inputan username -->
|
|
<div class="mb-9">
|
|
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
|
outline-[#D9D9D9] bg-white
|
|
focus:outline-blue-400 focus:shadow-outline" id="username" type="text" placeholder="Username">
|
|
</div>
|
|
<!-- inputan password -->
|
|
<div class="mb-4">
|
|
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
|
outline-[#D9D9D9] bg-white
|
|
focus:outline-blue-400 focus:shadow-outline" id="password" type="password" placeholder="Password">
|
|
</div>
|
|
<!-- remember me -->
|
|
<div class="mb-16 flex justify-between">
|
|
<div class="flex items-center space-x-2">
|
|
<input type="checkbox" class="size-4" /> <label
|
|
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
|
|
me</label>
|
|
</div>
|
|
<div>
|
|
<a href="#"
|
|
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
|
|
Password ?</a>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- button login -->
|
|
<button
|
|
class="w-full h-16 bg-[#2196F3] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
|
|
type="button">
|
|
Login
|
|
</button>
|
|
|
|
</div>
|
|
<!-- form login end -->
|
|
</div>
|
|
</div>
|
|
<!-- kanan -->
|
|
<div class="hidden lg:inline-block bg-orange-400 ">
|
|
<img class="object-cover h-full" src="../images/xloginbg.png" />
|
|
</div>
|
|
</div>
|
|
<!-- Screnn lg up end -->
|
|
</div>
|
|
</body>
|
|
|
|
</html> |