From 0e75f8933ea70d9b412a4d889f00a190255c59ee Mon Sep 17 00:00:00 2001
From: Tjatse <thisnamemeansnothing@gmail.com>
Date: Fri, 16 Jan 2015 18:11:24 +0800
Subject: [PATCH] new logo

---
 web/public/css/auth.css    | 85 --------------------------------------
 web/public/js/auth.html.js | 67 +++++++++++++++++++++++++++---
 web/routes/index.js        |  2 +-
 web/views/auth.html        |  7 ++--
 4 files changed, 65 insertions(+), 96 deletions(-)

diff --git a/web/public/css/auth.css b/web/public/css/auth.css
index bfd5129..e01af98 100644
--- a/web/public/css/auth.css
+++ b/web/public/css/auth.css
@@ -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;
diff --git a/web/public/js/auth.html.js b/web/public/js/auth.html.js
index 42634cf..57a5ff5 100644
--- a/web/public/js/auth.html.js
+++ b/web/public/js/auth.html.js
@@ -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)");
 }
\ No newline at end of file
diff --git a/web/routes/index.js b/web/routes/index.js
index 16fe3ce..8834f00 100644
--- a/web/routes/index.js
+++ b/web/routes/index.js
@@ -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.'});
 });
\ No newline at end of file
diff --git a/web/views/auth.html b/web/views/auth.html
index 39b37b6..afd7851 100644
--- a/web/views/auth.html
+++ b/web/views/auth.html
@@ -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>