<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fantasticbin的聊天室</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script src="js/anime.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="container">
<div class="left">
<div class="login">登录</div>
<div class="eula">欢迎使用！</div>
</div>
<div class="right">
<svg viewBox="0 0 320 300">
<defs>
<linearGradient inkscape:collect="always" id="linearGradient" x1="13" y1="193.49992" x2="307" y2="193.49992" gradientUnits="userSpaceOnUse">
<stop style="stop-color:#ff00ff;" offset="0" id="stop876" />
<stop style="stop-color:#ff0000;" offset="1" id="stop878" />
</linearGradient>
</defs>
<path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
</svg>
<div class="form">
<label for="account">账号</label>
<input type="account" id="account">
<label for="password">密码</label>
<input type="password" id="password">
<input type="submit" id="submit" value="提交">
</div>
</div>
</div>
</div>
<script>
var current = null;
document.querySelector('#account').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: 0,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
document.querySelector('#password').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: -336,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
document.querySelector('#submit').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: -730,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '530 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
</script>
<script>
$(function () {
$("#submit").click(function () {
var account = $("#account").val();
var password = $("#password").val();
if (account != "" && password != "") {
$.ajax({
url : "http://www.cimeisi.cn:8080/index/auth/login",
data : {
account : account,
password : password
},
type : "POST",
dataType : "json"
}).then(function (response) {
if (response.status == 200) {
window.location.href = "main.html?token=" + response.data.token;
} else {
alert(response.message);
}
});
}
});
});
</script>
</body>
</html>