<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>亿网政务服务管理平台</title>
    <style>
        body {
            background: #060e1b;
            overflow: hidden;
        }

        canvas {
        / / opacity: 0.5;
        }

        /* Demo Buttons Style */
        .codrops-demos {
            font-size: 0.8em;
            text-align: center;
            position: absolute;
            z-index: 99;
            width: 96%;
        }

        .codrops-demos a {
            display: inline-block;
            margin: 0.35em 0.1em;
            padding: 0.5em 1.2em;
            outline: none;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            border-radius: 2px;
            font-size: 110%;
            border: 2px solid transparent;
            color: #fff;
        }

        .codrops-demos a:hover,
        .codrops-demos a.current-demo {
            border-color: #383a3c;
        }
    </style>
    <link rel="stylesheet" href="/loginstyle/css/login.css">
    <link rel="stylesheet" href="/loginstyle/font-awesome-4.7.0/css/font-awesome.css">
</head>

<body>

<div class="box">
    <div class="dad">
    </div>
    <form id="signupForm">
        <div class="daily" style="margin-top: 53px">
            <input id="x" type="text" name="username" class="form-control uname" placeholder="用户名" value="">
        </div>
        <div class="daily" style="margin-top: 41px">
            <input id="y" type="password" name="password" class="form-control pword" placeholder="密码"
                   value="">
        </div>
        <div class="dark">
            <span style="position: absolute;left: 10px;top: 10px;" class="fa fa-pencil-square-o"></span>
            <input id="input" type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5"
                   autocomplete="off">
            <a style="display: block;height: 30px;float: left;width: 81px;margin-top: 5px;margin-left: 15px;"
               href="javascript:void(0);" title="点击更换验证码">
                <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" style="width: 80px"/>
            </a>
        </div>
        <div class="danger">
            <button class="danger" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
        </div>
    </form>
</div>
<script th:inline="javascript"> var ctx = [[@{
    /}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"
        th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.0.0}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<nav class="codrops-demos">
</nav>
<canvas id="canvas" width="1400" height="826"></canvas>
<script>
    "use strict";

    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1200;

    var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    // End cache

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
    }

    var Star = function () {

        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 12;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 900000;
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    }

    Star.prototype.draw = function () {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.8;
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        }
        ;

        window.requestAnimationFrame(animation);
    }

    animation();
</script>

</body>
</html>