Open Rodrigit-hub opened 2 months ago
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
<link
rel="stylesheet"
as="style"
onload="this.rel='stylesheet'"
href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Public+Sans%3Awght%40400%3B500%3B700%3B900"
/>
<title>Galileo Design</title>
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
</head>
<body>
<div class="relative flex size-full min-h-screen flex-col bg-[#121a21] dark group/design-root overflow-x-hidden" style='font-family: "Public Sans", "Noto Sans", sans-serif;'>
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#253746] px-10 py-3">
<div class="flex items-center gap-4 text-white">
<div class="size-4">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6_319)">
<path
d="M8.57829 8.57829C5.52816 11.6284 3.451 15.5145 2.60947 19.7452C1.76794 23.9758 2.19984 28.361 3.85056 32.3462C5.50128 36.3314 8.29667 39.7376 11.8832 42.134C15.4698 44.5305 19.6865 45.8096 24 45.8096C28.3135 45.8096 32.5302 44.5305 36.1168 42.134C39.7033 39.7375 42.4987 36.3314 44.1494 32.3462C45.8002 28.361 46.2321 23.9758 45.3905 19.7452C44.549 15.5145 42.4718 11.6284 39.4217 8.57829L24 24L8.57829 8.57829Z"
fill="currentColor"
></path>
</g>
<defs>
<clipPath id="clip0_6_319"><rect width="48" height="48" fill="white"></rect></clipPath>
</defs>
</svg>
</div>
<h2 class="text-white text-lg font-bold leading-tight tracking-[-0.015em]">SureGuard</h2>
</div>
</header>
<div class="px-40 flex flex-1 justify-center py-5">
<div class="layout-content-container flex flex-col w-[512px] max-w-[512px] py-5 max-w-[960px] flex-1">
<h2 class="text-white tracking-light text-[28px] font-bold leading-tight px-4 text-center pb-3 pt-5">Log in</h2>
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
<label class="flex flex-col min-w-40 flex-1">
<p class="text-white text-base font-medium leading-normal pb-2">Username</p>
<div class="flex w-full flex-1 items-stretch rounded-xl">
<input
placeholder="Enter your username"
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-white focus:outline-0 focus:ring-0 border border-[#364f63] bg-[#1b2732] focus:border-[#364f63] h-14 placeholder:text-[#95b0c6] p-[15px] rounded-r-none border-r-0 pr-2 text-base font-normal leading-normal"
value=""
/>
<div
class="text-[#95b0c6] flex border border-[#364f63] bg-[#1b2732] items-center justify-center pr-[15px] rounded-r-xl border-l-0"
data-icon="Person"
data-size="24px"
data-weight="regular"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M160,40a32,32,0,1,0-32,32A32,32,0,0,0,160,40ZM128,56a16,16,0,1,1,16-16A16,16,0,0,1,128,56Zm90.34,78.05L173.17,82.83a32,32,0,0,0-24-10.83H106.83a32,32,0,0,0-24,10.83L37.66,134.05a20,20,0,0,0,28.13,28.43l16.3-13.08L65.55,212.28A20,20,0,0,0,102,228.8l26-44.87,26,44.87a20,20,0,0,0,36.41-16.52L173.91,149.4l16.3,13.08a20,20,0,0,0,28.13-28.43Zm-11.51,16.77a4,4,0,0,1-5.66,0c-.21-.2-.42-.4-.65-.58L165,121.76A8,8,0,0,0,152.26,130L175.14,217a7.72,7.72,0,0,0,.48,1.35,4,4,0,1,1-7.25,3.38,6.25,6.25,0,0,0-.33-.63L134.92,164a8,8,0,0,0-13.84,0L88,221.05a6.25,6.25,0,0,0-.33.63,4,4,0,0,1-2.26,2.07,4,4,0,0,1-5-5.45,7.72,7.72,0,0,0,.48-1.35L103.74,130A8,8,0,0,0,91,121.76L55.48,150.24c-.23.18-.44.38-.65.58a4,4,0,1,1-5.66-5.65c.12-.12.23-.24.34-.37L94.83,93.41a16,16,0,0,1,12-5.41h42.34a16,16,0,0,1,12,5.41l45.32,51.39c.11.13.22.25.34.37A4,4,0,0,1,206.83,150.82Z"
></path>
</svg>
</div>
</div>
</label>
</div>
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
<label class="flex flex-col min-w-40 flex-1">
<p class="text-white text-base font-medium leading-normal pb-2">Password</p>
<div class="flex w-full flex-1 items-stretch rounded-xl">
<input
placeholder="Enter your password"
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-white focus:outline-0 focus:ring-0 border border-[#364f63] bg-[#1b2732] focus:border-[#364f63] h-14 placeholder:text-[#95b0c6] p-[15px] rounded-r-none border-r-0 pr-2 text-base font-normal leading-normal"
value=""
/>
<div
class="text-[#95b0c6] flex border border-[#364f63] bg-[#1b2732] items-center justify-center pr-[15px] rounded-r-xl border-l-0"
data-icon="X"
data-size="24px"
data-weight="regular"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
></path>
</svg>
</div>
</div>
</label>
</div>
<div class="flex px-4 py-3">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-4 flex-1 bg-[#2c90e2] text-white text-sm font-bold leading-normal tracking-[0.015em]"
>
<span class="truncate">Log in</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
``