perling/resources/views/auth/signin.blade copy.php

99 lines
5.0 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<x-head/>
<body>
<section class="auth bg-base d-flex flex-wrap">
<div class="auth-left d-lg-block d-none">
<div class="d-flex align-items-center flex-column vh-100 justify-content-center">
<img src="{{ asset('assets/images/auth/bg-login.jpg') }}" alt="">
</div>
</div>
<div class="auth-right py-32 px-24 d-flex flex-column justify-content-center">
<div class="max-w-464-px mx-auto w-100">
<div>
<a href="#" class="mb-40 max-w-290-px">
<img src="{{ asset('assets/images/auth/logo_color.png') }}" alt="">
</a>
<h4 class="mb-12">Sign In to your Account</h4>
<p class="mb-32 text-secondary-light text-lg">Welcome back! please enter your detail</p>
</div>
<form action="#">
<div class="icon-field mb-16">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" class="form-control h-56-px bg-neutral-50 radius-12" placeholder="Email">
</div>
<div class="position-relative mb-20">
<div class="icon-field">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" class="form-control h-56-px bg-neutral-50 radius-12" id="your-password" placeholder="Password">
</div>
<span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#your-password"></span>
</div>
<div class="">
<div class="d-flex justify-content-between gap-2">
<div class="form-check style-check d-flex align-items-center">
<input class="form-check-input border border-neutral-300" type="checkbox" value="" id="remeber">
<label class="form-check-label" for="remeber">Remember me </label>
</div>
<a href="javascript:void(0)" class="text-primary-600 fw-medium">Forgot Password?</a>
</div>
</div>
<button type="submit" class="btn btn-primary text-sm btn-sm px-12 py-16 w-100 radius-12 mt-32"> Sign In</button>
{{-- <div class="mt-32 center-border-horizontal text-center">
<span class="bg-base z-1 px-4">Or sign in with</span>
</div>
<div class="mt-32 d-flex align-items-center gap-3">
<button type="button" class="fw-semibold text-primary-light py-16 px-24 w-50 border radius-12 text-md d-flex align-items-center justify-content-center gap-12 line-height-1 bg-hover-primary-50">
<iconify-icon icon="ic:baseline-facebook" class="text-primary-600 text-xl line-height-1"></iconify-icon>
Google
</button>
<button type="button" class="fw-semibold text-primary-light py-16 px-24 w-50 border radius-12 text-md d-flex align-items-center justify-content-center gap-12 line-height-1 bg-hover-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-32 text-center text-sm">
<p class="mb-0">Dont have an account?<a href="#" class="text-primary-600 fw-semibold">Sign Up</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>