pcmt/templates/signup.tmpl

55 lines
3.0 KiB
Go HTML Template
Raw Normal View History

{{ template "head.tmpl" . }}
<body class="min-h-screen bg-white dark:bg-gray-900">
{{ template "navbar.tmpl" . }}
<main class="grow min-w-[300px]">
<section class="bg-white dark:bg-gray-900">
<div class="container mx-auto md:mx-4 px-6 sm:px-0:py-0 md:py-16 lg:py-32">
<div class="lg:flex">
<div class="lg:w-1/2">
<h3 class="mt-4 text-gray-600 dark:text-gray-300 md:text-lg">Welcome!</h3>
<h1 class="mt-4 text-2xl font-medium text-gray-800 capitalize lg:text-3xl dark:text-white">
Create a new account
</h1>
</div>
<div class="mt-8 lg:w-1/2 lg:mt-0">
<form method="post" class="w-full lg:max-w-xl">
<input type="hidden" name="_csrf" value="{{- .CSRF -}}">
<div class="relative flex items-center">
2023-05-08 23:42:27 +02:00
<span class="absolute" role="img" aria-label="person outline icon for username">
{{ template "svg-user.tmpl" }}
</span>
<input name="username" type="text" placeholder="Username" required class="block w-full py-3 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div>
<div class="relative flex items-center mt-4">
<!-- <label class="block"> -->
2023-05-08 23:42:27 +02:00
<span class="absolute" role="img" aria-label="email icon">
{{ template "svg-email.tmpl" }}
</span>
<input name="email" type="email" placeholder="Email address" required class="peer block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
<p class="mt-2 mx-4 hidden peer-invalid:block text-pink-600 text-sm">
Please provide a valid email address.
</p>
<!-- </label> -->
</div>
<div class="relative flex items-center mt-4">
2023-05-08 23:42:27 +02:00
<span class="absolute" role="img" aria-label="password lock icon">
{{ template "svg-password.tmpl" }}
</span>
<input name="password" type="password" placeholder="Password" required class="block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div>
<div class="mt-8 md:flex md:items-center">
<button class="w-full px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/2 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
Sign up
</button>
<a href="/signin" class="inline-block mt-4 text-center text-blue-500 md:mt-0 md:mx-6 lg:mx-auto hover:underline dark:text-blue-400">
Already have an account?
</a>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
{{ template "footer.tmpl" . }}