<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css"/>
    <style>
        html {
            height: 100%;
        }

        body {
            background-size:100% 100%;
            height: 100%;
            animation-name: myfirst;
            animation-duration: 12s;
            /*变换时间*/
            animation-delay: 2s;
            /*动画开始时间*/
            animation-iteration-count: infinite;
            /*下一周期循环播放*/
            animation-play-state: running;
            /*动画开始运行*/
        }

        @keyframes myfirst {
            /*0%   {background:url("./img/time.jpg");}*/
            /*34%  {background:url("./img/2.jpg");}*/
            /*67%  {background:url("./img/3.jpg");}*/
            /*100% {background:url("./img/1.jpg");}*/
        }

        .form {
            background: rgba(255, 255, 255, 0.2);
            width: 400px;
            margin: 200px auto;
        }

        /*阴影*/
        .fa {
            display: inline-block;
            top: 27px;
            left: 6px;
            position: relative;
            color: #ccc;
        }

        input[type="text"], input[type="password"] {
            padding-left: 26px;
        }

        .checkbox {
            padding-left: 21px;
        }

        #title{
            height:88px;
            margin-top:150px;
            font-size: 79px;
            color:white;
            text-align: center;
            font-family: "宋体";
            font-weight: 800;
            letter-spacing: 5px;
            -webkit-text-fill-color: white;/*文字的填充色*/
           -webkit-text-stroke: 2px green;/*描边的像素，也就是粗细*/
        }
    </style>
</head>
<body style="background-image: url(img/login/xwsq.png">
<div class="container" style="width:1400px">
    <div id="title">
        <%=community_conf.title %>
    </div>
    <div class="form row">
        <div class="form-horizontal col-md-offset-3" id="login_form">
            <h3 style="color: white" class="form-title">
            用户登录
            </h3>
            <div class="col-md-9">
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input data-pure-clear-button class="form-control required" type="text" placeholder="Username"
                           id="username" name="username" autofocus="autofocus" maxlength="20"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input data-pure-clear-button class="form-control required" type="password" placeholder="Password"
                           id="password" name="password" maxlength="20"/>
                </div>
                <div class="form-group">
                    <label class="checkbox">
                        <input type="checkbox" name="remember" value="1"/><span style="color:white">记住我</span>
                    </label>
                </div>
                <div class="form-group col-md-offset-9">
                    <button type="submit" onclick="login()" class="btn btn-success pull-right" name="submit">登录</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/jquery-2.2.3.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
<script src="./js/http_request.js"></script>
<script>
   
    function login() {
        var userId = document.getElementById("username").value;
        var pwd = document.getElementById("password").value;
        if (!userId || !pwd) {
            alert("账号或密码不能为空");
            return;
        }

        postByAjax("validateuser", {id: userId, pwd: pwd}, result=> {
            if (result[0]) {
                setCookie("user", JSON.stringify(result[0]),1);
                window.location = "./zzjg";
            } else {
                alert("账号或密码错误");
            }
        });
    }

    $("input[type='checkbox']").click(function () {
        if ($(this).prop('checked')) {
            localStorage.clear();
        }
    });

    $('#password').bind('keydown',function(event){
        if(event.keyCode == "13") {
            login();
        }
    });  

    function setCookie(c_name, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = c_name + "=" + escape(value) +
                ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
    }
</script>
</html>