359 lines
48 KiB
HTML
359 lines
48 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<link rel="icon" href="https://resource.ghink.net/public/img/logo/ghink.png" type="image/png">
|
|||
|
|
<link rel="shortcut icon" href='https://resource.ghink.net/public/img/logo/ghink.png' type="image/png">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta http-equiv="pragma" content="no-cache">
|
|||
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|||
|
|
<meta http-equiv="expires" content="0">
|
|||
|
|
<title>极科通行证注册</title>
|
|||
|
|
<link href="https://resource.ghink.net/site/center/css/default.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<link href="https://resource.ghink.net/site/center/css/styles.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<link href="https://resource.ghink.net/site/center/css/demo.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<link href="https://resource.ghink.net/site/center/css/loaders.css" rel="stylesheet" type="text/css" />
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class='reg'>
|
|||
|
|
<div class='reg_title'>
|
|||
|
|
<span>注册极科通行证</span>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields'>
|
|||
|
|
<input type="hidden" name="type" value="regMail"></input>
|
|||
|
|
<div class='reg_fields__user'>
|
|||
|
|
<div class='icon'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/user_icon_copy.png'>
|
|||
|
|
</div>
|
|||
|
|
<input name="email" placeholder='邮箱' type='email' autocomplete="off" />
|
|||
|
|
<div class='validation'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/tick.png'>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields__user'>
|
|||
|
|
<div class='icon'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/user_icon_copy.png'>
|
|||
|
|
</div>
|
|||
|
|
<input name="name" placeholder='用户名' maxlength="16" type='text' autocomplete="off" />
|
|||
|
|
<div class='validation'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/tick.png'>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields__password'>
|
|||
|
|
<div class='icon'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/lock_icon_copy.png'>
|
|||
|
|
</div>
|
|||
|
|
<input name="pass" placeholder='密码' maxlength="16" type='password' autocomplete="off">
|
|||
|
|
<div class='validation'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/tick.png'>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields__password'>
|
|||
|
|
<div class='icon'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/lock_icon_copy.png'>
|
|||
|
|
</div>
|
|||
|
|
<input name="passa" placeholder='重复密码' maxlength="16" type='password' autocomplete="off">
|
|||
|
|
<div class='validation'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/tick.png'>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields__password'>
|
|||
|
|
<div class='icon'>
|
|||
|
|
<img alt="" src='https://resource.ghink.net/site/center/img/key.png'>
|
|||
|
|
</div>
|
|||
|
|
<input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
|
|||
|
|
<div class='validation' style="opacity: 1; right: -5px;top: -3px;">
|
|||
|
|
<canvas class="J_codeimg" id="myCanvas" onclick="getCode();">对不起，您的浏览器不支持canvas</canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields__agree'>
|
|||
|
|
<center>注册即代表同意 <a href="oauth.php?type=agreement">相关协议</a></center>
|
|||
|
|
</div>
|
|||
|
|
<div class='reg_fields__submit'>
|
|||
|
|
<input type='button' value='注册'>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='success'>
|
|||
|
|
</div>
|
|||
|
|
<div class='disclaimer'>
|
|||
|
|
<p>已经有账号了？ <a href="oauth.php?type=log">去登陆</a></p>
|
|||
|
|
<p>版权所有 © 极科网络工作室</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class='authent'>
|
|||
|
|
<div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
|
|||
|
|
<div class="loader-inner ball-clip-rotate-multiple">
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p>认证中...</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="OverWindows"></div>
|
|||
|
|
<link href="https://resource.ghink.net/site/center/layui/css/layui.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/public/js/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/js/jquery-ui.min.js"></script>
|
|||
|
|
<script type="text/javascript" src='https://resource.ghink.net/site/center/js/stopExecutionOnTimeout.js?t=1'></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/layui/layui.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/js/Particleground.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/js/Treatment.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/js/jquery.mockjax.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var CodeVal = 0;
|
|||
|
|
var code = "";
|
|||
|
|
getCode();
|
|||
|
|
function getCode() {
|
|||
|
|
code = createCode();
|
|||
|
|
showCheck(code);
|
|||
|
|
}
|
|||
|
|
function lowerCase(str) {
|
|||
|
|
let arr = str.split("");
|
|||
|
|
let newStr = "";
|
|||
|
|
//通过for循环遍历数组
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
if (arr[i] >= 'A' && arr[i] <= 'Z')
|
|||
|
|
newStr += arr[i].toLowerCase();
|
|||
|
|
else
|
|||
|
|
newStr += arr[i];
|
|||
|
|
}
|
|||
|
|
return newStr;
|
|||
|
|
}
|
|||
|
|
function checkCodeInput(inp){
|
|||
|
|
var generate=lowerCase(code);
|
|||
|
|
var input=lowerCase(inp);
|
|||
|
|
if(generate!=input){
|
|||
|
|
return true;
|
|||
|
|
}else{
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function showCheck(a) {
|
|||
|
|
CodeVal = a;
|
|||
|
|
var c = document.getElementById("myCanvas");
|
|||
|
|
var ctx = c.getContext("2d");
|
|||
|
|
ctx.clearRect(0, 0, 1000, 1000);
|
|||
|
|
ctx.font = "80px 'Hiragino Sans GB'";
|
|||
|
|
ctx.fillStyle = "#E8DFE8";
|
|||
|
|
ctx.fillText(a, 0, 100);
|
|||
|
|
}
|
|||
|
|
$(document).keypress(function(e) {
|
|||
|
|
// 回车键事件
|
|||
|
|
if(e.which == 13) {
|
|||
|
|
$('input[type="button"]').click();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//粒子背景特效
|
|||
|
|
/*
|
|||
|
|
$('body').particleground({
|
|||
|
|
dotColor: '#E8DFE8',
|
|||
|
|
lineColor: '#133b88'
|
|||
|
|
});
|
|||
|
|
$('input[name="pwd"]').focus(function() {
|
|||
|
|
$(this).attr('type', 'password');
|
|||
|
|
});
|
|||
|
|
$('input[type="text"]').focus(function() {
|
|||
|
|
$(this).prev().animate({
|
|||
|
|
'opacity': '1'
|
|||
|
|
}, 200);
|
|||
|
|
});
|
|||
|
|
$('input[type="text"],input[type="password"]').blur(function() {
|
|||
|
|
$(this).prev().animate({
|
|||
|
|
'opacity': '.5'
|
|||
|
|
}, 200);
|
|||
|
|
});
|
|||
|
|
$('input[name="reg"],input[name="pwd"]').keyup(function() {
|
|||
|
|
var Len = $(this).val().length;
|
|||
|
|
if(!$(this).val() == '' && Len >= 5) {
|
|||
|
|
$(this).next().animate({
|
|||
|
|
'opacity': '1',
|
|||
|
|
'right': '30'
|
|||
|
|
}, 200);
|
|||
|
|
} else {
|
|||
|
|
$(this).next().animate({
|
|||
|
|
'opacity': '0',
|
|||
|
|
'right': '20'
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
*/
|
|||
|
|
var open = 0;
|
|||
|
|
layui.use('layer', function() {
|
|||
|
|
//非空验证
|
|||
|
|
$('input[type="button"]').click(function() {
|
|||
|
|
ErroAlert("正在处理... 请等待响应...");
|
|||
|
|
var email = $('input[name="email"]').val();
|
|||
|
|
var name = $('input[name="name"]').val();
|
|||
|
|
var types = $('input[name="type"]').val();
|
|||
|
|
var pass = $('input[name="pass"]').val();
|
|||
|
|
var passa = $('input[name="passa"]').val();
|
|||
|
|
var codeIn = $('input[name="code"]').val();
|
|||
|
|
if(email == '') {
|
|||
|
|
ErroAlert('请输入您的邮箱');
|
|||
|
|
} else if(name == '') {
|
|||
|
|
ErroAlert('请输入用户名');
|
|||
|
|
} else if(pass == '') {
|
|||
|
|
ErroAlert('请输入密码');
|
|||
|
|
} else if(passa == '') {
|
|||
|
|
ErroAlert('请再输入一次密码');
|
|||
|
|
} else if(passa != pass) {
|
|||
|
|
ErroAlert('两次密码不相同');
|
|||
|
|
} else if(code == '' || code.length != 4 || checkCodeInput(codeIn)) {
|
|||
|
|
ErroAlert('请输入正确的验证码');
|
|||
|
|
} else {
|
|||
|
|
//注册
|
|||
|
|
var JsonData = {
|
|||
|
|
email: email,
|
|||
|
|
name: name,
|
|||
|
|
pass: pass,
|
|||
|
|
type: types
|
|||
|
|
};
|
|||
|
|
$.post("oauth.php?type=regMail",JsonData,function(data) {
|
|||
|
|
console.log(data);
|
|||
|
|
data=data.replace("<br>","");
|
|||
|
|
ErroAlert(data);
|
|||
|
|
//console.log();
|
|||
|
|
//alert("注册成功");
|
|||
|
|
//window.location.href = '';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
//全屏
|
|||
|
|
var fullscreen = function() {
|
|||
|
|
elem = document.body;
|
|||
|
|
if(elem.webkitRequestFullScreen) {
|
|||
|
|
elem.webkitRequestFullScreen();
|
|||
|
|
} else if(elem.mozRequestFullScreen) {
|
|||
|
|
elem.mozRequestFullScreen();
|
|||
|
|
} else if(elem.requestFullScreen) {
|
|||
|
|
elem.requestFullscreen();
|
|||
|
|
} else {
|
|||
|
|
//浏览器不支持全屏API或已被禁用
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/img/ThreeWebGL.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/img/ThreeExtras.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/img/Detector.js"></script>
|
|||
|
|
<script type="text/javascript" src="https://resource.ghink.net/site/center/img/RequestAnimationFrame.js"></script>
|
|||
|
|
<script id="vs" type="x-shader/x-vertex">
|
|||
|
|
varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
|
|||
|
|
</script>
|
|||
|
|
<script id="fs" type="x-shader/x-fragment">
|
|||
|
|
uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D( map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
if(!Detector.webgl) Detector.addGetWebGLMessage();
|
|||
|
|
var canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = 32;
|
|||
|
|
canvas.height = window.innerHeight;
|
|||
|
|
var context = canvas.getContext('2d');
|
|||
|
|
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
|
|||
|
|
gradient.addColorStop(0, "#1e4877");
|
|||
|
|
gradient.addColorStop(0.5, "#4584b4");
|
|||
|
|
context.fillStyle = gradient;
|
|||
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|||
|
|
document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
|
|||
|
|
var container;
|
|||
|
|
var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],
|
|||
|
|
sprite, size, x, y, z;
|
|||
|
|
var mouseX = 0,
|
|||
|
|
mouseY = 0;
|
|||
|
|
var start_time = new Date().getTime();
|
|||
|
|
var windowHalfX = window.innerWidth / 2;
|
|||
|
|
var windowHalfY = window.innerHeight / 2;
|
|||
|
|
init();
|
|||
|
|
animate();
|
|||
|
|
|
|||
|
|
function init() {
|
|||
|
|
container = document.createElement('div');
|
|||
|
|
document.body.appendChild(container);
|
|||
|
|
camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);
|
|||
|
|
camera.position.z = 6000;
|
|||
|
|
scene = new THREE.Scene();
|
|||
|
|
geometry = new THREE.Geometry();
|
|||
|
|
var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURQAAANje4Nbc3tfd3+rt7ufq7OTo6ufq7Ons7ujs7ff4+fn6+tfc3/7+/vj5+fb4+Pb3+Pr6+/////////////v7/P////////////n6+v////////7+/vLz9P39/f///////////////////9bc3vb4+PDy8/7///3+/u7w8f////////////7+//39/f7+//////T19tbb3tbc3vb4+P///+bp697j5f////n5+vDy8/P09e/x8u7x8vHy8////////+/x8ebq6////+Xo6u3v8PT29tbc3vf4+f///+rt7vL09e/x8vv8/Ozu7+3w8djd4P///+Lm6Pj5+f////////39/f39/dzh4////9HY2v39/dXb3v7//9fd3/n5+tjd4P///9fd3/X29////9fc3+vt7s7V2NXb3vP09f////n5+vP09ejs7ebp69Xb3ens7uLm6Nbc3tjd4OLm6Nfc39bc3tTa3ens7fDy8+ns7dnf4fb3+Njd4PP09d7i5fz8/P39/dne4eHl5+Xp6v39/t7j5dzg49je4OXo6tfd3/////7+/vr6+8/W2efq6/7+/t7j5d3h487V2Ozu79bc3tbc39vg4vf4+Pb3+Pv7/P///+fq7Ozv8Pb3+ODk5uPn6f////7+/t7i5PT19u7w8c7V2PX29/r6++bp6+fq7Ort7tfd3+/x8vX299bb3uHl5+nr7fP19dTa3fb3+O/x8vv7++Dk5v39/ePn6f///9Pa3Nne4dXb3vP19fP09dTa3ebq693i5M/V2P///9bc3tfc3+fq7Njd4Pv8/Nfd39/j5dTa3eLm6OXo6f7+/uns7dLY2/P09dbb3tLY293i5OTo6fT19s/V2MzT1+3v8PP09dvg4uHl5+Hl5tHX2uHl59bb3trf4t7j5dbc39bb3uvu7/Dy8+fp6+fq7Pn6+uTo6ufq7Ort7vb3+Njd4OPn6fb3+O7w8fb3+Nzh4+vu7+/x8uDk5uTo6u7x8vz9/fz9/fv8/Pf4+fn6+vX29+2SCnQAAAD9dFJOUwADDQsDBgcBAgQNEBDf+gsIE7DSz/TIwMUW1czj1ue5uL6qshMn5djvzJy1vOprd5P2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
|
|||
|
|
texture.magFilter = THREE.LinearMipMapLinearFilter;
|
|||
|
|
texture.minFilter = THREE.LinearMipMapLinearFilter;
|
|||
|
|
var fog = new THREE.Fog(0x4584b4, -100, 3000);
|
|||
|
|
material = new THREE.MeshShaderMaterial({
|
|||
|
|
uniforms: {
|
|||
|
|
"map": {
|
|||
|
|
type: "t",
|
|||
|
|
value: 2,
|
|||
|
|
texture: texture
|
|||
|
|
},
|
|||
|
|
"fogColor": {
|
|||
|
|
type: "c",
|
|||
|
|
value: fog.color
|
|||
|
|
},
|
|||
|
|
"fogNear": {
|
|||
|
|
type: "f",
|
|||
|
|
value: fog.near
|
|||
|
|
},
|
|||
|
|
"fogFar": {
|
|||
|
|
type: "f",
|
|||
|
|
value: fog.far
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
vertexShader: document.getElementById('vs').textContent,
|
|||
|
|
fragmentShader: document.getElementById('fs').textContent,
|
|||
|
|
depthTest: false
|
|||
|
|
});
|
|||
|
|
var plane = new THREE.Mesh(new THREE.Plane(64, 64));
|
|||
|
|
for(i = 0; i < 8000; i++) {
|
|||
|
|
plane.position.x = Math.random() * 1000 - 500;
|
|||
|
|
plane.position.y = -Math.random() * Math.random() * 200 - 15;
|
|||
|
|
plane.position.z = i;
|
|||
|
|
plane.rotation.z = Math.random() * Math.PI;
|
|||
|
|
plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
|
|||
|
|
GeometryUtils.merge(geometry, plane)
|
|||
|
|
}
|
|||
|
|
mesh = new THREE.Mesh(geometry, material);
|
|||
|
|
scene.addObject(mesh);
|
|||
|
|
mesh = new THREE.Mesh(geometry, material);
|
|||
|
|
mesh.position.z = -8000;
|
|||
|
|
scene.addObject(mesh);
|
|||
|
|
renderer = new THREE.WebGLRenderer({
|
|||
|
|
antialias: false
|
|||
|
|
});
|
|||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
container.appendChild(renderer.domElement);
|
|||
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|||
|
|
window.addEventListener('resize', onWindowResize, false)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDocumentMouseMove(event) {
|
|||
|
|
mouseX = (event.clientX - windowHalfX) * 0.25;
|
|||
|
|
mouseY = (event.clientY - windowHalfY) * 0.15
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onWindowResize(event) {
|
|||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|||
|
|
camera.updateProjectionMatrix();
|
|||
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function animate() {
|
|||
|
|
requestAnimationFrame(animate);
|
|||
|
|
render()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function render() {
|
|||
|
|
position = ((new Date().getTime() - start_time) * 0.03) % 8000;
|
|||
|
|
camera.position.x += (mouseX - camera.target.position.x) * 0.01;
|
|||
|
|
camera.position.y += (-mouseY - camera.target.position.y) * 0.01;
|
|||
|
|
camera.position.z = -position + 8000;
|
|||
|
|
camera.target.position.x = camera.position.x;
|
|||
|
|
camera.target.position.y = camera.position.y;
|
|||
|
|
camera.target.position.z = camera.position.z - 1000;
|
|||
|
|
renderer.render(scene, camera)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|