mirror of
https://github.com/alibaba/anyproxy.git
synced 2025-04-20 14:54:21 +00:00
optimize style
This commit is contained in:
OttoMao
parent
be319d7dfa
commit
b3c3d8e442
83
index.css
83
index.css
@ -30,14 +30,17 @@ body {
|
||||
.wrapper a {
|
||||
font-size: 16px;
|
||||
color: #00aaee;
|
||||
line-height: 40px;
|
||||
}
|
||||
.wrapper h4.subTitle {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 30px 0;
|
||||
padding: 50px 0 10px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.wrapper h4.subTitle.white {
|
||||
color: #FFF;
|
||||
}
|
||||
.wrapper code {
|
||||
display: inline-block;
|
||||
@ -64,10 +67,12 @@ body {
|
||||
background: #326eeb;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
.wrapper > div {
|
||||
width: 100%;
|
||||
min-width: 890px;
|
||||
}
|
||||
.brief {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
text-align: center;
|
||||
padding: 100px 0;
|
||||
position: relative;
|
||||
@ -75,51 +80,53 @@ body {
|
||||
}
|
||||
.brief .slogan {
|
||||
font-size: 16px;
|
||||
color: #636373;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.feature {
|
||||
background: #dedede;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
}
|
||||
.feature .featureContent {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.feature .featureContent .item {
|
||||
padding: 30px 0 20px;
|
||||
width: 280px;
|
||||
height: 190px;
|
||||
/*border: 1px solid #AAA;*/
|
||||
margin: 0 10px;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.feature .featureContent .iconWrapper {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
height: 190px;
|
||||
line-height: 190px;
|
||||
line-height: 40px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
color: #636373;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.feature .featureContent .iconWrapper .bigger {
|
||||
font-size: 44px;
|
||||
}
|
||||
.feature .featureContent h4 {
|
||||
color: #636373;
|
||||
margin: 60px 0 15px 0;
|
||||
color: #5a5a5a;
|
||||
margin: 12px auto 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.feature .featureContent h5 {
|
||||
color: #777777;
|
||||
margin: 0;
|
||||
}
|
||||
.feature .featureContent h5,
|
||||
.feature .featureContent a {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.quickstart {
|
||||
background: #f9f9f9;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
}
|
||||
.quickstart .quickstartContent {
|
||||
position: relative;
|
||||
@ -136,29 +143,31 @@ body {
|
||||
padding: 0;
|
||||
}
|
||||
.listSection .listContent {
|
||||
width: 1200px;
|
||||
width: 890px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.listSection ul {
|
||||
margin: 0 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.listSection li {
|
||||
color: #636373;
|
||||
color: #5a5a5a;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.sample {
|
||||
background: #f9f9f9;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
}
|
||||
.sample .sampleContent {
|
||||
width: 1200px;
|
||||
width: 890px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.sample .item {
|
||||
width: 1000px;
|
||||
margin: 20px auto 0;
|
||||
margin: 10px;
|
||||
}
|
||||
.sample .itemTitle {
|
||||
font-size: 16px;
|
||||
margin: 0px 10px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.sample .figure {
|
||||
vertical-align: top;
|
||||
@ -169,10 +178,17 @@ body {
|
||||
vertical-align: top;
|
||||
}
|
||||
.sample code {
|
||||
width: 530px;
|
||||
width: 495px;
|
||||
}
|
||||
.sample .readmore {
|
||||
/*text-align: center;*/
|
||||
.sample hr {
|
||||
border: none;
|
||||
border-top: 1px solid #777777;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.sample .readmoreBtn {
|
||||
margin-left: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.readMore {
|
||||
@ -180,18 +196,15 @@ body {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.learnMore {
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
height: 300px;
|
||||
background: #326eeb;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 120px 0;
|
||||
}
|
||||
.learnMore h4.subtitle {
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.learnMore .btnWrapper {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
margin-top: -30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
45
index.html
45
index.html
@ -34,11 +34,11 @@
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>支持Https</h4>
|
||||
<h5>用AnyProxy自制根证书，明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank">如何配置>></a></h5>
|
||||
<h5>明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank"><br>如何配置>></a></h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
<i class="iconfont bigger"></i>
|
||||
</span>
|
||||
<h4>Web界面</h4>
|
||||
<h5>多终端共享，可视化观察每个请求</h5>
|
||||
@ -48,7 +48,7 @@
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>规则逻辑（Rule）</h4>
|
||||
<h5>随心所欲编写处理规则，定制我的专属调试工具</h5>
|
||||
<h5>编写个性化处理规则，定制专属调试工具</h5>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
@ -78,50 +78,55 @@
|
||||
<div class="sampleContent">
|
||||
<h4 class="subtitle">规则文件(rule)样例</h4>
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">去除请求头的if-modified-since字段</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//remove cache related header
|
||||
//file : rule_remove_cache_header.js
|
||||
//rule : anyproxy --rule rule_remove_cache_header.js
|
||||
module.exports = {
|
||||
replaceRequestOption : function(req,option){
|
||||
var newOption = option;
|
||||
delete newOption.headers['if-modified-since'];
|
||||
replaceRequestOption : function(req,option){
|
||||
var newOption = option;
|
||||
delete newOption.headers['if-modified-since'];
|
||||
|
||||
return newOption;
|
||||
}
|
||||
return newOption;
|
||||
}
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="360"/>
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">在HTML响应末尾加上一句hello world</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//append "hello world" to all web pages
|
||||
//file : rule_replace_response_data.js
|
||||
//run : anyproxy --rule rule_replace_response_data.js
|
||||
module.exports = {
|
||||
replaceServerResDataAsync: function(req,res,serverRes,callback){
|
||||
replaceServerResDataAsync: function(req,res,serverRes,cb){
|
||||
|
||||
if(/html/i.test(res.headers['content-type'])){
|
||||
var newDataStr = serverRes.toString();
|
||||
newDataStr += "hello world!";
|
||||
callback(newDataStr);
|
||||
cb(newDataStr);
|
||||
}
|
||||
}
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="360"/>
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">为某个请求指定目标IP地址</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//assign a specific IP adress for some request
|
||||
@ -141,11 +146,13 @@ module.exports = {
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="360"/>
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">把所有图片响应替换成本地图片</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//replace all the images with local one
|
||||
@ -173,13 +180,14 @@ module.exports = {
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="360"/>
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="item readmore">
|
||||
<a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1" target="_blank">>> 规则文件（Rule）API</a>
|
||||
<div class="readmoreBtn">
|
||||
<a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1" target="_blank">>> 阅读：规则文件（Rule）API</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -189,7 +197,7 @@ module.exports = {
|
||||
<ul>
|
||||
<li>Map Local，Log Filter等常规功能</li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#throttling">低网速网速模拟</a>，调试应用在2G/3G下的表现</li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">把AnyProxy作为npm模块做二次开发</a></li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">把AnyProxy作为npm模块</a>，基于它做二次开发</li>
|
||||
</ul>
|
||||
<h4 class="subtitle">相关阅读</h4>
|
||||
<ul>
|
||||
@ -201,7 +209,8 @@ module.exports = {
|
||||
|
||||
<div class="learnMore listSection">
|
||||
<div class="btnWrapper">
|
||||
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">Read More ：AnyProxy@Github</a>
|
||||
<h4 class="subtitle white">Read More</h4>
|
||||
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">https://github.com/alibaba/anyproxy</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
101
index.less
101
index.less
@ -2,18 +2,19 @@
|
||||
@dark : #326EEB;
|
||||
@gray : #F9F9F9;
|
||||
@darkGray : #DEDEDE;
|
||||
@textDark : #636373;
|
||||
@textDark : #5A5A5A;
|
||||
@textLight: #777;
|
||||
|
||||
@wideContent : 1200px;
|
||||
@normalContent : 890px;
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
|
||||
src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */
|
||||
url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||
font-family: 'iconfont';
|
||||
src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
|
||||
src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */
|
||||
url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
i.iconfont{
|
||||
@ -45,15 +46,19 @@ body{
|
||||
a{
|
||||
font-size: 16px;
|
||||
color: @main;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
h4.subTitle{
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 30px 0;
|
||||
padding: 50px 0 10px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: @textDark;
|
||||
}
|
||||
|
||||
h4.subTitle.white{
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
code{
|
||||
@ -88,10 +93,13 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper>div{
|
||||
width: 100%;
|
||||
min-width: @normalContent;
|
||||
}
|
||||
|
||||
.brief{
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
min-width: @wideContent;
|
||||
text-align: center;
|
||||
padding: 100px 0;
|
||||
position: relative;
|
||||
@ -105,54 +113,56 @@ body{
|
||||
|
||||
.feature{
|
||||
background: @darkGray;
|
||||
width: 100%;
|
||||
min-width: @wideContent;
|
||||
|
||||
.featureContent{
|
||||
width: @wideContent;
|
||||
margin: 0 auto;
|
||||
|
||||
@itemheight : 190px;
|
||||
.item{
|
||||
padding: 30px 0 20px;
|
||||
width: 280px;
|
||||
height: @itemheight;
|
||||
/*border: 1px solid #AAA;*/
|
||||
margin: 0 10px;
|
||||
float: left;
|
||||
box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.iconWrapper{
|
||||
float: left;
|
||||
display: inline-block;
|
||||
height: @itemheight;
|
||||
line-height: @itemheight;
|
||||
line-height: 40px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
color: @textDark;
|
||||
}
|
||||
.iconWrapper .bigger{
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
h4{
|
||||
color: @textDark;
|
||||
margin: 60px 0 15px 0;
|
||||
margin: 12px auto 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h5{
|
||||
color: @textLight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h5,
|
||||
a{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quickstart{
|
||||
background: @gray;
|
||||
width: 100%;
|
||||
min-width: @wideContent;
|
||||
|
||||
.quickstartContent{
|
||||
position: relative;
|
||||
@ -174,13 +184,12 @@ body{
|
||||
|
||||
.listSection{
|
||||
.listContent{
|
||||
width: @wideContent;
|
||||
width: @normalContent;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
ul{
|
||||
margin: 0 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
li{
|
||||
@ -192,18 +201,20 @@ body{
|
||||
|
||||
.sample{
|
||||
background: @gray;
|
||||
width: 100%;
|
||||
min-width: @wideContent;
|
||||
|
||||
|
||||
.sampleContent{
|
||||
width: @wideContent;
|
||||
width: @normalContent;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.item{
|
||||
width: 1000px;
|
||||
margin: 20px auto 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.itemTitle{
|
||||
font-size: 16px;
|
||||
margin: 0px 10px;
|
||||
color: @textDark;
|
||||
}
|
||||
|
||||
.figure{
|
||||
@ -217,11 +228,19 @@ body{
|
||||
}
|
||||
|
||||
code{
|
||||
width: 530px;
|
||||
width: 495px;
|
||||
}
|
||||
|
||||
.readmore{
|
||||
/*text-align: center;*/
|
||||
hr{
|
||||
border: none;
|
||||
border-top: 1px solid @textLight;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.readmoreBtn{
|
||||
margin-left: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@ -232,20 +251,18 @@ body{
|
||||
}
|
||||
|
||||
.learnMore{
|
||||
width: 100%;
|
||||
min-width: @wideContent;
|
||||
height: 300px;
|
||||
background: @dark;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 120px 0;
|
||||
|
||||
h4.subtitle{
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btnWrapper{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
margin-top: -30px;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user