Just some housekeeping

herokuapp/app.js

@@ -64,12 +64,12 @@
                 console.log(msg);
             }
 
-            res.status(200).send("Server logged message");
+            res.status(200).send("Success! Check system logs to see your message.");
         });
 
         req.on('close', function(err){
             console.err(err);
-            res.status(400).json("Server read stream closed unexpectedly. Check console.");
+            res.status(400).json("Error! Check system logs to identify the error.");
         });
 
     });

herokuapp/public/css/style.css

@@ -144,14 +144,13 @@ h5 {
 }
 
 .direct {
-    padding: 16px 40px;
     color: #21ce99;
     font-size: 14px;
     background: transparent;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 1px;
-    display: inline-block;
+    display: flex;
     cursor: pointer;
     outline: none;
     text-decoration: none;
@@ -161,15 +160,20 @@ h5 {
     border-radius: 8px;
     position: relative;
     margin-top: 20px;
+    display: table;
+    height:40px;
 }
 
-.direct:before {
+.direct div {
-    content: "▶";
+   display: table-cell;
-    color: #21ce99;
+   text-align: center;
-    font-size: 36px;
+   vertical-align: middle;
-    position: absolute;
+   text-transform: uppercase;
-    top: -2px;
+}
-    left: 0px;
+
+.direct div:nth-child(1) {
+    font-size:30px;
+    padding-right:10px;
 }
 
 input {
@@ -185,3 +189,54 @@ input {
     border: 2px solid #333;
     border-radius: 4px;
 }
+
+.notification {
+    width: 40%;
+    background: #333;
+    position: fixed;
+    top: 20px;
+    left: 30%;
+    z-index:4;
+    right: 0;
+    padding: 0 20px;
+    border-left: 5px solid transparent;
+
+    -ms-transform: translate3d(0, -100px, 0);
+    -o-transform: translate3d(0, -100px, 0);
+    -moz-transform: translate3d(0, -100px, 0);
+    -webkit-transform: translate3d(0, -100px, 0);
+    transform: translate3d(0, -100px, 0);
+
+    transition: -webkit-transform 250ms ease;
+    transition: -moz-transform 250ms ease;
+    transition: -ms-transform 250ms ease;
+    transition: -o-transform 250ms ease;
+    transition: transform 250ms ease;
+}
+
+.down {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.info {
+    border-color: #3498db !important;
+}
+.error {
+    border-color:#e74c3c !important;
+}
+
+.notification .wrapper {
+    width: 100%;
+    padding:20px 0;
+    margin: 0 auto;
+}
+.notification .wrapper .text {
+    color:#FFF;
+    font-size:12px;
+    font-weight:bold;
+    text-align: center;
+}

herokuapp/public/js/index.js

@@ -1,5 +1,24 @@
 /* global alert, $ */
 (function($) {
+
+    var tid = 0;
+    var lastType;
+
+    function notify(type, data) {
+        var $notification = $(".notification");
+        $notification.removeClass(lastType || "")
+            .addClass(lastType = type)
+            .find(".text")
+            .text(data);
+
+        $notification.addClass("down");
+
+        clearTimeout(tid);
+        setTimeout(function() {
+            $notification.removeClass("down");
+        }, 4000);
+    }
+
     $(document).ready(function() {
         var _submit;
 
@@ -20,9 +39,9 @@
             }, function(data) {
                 $("#input-tag").val("");
                 $("#input-msg").val("");
-                alert(data);
+                notify("info", data);
             }).fail(function(err) {
-                alert(err.responseText);
+                notify("error", err.responseText);
             }).always(function() {
                 _submit = false;
             });

herokuapp/views/index.html

@@ -18,6 +18,11 @@
     <div class = "header">
       <div class = "header__logo"></div>
     </div>
+    <div class = "notification">
+      <div class = "wrapper">
+        <div class = "text">Completed</div>
+      </div>
+    </div>
     <div class = "content">
       <div style="width:100%;height:100%;">
         <div class = "main">
@@ -33,7 +38,10 @@
               <input id="input-msg" style="margin-right:10px;width:565px" placeholder="Enter message"/>
               <button id="submit" class="button" href="#">Console.log</button>
             </div>
-              <a class="direct" target="_frame" href="logs">Access System Logs</a>
+              <a class="direct" target="_frame" href="logs">
+                <div>▶</div>
+                <div>Access System Logs</div>
+              </a>
           </div>
           <div class = "normal">
             <h2>Web Access</h2>