<!DOCTYPE html>
<html>
<head>
<title>Anyproxy</title>
<link rel="stylesheet" href="/css/uikit.min.css" />
</head>
<body>
<div class="topHead">
<h1>Anyproxy</h1>
</div>
<table class="mainRecordTable uk-table uk-table-striped uk-table-condensed uk-table-hover">
<thead>
<tr>
<th>id</th>
<th>host</th>
<th>path</th>
<th>code</th>
<th>mime type</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
<tr>
<td>1</td>
<td>www.baidu.com</td>
<td>/search?a=b</td>
<td>200</td>
<td>text/html</td>
</tr>
</tbody>
</table>
<div class="recordDetailOverlay">
<section class="req">
<h4 class="subTitle">request</h4>
<div class="detail">
<ul class="uk-list">
<li>GET www.baidu.com</li>
<li>/search?q=123&callbac=123</li>
<li><strong>Content-Type</strong> : text/html</li>
<li><strong>x-powered</strong> : text/html</li>
<li><strong>access-control-allow-credencial</strong> : true</li>
</ul>
</div>
</section>
<section class="resHeader">
<h4 class="subTitle">response header</h4>
<div class="detail">
<ul class="uk-list">
<li>HTTP/1.1 200</li>
<li><strong>Content-Type</strong> : text/html</li>
<li><strong>x-powered</strong> : text/html</li>
<li><strong>access-control-allow-credencial</strong> : true</li>
<li><strong>Content-Type</strong> : text/html</li>
<li><strong>x-powered</strong> : text/html</li>
<li><strong>access-control-allow-credencial</strong> : true</li>
<li><strong>Content-Type</strong> : text/html</li>
</ul>
</div>
</section>
<section class="resBody">
<h4 class="subTitle">response body</h4>
<div class="detail">
<form class="uk-form">
<textarea>NOTE In this example we used a button from the Button component. To add a top margin to form elements, when they stack on smaller viewports, just add the data-uk-margin attribute from the Utility component to the parent element.NOTE In this example we used a button from the Button component. To add a top margin to form elements, when they stack on smaller viewports, just add the data-uk-margin attribute from the Utility component to the parent element. NOTE In this example we used a button from the Button component. To add a top margin to form elements, when they stack on smaller viewports, just add the data-uk-margin attribute from the Utility component to the parent element.NOTE In this example we used a button from the Button component. To add a top margin to form elements, when they stack on smaller viewports, just add the data-uk-margin attribute from the Utility component to the parent element. </textarea>
</form>
</div>
</section>
</div>
<script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.0/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
<script>
seajs.config({
base: 'http://static.alipayobjects.com/',
alias: {
'$' : 'jquery/jquery/1.7.2/jquery',
'Backbone': 'gallery/backbone/1.1.2/backbone.js'
}
});
seajs.use(['$', 'Backbone'], function($, Backbone) {
var Record = Backbone.Model.extend({
defaults:{
host:"",
path:"",
statusCode:"",
mimeType:""
},
initialize : function(){
}
});
var RecordList = Backbone.Collection.extend({
model:Record
});
var rec1 = new Record({statusCode:200, host:"www.baidu.com", path:"/search?a=b"});
var rec2 = new Record({statusCode:200, host:"www.bing.com", path:"/search?a=b"});
var rec3 = new Record({statusCode:200, host:"www.google.com", path:"/search?a=b"});
console.log([rec1,rec2,rec3] );
var recList = new RecordList( [rec1,rec2,rec3] );
console.log(recList.toJSON());
});
</script>
<style type="text/css">
.topHead{
background: #000;
color: rgb(204,204,204);
height: 42px;
position: relative;
}
.mainRecordTable{
margin-top: 0;
}
.uk-table-hover tbody tr:hover{
cursor: pointer;
background: #CCC;
}
.resHeader{
width: 400px;
}
.resBody textarea{
width: 400px;
height: 280px;
}
.subTitle{
padding-left: 6px;
border-left: 3px solid #1FA2D6;
font-size: 16px;
line-height: 16px;
}
.detail{
padding-left: 12px;
}
.recordDetailOverlay{
width: 600px;
height: 100%;
position: fixed;
right: 0;
background: #FFF;
border-left: 1px solid #CCC;
top: 0;
padding: 10px 10px 20px 10px;
overflow-y:scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</body>
</html>