109 lines
6.5 KiB
PHP
109 lines
6.5 KiB
PHP
<!-- meta tags and other links -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<x-head/>
|
|
|
|
<body class="dark:bg-neutral-800 bg-neutral-100 dark:text-white">
|
|
|
|
<section class="bg-white dark:bg-dark-2 flex flex-wrap min-h-[100vh]">
|
|
<div class="lg:w-1/2 lg:block hidden">
|
|
<div class="flex items-center flex-col h-full justify-center">
|
|
<img src="{{ asset('assets/images/auth/auth-img.png') }}" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/2 py-8 px-6 flex flex-col justify-center">
|
|
<div class="lg:max-w-[464px] mx-auto w-full">
|
|
<div>
|
|
<a href="{{ route('index') }}" class="mb-2.5 max-w-[290px]">
|
|
<img src="{{ asset('assets/images/logo.png') }}" alt="">
|
|
</a>
|
|
<h4 class="mb-3">Sign Up to your Account</h4>
|
|
<p class="mb-8 text-secondary-light text-lg">Welcome back! please enter your detail</p>
|
|
</div>
|
|
<form action="#">
|
|
<div class="icon-field mb-4 relative">
|
|
<span class="absolute start-4 top-1/2 -translate-y-1/2 pointer-events-none flex text-xl">
|
|
<iconify-icon icon="f7:person"></iconify-icon>
|
|
</span>
|
|
<input type="text" class="form-control h-[56px] ps-11 border-neutral-300 bg-neutral-50 dark:bg-dark-2 rounded-xl" placeholder="Username">
|
|
</div>
|
|
<div class="icon-field mb-4 relative">
|
|
<span class="absolute start-4 top-1/2 -translate-y-1/2 pointer-events-none flex text-xl">
|
|
<iconify-icon icon="mage:email"></iconify-icon>
|
|
</span>
|
|
<input type="email" class="form-control h-[56px] ps-11 border-neutral-300 bg-neutral-50 dark:bg-dark-2 rounded-xl" placeholder="Email">
|
|
</div>
|
|
<div class="mb-5">
|
|
<div class="relative">
|
|
<div class="icon-field">
|
|
<span class="absolute start-4 top-1/2 -translate-y-1/2 pointer-events-none flex text-xl">
|
|
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
|
|
</span>
|
|
<input type="password" class="form-control h-[56px] ps-11 border-neutral-300 bg-neutral-50 dark:bg-dark-2 rounded-xl" id="your-password" placeholder="Password">
|
|
</div>
|
|
<span class="toggle-password ri-eye-line cursor-pointer absolute end-0 top-1/2 -translate-y-1/2 me-4 text-secondary-light" data-toggle="#your-password"></span>
|
|
</div>
|
|
<span class="mt-3 text-sm text-secondary-light">Your password must have at least 8 characters</span>
|
|
</div>
|
|
<div class=" mt-6">
|
|
<div class="flex justify-between gap-2">
|
|
<div class="form-check style-check flex items-start gap-2">
|
|
<input class="form-check-input border border-neutral-300 mt-1.5" type="checkbox" value="" id="condition">
|
|
<label class="text-sm" for="condition">
|
|
By creating an account means you agree to the
|
|
<a href="javascript:void(0)" class="text-primary-600 font-semibold">Terms & Conditions</a> and our
|
|
<a href="javascript:void(0)" class="text-primary-600 font-semibold">Privacy Policy</a>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary justify-center text-sm btn-sm px-3 py-4 w-full rounded-xl mt-8"> Sign Up</button>
|
|
|
|
<div class="mt-8 center-border-horizontal text-center relative before:absolute before:w-full before:h-[1px] before:top-1/2 before:-translate-y-1/2 before:bg-neutral-300 before:start-0">
|
|
<span class="bg-white dark:bg-dark-2 z-[2] relative px-4">Or sign up with</span>
|
|
</div>
|
|
<div class="mt-8 flex items-center gap-3">
|
|
<button type="button" class="font-semibold text-neutral-600 dark:text-neutral-200 py-4 px-6 w-1/2 border rounded-xl text-base flex items-center justify-center gap-3 line-height-1 hover:bg-primary-50">
|
|
<iconify-icon icon="ic:baseline-facebook" class="text-primary-600 text-xl line-height-1"></iconify-icon>
|
|
Facebook
|
|
</button>
|
|
<button type="button" class="font-semibold text-neutral-600 dark:text-neutral-200 py-4 px-6 w-1/2 border rounded-xl text-base flex items-center justify-center gap-3 line-height-1 hover:bg-primary-50">
|
|
<iconify-icon icon="logos:google-icon" class="text-primary-600 text-xl line-height-1"></iconify-icon>
|
|
Google
|
|
</button>
|
|
</div>
|
|
<div class="mt-8 text-center text-sm">
|
|
<p class="mb-0">Already have an account? <a href="{{ route('signin') }}" class="text-primary-600 font-semibold hover:underline">Sign In</a></p>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@php
|
|
$script = '<script>
|
|
// ================== Password Show Hide Js Start ==========
|
|
function initializePasswordToggle(toggleSelector) {
|
|
$(toggleSelector).on("click", function() {
|
|
$(this).toggleClass("ri-eye-off-line");
|
|
var input = $($(this).attr("data-toggle"));
|
|
if (input.attr("type") === "password") {
|
|
input.attr("type", "text");
|
|
} else {
|
|
input.attr("type", "password");
|
|
}
|
|
});
|
|
}
|
|
// Call the function
|
|
initializePasswordToggle(".toggle-password");
|
|
// ========================= Password Show Hide Js End ===========================
|
|
</script>';
|
|
@endphp
|
|
|
|
<x-script />
|
|
|
|
</body>
|
|
</html> |