<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
 <meta charset="ISO-8859-1">
    <title>Artifacts | Account</title>
    <link rel = "icon" href = "images/icon.jpg" type = "image/x-icon">
        <link rel="stylesheet" href="styleb.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
</head>
<body>
 	<div class="container">
 		<a href="about.jsp">
            <img src="images/logos2.png" class="logo">
        </a>
        <div class="card">
            <div class="inner-box" id="card">
                <div class="card-front">
                <%@include file="components/invalid.jsp" %>
                    <h2>LOGIN</h2>
                    <form action="SloginServlet" method="post">
                        <div class="fields">
                            <span class="fa fa-user"></span>
                            <input name="email" type="email" placeholder="Your Email ID" required>
                        </div>


                        <div class="fields space">
                            <span class="fa fa-lock"></span>
                            <input name="password" type="password" class="pass-key" placeholder="Password" required>
                            <span class="show">SHOW</span>
                        </div>


                        <button type="submit" class="submit-btn"> LOGIN </button>
                    </form>


                    <a href=" "> Forgot Password ?</a>

                    <button type="button" class="btn" onclick="openResgister()"> Don't have Account? </button>

                    <img src="images/hands.png" width="450" height="230" style="vertical-align:bottom;margin:10px 150px">



                </div>
                <section id="registerb"> 
                <div class="card-back">
                    <h2>REGISTER</h2>
                    <form action="SregisterServlet" method="post">
                        <div>
                            <div class="field">
                                <span class="fa fa-user-circle"></span>

                                <input name="seller_name" type="text" placeholder="Your Name" required>
                            </div>
                            <div class="field industry">
                                <span class="fa fa-industry"></span>

                                <input name="seller_inds" type="text" placeholder="Industry" required>
                            </div>


                            <div class="field mail">
                                <span class="fa fa-user"></span>

                                <input name="seller_email" type="email" placeholder="Your Email ID" required>
                            </div>
                            <div class="field space">
                                <span class="fa fa-lock"></span>
                                <input name="seller_password" type="password" class="pas-key" placeholder="Password" required>
                                <span class="shows">SHOW</span>
                            </div>
                            <div class="field type">
                                <span class="fa fa-shopping-bag"></span>

                                <input name="seller_btype" type="text" placeholder="Business Type" required>
                            </div>

                            <div class="field address">

                                <span class="fa fa-address-card"></span>

                                <input name="seller_ad" type="text" placeholder="Address line(1)" required>
                            </div>
                            <div class="field line">
                                <span class="fa fa-address-card"></span>

                                <input name="seller_aline" type="text" placeholder="Address line(2)" required>
                            </div>
                            <div class="field phone">
                                <span class="fa fa-phone"></span>

                                <input name="seller_phone" type="text" placeholder="Your Phone Number" required>
                            </div>

                            <div class="field city">
                                <span class="fa fa-home"></span>

                                <input name="seller_city" type="text" placeholder="City" required>
                            </div>
                            <div class="field pincode">
                                <span class="fa fa-address-book"></span>

                                <input name="seller_pincode" type="text" placeholder="Pincode" required>
                            </div>
                            <div class="field country">
                                <span class="fa fa-home"></span>

                                <input name="seller_country"  type="text" placeholder="Country" required>
                            </div>
                            <div class="field state">
                                <span class="fa fa-home"></span>

                                <input name="seller_state"  type="text" placeholder="State" required>
                            </div>




                            <button type="submit" class="submit-btn"> Sign Up </button>
                        </div>

                    </form>


                    <button type="button" class="btn" onclick="openLogin()">ALready Have An Account? </button>

                </div>
                
              </section>
            </div>
        </div>

    </div>

    <script>
        var card = document.getElementById("card");

        function openResgister() {
            card.style.transform = "rotateY(-180deg)";

        }

        function openLogin() {
            card.style.transform = "rotateY( 0deg)";

        }
    </script>

    <script>
        const pass_field = document.querySelector('.pass-key');
        const showBtn = document.querySelector('.show');
        showBtn.addEventListener('click', function() {
            if (pass_field.type === "password") {
                pass_field.type = "text";
                showBtn.textContent = "HIDE";
                showBtn.style.color = "#3498db";
            } else {
                pass_field.type = "password";
                showBtn.textContent = "SHOW";
                showBtn.style.color = "#222";
            }
        });
    </script>
    <script>
        const pas_field = document.querySelector('.pas-key');
        const shownBtn = document.querySelector('.shows');
        shownBtn.addEventListener('click', function() {
            if (pas_field.type === "password") {
                pas_field.type = "text";
                shownBtn.textContent = "HIDE";
                shownBtn.style.color = "#3498db";
            } else {
                pas_field.type = "password";
                shownBtn.textContent = "SHOW";
                shownBtn.style.color = "#222";
            }
        });
    </script>

</body>
</html>