<%@ Page Title="Login" Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="ZFJINV.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>User Login</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="ZFJINV " name="description" />
    <meta content="" name="author" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
    <link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

    <link href="/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="/assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/pages/css/login-4.min.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body class="login">

    <div class="logo" style="padding-top: 60px; padding-bottom: 1px;">
        <h3><span class="font-blue-madison" style="color: #ffffff; font-size: 28px;"><strong>Luna  </strong></span><span class="font-white" style="font-size: 28px;">Smart Mobile</span></h3>
    </div>

    <div class="content" style="background-color: rgba(0, 0, 0, 0.16); padding-bottom: 32px;">

        <form id="loginform" runat="server">
            <h3 class="form-title">Login to your account</h3>

           <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate> 


  <asp:ScriptManager runat="server">
            </asp:ScriptManager>


            <asp:UpdateProgress ID="dvProgressBar" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <div class="modal">
                        <div class="center">
                            <div class="loader"></div>
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

             <div class="messagealert" id="alert_container">
            </div>
                    <div class="alert alert-danger display-hide">
                        <button class="close" data-close="alert"></button>
                        <span>Enter any username and password. </span>
                    </div>
            
           
                    <div class="form-group">
                        <label class="control-label visible-ie8 visible-ie9">Username</label>
                        <div class="input-icon">
                            <i class="icon-user"></i>
                            <asp:TextBox class="form-control placeholder-no-fix" required="required" placeholder="Username" ID="txtUsername" runat="server" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label visible-ie8 visible-ie9">Password</label>
                        <div class="input-icon">
                            <i class="icon-lock"></i>
                            <asp:TextBox class="form-control placeholder-no-fix" required="required" placeholder="Password" TextMode="Password" ID="txtPassword" runat="server" />
                        </div>
                    </div>
            
                    
                    <div class="form-actions">
                             <%--<img src="../assets/global/img/reload.gif" class="  center " style="display: none; padding: 0; padding-left:190px;" id="loginLoader" />--%>
                        <asp:Button ID="btnLogin" Text="Login" class="btn green pull-right"  runat="server" OnClick="btnLogin_OnClick"> 

                            
                        </asp:Button>
                       
                        
                         
                    </div>

                </ContentTemplate>
            </asp:UpdatePanel>
            <script src="/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>

            <script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
            <script src="/assets/global/plugins/backstretch/jquery.backstretch.min.js" type="text/javascript"></script>

            <script src="/assets/global/scripts/app.min.js" type="text/javascript"></script>

            <script src="/assets/pages/scripts/login-4.min.js" type="text/javascript"></script>

            <style type="text/css">
                .messagealert {
                    width: auto;
                    padding-bottom: 5px;
                    font-size: 12px;
                }
                 .modal {
                            position: fixed;
                            top: 0;
                            background-color: black;
                            filter: alpha(opacity=60);
                            opacity: 0.6;
                            -moz-opacity: 0.8;
                        }

                        .center {
                            z-index: 1000;
                            margin: 150px auto;
                            padding: 50px;
                            width: 356px;
                            background-color: rgba(0, 0, 0, 0.16);
                            border-radius: 10px;
                            filter: alpha(opacity=100);
                            opacity: 1;
                            -moz-opacity: 1;
                        }

                            .center img {
                                height: 50px;
                                width: 50px;
                            }

                        .loader {
                            z-index: 1000;
                            margin: 73px auto;
                            padding: 50px;
                            width: 356px;
                            border: 16px solid #f3f3f3;
                            border-radius: 50%;
                            border-top: 16px solid #7FB3D5;
                            border-bottom: 16px solid #2980B9;
                            width: 10px;
                            height: 10px;
                            -webkit-animation: spin 1s linear infinite;
                            animation: spin 2s linear infinite;
                        }

                        @-webkit-keyframes spin {
                            0% {
                                -webkit-transform: rotate(0deg);
                            }

                            100% {
                                -webkit-transform: rotate(360deg);
                            }
                        }

                        @keyframes spin {
                            0% {
                                transform: rotate(0deg);
                            }

                            100% {
                                transform: rotate(360deg);
                            }
                        }

            </style>
            <script type="text/javascript">
                function ShowMessage(message, messagetype) {
                    var cssclass;
                    switch (messagetype) {
                        case 'Success':
                            cssclass = 'alert-success'
                            break;
                        case 'Error':
                            cssclass = 'alert-danger'
                            break;
                        case 'Warning':
                            cssclass = 'alert-warning'
                            break;
                        default:
                            cssclass = 'alert-info'
                    }
                    $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 1px 2px 4px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');
                }
            </script>

            <script type="text/javascript">
                function ShowProgressBar() {
                    document.getElementById('dvProgressBar').style.display = "";
                }

                function HideProgressBar() {
                    document.getElementById('dvProgressBar').style.display = "none";
                }
            </script>

           <%-- <script type="text/javascript">
                function showLoader(loaderType) {

                    var validate = true;
                    $('input:required').each(function () {
                        if ($(this).val().trim() === '') {
                            validate = false;
                        }
                    });

                  

                    if (validate && loaderType == "btnSave") {

                        document.getElementById("loginLoader").style.display = ""; // to display
                        return true;
                    }

                    else {
                        document.getElementById("loginLoader").style.display = "none";
                    }
                }

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