update flat-style ui

web/css/page.css

@@ -29,10 +29,48 @@
 	width: 220px;
 	height: 55px;
 	overflow: hidden;
+	position: relative;
 }
 
-.topHead h1{
-	color: #CCCCCC;
+.topHead .logoWrapper h1{
+	color: #333;
+	line-height: 55px;
+	text-align: center;
+	margin: 0;
+}
+
+.topHead .logoWrapper .logo_bottom {
+	position: absolute;
+	left:  -25px;
+	bottom: 0px;
+}
+
+.anim_rotation{
+    -webkit-animation: rotation 1.2s infinite cubic-bezier(.63,.33,.46,.71);
+}
+
+@-webkit-keyframes rotation {
+    0% {
+    	-webkit-transform: rotate(0deg);
+    	opacity: 0.1;
+    }
+
+    20% {
+    	opacity: 0.1;
+    }
+
+    40% {
+    	opacity: 0.25;
+    }
+
+    80% {
+    	opacity: 0.1;
+    }
+
+    100% {
+    	-webkit-transform: rotate(359deg);
+    	opacity: 0.1;
+    }
 }
 
 .topHead .ctrlWrapper{
@@ -88,6 +126,11 @@
 	table-layout: fixed;
 }
 
+.mainTableWrapper thead{
+	background: #DDD;
+	border-bottom: 1px solid #777;
+}
+
 .mainTableWrapper td,
 .mainTableWrapper th{
 	padding: 4px 12px;
@@ -205,7 +248,7 @@
 }
 
 .http_status{
-	font-weight: 700;
+	/*font-weight: 700;*/
 }
 
 .http_status_200{

web/index.html

@@ -13,8 +13,11 @@
 	<div class="topHead">
 		<div class="logoWrapper">
 			<h1>Anyproxy</h1>
+			<img class="logo_bottom anim_rotation" id="J_indicator" src="./logo_bottom.png" width="50" height="50" style="visibility:hidden" />
 		</div>
 
+
+
 		<div class="ctrlWrapper">
 			<a href="#" class="J_statusBtn"><span class="topBtn"><i class="uk-icon-stop"></i>Stop</span></a>
 			<a href="#" class="J_statusBtn btn_disable"><span class="topBtn"><i class="uk-icon-play"></i>Resume</span></a>

web/list.js

@@ -141,7 +141,8 @@ seajs.use(['$', 'Underscore', 'Backbone',"./detail"], function($, _, Backbone,De
 		}
 
 		//pause btn
-		var ifPause = false;
+		var ifPause     = false,
+			indicatorEl = $("#J_indicator");
 		(function(){
 			var statusBtn = $(".J_statusBtn");
 			statusBtn.on("click",function(e){
@@ -153,8 +154,12 @@ seajs.use(['$', 'Underscore', 'Backbone',"./detail"], function($, _, Backbone,De
 
 				if(/stop/i.test($(this).html()) ){
 					ifPause = true;
+					indicatorEl.fadeOut();
+					// indicatorEl.css("visibility","hidden");
 				}else{
 					ifPause = false;
+					indicatorEl.fadeIn();
+					// indicatorEl.css("visibility","visible");
 				}
 			});
 		})();
@@ -165,9 +170,11 @@ seajs.use(['$', 'Underscore', 'Backbone',"./detail"], function($, _, Backbone,De
 			return;
 		}
 		var socketPort = $("#socketPort").val(),
-			baseUrl    = $("#baseUrl").val(),
-		    dataSocket = new WebSocket("ws://" + baseUrl + ":" + socketPort);
-		dataSocket.onopen = function(){}
+			baseUrl     = $("#baseUrl").val(),
+			dataSocket  = new WebSocket("ws://" + baseUrl + ":" + socketPort);
+		dataSocket.onopen = function(){
+			indicatorEl.css("visibility","visible");
+		}
 
 		dataSocket.onmessage = function(event){
 			if(ifPause) return;
@@ -184,8 +191,12 @@ seajs.use(['$', 'Underscore', 'Backbone',"./detail"], function($, _, Backbone,De
 			}
 		}
 
+		dataSocket.onclose = function(e){
+		}
+
 		dataSocket.onerror = function(e){
 			console.log(e);
+			indicatorEl.css("visibility","hidden");
 			alert("socket err, please refresh");
 		}