<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录|注册</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
  
  <script src="js/jquery-1.11.3.js"></script>
 
  
  <style>
  
  *{
  -moz-user-select: none; /*火狐*/

    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  #back{
  background-image:url('./img/login2.png');
  background-repeat: no-repeat,no-repeat;
  background-size:contain,contain;
  background-position:0 150px;
  height:100%;
  width:100%;
  }
  .logback{
  	  padding-top:0.5px;
  	  border-radius:7px;
      width:450px;
      height:600px;
      margin-left: 300px;
      z-index: 6;
      background: #F8F8FF;
      opacity:0.95;
      box-shadow:10px 10px 20px 10px rgba(220 ,220 ,220,0.5)
  }
  .loginform{
    position: relative;
    width:350px;
    margin:auto auto;
    margin-top: 12%;
  }
  
  .loginform .logtype{
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 1px;
  }
  .loginform .logtype a{
  
  margin-right: 10px;
  font-weight: bold;
  font-size: 23px;
  cursor: pointer;
  }
  .loginform .logtype a:ACTIVE{
  color:#EEAD0E;
  }
 
  form{
  }
  form .info{
  margin-bottom: 20px;
  width:100%;
  height:43px;
  border-radius:7px; 
  background: rgb(235 ,235, 235);
  border: none;
  text-indent: 15px;
  letter-spacing: 1px;
  font-size: 95%;
  outline-color: #FFB90F;
 
  }
   form .info:FOCUS{
   background: white;
   }
   select:FOCUS{
   background: white;
   outline-color: #FFB90F;
   }
  input::-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: rgb(180 ,180, 180);;
}
  input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: rgb(180 ,180, 180);
}
  .sub{
	width:40%;
	height:35px;
	border-radius:7px;
	border: none;
	background: #FFB90F;
	color: white;
	font-size:120%;	
	letter-spacing: 4px;
	display: inline;
	vertical-align: top;
	margin-top: 20px;
	outline: none;
  }
  .sub:HOVER{
  background: #EEAD0E;
  }
  .sub:ACTIVE{
  background: #EEAD0E;
  }
  .reg{
  display: inline-block;
  vertical-align: top;
  margin-left: 40%;
  text-align: right;
  margin-top: 20px;
  }
  .reg p{
     font-size: 80%;
     color: rgb(180 ,180, 180);
     margin-top: 0px;
     margin-bottom: 5px;
     cursor: pointer;
    
  }
  .reg p:ACTIVE {
	color: #EEAD0E;
}
select {
	
	width:350px;
	height:43px;
	margin-bottom: 20px;
    background: rgb(235 ,235, 235);
    border: none;
	}
	#tip{
	display: block;
	}
	
  </style>
  
 
  <style>/*导航*/
  /*
  .newheader{
  height: 60px;
  background-color: #3CB371;
  
  }
  .head-nav{
  height: 60px;
  color: yellow;
  position:relative;
  left:-20px;
  }
  .head-nav #header-nav{
  height: 60px;
  color: yellow;
  margin-top:0; 
  }
 .logo{
  
 } 
 .logo img{
 height: 40px;
 width: 40px;
 float: left;
 margin: auto 20px;
 position:relative;
 top:-10px;
 }
  .pr{
 float: left;
 margin: auto 10px;
  }
.pr a{
color: white;
text-decoration: none;
position:relative;
top:20px;

}
.login{
height:60px;
}
 */
  </style>
  
 <!--  <div class="newheader">
  		<div class="head-nav pr" id="head-navpre1">
			<ul id="header-nav">
					<a class="logo">
						<img alt="" src="./img/sLogo.png" >
					</a>
					<li class="pr" style="display: block;">
						<a href="/paths" >跳蚤市场</a>
					</li>
					<li class="pr" style="display: block;">
						<a href="/courses" >校园超市</a>
					</li>
					<li class="pr" style="display: block;">
						<a href="/shixuns">失物招领</a>
					</li>
					<li class="pr" style="display: block;">
					<a href="/competitions">资源共享</a>
					</li>
					<li class="pr" style="display: block;">
					<a href="/moop_cases">兴趣论坛</a>
					</li>
			</ul>
		</div>
		<span class="login pr" style="float: right;">
				<a href=""   class="mr5 color-white" >登录</a>
				<em class="vertical-line" ></em>
				<a href="/register" class="mr5 color-white">注册</a>
		</span>
	</div>
  
  -->
  <div id="back" >
  <div class="logback">
  <div class="loginform">
  	<div class="logtype">
  		
  


  		
    	<a class="register">注册</a>
  	</div>
  
    <s:form action="Register" method="post" autocomplete="on">
  		<s:textfield name="user.username" cssClass="info"  placeholder="请使用用户名进行注册" /><br/>
  		<s:password name="user.password" cssClass="info"  placeholder="设置新密码" id="pwd1" /><br/>
  		<input type="password" class="info"  placeholder="再次输入密码" id="pwd2" required/  onkeyup="validate()"><br/>
  		
  		    <s:textfield name="user.age" label="年龄" />
        <s:textfield name="user.email" label="Email地址" />
  		
  		<a id="tip"><font color='red' style='visibility: hidden;'>12</font></a>
  		<input type="submit" id="submit" class="sub" onkeyup="" value="注册" />
  		
  		
  	
  		<script>
function validate() {
var pwd1 = document.getElementById("pwd1").value;
var pwd2 = document.getElementById("pwd2").value;
console.log(pwd1);

if(pwd1 == pwd2) {
document.getElementById("tip").innerHTML="<font color='green'>√</font>";
if(document.getElementById("submit").disabled==null)
 console.log("null");
else console.log("not null");
document.getElementById("submit").disabled = false;
document.getElementById("submit").style.background="#FFB90F";
console.log("same");
}else if(pwd2=="")
{
document.getElementById("tip").innerHTML="<font color='red' style='visibility: hidden;'>12</font>";

}
else {
console.log("same");
document.getElementById("tip").innerHTML="<font color='red'>两次密码不相同</font>";

document.getElementById("submit").disabled=true;
document.getElementById("submit").style.background="rgb(235 ,235, 235)";
}
}
</script>
  		
  		<div class="reg">
  		<p>注册</p>
  		<p>忘记密码</p>
  		</div>
  		
  	</s:form>
  	<p style="text-align: center;font-family:cursive;">———其他登录方式 ———</p>
  
  </div>
  </div> 	
<div>
  <script type="text/javascript">
  	var h=document.getElementById("back").clientHeight;
  	  	var w=document.getElementById("back").clientWidth;
  	
  	if(h==null) console.log(0);
  	console.log(h);
  	  	console.log(w);
  	
  </script>
  </body>
</html>
