XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-04-24 08:41:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize style

Browse Source
This commit is contained in:
OttoMao 2015-08-05 22:03:46 +08:00
parent be319d7dfa
commit b3c3d8e442
3 changed files with 134 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
index.css
View File

@ -30,14 +30,17 @@ body {
.wrapper a { .wrapper a {
font-size: 16px; font-size: 16px;
color: #00aaee; color: #00aaee;
line-height: 40px;
} }
.wrapper h4.subTitle { .wrapper h4.subTitle {
font-size: 30px; font-size: 30px;
margin: 0; margin: 0;
padding: 30px 0; padding: 50px 0 10px 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #5a5a5a;
}
.wrapper h4.subTitle.white {
color: #FFF;
} }
.wrapper code { .wrapper code {
display: inline-block; display: inline-block;
@ -64,10 +67,12 @@ body {
background: #326eeb; background: #326eeb;
color: #f9f9f9; color: #f9f9f9;
} }
.wrapper > div {
width: 100%;
min-width: 890px;
}
.brief { .brief {
height: 300px; height: 300px;
width: 100%;
min-width: 1200px;
text-align: center; text-align: center;
padding: 100px 0; padding: 100px 0;
position: relative; position: relative;
@ -75,51 +80,53 @@ body {
} }
.brief .slogan { .brief .slogan {
font-size: 16px; font-size: 16px;
color: #636373; color: #5a5a5a;
} }
.feature { .feature {
background: #dedede; background: #dedede;
width: 100%;
min-width: 1200px;
} }
.feature .featureContent { .feature .featureContent {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.feature .featureContent .item { .feature .featureContent .item {
padding: 30px 0 20px;
width: 280px; width: 280px;
height: 190px;
/*border: 1px solid #AAA;*/ /*border: 1px solid #AAA;*/
margin: 0 10px; margin: 0 10px;
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
font-size: 30px; font-size: 30px;
text-align: center;
} }
.feature .featureContent .iconWrapper { .feature .featureContent .iconWrapper {
float: left;
display: inline-block; display: inline-block;
height: 190px; line-height: 40px;
line-height: 190px;
width: 70px; width: 70px;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
color: #636373; color: #5a5a5a;
}
.feature .featureContent .iconWrapper .bigger {
font-size: 44px;
} }
.feature .featureContent h4 { .feature .featureContent h4 {
color: #636373; color: #5a5a5a;
margin: 60px 0 15px 0; margin: 12px auto 8px;
font-size: 20px; font-size: 20px;
} }
.feature .featureContent h5 { .feature .featureContent h5 {
color: #777777; color: #777777;
margin: 0; margin: 0;
}
.feature .featureContent h5,
.feature .featureContent a {
font-size: 14px; font-size: 14px;
line-height: 20px;
} }
.quickstart { .quickstart {
background: #f9f9f9; background: #f9f9f9;
width: 100%;
min-width: 1200px;
} }
.quickstart .quickstartContent { .quickstart .quickstartContent {
position: relative; position: relative;
@ -136,29 +143,31 @@ body {
padding: 0; padding: 0;
} }
.listSection .listContent { .listSection .listContent {
width: 1200px; width: 890px;
margin: 0 auto; margin: 0 auto;
} }
.listSection ul { .listSection ul {
margin: 0 200px; margin: 0 auto;
} }
.listSection li { .listSection li {
color: #636373; color: #5a5a5a;
font-size: 16px; font-size: 16px;
line-height: 40px; line-height: 40px;
} }
.sample { .sample {
background: #f9f9f9; background: #f9f9f9;
width: 100%;
min-width: 1200px;
} }
.sample .sampleContent { .sample .sampleContent {
width: 1200px; width: 890px;
margin: 0 auto; margin: 0 auto;
} }
.sample .item { .sample .item {
width: 1000px; margin: 10px;
margin: 20px auto 0; }
.sample .itemTitle {
font-size: 16px;
margin: 0px 10px;
color: #5a5a5a;
} }
.sample .figure { .sample .figure {
vertical-align: top; vertical-align: top;
@ -169,10 +178,17 @@ body {
vertical-align: top; vertical-align: top;
} }
.sample code { .sample code {
width: 530px; width: 495px;
} }
.sample .readmore { .sample hr {
/*text-align: center;*/ border: none;
border-top: 1px solid #777777;
width: 80%;
margin: 0 auto;
padding: 15px 0;
}
.sample .readmoreBtn {
margin-left: 10px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.readMore { .readMore {
@ -180,18 +196,15 @@ body {
padding-bottom: 50px; padding-bottom: 50px;
} }
.learnMore { .learnMore {
width: 100%;
min-width: 1200px;
height: 300px;
background: #326eeb; background: #326eeb;
text-align: center; text-align: center;
position: relative; position: relative;
padding: 120px 0;
}
.learnMore h4.subtitle {
padding: 0;
margin-bottom: 30px;
} }
.learnMore .btnWrapper { .learnMore .btnWrapper {
width: 100%;
text-align: center; text-align: center;
height: 60px;
margin-top: -30px;
position: absolute;
top: 50%;
} }

35
index.html
View File

@ -34,11 +34,11 @@
<i class="iconfont">&#xe601;</i> <i class="iconfont">&#xe601;</i>
</span> </span>
<h4>支持Https</h4> <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">如何配置&gt;&gt;</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>如何配置&gt;&gt;</a></h5>
</div> </div>
<div class="item"> <div class="item">
<span class="iconWrapper"> <span class="iconWrapper">
<i class="iconfont">&#xe600;</i> <i class="iconfont bigger">&#xe600;</i>
</span> </span>
<h4>Web界面</h4> <h4>Web界面</h4>
<h5>多终端共享，可视化观察每个请求</h5> <h5>多终端共享，可视化观察每个请求</h5>
@ -48,7 +48,7 @@
<i class="iconfont">&#xe604;</i> <i class="iconfont">&#xe604;</i>
</span> </span>
<h4>规则逻辑（Rule）</h4> <h4>规则逻辑（Rule）</h4>
<h5>随心所欲编写处理规则，定制我的专属调试工具</h5> <h5>编写个性化处理规则，定制专属调试工具</h5>
</div> </div>
<div style="clear:both"></div> <div style="clear:both"></div>
</div> </div>
@ -78,6 +78,7 @@
<div class="sampleContent"> <div class="sampleContent">
<h4 class="subtitle">规则文件(rule)样例</h4> <h4 class="subtitle">规则文件(rule)样例</h4>
<div class="item"> <div class="item">
<h5 class="itemTitle">去除请求头的if-modified-since字段</h5>
<pre> <pre>
<code class="javascript"> <code class="javascript">
//remove cache related header //remove cache related header
@ -94,34 +95,38 @@ module.exports = {
</code> </code>
</pre> </pre>
<span class="figure"> <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> </span>
<hr />
</div> </div>
<div class="item"> <div class="item">
<h5 class="itemTitle">在HTML响应末尾加上一句hello world</h5>
<pre> <pre>
<code class="javascript"> <code class="javascript">
//append "hello world" to all web pages //append "hello world" to all web pages
//file : rule_replace_response_data.js //file : rule_replace_response_data.js
//run : anyproxy --rule rule_replace_response_data.js //run : anyproxy --rule rule_replace_response_data.js
module.exports = { module.exports = {
replaceServerResDataAsync: function(req,res,serverRes,callback){ replaceServerResDataAsync: function(req,res,serverRes,cb){
if(/html/i.test(res.headers['content-type'])){ if(/html/i.test(res.headers['content-type'])){
var newDataStr = serverRes.toString(); var newDataStr = serverRes.toString();
newDataStr += "hello world!"; newDataStr += "hello world!";
callback(newDataStr); cb(newDataStr);
} }
} }
}; };
</code> </code>
</pre> </pre>
<span class="figure"> <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> </span>
<hr />
</div> </div>
<div class="item"> <div class="item">
<h5 class="itemTitle">为某个请求指定目标IP地址</h5>
<pre> <pre>
<code class="javascript"> <code class="javascript">
//assign a specific IP adress for some request //assign a specific IP adress for some request
@ -141,11 +146,13 @@ module.exports = {
</code> </code>
</pre> </pre>
<span class="figure"> <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> </span>
<hr />
</div> </div>
<div class="item"> <div class="item">
<h5 class="itemTitle">把所有图片响应替换成本地图片</h5>
<pre> <pre>
<code class="javascript"> <code class="javascript">
//replace all the images with local one //replace all the images with local one
@ -173,13 +180,14 @@ module.exports = {
</code> </code>
</pre> </pre>
<span class="figure"> <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> </span>
</div> </div>
<div class="item readmore"> <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">&gt;&gt;&nbsp;规则文件（Rule）API</a> <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">&gt;&gt;&nbsp;阅读：规则文件（Rule）API</a>
</div> </div>
</div> </div>
</div> </div>
@ -189,7 +197,7 @@ module.exports = {
<ul> <ul>
<li>Map Local，Log Filter等常规功能</li> <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#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> </ul>
<h4 class="subtitle">相关阅读</h4> <h4 class="subtitle">相关阅读</h4>
<ul> <ul>
@ -201,7 +209,8 @@ module.exports = {
<div class="learnMore listSection"> <div class="learnMore listSection">
<div class="btnWrapper"> <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>
</div> </div>

89
index.less
View File

@ -2,10 +2,11 @@
@dark : #326EEB; @dark : #326EEB;
@gray : #F9F9F9; @gray : #F9F9F9;
@darkGray : #DEDEDE; @darkGray : #DEDEDE;
@textDark : #636373; @textDark : #5A5A5A;
@textLight: #777; @textLight: #777;
@wideContent : 1200px; @wideContent : 1200px;
@normalContent : 890px;
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
@ -45,15 +46,19 @@ body{
a{ a{
font-size: 16px; font-size: 16px;
color: @main; color: @main;
line-height: 40px;
} }
h4.subTitle{ h4.subTitle{
font-size: 30px; font-size: 30px;
margin: 0; margin: 0;
padding: 30px 0; padding: 50px 0 10px 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: @textDark;
}
h4.subTitle.white{
color: #FFF;
} }
code{ code{
@ -88,10 +93,13 @@ body{
} }
} }
.wrapper>div{
width: 100%;
min-width: @normalContent;
}
.brief{ .brief{
height: 300px; height: 300px;
width: 100%;
min-width: @wideContent;
text-align: center; text-align: center;
padding: 100px 0; padding: 100px 0;
position: relative; position: relative;
@ -105,54 +113,56 @@ body{
.feature{ .feature{
background: @darkGray; background: @darkGray;
width: 100%;
min-width: @wideContent;
.featureContent{ .featureContent{
width: @wideContent; width: @wideContent;
margin: 0 auto; margin: 0 auto;
@itemheight : 190px;
.item{ .item{
padding: 30px 0 20px;
width: 280px; width: 280px;
height: @itemheight;
/*border: 1px solid #AAA;*/ /*border: 1px solid #AAA;*/
margin: 0 10px; margin: 0 10px;
float: left; float: left;
box-sizing:border-box; box-sizing:border-box;
-webkit-box-sizing:border-box; -webkit-box-sizing:border-box;
font-size: 30px; font-size: 30px;
text-align: center;
} }
.iconWrapper{ .iconWrapper{
float: left;
display: inline-block; display: inline-block;
height: @itemheight; line-height: 40px;
line-height: @itemheight;
width: 70px; width: 70px;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
color: @textDark; color: @textDark;
} }
.iconWrapper .bigger{
font-size: 44px;
}
h4{ h4{
color: @textDark; color: @textDark;
margin: 60px 0 15px 0; margin: 12px auto 8px;
font-size: 20px; font-size: 20px;
} }
h5{ h5{
color: @textLight; color: @textLight;
margin: 0; margin: 0;
}
h5,
a{
font-size: 14px; font-size: 14px;
line-height: 20px;
} }
} }
} }
.quickstart{ .quickstart{
background: @gray; background: @gray;
width: 100%;
min-width: @wideContent;
.quickstartContent{ .quickstartContent{
position: relative; position: relative;
@ -174,13 +184,12 @@ body{
.listSection{ .listSection{
.listContent{ .listContent{
width: @wideContent; width: @normalContent;
margin: 0 auto; margin: 0 auto;
} }
ul{ ul{
margin: 0 200px; margin: 0 auto;
} }
li{ li{
@ -192,18 +201,20 @@ body{
.sample{ .sample{
background: @gray; background: @gray;
width: 100%;
min-width: @wideContent;
.sampleContent{ .sampleContent{
width: @wideContent; width: @normalContent;
margin: 0 auto; margin: 0 auto;
} }
.item{ .item{
width: 1000px; margin: 10px;
margin: 20px auto 0; }
.itemTitle{
font-size: 16px;
margin: 0px 10px;
color: @textDark;
} }
.figure{ .figure{
@ -217,11 +228,19 @@ body{
} }
code{ code{
width: 530px; width: 495px;
} }
.readmore{ hr{
/*text-align: center;*/ border: none;
border-top: 1px solid @textLight;
width: 80%;
margin: 0 auto;
padding: 15px 0;
}
.readmoreBtn{
margin-left: 10px;
padding-bottom: 20px; padding-bottom: 20px;
} }
} }
@ -232,20 +251,18 @@ body{
} }
.learnMore{ .learnMore{
width: 100%;
min-width: @wideContent;
height: 300px;
background: @dark; background: @dark;
text-align: center; text-align: center;
position: relative; position: relative;
padding: 120px 0;
h4.subtitle{
padding: 0;
margin-bottom: 30px;
}
.btnWrapper{ .btnWrapper{
width: 100%;
text-align: center; text-align: center;
height: 60px;
margin-top: -30px;
position: absolute;
top:50%;
} }
} }