<!doctype html>
<html lang="en" class="color-two font-exo">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>MarketPro - E-commerce HTML5 Tailwind CSS Template</title>
    <link rel="shortcut icon" href="views/assets/images/favicon.png">
    <script defer="defer" src="views/assets/js/app.bundle.js"></script>
    <link href="views/assets/css/app.min.css" rel="stylesheet">
    <link href="views/assets/css/AccountStyle.css" rel="stylesheet">

</head>

<body>
    <div class="preloader fixed inset-0 z-[9999] flex justify-center items-center bg-white"><img
            src="views/assets/images/preloader.gif" alt="Image"></div>
    <div class="overlay"></div>
    <div class="side-overlay"></div>
    <div
        class="progress-wrap fixed right-[36px] bottom-[36px] h-[46px] w-[46px] leading-[46px] cursor-pointer block rounded-[50px] shadow-inset z-[10000] opacity-0 invisible translate-y-[15px] transition-all duration-200 ease-linear bg-transparent max-lg:right-[24px] max-lg:bottom-[24px] max-lg:h-[40px] max-lg:w-[40px] max-lg:leading-[40px] hover:scale-[1.06] after:absolute after:font-[900] after:text-center after:w-[46px] after:h-[46px] after:leading-[46px] after:text-[18px] after:left-0 after:top-0 after:cursor-pointer after:block after:content-['\e08e'] after:font-phospor after:z-[1] after:transition-all after:duration-200 after:ease-linear after:text-main max-lg:after:h-[40px] max-lg:after:w-[40px] max-lg:after:leading-[40px]">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
    <form action="#" class="search-box">
        <button type="button"
            class="search-box__close absolute inset-block-start-0 right-0 m-16 w-48 h-48 border border-gray-100 rounded-[50%] flex items-center justify-center text-white hover-text-gray-800 hover-bg-white text-2xl transition-1">
            <i class="ph ph-x"></i></button>
        <div class="container">
            <div class="relative"><input
                    class="form-control block w-full p-[0.375rem_0.75rem] leading-6 text-[#495057] bg-white bg-clip-padding border border-[#ced4da] transition-all duration-150 ease-in-out focus:text-[#495057] focus:bg-white focus:border-main focus:outline-0 focus:shadow-none py-16 px-24 text-xl rounded-[50rem] pe-64 h-[64px]"
                    placeholder="Search for a product or brand">
                <button type="submit"
                    class="w-48 h-48 bg-main-600 rounded-[50%] flex items-center justify-center text-xl text-white absolute top-[50%] translate-y-[-50%] right-0 me-8">
                    <i class="ph ph-magnifying-glass"></i></button>
            </div>
        </div>
    </form>
    <?php include("views/mobile-menu.php") ?>


    <?php include 'views/header.php' ?>
    <?php include 'views/header2.php' ?>
    <?php
    $breadcrumb = "account";
    $title = "My Account";
    include 'views/breadcrumb.php' ?>






    <section class="account py-80">
        <div class="container container-lg">



            <div class="row g-4">
                <!-- ✅ فرم ورود -->
                <div class="2xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto pe-xl-5">
                    <form id="loginForm"
                        class="border border-gray-100 hover-border-main-600 transition-1 rounded-16 px-24 py-40 h-full">
                        <h6 class="text-xl mb-32">Login</h6>
                        <div class="mb-24">
                            <label for="username" class="text-neutral-900 text-lg mb-8 font-[500]">Username or email
                                address <span class="text-danger">*</span></label>
                            <input class="common-input" id="username" name="username" placeholder="Enter Username">
                        </div>
                        <div class="mb-24">
                            <label for="password" class="text-neutral-900 text-lg mb-8 font-[500]">Password</label>
                            <div class="relative">
                                <input type="password" class="common-input" id="password" name="password"
                                    placeholder="Enter Password">
                                <span
                                    class="toggle-password absolute top-[50%] right-0 me-16 translate-y-[-50%] cursor-pointer ph ph-eye-slash"></span>
                            </div>
                            <div id="result1" class="alert-box" style="display:none;"></div>
                        </div>
                        <div class="mb-24 mt-48">
                            <div class="flex items-center gap-48 flex-wrap">
                                <button type="submit" class="btn btn-main py-18 px-40">Log in</button>
                                <div class="form-check common-check">
                                    <input class="form-check-input" type="checkbox" id="remember">
                                    <label class="form-check-label flex-grow" for="remember">Remember me</label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-48">
                            <a href="#"
                                class="text-danger-600 text-sm font-[600] hover-text-decoration-underline">Forgot your
                                password?</a>
                        </div>
                        <div id="loginResult" class="alert-box" style="display:none;"></div>
                    </form>
                </div>

                <!-- ✅ فرم ثبت‌نام -->
                <div class="2xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">
                    <form id="registerForm"
                        class="border border-gray-100 hover-border-main-600 transition-1 rounded-16 px-24 py-40">
                        <h6 class="text-xl mb-32">Register</h6>
                        <div class="mb-24">
                            <label for="usernameTwo" class="text-neutral-900 text-lg mb-8 font-[500]">Username <span
                                    class="text-danger">*</span></label>
                            <input name="username" class="common-input" id="usernameTwo" placeholder="Write a username">
                        </div>
                        <div class="mb-24">
                            <label for="emailTwo" class="text-neutral-900 text-lg mb-8 font-[500]">Email address <span
                                    class="text-danger">*</span></label>
                            <input type="email" class="common-input" id="emailTwo" name="email"
                                placeholder="Enter Email Address">
                        </div>
                        <div class="mb-24">
                            <label for="enter-password" class="text-neutral-900 text-lg mb-8 font-[500]">Password <span
                                    class="text-danger">*</span></label>
                            <div class="relative">
                                <input type="password" name="password" class="common-input" id="enter-password"
                                    placeholder="Enter Password">
                                <span
                                    class="toggle-password absolute top-[50%] right-0 me-16 translate-y-[-50%] cursor-pointer ph ph-eye-slash"></span>
                            </div>
                        </div>
                        <div id="result" class="alert-box" style="display:none;"></div>
                        <div class="mt-48">
                            <button type="submit" class="btn btn-main py-18 px-40">Register</button>
                        </div>
                    </form>
                </div>
            </div>





            <!--        <form id="registerForm">-->
            <!--            <div class="row g-4">-->
            <!--                <div class="2xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto pe-xl-5">-->
            <!--                    <div class="border border-gray-100 hover-border-main-600 transition-1 rounded-16 px-24 py-40 h-full">-->
            <!--                        <h6 class="text-xl mb-32">Login</h6>-->
            <!--                        <div class="mb-24"><label for="username" class="text-neutral-900 text-lg mb-8 font-[500]">Username-->
            <!--                                or email address <span class="text-danger">*</span></label> <input class="common-input"-->
            <!--                                                                                                   id="username"-->
            <!--                                                                                                   placeholder="First Name">-->
            <!--                        </div>-->
            <!--                        <div class="mb-24"><label for="password" class="text-neutral-900 text-lg mb-8 font-[500]">Password</label>-->
            <!--                            <div class="relative"><input type="password" class="common-input" id="password"-->
            <!--                                                         placeholder="Enter Password" value="password"> <span-->
            <!--                                        class="toggle-password absolute top-[50%] right-0 me-16 translate-y-[-50%] cursor-pointer ph ph-eye-slash"-->
            <!--                                        id="#password"></span></div>-->
            <!--                        </div>-->
            <!--                        <div class="mb-24 mt-48">-->
            <!--                            <div class="flex items-center gap-48 flex-wrap">-->
            <!--                                <button type="submit" class="btn btn-main py-18 px-40">Log in</button>-->
            <!--                                <div class="form-check common-check"><input class="form-check-input" type="checkbox"-->
            <!--                                                                            value="" id="remember"> <label-->
            <!--                                            class="form-check-label flex-grow" for="remember">Remember me</label></div>-->
            <!--                            </div>-->
            <!--                        </div>-->
            <!--                        <div class="mt-48"><a href="index.html"-->
            <!--                                              class="text-danger-600 text-sm font-[600] hover-text-decoration-underline">Forgot-->
            <!--                                your password?</a></div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--                <div class="2xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
            <!--                    <div class="border border-gray-100 hover-border-main-600 transition-1 rounded-16 px-24 py-40"><h6-->
            <!--                                class="text-xl mb-32">Register</h6>-->
            <!--                        <div class="mb-24"><label for="usernameTwo" class="text-neutral-900 text-lg mb-8 font-[500]">Username-->
            <!--                                <span class="text-danger">*</span></label> <input name="username" class="common-input" id="usernameTwo"-->
            <!--                                                                                  placeholder="Write a username"></div>-->
            <!--                        <div class="mb-24"><label for="emailTwo" class="text-neutral-900 text-lg mb-8 font-[500]">Email-->
            <!--                                address <span class="text-danger">*</span></label> <input type="email"-->
            <!--                                                                                          class="common-input"-->
            <!--                                                                                          id="emailTwo"-->
            <!--                                                                                          name="email"-->
            <!--                                                                                          placeholder="Enter Email Address">-->
            <!--                        </div>-->
            <!--                        <div class="mb-24"><label for="enter-password" class="text-neutral-900 text-lg mb-8 font-[500]">Password-->
            <!--                                <span class="text-danger">*</span></label>-->
            <!--                            <div class="relative"><input type="password" name="password" class="common-input" id="enter-password"-->
            <!--                                                         placeholder="Enter Password" value="password"> <span-->
            <!--                                        class="toggle-password absolute top-[50%] right-0 me-16 translate-y-[-50%] cursor-pointer ph ph-eye-slash"-->
            <!--                                        id="#enter-password"></span></div>-->
            <!--                        </div>-->
            <!--                        <div class="my-48"><p class="text-gray-500">Your personal data will be used to process your-->
            <!--                                order, support your experience throughout this website, and for other purposes described-->
            <!--                                in our <a href="index.html" class="text-main-600 text-decoration-underline">privacy-->
            <!--                                    policy</a> .</p></div>-->
            <!--                        <div id="result" class="alert-box" style="display: none;"></div>-->
            <!---->
            <!--                        <div class="mt-48">-->
            <!--                            <button type="submit" class="btn btn-main py-18 px-40">Register</button>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </form>-->

        </div>
    </section>

    <?php include 'views/shipping.php' ?>

    <?php include 'views/footer.php' ?>

    <?php include 'views/bottom-footer.php' ?>
    <script src="views/api/user.js" defer="defer"></script>
</body>

</html>