<!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">
<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="css/default.css" rel="stylesheet" type="text/css" />
<!--必要样式-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/loaders.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='login'>
<div class='login_title'>
<span>管理员登录</span>
</div>
<div class='login_fields'>
<div class='login_fields__user'>
<div class='icon'>
<img alt="" src='img/user_icon_copy.png'>
</div>
<input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" />
<div class='validation'>
<img alt="" src='img/tick.png'>
</div>
</div>
<div class='login_fields__password'>
<div class='icon'>
<img alt="" src='img/lock_icon_copy.png'>
</div>
<input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
<div class='validation'>
<img alt="" src='img/tick.png'>
</div>
</div>
<div class='login_fields__password'>
<div class='icon'>
<img alt="" src='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="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
</div>
</div>
<div class='login_fields__submit'>
<input type='button' value='登录'>
</div>
</div>
<div class='success'>
</div>
<div class='disclaimer'>
<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="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/Particleground.js"></script>
<script type="text/javascript" src="Js/Treatment.js"></script>
<script type="text/javascript" src="js/jquery.mockjax.js"></script>
<script type="text/javascript">
var canGetCookie = 0; //是否支持存储Cookie 0 不支持 1 支持
var ajaxmockjax = 1; //是否启用虚拟Ajax的请求响 0 不启用 1 启用
//默认账号密码
var truelogin = "kbcxy";
var truepwd = "1";
var CodeVal = 0;
Code();
function Code() {
if(canGetCookie == 1) {
createCode("AdminCode");
var AdminCode = getCookieValue("AdminCode");
showCheck(AdminCode);
} else {
showCheck(createCode(""));
}
}
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="login"],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() {
var login = $('input[name="login"]').val();
var pwd = $('input[name="pwd"]').val();
var code = $('input[name="code"]').val();
if(login == '') {
ErroAlert('请输入您的账号');
} else if(pwd == '') {
ErroAlert('请输入密码');
} else if(code == '' || code.length != 4) {
ErroAlert('输入验证码');
} else {
//登陆
var JsonData = {
login: login,
pwd: pwd,
code: code
};
//$.post("url",JsonData,function(data) {
console.log(111);
alert("登录成功");
//window.location.href = 'http://127.0.0.1:8020/jQueryLogin/index.html?__hbt=1567408106021';
//});
}
})
})
//全屏
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="img/ThreeWebGL.js"></script>
<script type="text/javascript" src="img/ThreeExtras.js"></script>
<script type="text/javascript" src="img/Detector.js"></script>
<script type="text/javascript" src="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, col
五个拿来就能用的炫酷登录页面 （265个子文件） 
bootstrap.css 134KB bootstrap.min.css 111KB easyui.css 59KB loaders.css 56KB loaders.css 56KB layui.css 39KB layui.css 31KB layui.css 28KB bootstrap-theme.css 21KB bootstrap-theme.min.css 19KB global.css 17KB global.css 17KB layer.css 14KB layer.css 14KB layer.css 14KB laydate.css 8KB laydate.css 8KB laydate.css 8KB layui.mobile.css 8KB layui.mobile.css 8KB styles.css 6KB styles.css 6KB style.css 5KB login.css 5KB metro.css 4KB normalize.css 2KB normalize.css 2KB demo.css 2KB demo.css 2KB login.css 1KB default.css 1KB default.css 1KB code.css 1KB code.css 1KB code.css 1KB iconfont.eot 51KB glyphicons-halflings-regular.eot 20KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB log.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB loading-0.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 48.gif 3KB 0.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB共 265 条
- 1
- 2
- 3
评论3