new logo
This commit is contained in:
Tjatse
parent
2e12256ee5
commit
0e75f8933e
|
|
@ -67,91 +67,6 @@ html, body {
|
|||
-webkit-animation-delay: 1s;
|
||||
}
|
||||
|
||||
.auth-form div > * {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
display: block;
|
||||
top: 0;
|
||||
border: solid 4px #06ff00;
|
||||
}
|
||||
|
||||
.auth-form div > *:before,
|
||||
.auth-form div > *:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #06ff00;
|
||||
}
|
||||
|
||||
.auth-form div .G {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
border-right-color: transparent;
|
||||
left: 0;
|
||||
transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.auth-form div .G:before {
|
||||
left: 23px;
|
||||
top: 12px;
|
||||
width: 4px;
|
||||
height: 17px;
|
||||
transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.auth-form div .G:after,
|
||||
.auth-form div .U:after {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
background-color: #68bdff;
|
||||
box-shadow: inset 0px 1px 4px 0px rgba(250, 250, 250, 0.5),
|
||||
0px 0px 4px 2px #888;
|
||||
}
|
||||
|
||||
.auth-form div .U {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
left: 36px;
|
||||
transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.auth-form div .I {
|
||||
width: 4px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
background-color: #06ff00;
|
||||
left: 74px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.auth-form div .I:before {
|
||||
width: 4px;
|
||||
height: 11px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.auth-form div .I:after {
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.auth-form input {
|
||||
top: 50px;
|
||||
margin-left: -150px;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ $(window).ready(function(){
|
|||
}
|
||||
});
|
||||
btn = $('a').click(login);
|
||||
|
||||
drawLogo();
|
||||
});
|
||||
|
||||
// Login event.
|
||||
|
|
@ -29,20 +31,20 @@ function login(){
|
|||
// Post data to server.
|
||||
lightUp();
|
||||
$.ajax({
|
||||
url : '/auth_api?t=' + Math.random(),
|
||||
data : {
|
||||
url : '/auth_api?t=' + Math.random(),
|
||||
data : {
|
||||
pwd: val
|
||||
},
|
||||
dataType: 'json',
|
||||
error : function(){
|
||||
error : function(){
|
||||
info('Can not get response from server, it is an internal error.');
|
||||
lightOff();
|
||||
},
|
||||
success: function(res){
|
||||
success : function(res){
|
||||
lightOff();
|
||||
if(res.error){
|
||||
if (res.error) {
|
||||
return info(res.error);
|
||||
}else{
|
||||
} else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
|
@ -75,4 +77,57 @@ function info(msg){
|
|||
icon : './img/info.png',
|
||||
useAnimateCss: true
|
||||
});
|
||||
}
|
||||
|
||||
function drawLogo(){
|
||||
var w = 80,
|
||||
h = 32;
|
||||
|
||||
var svg = d3.select('#logo')
|
||||
.append('svg')
|
||||
.attr('width', w)
|
||||
.attr('height', h);
|
||||
|
||||
var filter = svg.append("defs")
|
||||
.append("filter")
|
||||
.attr("id", "dropshadow")
|
||||
|
||||
filter.append("feGaussianBlur")
|
||||
.attr("in", "SourceAlpha")
|
||||
.attr("stdDeviation", 1)
|
||||
.attr("result", "blur");
|
||||
filter.append("feOffset")
|
||||
.attr("in", "blur")
|
||||
.attr("dx", 4)
|
||||
.attr("dy", 4)
|
||||
.attr("result", "offsetBlur")
|
||||
filter.append("feFlood")
|
||||
.attr("in", "offsetBlur")
|
||||
.attr("flood-color", "#0a6506")
|
||||
.attr("flood-opacity", "0.9")
|
||||
.attr("result", "offsetColor");
|
||||
filter.append("feComposite")
|
||||
.attr("in", "offsetColor")
|
||||
.attr("in2", "offsetBlur")
|
||||
.attr("operator", "in")
|
||||
.attr("result", "offsetBlur");
|
||||
|
||||
var feMerge = filter.append("feMerge");
|
||||
|
||||
feMerge.append("feMergeNode")
|
||||
.attr("in", "offsetBlur")
|
||||
feMerge.append("feMergeNode")
|
||||
.attr("in", "SourceGraphic");
|
||||
|
||||
var vis = svg
|
||||
.append('g')
|
||||
.attr('width', w)
|
||||
.attr('height', h);
|
||||
|
||||
vis.append('path')
|
||||
.style("fill", "none")
|
||||
.style("stroke", "#fff")
|
||||
.style("stroke-width", 2)
|
||||
.attr('d', 'M24,12 T16,8 T4,16 T16,28 T24,20 T18,20 T28,18 T30,16 T44,24 T48,16 T58,8 L58,28 T62,16 T68,16 T72,16 T76,16')
|
||||
.attr("filter", "url(#dropshadow)");
|
||||
}
|
||||
|
|
@ -36,5 +36,5 @@ action(function auth_api(req, res){
|
|||
req.session['auth_code'] = encryptedPwd;
|
||||
return res.json({status: 200});
|
||||
}
|
||||
return res.json({error: 'Authorize failed, password is not correct.'});
|
||||
return res.json({error: 'Authorize failed, password is incorrect.'});
|
||||
});
|
||||
|
|
@ -16,10 +16,8 @@
|
|||
<body class="carbon">
|
||||
|
||||
<div class="auth-form">
|
||||
<div title="PM2 GUI">
|
||||
<z class="G"></z>
|
||||
<z class="U"></z>
|
||||
<z class="I"></z>
|
||||
<div title="PM2 GUI" id="logo">
|
||||
|
||||
</div>
|
||||
|
||||
<input placeholder="Password" type="password" maxlength="20" />
|
||||
|
|
@ -28,6 +26,7 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/d3.min.js"></script>
|
||||
<script type="text/javascript" src="/js/jquery.sticky.min.js"></script>
|
||||
<script type="text/javascript" src="/js/auth.html.js"></script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue