dkyChenJiang.git

			@@ -3,7 +3,8 @@
			<head>
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

			<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
			<title>钻探工程信息化系统</title>
			<meta name="description" content="钻探工程信息化系统">
			<!--[if lt IE 9]>
			@@ -15,53 +16,109 @@
			if(window.top!==window.self){window.top.location=window.location};
			</script>
			<style>
			body,html{color:#000;margin:0;overflow:hidden;font:400 13px arial,Microsoft Yahei!important}a{font-size:inherit;text-decoration:none;color:#666;cursor:pointer}.txt{width:90%;padding:4px 20px;border-radius:22px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:3.6em;outline:0}.txt:focus{border-color:#4386f5}.button{background:#4386f5;color:#fff;padding:6px 0;height:25px;line-height:25px;border-radius:5px;width:90%;border-radius:22px;display:inline-block;cursor:pointer}.page-con{text-align:center;width:400px;margin:0 auto;height:362px;position:absolute;top:50%;margin-top:-181px;left:50%;margin-left:-200px;background-color:#fff;padding:27px;border-radius:5px;border:1px solid #e8e1e1;}.page-con .sep{border-top:1px solid #ddd;height:20px;text-align:center}.page-con label{color:#666;display:inline-block;padding:0 10px;}.page-con .signup{font-size:12px;margin-top:19px;color:#666;text-align:left;padding-left:26px}.page-con .signup a{color:#333}#bg-canvas{position:absolute;z-index:-1}#logo-text{display:inline-block;margin-left:8px;font-size:35px;vertical-align:7px;font-family:arial;height:60px;text-shadow:1px 1px 2px #bbb inset}#logo-text .logo-dot{width:68px;height:6px;display:inline-block;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-3px;display:none}#logo-text .logo-dot:after{width:6px;background:#4386f5;height:6px;display:inline-block;position:absolute;right:-4px;border-radius:50%;content:""}#logo-text label{display:inline-block;background:#4386f5;border-radius:50%;color:#fff;padding:11px 8px;margin-left:6px;position:relative;box-shadow:1px 1px 6px #ccc}.login-input{position:relative}.login-input a{position:absolute;right:33px;top:13px;width:auto;height:20px;line-height:20px;text-align:right;color:#888;z-index:1}.weixin-con{display:none;padding:15px;background:#fff;position:absolute;z-index:9;width:362px;height:410px;left:50%;top:50%;margin-left:-181px;margin-top:-205px;text-align:center;border-raidus:5px;box-shadow:1px 1px 4px #ccc}.error-tip{height:30px;line-height:30px;position:absolute;right:32px;color:red;bottom:6px;font-size:12px;z-index:2;background:#fff}.success-tip{position:absolute;width:194px;top:155px;display:none;right:96px;padding:5px 8px;border:1px solid green;border-radius:3px;box-shadow:1px 1px 5px #d6e9c6;background-color:#dff0d8;color:#468847;text-shadow:0 1px 0 rgba(255,255,255,.5)}.icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:42px;height:42px;cursor:pointer;}.icons.weixin{background-position:0 0;background-size:42px}.icons.qq{background-position:0 -85px;background-size:43px}.icons.weibo{background-position:0 -131px;background-size:44px}.icons.google{background-position:0 -45px;background-size:44px}.icons.somemore{border-radius:100%;border:1px solid #ddd;background-position:-1px -165px;background-size:42px;width:38px;height:38px}.icons.somemore:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,.2);box-shadow:inset 0 0 1px rgba(0,0,0,.2);cursor:pointer}.morelogo-con{background-color:#fff;padding:10px;position:absolute;left:249px;opacity:0;top:30px;z-index:3;border-radius:5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.morelogo-con.popover{opacity:1;top:45px}.morelogo-con>span{display:block;font-size:13px;color:#3d474d}.morelogo-con .mingdao{display:inline-block;vertical-align:middle;background-position:0 -257px;background-size:44px;margin-right:11px}.rotate{animation:.8s infinite rotate;-webkit-animation:.8s infinite rotate;-o-animation:.8s infinite rotate;-moz-animation:.8s infinite rotate;-ms-animation:.8s infinite rotate}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes rotate{from{-ms-transform:rotate(0)}to{-ms-transform:rotate(360deg)}}@-o-keyframes rotate{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bind{width:600px;margin-left:-300px}.bind .button,.bind .txt{width:55%}.bind #logo-text{vertical-align:-7px}.bind .icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:74px;height:74px;vertical-align:top}.bind .icons.weixin{background-position:0 0;background-size:70px;width:70px;height:68px}.bind .icons.qq{background-position:0 -141px;background-size:70px;width:70px;height:68px}.bind .icons.weibo{background-position:0 -211px;background-size:70px;width:70px;height:68px}.bind .icons.google{background-position:0 -73px;background-size:70px;width:70px;height:68px}.bind_item{position:relative}.bind-arrow{margin-left:30px;display:inline-block;position:relative;color:#666;margin-right:30px}.bind-tip{margin-top:40px}.des{margin-top:10px;font-size:14px}@media screen and (max-width:760px){.page-con{width:100%;left:0;margin-left:0}}
			body,html{color:#000;margin:0;overflow:hidden;font:400 13px arial,Microsoft Yahei!important}
			a{font-size:inherit;text-decoration:none;color:#666;cursor:pointer}
			.txt{width:90%;padding:4px 20px;border-radius:22px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:3.6em;outline:0}
			.txt:focus{border-color:#4386f5}.button{background:#4386f5;color:#fff;padding:6px 0;height:25px;line-height:25px;border-radius:5px;width:90%;border-radius:22px;display:inline-block;cursor:pointer}
			.container{
			/text-align:center;/
			/width:400px;/
			margin:0 auto;
			/height:362px;/
			position:absolute;
			top:30%;
			margin-top:-181px;
			/left:50%;/
			margin-left:-200px;
			/background-color:#fff;/
			/padding:27px;/
			/border-radius:5px;/
			/border:1px solid #e8e1e1;/
			}
			.page-con .sep{border-top:1px solid #ddd;height:20px;text-align:center}
			.page-con label{color:#666;display:inline-block;padding:0 10px;}
			.page-con .signup{font-size:12px;margin-top:19px;color:#666;text-align:left;padding-left:26px}
			.page-con .signup a{color:#333}#bg-canvas{position:absolute;z-index:-1}
			#logo-text{
			display:inline-block;
			/margin-left:8px;/
			font-size:35px;
			vertical-align:7px;
			font-family:arial;
			/height:60px;/
			text-shadow:1px 1px 2px #bbb inset
			}
			#logo-text .logo-dot{width:68px;height:6px;display:inline-block;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-3px;display:none}#logo-text .logo-dot:after{width:6px;background:#4386f5;height:6px;display:inline-block;position:absolute;right:-4px;border-radius:50%;content:""}#logo-text label{display:inline-block;background:#4386f5;border-radius:50%;color:#fff;padding:11px 8px;margin-left:6px;position:relative;box-shadow:1px 1px 6px #ccc}.login-input{position:relative}.login-input a{position:absolute;right:33px;top:13px;width:auto;height:20px;line-height:20px;text-align:right;color:#888;z-index:1}.weixin-con{display:none;padding:15px;background:#fff;position:absolute;z-index:9;width:362px;height:410px;left:50%;top:50%;margin-left:-181px;margin-top:-205px;text-align:center;border-raidus:5px;box-shadow:1px 1px 4px #ccc}.error-tip{height:30px;line-height:30px;position:absolute;right:32px;color:red;bottom:6px;font-size:12px;z-index:2;background:#fff}.success-tip{position:absolute;width:194px;top:155px;display:none;right:96px;padding:5px 8px;border:1px solid green;border-radius:3px;box-shadow:1px 1px 5px #d6e9c6;background-color:#dff0d8;color:#468847;text-shadow:0 1px 0 rgba(255,255,255,.5)}.icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:42px;height:42px;cursor:pointer;}.icons.weixin{background-position:0 0;background-size:42px}.icons.qq{background-position:0 -85px;background-size:43px}.icons.weibo{background-position:0 -131px;background-size:44px}.icons.google{background-position:0 -45px;background-size:44px}.icons.somemore{border-radius:100%;border:1px solid #ddd;background-position:-1px -165px;background-size:42px;width:38px;height:38px}.icons.somemore:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,.2);box-shadow:inset 0 0 1px rgba(0,0,0,.2);cursor:pointer}.morelogo-con{background-color:#fff;padding:10px;position:absolute;left:249px;opacity:0;top:30px;z-index:3;border-radius:5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.morelogo-con.popover{opacity:1;top:45px}.morelogo-con>span{display:block;font-size:13px;color:#3d474d}.morelogo-con .mingdao{display:inline-block;vertical-align:middle;background-position:0 -257px;background-size:44px;margin-right:11px}.rotate{animation:.8s infinite rotate;-webkit-animation:.8s infinite rotate;-o-animation:.8s infinite rotate;-moz-animation:.8s infinite rotate;-ms-animation:.8s infinite rotate}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes rotate{from{-ms-transform:rotate(0)}to{-ms-transform:rotate(360deg)}}@-o-keyframes rotate{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bind{width:600px;margin-left:-300px}.bind .button,.bind .txt{width:55%}.bind #logo-text{vertical-align:-7px}.bind .icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:74px;height:74px;vertical-align:top}.bind .icons.weixin{background-position:0 0;background-size:70px;width:70px;height:68px}.bind .icons.qq{background-position:0 -141px;background-size:70px;width:70px;height:68px}.bind .icons.weibo{background-position:0 -211px;background-size:70px;width:70px;height:68px}.bind .icons.google{background-position:0 -73px;background-size:70px;width:70px;height:68px}.bind_item{position:relative}.bind-arrow{margin-left:30px;display:inline-block;position:relative;color:#666;margin-right:30px}.bind-tip{margin-top:40px}.des{margin-top:10px;font-size:14px}@media screen and (max-width:760px){.page-con{width:100%;left:0;margin-left:0}}
			body{
			background-image :url(images/loginPage/bg.png);
			background-image :url(images/loginPage/bg1.png);
			background-size:100% 100%;
			}
			html,body{
			height: 100%;
			touch-action: manipulation;
			}
			html {
			touch-action: manipulation;
			}
			#logo-text{
			color: rgba(51, 51, 51, 1);
			font-size: 44px;
			/color: rgba(51, 51, 51, 1);/
			font-size: 36px;
			/margin-left: 25px;/
			color: #000000;
			/margin-bottom: 20px;/
			}
			.container{
			width: 495px;
			height: 621px;
			border-radius: 24px;
			/background-color: #ffffff;/
			/box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);/
			border-width: 0px;
			margin-left: 0px;
			/text-align: left;/
			left: 70%;
			padding: 0px;
			color: white;
			}
			.page-con{
			border-width: 0px;
			margin-left: 0px;
			text-align: left;
			left: 324px;
			padding: 0px;
			padding:20px;
			}
			.bar-line{
			display: block;
			width: 66px;
			height: 8px;
			background-color: rgba(64, 149, 229, 1);
			background-color: rgba(64, 149, 229, 0);
			margin-bottom: 27px;
			}
			.txt{
			border-radius: 0px;
			border-width: 0px;
			font-size: 16px;
			font-size: 26px;
			padding: 0px 0px 0px 10px;
			height: 45px;
			}
			.input-container{
			border-bottom: 1px solid rgba(187, 187, 187, 1);
			/border-bottom: 1px solid rgba(187, 187, 187, 1);/
			/margin: auto;/
			box-sizing: border-box;
			width:418px;
			height:60px;
			border-bottom:1px solid #999999;
			/padding: 18px 28px 18px 28px;/
			padding: 10px 0px;
			/border-radius: 10px;/
			display: flex;
			align-items: center;
			}
			#signin_btn{
			width: 230px;
			height: 50px;
			line-height: 50px;
			border-radius: 4px;
			background-color: rgba(94, 131, 248, 1);
			width: 418px;
			height: 88px;
			line-height: 88px;
			border-radius: 10px;
			background-color: #008BFD;
			/background-color: rgba(94, 131, 248, 1);/
			color: rgba(255, 255, 255, 1);
			font-size: 20px;
			font-size: 24px;
			text-align: center;
			padding: 0px;
			}
			@@ -71,6 +128,7 @@
			.password-icon{
			position: relative;
			top: 4px;
			margin-right: 5px;
			}
			.verification-icon{
			position: absolute;
			@@ -79,50 +137,451 @@
			width: 28px;
			}
			.validate-line{
			border-bottom: 1px solid rgba(187, 187, 187, 1);
			border-bottom: 1px solid rgba(187, 187, 187, 0);
			}
			.text71{
			position: relative;
			top:20%;
			z-index: 1;
			font-weight: 600;
			font-size: 48px;
			color: transparent;
			/color: #39B5E1;/
			letter-spacing: 4px;
			margin: 0;
			padding: 0 16px;
			background: linear-gradient(to right, #39B5E1 0, #4BE0FF 1%, #FFF 2%, #4BE0FF 3%, #39B5E1 4%);
			background-position: -32px 0;
			-webkit-background-clip: text;


			/animation: typing 2s steps(20, end) 1,eff71-pause 4s linear infinite, blink-caret 1s steps(1) infinite;/
			animation: typing 2s steps(20, end) 1,eff71 1s linear 2s 1 forwards, blink-caret 1s steps(1) infinite;
			display: inline-block;
			overflow: hidden;
			white-space: nowrap;
			}
			@keyframes eff71-pause {
			0%, 24.9% { /* 第一个0%到24.9%的范围内播放eff71动画 */
			animation-name: eff71;
			}
			25%, 100% { /* 其余时间保持透明背景 */
			background-position: -32px 0; /* 或者任何不会显示动画效果的位置 */
			}
			}
			@keyframes eff71{
			to{
			background-position: 750px 0;
			}
			}
			@keyframes typing {
			from { width: 0 }
			to { width: 100% }
			}

			@keyframes blink-caret {
			50% { border-color: transparent }
			}
			.animation{
			position: relative;
			display: inline-block;
			/left: 20%;/
			/left: 18%;/
			/top: 20%;/
			z-index: 1;
			/width: 522px;/
			width: 62.5%;
			height: 100%;
			/background-image: url('images/loginPage/decora.png');/
			/background-size: cover;/
			/background-position: center;/
			text-align: center;
			/align-content: center;/
			}

			</style>
			</head>

			<body>
			<div class="page-con" style="background-color:transparent">
			<span class="bar-line"></span>
			<form name="loginform" id="loginform">
			<input type="hidden" id="redirectUrl" name="redirectUrl" value="${redirectUrl}" >
			<div><span id="logo-text">钻探工程信息化系统</span></div>

			<div class="input-container" style="margin-top:25px;position:relative;">
			<img src="images/loginPage/user.png" />
			<input id="username" name="username" class="txt" type="text" autocomplete="off" placeholder="请输入用户名/邮箱" >
			<div class="error-tip"></div>
			</div>
			<div class="login-input input-container" style="margin-top:30px;position:relative;">
			<img class="password-icon" src="images/loginPage/password.png"/>
			<input name="password" id="password" class="txt" type="password" placeholder="请输入登录密码" autocomplete="off" >
			<div class="error-tip"></div>
			</div>

			<div style="margin-top:25px;position:relative;" th:if="${captchaEnabled==true}">
			<img class="verification-icon" src="images/loginPage/validate.svg" />
			<input name="validateCode" id="validateCode" style="float: left;margin-left: 30px;width: 230px;" class="txt" type="text" placeholder="验证码" />
			<a href="javascript:void(0);" title="点击更换验证码">
			<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="radius imgcode" width="100" height="30" style="position:absolute;right:40px;top:7px;"/>
			</a>
			<div style="display: inline-block;float: left;position: relative;top:10px;right: 150px;" class="error-tip"></div>
			</div>
			<div class="validate-line" style="clear:both;"></div>
			<div style="margin-top:30px;">
			<span id="signin_btn" onclick="login.login();" class="button">登&emsp;&emsp;录</span>
			</div>
			<div class="signup">
			<label for="rememberMe" style="float:right;margin-right: 15px;color:#000;" >
			<input type="checkbox" id="rememberMe" name="rememberMe" >记住密码</label>
			</div>
			</form>

			<canvas id="canv" width="1920" height="572" style="z-index:-1;position: absolute;top:0;left: 0;"></canvas>
			<div class="animation">
			<p class="text71" >北京市地面沉降监测网建设工程</p>
			</div>
			<div class="weixin-con" id="weixin_dlg"><div style="margin-top:200px;">加载中...</div></div>
			<div class="container" style="display: inline-block;">
			<div class="page-con" >
			<span class="bar-line"></span>
			<form name="loginform" id="loginform">
			<input type="hidden" id="redirectUrl" name="redirectUrl" value="${redirectUrl}" >
			<div><span id="logo-text">您好，欢迎登录！</span></div>
			<div style="width:100%">
			<div class="input-container" style="margin-top:124px;position:relative;">
			<img src="images/loginPage/user1.png" style="margin-right:5px;"/>
			<input id="username" name="username" class="txt" value="" type="text" autocomplete="off" placeholder="请输入用户名/邮箱" >
			<div class="error-tip"></div>
			</div>
			<div class="login-input input-container" style="margin-top:42px;position:relative;">
			<img class="password-icon" src="images/loginPage/password1.png"style="margin-top:-5px"/>
			<input name="password" id="password" value="" class="txt" type="password" placeholder="请输入登录密码" autocomplete="off" >
			<div class="error-tip"></div>
			</div>

			<div style="margin-top:25px;position:relative;" th:if="${captchaEnabled==true}">
			<img class="verification-icon" src="images/loginPage/validate.svg" />
			<input name="validateCode" id="validateCode" style="float: left;margin-left: 30px;width: 230px;" class="txt" type="text" placeholder="验证码" />
			<a href="javascript:void(0);" title="点击更换验证码">
			<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="radius imgcode" width="100" height="30" style="position:absolute;right:40px;top:7px;"/>
			</a>
			<div style="display: inline-block;float: left;position: relative;top:10px;right: 150px;" class="error-tip"></div>
			</div>
			</div>

			<div class="validate-line" style="clear:both;"></div>
			<div style="margin-top:96px;">
			<span id="signin_btn" onclick="login.login();" class="button">登录</span>
			</div>
			<div class="signup">
			<label for="rememberMe" style="float:right;margin-right: 15px;color:#000;" >
			<input type="checkbox" id="rememberMe" name="rememberMe" >记住密码</label>
			</div>
			</form>

			</div>
			</div>

			<div class="weixin-con" id="weixin_dlg"><div style="margin-top:200px;">加载中...</div>
			<!--粒子动画-->
			<script>
			var num = 200;
			var w = window.innerWidth*0.625;
			// var w = 1200;
			var h = window.innerHeight;
			var max = 100;
			var _x = 0;
			var _y = 0;
			var _z = 150;
			var dtr = function(d) {
			return d * Math.PI / 180;
			};

			var rnd = function() {
			return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
			};
			var dist = function(p1, p2, p3) {
			return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
			};

			var cam = {
			obj: {
			x: _x,
			y: _y,
			z: _z
			},
			dest: {
			x: 0,
			y: 0,
			z: 1
			},
			dist: {
			x: 0,
			y: 0,
			z: 200
			},
			ang: {
			cplane: 0,
			splane: 0,
			ctheta: 0,
			stheta: 0
			},
			zoom: 1,
			disp: {
			x: w / 2,
			y: h / 2,
			z: 0
			},
			upd: function() {
			cam.dist.x = cam.dest.x - cam.obj.x;
			cam.dist.y = cam.dest.y - cam.obj.y;
			cam.dist.z = cam.dest.z - cam.obj.z;
			cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
			cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
			cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
			cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
			}
			};

			var trans = {
			parts: {
			sz: function(p, sz) {
			return {
			x: p.x * sz.x,
			y: p.y * sz.y,
			z: p.z * sz.z
			};
			},
			rot: {
			x: function(p, rot) {
			return {
			x: p.x,
			y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
			z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
			};
			},
			y: function(p, rot) {
			return {
			x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
			y: p.y,
			z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
			};
			},
			z: function(p, rot) {
			return {
			x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
			y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
			z: p.z
			};
			}
			},
			pos: function(p, pos) {
			return {
			x: p.x + pos.x,
			y: p.y + pos.y,
			z: p.z + pos.z
			};
			}
			},
			pov: {
			plane: function(p) {
			return {
			x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
			y: p.y,
			z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
			};
			},
			theta: function(p) {
			return {
			x: p.x,
			y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
			z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
			};
			},
			set: function(p) {
			return {
			x: p.x - cam.obj.x,
			y: p.y - cam.obj.y,
			z: p.z - cam.obj.z
			};
			}
			},
			persp: function(p) {
			return {
			x: p.x * cam.dist.z / p.z * cam.zoom,
			y: p.y * cam.dist.z / p.z * cam.zoom,
			z: p.z * cam.zoom,
			p: cam.dist.z / p.z
			};
			},
			disp: function(p, disp) {
			return {
			x: p.x + disp.x,
			y: -p.y + disp.y,
			z: p.z + disp.z,
			p: p.p
			};
			},
			steps: function(_obj_, sz, rot, pos, disp) {
			var _args = trans.parts.sz(_obj_, sz);
			_args = trans.parts.rot.x(_args, rot);
			_args = trans.parts.rot.y(_args, rot);
			_args = trans.parts.rot.z(_args, rot);
			_args = trans.parts.pos(_args, pos);
			_args = trans.pov.plane(_args);
			_args = trans.pov.theta(_args);
			_args = trans.pov.set(_args);
			_args = trans.persp(_args);
			_args = trans.disp(_args, disp);
			return _args;
			}
			};

			(function() {
			"use strict";
			var threeD = function(param) {
			this.transIn = {};
			this.transOut = {};
			this.transIn.vtx = (param.vtx);
			this.transIn.sz = (param.sz);
			this.transIn.rot = (param.rot);
			this.transIn.pos = (param.pos);
			};

			threeD.prototype.vupd = function() {
			this.transOut = trans.steps(

			this.transIn.vtx,
			this.transIn.sz,
			this.transIn.rot,
			this.transIn.pos,
			cam.disp
			);
			};

			var Build = function() {
			this.vel = 0.04;
			this.lim = 360;
			this.diff = 200;
			this.initPos = 100;
			this.toX = _x;
			this.toY = _y;
			this.go();
			};

			Build.prototype.go = function() {
			this.canvas = document.getElementById("canv");
			// this.canvas.width = 1200;
			this.canvas.width = window.innerWidth*0.625;
			this.canvas.height = window.innerHeight;
			this.$ = canv.getContext("2d");
			this.$.globalCompositeOperation = 'source-over';
			this.varr = [];
			this.dist = [];
			this.calc = [];

			for (var i = 0, len = num; i < len; i++) {
			this.add();
			}

			this.rotObj = {
			x: 0,
			y: 0,
			z: 0
			};
			this.objSz = {
			x: w / 5,
			y: h / 5,
			z: w / 5
			};
			};

			Build.prototype.add = function() {
			this.varr.push(new threeD({
			vtx: {
			x: rnd(),
			y: rnd(),
			z: rnd()
			},
			sz: {
			x: 0,
			y: 0,
			z: 0
			},
			rot: {
			x: 20,
			y: -20,
			z: 0
			},
			pos: {
			x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
			y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
			z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
			}
			}));
			this.calc.push({
			x: 360 * Math.random(),
			y: 360 * Math.random(),
			z: 360 * Math.random()
			});
			};

			Build.prototype.upd = function() {
			cam.obj.x += (this.toX - cam.obj.x) * 0.05;
			cam.obj.y += (this.toY - cam.obj.y) * 0.05;
			};

			Build.prototype.draw = function() {
			this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
			cam.upd();
			this.rotObj.x += 0.1;
			this.rotObj.y += 0.1;
			this.rotObj.z += 0.1;

			for (var i = 0; i < this.varr.length; i++) {
			for (var val in this.calc[i]) {
			if (this.calc[i].hasOwnProperty(val)) {
			this.calc[i][val] += this.vel;
			if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
			}
			}

			this.varr[i].transIn.pos = {
			x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
			y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
			z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
			};
			this.varr[i].transIn.rot = this.rotObj;
			this.varr[i].transIn.sz = this.objSz;
			this.varr[i].vupd();
			if (this.varr[i].transOut.p < 0) continue;
			var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
			this.$.globalCompositeOperation = 'lighter';
			g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
			g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
			g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
			this.$.fillStyle = g;
			this.$.beginPath();
			this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
			this.$.fill();
			this.$.closePath();
			}
			};
			Build.prototype.anim = function() {
			window.requestAnimationFrame = (function() {
			return window.requestAnimationFrame \|\|
			function(callback, element) {
			window.setTimeout(callback, 1000 / 60);
			};
			})();
			var anim = function() {
			this.upd();
			this.draw();
			window.requestAnimationFrame(anim);

			}.bind(this);
			window.requestAnimationFrame(anim);
			};

			Build.prototype.run = function() {
			this.anim();

			window.addEventListener('mousemove', function(e) {
			this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
			this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
			}.bind(this));
			window.addEventListener('touchmove', function(e) {
			e.preventDefault();
			this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
			this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
			}.bind(this));
			window.addEventListener('mousedown', function(e) {
			for (var i = 0; i < 100; i++) {
			this.add();
			}
			}.bind(this));
			window.addEventListener('touchstart', function(e) {
			e.preventDefault();
			for (var i = 0; i < 100; i++) {
			this.add();
			}
			}.bind(this));
			};
			var app = new Build();
			app.run();
			})();
			window.addEventListener('resize', function() {
			// canvas.width = w = 1200;
			canvas.width = w = window.innerWidth*0.625;
			canvas.height = h = window.innerHeight;
			}, false);
			</script>
			<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]];var captchaEnabled= [[${captchaEnabled}]]; </script>
			<script th:src="@{/js/jquery.min.js}"></script>
			<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
			@@ -131,5 +590,21 @@
			<script th:src="@{/ajax/libs/encrypt/jsencrypt.min.js}"></script>
			<script th:src="@{/loginPage/process/login.js}"></script>

			<script type="text/javascript">
			window.addEventListener('wheel', function (event) {
			if (event.ctrlKey === true \|\| event.metaKey) {
			event.preventDefault();
			}
			}, { passive: false });

			//firefox
			window.addEventListener('DOMMouseScroll', function (event) {
			if (event.ctrlKey === true \|\| event.metaKey) {
			event.preventDefault();
			}
			}, { passive: false })

			</script>

			</body>
			</html>