<!DOCTYPE html>
<html class="login_page_html">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <link rel='shortcut icon' href="/static/img/favicon.png"/>
        <link rel="stylesheet" type="text/css" href="/static/login/style.css" />
        <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    </head>
    <!--登录超时，跳出框架显示登录页      start-->
    <script>
        if(self.location !== top.location){
            top.location = self.location;
        }
    </script>

    <style type="text/css">
        /**
         * 提示信息框
         */
        .message{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 9999;
            display: none;
        }
        .message .box{
            position: absolute;
            left: 0%;
            top: 0%;
            width: 100%;
            height: 40px;
            text-align: center;
        }

    </style>
    <!--登录超时，跳出框架显示登录页      end-->
    <body class="login_page">
        <div class="login_page_bg">
            <div class="login_page_panel">
                <h1 style="color: #fff;font-size: 40px;text-align:center;">定时任务管理</h1>
                <form action="/login" method="post">
                    <div class="username">
                        <input type="text" name="username" id="username" class="box_sizing" autofocus="autofocus" autocomplete="off" placeholder="账号" required />
                    </div>
                    <div class="password">
                        <input type="password" name="password" id="password" class="box_sizing" placeholder="密码" required />
                    </div>

                    <div class="remember" style="margin-top: 10px;color: #fff">
                        <input type="checkbox" name="remember" id="remember" value="yes"> &nbsp;&nbsp;一周内自动登录
                    </div>
                    
                    <div class="login_button">
                        <button id="login_button" class="box_sizing">登&nbsp;&nbsp;录</button>
                    </div>
                   
                </form>
            </div>
        </div>

        <!--message     start-->
        <div class="message">
            <div class="alert alert-danger box" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong id="message">保存成功</strong>
            </div>
        </div>
        <!--message     end-->
        <script src="/static/js/jquery-1.11.1.min.js"></script>
        <script src="/static/bootstrap/js/bootstrap.js"></script>
        <script type="text/javascript">
            //alert-success alert-danger
            function alert_message(message,addClass,removeClass)
            {
                $('.box').addClass(addClass);
                $('.box').removeClass(removeClass);
                $("#message").html(message);
                $('.message').fadeIn(1000);
                $('.message').fadeOut(4000);
            }
            var error_info = "{{.flash.error}}";
            if(error_info)
            {
                alert_message(error_info,"alert-danger","alert-success");
            }
            
        </script>
    </body>
</html>
