add bootstrap

README.md

@@ -50,6 +50,6 @@ go get -v github.com/tools/godep
 Reference Web sites
 
 * <https://vuejs.org.cn/>
-
+* Icon from <http://www.easyicon.net/558394-file_explorer_icon.html>
 ## LICENSE
 This project is under license [MIT](LICENSE)

httpstaticserver.go

@@ -44,7 +44,7 @@ func (s *HTTPStaticServer) hIndex(w http.ResponseWriter, r *http.Request) {
 
 func (s *HTTPStaticServer) hAssets(w http.ResponseWriter, r *http.Request) {
 	path := mux.Vars(r)["path"]
-	w.Header().Set("Content-Type", "text/plain") // -_-! not working in chrome
+	// w.Header().Set("Content-Type", "text/plain") // -_-! not working in chrome
 	http.ServeFile(w, r, filepath.Join("./res", path))
 }
 

res/index.tmpl

@@ -1,13 +1,78 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>gohttp server</title>
+		<link rel="shortcut icon" type="image/png" href="/-/res/favicon.png" />
+		<link rel="stylesheet" type="text/css" href="/-/res/bootstrap-3.3.5/css/bootstrap.min.css">
 	</head>
 	<body id="app">
-		<h1>{{message}}</h1>
-		<p><a href="/-/raw/">Explore</a></p>
-		<script src="/-/res/jquery-3.1.0.min.js"></script>
-		<script src="/-/res/vue-1.0.min.js"></script>
+		<nav class="navbar navbar-inverse">
+			<div class="container">
+				<div class="container">
+					<div class="navbar-header">
+						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+						<span class="sr-only">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						</button>
+						<a class="navbar-brand" href="/">Go HTTP File Server</a>
+					</div>
+					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
+						<ul class="nav navbar-nav">
+							<li><a href="{{.dir}}">{{.dir}}</a></li>
+						</ul>
+						<form class="navbar-form navbar-right">
+							<div class="input-group">
+								<input type="text" class="form-control" placeholder="Not finished.">
+								<span class="input-group-btn">
+									<button class="btn btn-default" type="button">
+										<span class="glyphicon glyphicon-search"></span>
+									</button>
+								</span>
+							</div>
+						</form>
+						<ul id="nav-right-bar" class="nav navbar-nav navbar-right">
+						</ul>
+					</div>
+				</div>
+			</div>
+		</nav>
+		<div class="container">
+			<div class="col-md-12">
+				<table class="table">
+					<thead>
+						<th>Name</th>
+						<th>Size</th>
+						<th>Actions</th>
+					</thead>
+					<tbody>
+						<td>Foo.txt</td>
+						<td>10M</td>
+						<td>
+							<a href="#">Download</a>
+						</td>
+					</tbody>
+				</table>
+			</div>
+			<div class="col-md-12" id="content">
+				<!-- webpack content here -->
+				<h1>{{message}}</h1>
+				<p><a href="/-/raw/">Explore</a></p>
+			</div>
+			<div class="col-md-12">
+				<div id="footer" class="pull-right">
+					<a href="https://github.com/codeskyblue/gohttp-vue">gohttp-vue</a>,
+					written by <a href="https://github.com/codeskyblue">codeskyblue</a>. 2016. go 1.6
+				</div>
+			</div>
+		</div>
+		
+		<script src="/-/res/js/jquery-3.1.0.min.js"></script>
+		<script src="/-/res/js/vue-1.0.min.js"></script>
+		<script src="/-/res/bootstrap-3.3.5/js/bootstrap.min.js"></script>
 		<script>
 		$.getJSON("/-/json/hello", function(res) {
 			console.log(res);