D

ls0f · Jul 1, 2015 · e19a10d · e19a10d
1 parent 768d768
commit e19a10d
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 57 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -10,10 +10,11 @@ html, body {
     max-width: 100%;
     overflow: hidden;
     width: 100%;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    font-size: 20px;
 }
-
-
-#active {
+.wrap{position: relative;}
+/*#active {
     color: #fff;
     font-family: Verdana,Arial,Helvetica,sans-serif;
     font-size: 16px;
@@ -22,4 +23,30 @@ html, body {
     position: fixed;
     top: 50px;
     z-index: 10;
-}
+}*/
+#title{
+    color: #fff;
+    left: 10px;
+    position: fixed;
+    top:10px;
+}
+.ulwrap{
+    position: fixed;
+    left: 10px;
+    top:80px;
+    color: #fff;
+    z-index: 10;
+}
+#incomingChatMessages{
+    color: #666;
+    font-family: Lucida Grande,Arial,Helvetica,sans-serif;
+    font-size: 13px;
+    padding: 3px;
+    position: fixed;
+    right: 0;
+    text-align: right;
+    top: 0;
+    z-index: 30;
+}
+
+
diff --git a/templates/index.html b/templates/index.html
@@ -7,19 +7,6 @@
 	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 	<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
 	<style>
-	* {
-	    box-sizing: border-box;
-	    margin: 0;
-	    padding: 0;
-	}
-	html, body {
-	    background: #000 none repeat scroll 0 0;
-	    height: 100%;
-	    max-height: 100%;
-	    max-width: 100%;
-	    overflow: hidden;
-	    width: 100%;
-	}
 		.rec .send {
 			display:block;
 			white-space: nowrap;
@@ -80,49 +67,55 @@
 	</style>
 </head>
 <body>
-PyTailLog:
-<br /><ul id="incomingChatMessages"></ul>
-<libal>自动滚屏<input type="checkbox" id="screanScroll" value="1" checked="checked"></libal>
-<script type="text/javascript">
+<div class="wrap">
+	<h1 id="title">PyTailLog:</h1>
+	<ul id="incomingChatMessages"></ul>
+	<div class="ulwrap">
+		<libal>自动滚屏&nbsp;&nbsp;<input type="checkbox" id="screanScroll" value="1" checked="checked"></libal>
+	</div>
 
 
-	var showData = function(data) {
-		$('#incomingChatMessages').append($('<li></li>').html(data));
-		startScreenScroll();
-	}
-	//////  滚屏
-	var currentpos, timer;
-	function sc() {
-		clearInterval(timer);
-		timer = null;
-	}
-	function scrollwindow() {
-		var currentpos = $(document).scrollTop();
-		window.scroll(0, currentpos + 1);
-		if(currentpos == $(document).scrollTop())  //判断是否滚动到网页最下端,是则停止循环
-			sc();
-	}
-	function startScreenScroll() {
-		if($("#screanScroll").attr("checked") == "checked" && !timer) {
-			timer = setInterval("scrollwindow()", 3);
-		}
-	}
-</script>
-<script>
-       if ("MozWebSocket" in window) {
-            WebSocket = MozWebSocket;
-        }
+	<script type="text/javascript">
 
-        if (WebSocket) {
-            var ws = new WebSocket("ws://{{host}}/tail/");
-            ws.onopen = function() {};
-            ws.onmessage = function(evt){ showData(evt.data)};
-            ws.onclose = function() { alert("WebSocket lost")};
-        } else {
-            alert("WebSocket not supported");
-        }
-</script>
-<div class="site-footer">
+
+		var showData = function(data) {
+			$('#incomingChatMessages').append($('<li></li>').html(data));
+			startScreenScroll();
+		}
+		//////  滚屏
+		var currentpos, timer;
+		function sc() {
+			clearInterval(timer);
+			timer = null;
+		}
+		function scrollwindow() {
+			var currentpos = $(document).scrollTop();
+			window.scroll(0, currentpos + 1);
+			if(currentpos == $(document).scrollTop())  //判断是否滚动到网页最下端,是则停止循环
+				sc();
+		}
+		function startScreenScroll() {
+			if($("#screanScroll").attr("checked") == "checked" && !timer) {
+				timer = setInterval("scrollwindow()", 3);
+			}
+		}
+	</script>
+	<script>
+	       if ("MozWebSocket" in window) {
+	            WebSocket = MozWebSocket;
+	        }
+
+	        if (WebSocket) {
+	            var ws = new WebSocket("ws://{{host}}/tail/");
+	            ws.onopen = function() {};
+	            ws.onmessage = function(evt){ showData(evt.data)};
+	            ws.onclose = function() { alert("WebSocket lost")};
+	        } else {
+	            alert("WebSocket not supported");
+	        }
+	</script>
+	<div class="site-footer">
+	</div>
 </div>
 </body>