zy-wcs.git - Gitblit

			@@ -1,233 +1,799 @@
			<!DOCTYPE html>
			<html lang="en">
			<!doctype html>
			<html>
			<head>
			<meta charset="UTF-8">
			<title>系统登录</title>
			<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
			<link rel="icon" type="image/x-icon" href="../static/images/wcs_logo.png" />
			<link rel="stylesheet" href="../static/css/animate.min.css">
			<script type="text/javascript" src="../static/layui/layui.js"></script>
			<script type="text/javascript" src="../static/js/common.js"></script>
			<meta charset="utf-8">
			<title>HTML5 Canvas矩阵粒子波浪背景动画特效</title>

			<style>
			html{
			height: 100%;
			html,body {
			height:100%;
			}
			body.login-bg {
			color: #777;
			height: 100%;
			/background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);/
			/background-image: linear-gradient(-90deg, #a2e7f3 0%, #98baee 100%);/
			background-image: url("../static/images/login.png");
			/background: -webkit-linear-gradient(red, blue); ! Safari 5.1 - 6.0 !;/
			/background-image: url("../static/image/login_bg.jpg");/
			/background-repeat: no-repeat;/
			/background-size: cover;/
			/background-position: top center;/
			body {
			margin:0;
			background:#000;
			}
			canvas {
			display:block;
			}
			.waves {
			position:absolute;
			left:0;
			top:0;
			right:0;
			bottom:0;
			}

			#login-wrapper {
			box-sizing:border-box;
			background: #fff;
			position: absolute;
			top: 45%;
			left: 50%;
			margin-top: -210px;
			margin-left: -220px;
			width: 400px;
			min-height: 380px;
			padding: 50px;
			text-align: center;
			border-radius: 5px;
			box-shadow: 0px 0px 10px rgb(168, 165, 165);
			transform-origin: 50% 50%;
			/animation: loading 1s 0s forwards;/
			transform: rotateX(0deg);
			.form_main {
			width: 300px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, 0.6);
			padding: 50px 30px 50px 30px;
			border-radius: 30px;
			box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
			}

			#login-wrapper h2 {
			color: rgba(64,158,255,0.9);
			font-size: 26px;
			font-weight: bold;
			margin-bottom: 30px;
			.heading {
			font-size: 2.5em;
			color: #2e2e2e;
			font-weight: 700;
			margin: 15px 0 0px 0;
			}

			.layadmin-user-login-body .layui-form-item {
			margin-bottom: 20px;
			.inputContainer {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			}
			.layadmin-user-login-body .layui-form-item .layui-input {
			height: 42px;
			padding-left: 40px;
			font-size: 16px;
			border: 1px solid #c8cccf;
			color: inherit;
			}
			.login-submit {
			margin-top: 30px;
			}
			.layadmin-user-login-icon {

			.inputIcon {
			position: absolute;
			left: 1px;
			top: 1px;
			width: 38px;
			line-height: 40px;
			text-align: center;
			color: #B2B2B2;
			font-size: 18px;
			left: 10px;
			}
			.layui-btn-normal {
			background-color: rgba(64,158,255,0.9);
			font-size: 20px;
			border-radius: 4px;
			height: 52px;

			.inputField {
			width: 100%;
			height: 40px;
			background-color: transparent;
			border: none;
			border-bottom: 2px solid rgb(173, 173, 173);
			border-radius: 30px;
			margin: 10px 0;
			color: black;
			font-size: .8em;
			font-weight: 500;
			box-sizing: border-box;
			padding-left: 30px;
			}
			#code-box {

			.inputField:focus {
			outline: none;
			border-bottom: 2px solid rgb(199, 114, 255);
			}

			.inputField::placeholder {
			color: rgb(80, 80, 80);
			font-size: 1em;
			font-weight: 500;
			}

			#login-button {
			position: relative;
			height: 42px;
			width: 100%;
			border: 2px solid #8000ff;
			background-color: #8000ff;
			height: 40px;
			color: white;
			font-size: .8em;
			font-weight: 500;
			letter-spacing: 1px;
			border-radius: 30px;
			margin: 10px;
			cursor: pointer;
			overflow: hidden;
			}
			#code-label {
			z-index: 999;
			}
			#code {

			#login-button::after {
			content: "";
			position: absolute;
			left: 0;
			background-color: rgba(255, 255, 255, 0.253);
			height: 100%;
			width: 150px;
			top: 0;
			display: inline-block;
			width: 60%;
			left: -200px;
			border-bottom-right-radius: 100px;
			border-top-left-radius: 100px;
			filter: blur(10px);
			transition-duration: .5s;
			}
			#codeImg {
			border: 1px solid rgba(0,0,0,0.1);
			position: absolute;
			right: 5%;
			top: 0;
			width: 30%;
			height: 90%;

			#login-button:hover::after {
			transform: translateX(600px);
			transition-duration: .5s;
			}

			.signupContainer {
			margin: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 20px;
			}

			.signupContainer p {
			font-size: .9em;
			font-weight: 500;
			color: black;
			}

			.signupContainer a {
			font-size: .7em;
			font-weight: 500;
			background-color: #2e2e2e;
			color: white;
			text-decoration: none;
			padding: 8px 15px;
			border-radius: 20px;
			}

			</style>
			</head>
			<body class="login-bg animsition">
			<body>

			<div id="login-wrapper" class="animate__animated animate__bounceInDown">
			<header>
			<h2>WCS 系统登录</h2>
			</header>
			<div class="layui-form layadmin-user-login-body">
			<div class="layui-form-item">
			<label class="layui-icon layui-icon-cellphone layadmin-user-login-icon"></label>
			<input id="mobile" class="layui-input" type="text" name="mobile" lay-verify="mobile" placeholder="账号">
			<div class="waves">
			<div style="position: absolute;left: calc(50% - 200px);top: 25%;">
			<div class="form_main">
			<p style="text-align: center;"><img src="../static/image/logo.png" alt="" style="width: 80%"></p>
			<p style="margin-top: -15px;"><span class="login100-form-title p-t-20 p-b-45" style="color: #868686;font-size: 24px">WCS</span></p>
			<div class="inputContainer">
			<svg viewBox="0 0 16 16" fill="#2e2e2e" height="16" width="16" xmlns="http://www.w3.org/2000/svg" class="inputIcon">
			<path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
			</svg>
			<input placeholder="请输入用户名" id="username" name="username" class="inputField" type="text">
			</div>

			<div class="inputContainer">
			<svg viewBox="0 0 16 16" fill="#2e2e2e" height="16" width="16" xmlns="http://www.w3.org/2000/svg" class="inputIcon">
			<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
			</svg>
			<input placeholder="请输入密码" id="password" name="pass" class="inputField" type="password">
			</div>

			<button id="login-button">登录</button>
			</div>
			<div class="layui-form-item">
			<label class="layui-icon layui-icon-password layadmin-user-login-icon"></label>
			<input id="password" class="layui-input" type="password" name="password" lay-verify="password" placeholder="密码">
			</div>
			<div id="code-box" class="layui-form-item" style="">
			<label id="code-label" class="layui-icon layui-icon-vercode layadmin-user-login-icon"></label>
			<input id="code" class="layui-input" type="text" name="password" lay-verify="code" placeholder="验证码">
			<img id="codeImg" title="看不清？点击换一张。">
			</div>
			<!--<div class="layui-form-item">-->
			<!--<input id="rememberPwd" style="vertical-align: middle" type="checkbox" lay-filter="remPwd" lay-skin="switch" lay-text="开启\|关闭" title="记住密码" checked="checked">-->
			<!--<span style="vertical-align: middle;font-size: 15px">记住密码</span>-->
			<!--</div>-->
			</div>
			<div class="layui-form-item login-submit">
			<button id="login-button" class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit="" lay-filter="login">登 &nbsp &nbsp 录</button>

			</div>
			</div>

			</body>
			<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../static/js/tools/md5.js"></script>
			<script type="text/javascript">
			<script>
			class ShaderProgram {

			// 验证码开关
			var codeSwitch = 'Y';
			$.ajax({
			url: baseUrl+"/code/switch.action",
			async: false,
			success: function (res) {
			if (res.data === 'N'){
			codeSwitch = res.data;
			$('#code-box').css("display", "none");
			}
			constructor( holder, options = {} ) {

			options = Object.assign( {
			antialias: false,
			depthTest: false,
			mousemove: false,
			autosize: true,
			side: 'front',
			vertex: `
			precision highp float;

			attribute vec4 a_position;
			attribute vec4 a_color;

			uniform float u_time;
			uniform vec2 u_resolution;
			uniform vec2 u_mousemove;
			uniform mat4 u_projection;

			varying vec4 v_color;

			void main() {

			gl_Position = u_projection * a_position;
			gl_PointSize = (10.0 / gl_Position.w) * 100.0;

			v_color = a_color;

			}`,
			fragment: `
			precision highp float;

			uniform sampler2D u_texture;
			uniform int u_hasTexture;

			varying vec4 v_color;

			void main() {

			if ( u_hasTexture == 1 ) {

			gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);

			} else {

			gl_FragColor = v_color;

			}

			}`,
			uniforms: {},
			buffers: {},
			camera: {},
			texture: null,
			onUpdate: ( () => {} ),
			onResize: ( () => {} ),
			}, options )

			const uniforms = Object.assign( {
			time: { type: 'float', value: 0 },
			hasTexture: { type: 'int', value: 0 },
			resolution: { type: 'vec2', value: [ 0, 0 ] },
			mousemove: { type: 'vec2', value: [ 0, 0 ] },
			projection: { type: 'mat4', value: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] },
			}, options.uniforms )

			const buffers = Object.assign( {
			position: { size: 3, data: [] },
			color: { size: 4, data: [] },
			}, options.buffers )

			const camera = Object.assign( {
			fov: 60,
			near: 1,
			far: 10000,
			aspect: 1,
			z: 100,
			perspective: true,
			}, options.camera )

			const canvas = document.createElement( 'canvas' )
			const gl = canvas.getContext( 'webgl', { antialias: options.antialias } )

			if ( ! gl ) return false

			this.count = 0
			this.gl = gl
			this.canvas = canvas
			this.camera = camera
			this.holder = holder
			this.onUpdate = options.onUpdate
			this.onResize = options.onResize
			this.data = {}

			holder.appendChild( canvas )

			this.createProgram( options.vertex, options.fragment )

			this.createBuffers( buffers )
			this.createUniforms( uniforms )

			this.updateBuffers()
			this.updateUniforms()

			this.createTexture( options.texture )

			gl.enable( gl.BLEND )
			gl.enable( gl.CULL_FACE )
			gl.blendFunc( gl.SRC_ALPHA, gl.ONE )
			gl[ options.depthTest ? 'enable' : 'disable' ]( gl.DEPTH_TEST )

			if ( options.autosize )
			window.addEventListener( 'resize', e => this.resize( e ), false )
			if ( options.mousemove )
			window.addEventListener( 'mousemove', e => this.mousemove( e ), false )

			this.resize()

			this.update = this.update.bind( this )
			this.time = { start: performance.now(), old: performance.now() }
			this.update()

			}
			});

			// 初始化验证码
			initCode();
			$('#codeImg').click(function () {
			initCode();
			});
			function initCode() {
			var random = Math.random();
			$('#codeImg').attr("src", baseUrl+"/code.action?sd="+random);
			setTimeout(function () {
			$.ajax({
			url: baseUrl+"/code.do",
			data: {sd: random},
			method: 'POST',
			async: false,
			success: function (code) {
			sessionStorage.setItem("code", code);
			mousemove( e ) {

			let x = e.pageX / this.width * 2 - 1
			let y = e.pageY / this.height * 2 - 1

			this.uniforms.mousemove = [ x, y ]

			}

			resize( e ) {

			const holder = this.holder
			const canvas = this.canvas
			const gl = this.gl

			const width = this.width = holder.offsetWidth
			const height = this.height = holder.offsetHeight
			const aspect = this.aspect = width / height
			const dpi = this.dpi = devicePixelRatio

			canvas.width = width * dpi
			canvas.height = height * dpi
			canvas.style.width = width + 'px'
			canvas.style.height = height + 'px'

			gl.viewport( 0, 0, width * dpi, height * dpi )
			gl.clearColor( 0, 0, 0, 0 )

			this.uniforms.resolution = [ width, height ]
			this.uniforms.projection = this.setProjection( aspect )

			this.onResize( width, height, dpi )

			}

			setProjection( aspect ) {

			const camera = this.camera

			if ( camera.perspective ) {

			camera.aspect = aspect

			const fovRad = camera.fov * ( Math.PI / 180 )
			const f = Math.tan( Math.PI * 0.5 - 0.5 * fovRad )
			const rangeInv = 1.0 / ( camera.near - camera.far )

			const matrix = [
			f / camera.aspect, 0, 0, 0,
			0, f, 0, 0,
			0, 0, (camera.near + camera.far) * rangeInv, -1,
			0, 0, camera.near * camera.far * rangeInv * 2, 0
			]

			matrix[ 14 ] += camera.z
			matrix[ 15 ] += camera.z

			return matrix

			} else {

			return [
			2 / this.width, 0, 0, 0,
			0, -2 / this.height, 0, 0,
			0, 0, 1, 0,
			-1, 1, 0, 1,
			]

			}

			}

			createShader( type, source ) {

			const gl = this.gl
			const shader = gl.createShader( type )

			gl.shaderSource( shader, source )
			gl.compileShader( shader )

			if ( gl.getShaderParameter (shader, gl.COMPILE_STATUS ) ) {

			return shader

			} else {

			console.log( gl.getShaderInfoLog( shader ) )
			gl.deleteShader( shader )

			}

			}

			createProgram( vertex, fragment ) {

			const gl = this.gl

			const vertexShader = this.createShader( gl.VERTEX_SHADER, vertex )
			const fragmentShader = this.createShader( gl.FRAGMENT_SHADER, fragment )

			const program = gl.createProgram()

			gl.attachShader( program, vertexShader )
			gl.attachShader( program, fragmentShader )
			gl.linkProgram( program )

			if ( gl.getProgramParameter( program, gl.LINK_STATUS ) ) {

			gl.useProgram( program )
			this.program = program

			} else {

			console.log( gl.getProgramInfoLog( program ) )
			gl.deleteProgram( program )

			}

			}

			createUniforms( data ) {

			const gl = this.gl
			const uniforms = this.data.uniforms = data
			const values = this.uniforms = {}

			Object.keys( uniforms ).forEach( name => {

			const uniform = uniforms[ name ]

			uniform.location = gl.getUniformLocation( this.program, 'u_' + name )

			Object.defineProperty( values, name, {
			set: value => {

			uniforms[ name ].value = value
			this.setUniform( name, value )

			},
			get: () => uniforms[ name ].value
			} )

			} )

			}

			setUniform( name, value ) {

			const gl = this.gl
			const uniform = this.data.uniforms[ name ]

			uniform.value = value

			switch ( uniform.type ) {
			case 'int': {
			gl.uniform1i( uniform.location, value )
			break
			}
			});
			}, 100);
			case 'float': {
			gl.uniform1f( uniform.location, value )
			break
			}
			case 'vec2': {
			gl.uniform2f( uniform.location, ...value )
			break
			}
			case 'vec3': {
			gl.uniform3f( uniform.location, ...value )
			break
			}
			case 'vec4': {
			gl.uniform4f( uniform.location, ...value )
			break
			}
			case 'mat2': {
			gl.uniformMatrix2fv( uniform.location, false, value )
			break
			}
			case 'mat3': {
			gl.uniformMatrix3fv( uniform.location, false, value )
			break
			}
			case 'mat4': {
			gl.uniformMatrix4fv( uniform.location, false, value )
			break
			}
			}

			// ivec2 : uniform2i,
			// ivec3 : uniform3i,
			// ivec4 : uniform4i,
			// sampler2D : uniform1i,
			// samplerCube : uniform1i,
			// bool : uniform1i,
			// bvec2 : uniform2i,
			// bvec3 : uniform3i,
			// bvec4 : uniform4i,

			}

			updateUniforms() {

			const gl = this.gl
			const uniforms = this.data.uniforms

			Object.keys( uniforms ).forEach( name => {

			const uniform = uniforms[ name ]

			this.uniforms[ name ] = uniform.value

			} )

			}

			createBuffers( data ) {

			const gl = this.gl
			const buffers = this.data.buffers = data
			const values = this.buffers = {}

			Object.keys( buffers ).forEach( name => {

			const buffer = buffers[ name ]

			buffer.buffer = this.createBuffer( 'a_' + name, buffer.size )

			Object.defineProperty( values, name, {
			set: data => {

			buffers[ name ].data = data
			this.setBuffer( name, data )

			if ( name == 'position' )
			this.count = buffers.position.data.length / 3

			},
			get: () => buffers[ name ].data
			} )

			} )

			}

			createBuffer( name, size ) {

			const gl = this.gl
			const program = this.program

			const index = gl.getAttribLocation( program, name )
			const buffer = gl.createBuffer()

			gl.bindBuffer( gl.ARRAY_BUFFER, buffer )
			gl.enableVertexAttribArray( index )
			gl.vertexAttribPointer( index, size, gl.FLOAT, false, 0, 0 )

			return buffer

			}

			setBuffer( name, data ) {

			const gl = this.gl
			const buffers = this.data.buffers

			if ( name == null && ! gl.bindBuffer( gl.ARRAY_BUFFER, null ) ) return

			gl.bindBuffer( gl.ARRAY_BUFFER, buffers[ name ].buffer )
			gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( data ), gl.STATIC_DRAW )

			}

			updateBuffers() {

			const gl = this.gl
			const buffers = this.buffers

			Object.keys( buffers ).forEach( name =>
			buffers[ name ] = buffer.data
			)

			this.setBuffer( null )

			}

			createTexture( src ) {

			const gl = this.gl
			const texture = gl.createTexture()

			gl.bindTexture( gl.TEXTURE_2D, texture )
			gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array( [ 0, 0, 0, 0 ] ) )

			this.texture = texture

			if ( src ) {

			this.uniforms.hasTexture = 1
			this.loadTexture( src )

			}

			}

			loadTexture( src ) {

			const gl = this.gl
			const texture = this.texture

			const textureImage = new Image()

			textureImage.onload = () => {

			gl.bindTexture( gl.TEXTURE_2D, texture )

			gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage )

			gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR )
			gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR )

			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)

			// gl.generateMipmap( gl.TEXTURE_2D )

			}

			textureImage.src = src

			}

			update() {

			const gl = this.gl

			const now = performance.now()
			const elapsed = ( now - this.time.start ) / 5000
			const delta = now - this.time.old
			this.time.old = now

			this.uniforms.time = elapsed

			if ( this.count > 0 ) {
			gl.clear( gl.COLORBUFFERBIT )
			gl.drawArrays( gl.POINTS, 0, this.count )
			}

			this.onUpdate( delta )

			requestAnimationFrame( this.update )

			}

			}

			layui.use(['form','layer'],function () {
			var form = layui.form,
			layer = layui.layer,
			$ = layui.jquery;
			const pointSize = 2.5

			form.on('submit(login)', function (data) {
			var mobile = $("#mobile").val();
			if (mobile === "") {
			layer.msg("请输入账号", {offset: '150px'});
			return;
			}
			var password = $("#password").val();
			if (password === "") {
			layer.msg("请输入密码", {offset: '150px'});
			return;
			}
			var code = $("#code").val();
			if (code === "" && codeSwitch === 'Y') {
			layer.msg("请输入验证码", {offset: '150px'});
			return;
			}
			if (sessionStorage.getItem("code").toUpperCase() !== code.toUpperCase()&&codeSwitch==='Y'){
			layer.msg("验证码错误", {offset: '150px'});
			return;
			}
			const waves = new ShaderProgram( document.querySelector( '.waves' ), {
			texture: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v0wLRAAAAJHRSTlMAC/goGvDhmwcExrVjWzrm29TRqqSKenRXVklANSIUE8mRkGpv+HOfAAABCElEQVQ4y4VT13LDMAwLrUHteO+R9f/fWMfO6dLaPeKVEECRxOULWsEGpS9nULDwia2Y+ALqUNbAWeg775zv+sA4/FFRMxt8U2FZFCVWjR/YrH4/H9sarclSKdPMWKzb8VsEeHB3m0shkhVCyNzeXeAQ9Xl4opEieX2QCGnwGbj6GMyjw9t1K0fK9YZunPXeAGsfJtYjwzxaBnozGGorYz0ypK2HzQSYx1y8DgSRo2ewOiyh2QWOEk1Y9OrQV0a8TiBM1a8eMHWYnRMy7CZ4t1CmyRkhSUvP3gRXyHOCLBxNoC3IJv//ZrJ/kxxUHPUB+6jJZZHrpg6GOjnqaOmzp4NDR48OLxn/H27SRQ08S0ZJAAAAAElFTkSuQmCC',
			uniforms: {
			size: { type: 'float', value: pointSize },
			field: { type: 'vec3', value: [ 0, 0, 0 ] },
			speed: { type: 'float', value: 5 },
			},
			vertex: `
			#define M_PI 3.1415926535897932384626433832795

			var user = {
			mobile: mobile,
			password: hex_md5(password)
			};
			$.ajax({
			url: baseUrl+"/login.action",
			data: user,
			method: 'POST',
			success: function (res) {
			if (res.code === 200){
			localStorage.setItem("token", res.data.token);
			localStorage.setItem("username", res.data.username);
			window.location.href = "index.html";
			} else {
			layer.msg(res.msg, {offset: '150px'});
			}
			precision highp float;

			attribute vec4 a_position;
			attribute vec4 a_color;

			uniform float u_time;
			uniform float u_size;
			uniform float u_speed;
			uniform vec3 u_field;
			uniform mat4 u_projection;

			varying vec4 v_color;

			void main() {

			vec3 pos = a_position.xyz;

			pos.y += (
			cos(pos.x / u_field.x * M_PI * 8.0 + u_time * u_speed) +
			sin(pos.z / u_field.z * M_PI * 8.0 + u_time * u_speed)
			) * u_field.y;

			gl_Position = u_projection * vec4( pos.xyz, a_position.w );
			gl_PointSize = ( u_size / gl_Position.w ) * 100.0;

			v_color = a_color;

			}`,
			fragment: `
			precision highp float;

			uniform sampler2D u_texture;

			varying vec4 v_color;

			void main() {

			gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);

			}`,
			onResize( w, h, dpi ) {

			const position = [], color = []

			const width = 400 * ( w / h )
			const depth = 400
			const height = 3
			const distance = 5

			for ( let x = 0; x < width; x += distance ) {
			for ( let z = 0; z < depth; z+= distance ) {

			position.push( - width / 2 + x, -30, -depth / 2 + z )
			color.push( 0, 1 - ( x / width ) * 1, 0.5 + x / width * 0.5, z / depth )

			}
			});
			return false;
			});
			}

			$('body').keydown(function () {
			if (event.keyCode === 13) {
			$("#login-button").click();
			this.uniforms.field = [ width, height, depth ]

			this.buffers.position = position
			this.buffers.color = color

			this.uniforms.size = ( h / 400) * pointSize * dpi

			},
			} )
			</script>

			<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../static/js/tools/md5.js"></script>
			<script type="text/javascript" src="../static/layer/layer.js"></script>
			<script type="text/javascript" src="../static/js/common.js"></script>
			<script>
			// remember pwd
			$(function () {
			var oldUserName = localStorage.getItem('oldUserName');
			var oldPass = localStorage.getItem('oldPass');
			if(oldUserName){
			$('#username').val(oldUserName);
			}
			if(oldPass){
			$('#password').val(oldPass);
			}
			})

			window.onload = function(){document.getElementById("username").focus();}

			$(document).on('click','#login-button', function () {
			let username = $("#username").val();
			if (username === "") {
			layer.tips('请输入登录账号', '#username', {tips: [4, '#ff0000']});
			return;
			}
			let password = $("#password").val();
			if (password === "") {
			layer.tips('请输入密码', '#password', {tips: [4, '#ff0000']});
			return;
			}
			$.ajax({
			url: baseUrl+"/login.action",
			data: {
			mobile: username,
			password: hex_md5(password)
			},
			method: 'POST',
			success: function (res) {
			if (res.code === 200){
			localStorage.setItem("token", res.data.token);
			localStorage.setItem("username", res.data.username);
			window.location.href = "index.html";
			} else if (res.code === 10001) {
			layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
			} else if (res.code === 10002) {
			layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
			} else if (res.code === 10003) {
			layer.tips(res.msg, '#password', {tips: [4, '#ff0000']});
			} else {
			layer.tips(res.msg, '.login-btn', {tips: [3, '#ff0000']});
			}
			}
			});
			});

			$('body').keydown(function () {
			if (event.keyCode === 13) {
			$(".login-btn").click();
			}
			});
			</script>
			<script type></script>

			</body>
			</html>