<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login1.aspx.cs" Inherits="HRMS.Login_.Login1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Login ::.</title>
    <link rel="stylesheet" href="Login_/CSS/bootstrap.min.css" />
    <script src="Login_/CSS/bootstrap.bundle.min.js">
    </script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
    <script src="Login_/CSS/jquery.min.js"></script>
    <style>
        body {
            background-color: #EBEAEF
        }

        .container {
            flex-wrap: wrap
        }

        .card {
            border: none;
            border-radius: 10px;
            background-color: #2085B5;
            width: 450px;
            height: 300px;
            margin-top: -60px
        }

        p.mb-1 {
            font-size: 25px;
            color: #9FB7FD
        }

        .btn-primary {
            border: none;
            background: #2085B5;
            margin-bottom: 60px
        }

            .btn-primary small {
                color: #9FB7FD
            }

            .btn-primary span {
                font-size: 13px
            }

        .card.two {
            border-top-right-radius: 60px;
            border-top-left-radius: 0
        }

        .form-group {
            position: relative;
            margin-bottom: 2rem
        }

        .form-control {
            border: none;
            border-radius: 0;
            outline: 0;
            border-bottom: 1.5px solid #E6EBEE
        }

            .form-control:focus {
                box-shadow: none;
                border-radius: 0;
                border-bottom: 2px solid #8A97A8
            }

        .form-control-placeholder {
            position: absolute;
            top: 15px;
            left: 10px;
            transition: all 200ms;
            opacity: 0.5;
            font-size: 80%
        }

        .form-control:focus + .form-control-placeholder,
        .form-control:valid + .form-control-placeholder {
            font-size: 80%;
            transform: translate3d(0, -90%, 0);
            opacity: 1;
            top: 10px;
            color: #8B92AC
        }

        .btn-block {
            border: none;
            border-radius: 8px;
            background-color: #2085B5;
            padding: 10px 0 12px
        }

            .btn-block:focus {
                box-shadow: none
            }

            .btn-block span {
                font-size: 15px;
                color: #D0E6FF
            }
    </style>

   <%-- <style>
        #load {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999;
            background: url("../../Images/buffer.gif") no-repeat center center rgba(255,255,255,255)
        }
    </style>--%>

</head>
<body>
    <div id="load"></div>
    <div id="contents">


        <form id="form1" runat="server">
            <div style="background-image: url('../../Images/gradient-background-26046-26731-hd-wallpapers.jpg'); height: 660px">
                <div class="loginbx container" id="loginBox">
                    <div class="d-flex flex-column justify-content-between row align-items-center">
                        <div class="card mt-5 p-5 ">
                            <div>
                                <h4 class="mb-5 text-white">Syslync Enterprise Application</h4>
                                <div style="text-align: center; color: white; font-size: large; font-weight: 600">Sign In</div>
                            </div>
                            <br />
                            <button class="btn btn-primary btn-lg"><small>Not a member?</small><span>&nbsp;Sign Up</span> </button>
                        </div>


                        <div class="card two bg-white px-5 py-4 mb-3" style="height: 350px">
                            <div class="form-group">
                                <asp:TextBox ID="tbx_User" runat="server" CssClass="form-control" placeholder="User ID"></asp:TextBox>
                                <asp:RequiredFieldValidator SetFocusOnError="true" ValidationGroup="save" runat="server" ID="Req_tbx_User" ControlToValidate="tbx_User" ErrorMessage="Email is Required!" />
                            </div>
                            <div class="form-group">
                                <asp:TextBox ID="tbx_password" TextMode="Password" runat="server" CssClass="form-control" placeholder="Password"></asp:TextBox>
                                <asp:RequiredFieldValidator SetFocusOnError="true" ValidationGroup="save" runat="server" ID="RequiredFieldValidator1" ControlToValidate="tbx_password" ErrorMessage="Password is Required!" />
                            </div>

                            <button id="btnLogin" class="btn btn-primary btn-block btn-lg mt-1 mb-2" runat="server" onserverclick="btnLogin_ServerClick" validationgroup="save"><span>Login<i class="fas fa-long-arrow-alt-right ml-2"></i></span></button>

                            <a href="javascript:void(0);" style="text-align: center" onclick="ShowDIV('ResetPwd');">Forgot Password?</a>

                            <br />
                            <div id="divMessage" runat="server" visible="false" class="alert alert-danger alert-dismissable">
                                <asp:Label ID="lblMessage" class="msg" runat="server" Text=""></asp:Label>
                            </div>

                        </div>



                    </div>

                </div>






                <div class="loginbx container" id="ResetPwd" style="display: none;">
                    <div class="d-flex flex-column justify-content-between row align-items-center">
                        <div class="card mt-5 p-5">
                            <div>
                                <h4 class="mb-5 text-white text-center">Reset Password</h4>
                                <div style="text-align: center; color: white; font-size: medium; font-weight: 600">Please Provide your Company Email Address</div>
                            </div>
                            <br />
                        </div>


                        <div class="card two bg-white px-5 py-4 mb-3">
                            <div class="form-group">

                                <asp:TextBox ID="txt_reset" runat="server" CssClass="form-control" placeholder="Email"></asp:TextBox>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <button id="btn_reset" class="btn btn-primary btn-block" runat="server">Reset Password</button>
                                </div>

                                <div class="col-md-6">
                                    <a href="javascript:void(0);" class="btn btn-primary btn-block" onclick="ShowDIV('loginBox');">Sign In</a>
                                </div>

                            </div>
                            <br />
                            <div id="div2" runat="server" visible="false" class="alert alert-danger alert-dismissable">
                                <asp:Label ID="Label1" class="msg" runat="server" Text=""></asp:Label>
                            </div>

                        </div>
                    </div>









                </div>





            </div>

            <script>
                function ShowDIV(_vr) {
                    $("#loginBox").hide('slide');
                    $("#ResetPwd").hide('slide');

                    $("#" + _vr).show('slide');

                }
            </script>

  <%--          <script>
                document.onreadystatechange = function () {
                    var state = document.readyState
                    if (state == "interactive") {
                        document.getElementById('contents').style.visibility = "hidden";
                    }
                    else if (state == 'complete') {
                        setTimeout(function () {
                            document.getElementById('interactive');
                            document.getElementById('load').style.visibility = "hidden";
                            document.getElementById('contents').style.visibility = "visible";
                        }, 2000);
                    }
                }

             
            </script>--%>
        </form>
    </div>
</body>
</html>
