<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
		<%@include file="../../frame/assets/header-all.jsp"%>
		<script type="text/javascript" src="login.js"></script>
		<script>
			if (!(/webkit/.test(navigator.userAgent.toLowerCase()))) {
				var downloadUrl;
				if (confirm("请使用谷歌浏览器，是否下载谷歌浏览器?")) {
					downloadUrl =  "http://"+window.location.host+"/"+window.location.pathname.split("/")[1]+"/download?path=chrome.zip&privatePath=downPath";
					window.location.href=downloadUrl;
					document.write("<b style='color:red;'>对不起，当前浏览器不支持。。<b>");
				} else {
					document.write("<b style='color:red;'>对不起，当前浏览器不支持。。<b>");
				}
			}
		</script>
		<style>
			html,body{margin:0;padding:0;background:url(images/bodyBg.png) no-repeat;background-size:cover;color:white;}
			#main{height:100%;min-width:990px;width:1190px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
			
			#login-pic{width:40%;height:520px;}
			#login{width:40%;height:520px;background:url(images/loginBg.png) no-repeat  -8px -8px;background-size:100% 100%; padding:67px 114px 0 114px; }
			.login-inner{height:250px;font-size:12px;}
			.login-inner div{margin-top:24px;}
			.login-inner div:nth-child(1){margin-top:0;}
			.login-inner div p:nth-child(2){margin-top:14px;height:33px;}
			input[type=text]{width: 100%;height: 100%;border:none;border:2px solid #569c3a;background-color:#d4d9df;padding-left:15px;}
			input[type=password]{border:2px solid #a1a5ae;width: 100%;height: 100%;border:none;border:2px solid #569c3a;background-color:#d4d9df;padding-left:15px;}
			input[type=button]{width:100%;height:35px;border:0;background-color:#5fb631;color:white;cursor:pointer;}
			
			input[type=checkbox]{
			    height: 0px;
			    width: 0px;
			    visibility: hidden;
			}
			 label{
			    cursor: pointer;
			    height: 15px;
			    border-radius: 10px;
			    display: inline-block;
			    background-color: gray;
			    width: 40px;
			    text-indent: -99999px;
			    position: relative;
			}
			 label::before {
			    content: '';
			    display:inline-block;
			    background-color: white;
			    height: 12px;
			    width: 12px;
			    position: absolute;
			    top: 1.5px;
			    left: 2.5px;
			    border-radius: 7px;
			    transition:0.3s;
			}
			 input:checked + label {
			  background: #bada55;
			}
			 input:checked + label:before {
			  left: calc(100% - 2.5px);
			  transform: translateX(-100%);
			}
			 label:active:before{
			    width:20px;
				}
		
		
		/*----start-responsive design-----*/
		
			@media (max-width:1190px){
				#main{width:990px;}
			}
			@media (max-width:1440px) {
			#login {
				width:40%
			}
			#login-pic {
				width:40%
			}
			}
			@media (max-width:1080px) {
			#login {
				width:45%
			}
			#login-pic{
				width:45%
			}
			}
			@media (max-width:1024px) {
			#login  {
				width:50%
			}
			#login-pic  {
				width:50%
			}
			}
			@media (max-width:800px) {
			#login  {
				width: 55%
			}
			#login-pic  {
				width: 55%
			}
			}
			@media (max-width:768px) {
			#login  {
				width: 60%
			}
			#login-pic  {
				width: 60%
			}
			}
			@media (max-width:640px) {
			#login  {
				width: 80%
			}
			#login-pic  {
				width: 80%
			}
			}
			@media (max-width:480px) {
			#login  {
				width: 90%;
			}
			}
		</style> 
	</head>
	<body>
		<div id="main">
			<div id="login-pic">
				<img alt="" src="images/mainBg.png"  width="100%" height="100%"/>
			</div>
			<div id="login">
				<div class="login-inner">
					<div>
						<p>用户名:</p>
						<p><input type="text"  onkeydown="focuslogin(this)" id="username" placeholder="请输入用户名" /></p>
					</div>
					<div>
						<p>密码:</p>
						<p><input type="password"   onkeydown="focuslogin(this)" id="password"  placeholder="请输入密码"/></p>
					</div>
					<div>
						<span> 
							 <input class="remerberPasswordInput" type='checkbox' id= 'remember'>
    						 <label for='remember' class="remerberPasswordLabel" >高级检索</label>
    					</span>
						<span style="margin-left: 11px;">记住密码</span>
					</div>
					<div>
							<input type="button" value="登录"  id='userLogin' />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>	
