reconstruct the site

This commit is contained in:
OttoMao 2015-08-05 15:44:28 +08:00
parent c9956b57c4
commit 864edfe6b1
23 changed files with 760 additions and 1120 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

2
CNAME
View File

@ -1 +1 @@
anyproxy.org anyproxy.io

123
github.css Normal file
View File

@ -0,0 +1,123 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
-webkit-text-size-adjust: none;
}
.hljs-comment,
.diff .hljs-header {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #008080;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-doctag,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.hljs-list .hljs-keyword,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rule .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.hljs-name {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 463 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

189
index.css Normal file
View File

@ -0,0 +1,189 @@
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1438330832_106274.eot');
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');
/* IE9*/
/* iOS 4.1- */
}
i.iconfont {
font-family: "iconfont";
font-style: normal;
}
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper .cornerBtn {
position: absolute;
right: 10px;
top: 10px;
}
.wrapper a,
.wrapper a:hover {
text-decoration: none;
}
.wrapper a {
font-size: 16px;
color: #00aaee;
line-height: 40px;
}
.wrapper h4.subTitle {
font-size: 30px;
margin: 0;
padding: 30px 0;
width: 100%;
text-align: center;
}
.wrapper code {
display: inline-block;
}
.wrapper .actionBtn.actionBtnWhite {
color: #FFF;
border: 1px solid #FFF;
}
.wrapper .actionBtn.actionBtnWhite:hover {
background: #f9f9f9;
color: #326eeb;
}
.wrapper .actionBtn {
color: #326eeb;
border: 1px solid #326eeb;
line-height: 30px;
font-size: 30px;
padding: 20px 45px;
border-radius: 30px;
display: inline-block;
transition: 0.3s;
}
.wrapper .actionBtn:hover {
background: #326eeb;
color: #f9f9f9;
}
.brief {
height: 300px;
width: 100%;
text-align: center;
padding: 100px 0;
position: relative;
}
.brief .slogan {
font-size: 16px;
color: #636373;
}
.feature {
background: #dedede;
width: 100%;
}
.feature .featureContent {
width: 1200px;
margin: 0 auto;
}
.feature .featureContent .item {
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;
}
.feature .featureContent .iconWrapper {
float: left;
display: inline-block;
height: 190px;
line-height: 190px;
width: 70px;
text-align: center;
font-size: 40px;
color: #636373;
}
.feature .featureContent h4 {
color: #636373;
margin: 60px 0 15px 0;
font-size: 20px;
}
.feature .featureContent h5 {
color: #777777;
margin: 0;
font-size: 14px;
}
.quickstart {
background: #f9f9f9;
width: 100%;
}
.quickstart .quickstartContent {
position: relative;
}
.quickstart .screenshot {
position: absolute;
right: 0;
bottom: 0;
}
.quickstart code.simpleBash {
font-family: monospace;
font-weight: bold;
color: #333;
padding: 0;
}
.listSection .listContent {
width: 1200px;
margin: 0 auto;
}
.listSection ul {
margin: 0 200px;
}
.listSection li {
color: #636373;
font-size: 16px;
line-height: 40px;
}
.sample {
background: #f9f9f9;
}
.sample .sampleContent {
width: 1200px;
margin: 0 auto;
}
.sample .item {
width: 1000px;
margin: 20px auto 0;
}
.sample .figure {
vertical-align: top;
}
.sample pre {
margin: 0;
display: inline-block;
vertical-align: top;
}
.sample code {
width: 530px;
}
.sample .readmore {
/*text-align: center;*/
padding-bottom: 20px;
}
.readMore {
background: #f9f9f9;
padding-bottom: 50px;
}
.learnMore {
width: 100%;
height: 300px;
background: #326eeb;
text-align: center;
position: relative;
}
.learnMore .btnWrapper {
width: 100%;
text-align: center;
height: 60px;
margin-top: -30px;
position: absolute;
top: 50%;
}

View File

@ -1,268 +1,221 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <title>AnyProxy</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <link rel="stylesheet" type="text/css" href="./index.css">
<meta name="description" content="Anyproxy : A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Anyproxy</title>
</head> </head>
<body> <body>
<!-- HEADER --> <div class="wrapper">
<div id="header_wrap" class="outer"> <a class="cornerBtn" href="https://github.com/alibaba/anyproxy" target="_blank">View on Github</a><br>
<header class="inner">
<a id="forkme_banner" href="https://github.com/alibaba/anyproxy">View on GitHub</a>
<h1 id="project_title">Anyproxy</h1> <div class="brief">
<h2 id="project_tagline">A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.</h2> <div class="logo">
<img src="http://gtms04.alicdn.com/tps/i4/TB1XfxDHpXXXXXpapXX20ySQVXX-512-512.png" width="250" height="250" alt="anyproxy logo" />
<section id="downloads"> </div>
<a class="zip_download_link" href="https://github.com/alibaba/anyproxy/zipball/master">Download this project as a .zip file</a> <h2 class="slogan">AnyProxy是一个开放式的HTTP/HTTPS代理你可以灵活控制各种网络数据</h2>
<a class="tar_download_link" href="https://github.com/alibaba/anyproxy/tarball/master">Download this project as a tar.gz file</a> <div class="action">
</section> <iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>&nbsp;&nbsp;&nbsp;
</header> <iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
</div> </div>
<!-- MAIN CONTENT --> <div class="feature">
<div id="main_content_wrap" class="outer"> <div class="featureContent">
<section id="main_content" class="inner"> <div class="item">
<h1> <span class="iconWrapper">
<a id="anyproxy" class="anchor" href="#anyproxy" aria-hidden="true"><span class="octicon octicon-link"></span></a>anyproxy</h1> <i class="iconfont">&#xe603;</i>
</span>
<p>A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.</p> <h4>基于Node.js</h4>
<h5>全程JavaScript学习无压力</h5>
<h2> </div>
<a id="feature" class="anchor" href="#feature" aria-hidden="true"><span class="octicon octicon-link"></span></a>Feature</h2> <div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe601;</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">如何配置&gt;&gt;</a></h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe600;</i>
</span>
<h4>Web界面</h4>
<h5>多终端共享,可视化观察每个请求</h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe604;</i>
</span>
<h4>规则逻辑Rule</h4>
<h5>随心所欲编写处理规则,定制我的专属调试工具</h5>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="quickstart listSection">
<div class="quickstartContent listContent">
<h4 class="subtitle">安装</h4>
<ul> <ul>
<li>work as http or https proxy</li> <li>安装 <a href="http://nodejs.org/" target="_blank">Node.js</a> &gt;= v0.12</li>
<li>fully configurable, you can modify a request at any stage by your own javascript code</li> <li><code class="simpleBash">npm install -g anyproxy</code>, 可能需要<code class="simpleBash">sudo</code></li>
<li>when working as https proxy, it can generate and intercept https requests for any domain without complaint by browser (after you trust its root CA)</li> <li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">More&gt;&gt;</a></li>
<li>provide a web interface</li>
</ul> </ul>
<h4 class="subtitle">使用</h4>
<p><img src="http://gtms03.alicdn.com/tps/i3/TB1ddyqGXXXXXbXXpXXihxC1pXX-1000-549.jpg_640x640q90.jpg" alt="screenshot"></p>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
<h3>
<a id="step-1---install" class="anchor" href="#step-1---install" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 1 - install</h3>
<ul> <ul>
<li>install <a href="http://nodejs.org/">NodeJS</a> <li>运行&nbsp;&nbsp;<code class="simpleBash">anyproxy</code></li>
</li> <li>把浏览器http代理指向 127.0.0.1:8001</li>
<li> <li>访问界面http://127.0.0.1:8002 </li>
<code>npm install -g anyproxy</code> , may require <code>sudo</code> <li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">更多用法&gt;&gt;</a></li>
</li>
</ul> </ul>
<a href="https://github.com/alibaba/anyproxy#step-4---launch-web-interface" target="_blank"><img class="screenshot" src="http://gtms01.alicdn.com/tps/i1/TB1IdgqGXXXXXa9apXXLExM2pXX-854-480.gif" width="350"/></a>
</div>
</div>
<h3> <div class="sample">
<a id="step-2---start-server" class="anchor" href="#step-2---start-server" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 2 - start server</h3>
<ul> <div class="sampleContent">
<li>start with default settings : <code>anyproxy</code> <h4 class="subtitle">规则文件(rule)样例</h4>
</li> <div class="item">
<li>start with a specific port: <code>anyproxy --port 8001</code> <pre>
</li> <code class="javascript">
</ul> //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'];
<h3> return newOption;
<a id="step-3---launch-web-interface" class="anchor" href="#step-3---launch-web-interface" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 3 - launch web interface</h3> }
};
</code>
</pre>
<span class="figure">
<img src="./sampleA.png" width="360"/>
</span>
</div>
<ul> <div class="item">
<li>visit <a href="http://127.0.0.1:8002">http://127.0.0.1:8002</a> with modern browsers</li> <pre>
</ul> <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){
<h2> if(/html/i.test(res.headers['content-type'])){
<a id="how-to-write-your-own-rule-file" class="anchor" href="#how-to-write-your-own-rule-file" aria-hidden="true"><span class="octicon octicon-link"></span></a>How to write your own rule file</h2> var newDataStr = serverRes.toString();
newDataStr += "hello world!";
callback(newDataStr);
}
}
};
</code>
</pre>
<span class="figure">
<img src="./sampleB.png" width="360"/>
</span>
</div>
<ul> <div class="item">
<li>with rule file, you can modify a request at any stage, no matter it's just before sending or after servers' responding.</li> <pre>
<li>actually ruleFile.js is a module for Nodejs, feel free to invoke your own modules.</li> <code class="javascript">
<li><code>anyproxy --rule /path/to/ruleFile.js</code></li> //assign a specific IP adress for some request
<li>you may learn how it works by our samples: <a href="https://github.com/alipay-ct-wd/anyproxy/tree/master/rule_sample">https://github.com/alipay-ct-wd/anyproxy/tree/master/rule_sample</a> //file : rule_reverse_proxy.js
</li> //run : anyproxy --rule anyproxy --rule rule_reverse_proxy.js
<li> module.exports = {
<p>samples in <a href="https://github.com/alipay-ct-wd/anyproxy/tree/master/rule_sample">rule_sample</a></p> replaceRequestOption : function(req,option){
var newOption = option;
<ul> if(newOption.headers.host == "www.taobao.com"){
<li><p><strong>rule__blank.js</strong>, blank rule file with some comments. You may read this before writing your own rule file.</p></li> newOption.hostname = "192.168.1.3";
<li><p><strong>rule_adjust_response_time.js</strong>, delay all the response for 1500ms</p></li> newOption.port = "80";
<li>
<strong>rule_allow_CORS.js</strong>, add CORS headers to allow cross-domain ajax request</li>
<li>
<strong>rule_intercept_some_https_requests.js</strong>, intercept https requests toward github.com</li>
<li>
<strong>rule_remove_cache_header.js</strong>, remove all cache-related headers from server</li>
<li>
<strong>rule_replace_request_option.js</strong>, replace request parameters before sending to the server</li>
<li>
<strong>rule_replace_response_data.js</strong>, modify response data</li>
<li>
<strong>rule_replace_response_status_code.js</strong>, replace server's status code</li>
<li>
<strong>rule_use_local_data.js</strong>, map some requests to local file</li>
</ul>
</li>
<li><p>rule file scheme is as follows, you may also get it from <a href="https://github.com/alipay-ct-wd/anyproxy/blob/master/rule_sample/rule__blank.js">rule__blank.js</a></p></li>
</ul>
<div class="highlight highlight-javascript"><pre>
<span class="pl-c1">module</span>.exports <span class="pl-k">=</span> {
<span class="pl-c">/*</span>
<span class="pl-c"> these functions will overwrite the default ones, write your own when necessary.</span>
<span class="pl-c"> */</span>
<span class="pl-c">//whether to intercept this request by local logic</span>
<span class="pl-c">//if the return value is true, anyproxy will call dealLocalResponse to get response data and will not send request to remote server anymore</span>
<span class="pl-en">shouldUseLocalResponse</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">reqBody</span>){
<span class="pl-k">return</span> <span class="pl-c1">false</span>;
},
<span class="pl-c">//you may deal the response locally instead of sending it to server</span>
<span class="pl-c">//this function be called when shouldUseLocalResponse returns true</span>
<span class="pl-c">//callback(statusCode,resHeader,responseData)</span>
<span class="pl-c">//e.g. callback(200,{"content-type":"text/html"},"hello world")</span>
<span class="pl-en">dealLocalResponse</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">reqBody</span>,<span class="pl-smi">callback</span>){
callback(statusCode,resHeader,responseData)
},
<span class="pl-c">//replace the request protocol when sending to the real server</span>
<span class="pl-c">//protocol : "http" or "https"</span>
<span class="pl-en">replaceRequestProtocol</span>:<span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">protocol</span>){
<span class="pl-k">var</span> newProtocol <span class="pl-k">=</span> protocol;
<span class="pl-k">return</span> newProtocol;
},
<span class="pl-c">//req is user's request sent to the proxy server</span>
<span class="pl-c">//option is how the proxy server will send request to the real server. i.e. require("http").request(option,function(){...})</span>
<span class="pl-c">//you may return a customized option to replace the original option</span>
<span class="pl-c">//you should not write content-length header in options, since anyproxy will handle it for you</span>
<span class="pl-en">replaceRequestOption</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">option</span>){
<span class="pl-k">var</span> newOption <span class="pl-k">=</span> option;
<span class="pl-k">return</span> newOption;
},
<span class="pl-c">//replace the request body</span>
<span class="pl-en">replaceRequestData</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">data</span>){
<span class="pl-k">return</span> data;
},
<span class="pl-c">//replace the statusCode before it's sent to the user</span>
<span class="pl-en">replaceResponseStatusCode</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>,<span class="pl-smi">statusCode</span>){
<span class="pl-k">var</span> newStatusCode <span class="pl-k">=</span> statusCode;
<span class="pl-k">return</span> newStatusCode;
},
<span class="pl-c">//replace the httpHeader before it's sent to the user</span>
<span class="pl-c">//Here header == res.headers</span>
<span class="pl-en">replaceResponseHeader</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>,<span class="pl-smi">header</span>){
<span class="pl-k">var</span> newHeader <span class="pl-k">=</span> header;
<span class="pl-k">return</span> newHeader;
},
<span class="pl-c">//replace the response from the server before it's sent to the user</span>
<span class="pl-c">//you may return either a Buffer or a string</span>
<span class="pl-c">//serverResData is a Buffer, you may get its content by calling serverResData.toString()</span>
<span class="pl-en">replaceServerResData</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>,<span class="pl-smi">serverResData</span>){
<span class="pl-k">return</span> serverResData;
},
<span class="pl-c">//add a pause before sending response to user</span>
<span class="pl-en">pauseBeforeSendingResponse</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>){
<span class="pl-k">var</span> timeInMS <span class="pl-k">=</span> <span class="pl-c1">1</span>; <span class="pl-c">//delay all requests for 1ms</span>
<span class="pl-k">return</span> timeInMS;
},
<span class="pl-c">//should intercept https request, or it will be forwarded to real server</span>
<span class="pl-en">shouldInterceptHttpsReq</span> :<span class="pl-k">function</span>(<span class="pl-smi">req</span>){
<span class="pl-k">return</span> <span class="pl-c1">false</span>;
} }
return newOption;
}
}; };
</pre></div> </code>
</pre>
<h2> <span class="figure">
<a id="using-https-features" class="anchor" href="#using-https-features" aria-hidden="true"><span class="octicon octicon-link"></span></a>Using https features</h2> <img src="./sampleC.png" width="360"/>
</span>
<h4>
<a id="step-1---install-openssl" class="anchor" href="#step-1---install-openssl" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 1 - install openssl</h4>
<ul>
<li>install <a href="http://wiki.openssl.org/index.php/Compilation_and_Installation">openssl</a> ,if you want to use HTTPS-related features. After that, the command <code>openssl</code> should be exposed to your shell</li>
</ul>
<h4>
<a id="step-2---generate-a-rootca-and-trust-it" class="anchor" href="#step-2---generate-a-rootca-and-trust-it" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 2 - generate a rootCA and trust it</h4>
<ul>
<li>you should do this when it is the first time to start anyproxy</li>
<li>execute <code>anyproxy --root</code> ,follow the instructions on screen</li>
<li>you will see some tip like <em>rootCA generated at : /usr/lib...</em> . <code>cd</code> to that directory, add/trust the rootCA.crt file to your system keychain. In OSX, you may do that by open the *crt file directly</li>
</ul>
<h4>
<a id="step-3---start-a-https-proxy" class="anchor" href="#step-3---start-a-https-proxy" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 3 - start a https proxy</h4>
<ul>
<li><code>anyproxy --type https --host my.domain.com</code></li>
<li>the param <code>host</code> is required with https proxy and it should be kept exactly what it it when you config your browser. Otherwise, you may get some warning about security.</li>
</ul>
<h2>
<a id="others" class="anchor" href="#others" aria-hidden="true"><span class="octicon octicon-link"></span></a>Others</h2>
<h4>
<a id="work-as-a-module" class="anchor" href="#work-as-a-module" aria-hidden="true"><span class="octicon octicon-link"></span></a>work as a module</h4>
<pre><code>npm install anyproxy --save
</code></pre>
<div class="highlight highlight-javascript"><pre><span class="pl-k">var</span> proxy <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">"</span>anyproxy<span class="pl-pds">"</span></span>);
<span class="pl-k">!</span>proxy.isRootCAFileExists() <span class="pl-k">&amp;&amp;</span> proxy.generateRootCA(); <span class="pl-c">//please manually trust this rootCA</span>
<span class="pl-k">new</span> <span class="pl-en">proxy.proxyServer</span>(<span class="pl-s"><span class="pl-pds">"</span>http<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>8001<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>localhost<span class="pl-pds">"</span></span> ,<span class="pl-s"><span class="pl-pds">"</span>path/to/rule/file.js<span class="pl-pds">"</span></span>);
</pre></div>
<h4>
<a id="clear-all-the-temperary-certificates" class="anchor" href="#clear-all-the-temperary-certificates" aria-hidden="true"><span class="octicon octicon-link"></span></a>clear all the temperary certificates</h4>
<p><code>anyproxy --clear</code></p>
<h2>
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Contact</h2>
<ul>
<li>Please feel free to raise any issue about this project, or give us some advice on this doc. :)</li>
</ul>
</section>
</div> </div>
<!-- FOOTER --> <div class="item">
<div id="footer_wrap" class="outer"> <pre>
<footer class="inner"> <code class="javascript">
<p class="copyright">Anyproxy maintained by <a href="https://github.com/alibaba">alibaba</a></p> //replace all the images with local one
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p> //file : rule_use_local_data.js
</footer> //run : anyproxy --rule anyproxy --rule rule_use_local_data.js
var fs = require("fs"),
img = fs.readFileSync("sample.jpg");
module.exports = {
shouldUseLocalResponse : function(req,reqBody){
if(/\.(png|gif|jpg|jpeg)$/.test(req.url)){
req.replaceLocalFile = true;
return true;
}else{
return false;
}
},
dealLocalResponse : function(req,reqBody,callback){
if(req.replaceLocalFile){
callback(200, {"content-type":"image/png"},img );
}
}
};
</code>
</pre>
<span class="figure">
<img src="./sampleD.png" width="360"/>
</span>
</div> </div>
<script type="text/javascript"> <div class="item readmore">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); <a href="https://github.com/alibaba/anyproxy" target="_blank">&gt;&gt;&nbsp;规则文件RuleAPI</a>
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </div>
</script> </div>
<script type="text/javascript"> </div>
try {
var pageTracker = _gat._getTracker("UA-57129650-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<div class="readMore listSection">
<div class="listContent">
<h4 class="subtitle">其他特性</h4>
<ul>
<li>Map LocalLog 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>
</ul>
<h4 class="subtitle">相关阅读</h4>
<ul>
<li><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" target="_blank">代理服务器的新轮子</a>介绍AnyProxy的设计初衷以及它的开放式设计可以解决什么问题。</li>
<li><a href="http://www.infoq.com/cn/presentations/alipay-hybrid-application-quality-assurance-practice" target="_blank">QCon - 《支付宝hybrid应用质量保证实践》</a>涉及到AnyProxy在测试工程中的应用(By 陈晔)</li>
</ul>
</div>
</div>
<div class="learnMore listSection">
<div class="btnWrapper">
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">Read More AnyProxy@Github</a>
</div>
</div>
<div class="footer"></div>
</div>
<link rel="stylesheet" type="text/css" href="./github.css" />
<script src="./lib.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.sample code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
</body> </body>
</html> </html>

0
index.js Normal file
View File

243
index.less Normal file
View File

@ -0,0 +1,243 @@
@main : #00AAEE;
@dark : #326EEB;
@gray : #F9F9F9;
@darkGray : #DEDEDE;
@textDark : #636373;
@textLight: #777;
@wideContent : 1200px;
@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- */
}
i.iconfont{
font-family: "iconfont";
font-style: normal;
}
body{
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper{
.cornerBtn{
position : absolute;
right : 10px;
top : 10px;
}
a,
a:hover{
text-decoration: none;
}
a{
font-size: 16px;
color: @main;
line-height: 40px;
}
h4.subTitle{
font-size: 30px;
margin: 0;
padding: 30px 0;
width: 100%;
text-align: center;
}
code{
display: inline-block;
}
.actionBtn.actionBtnWhite{
color: #FFF;
border: 1px solid #FFF;
}
.actionBtn.actionBtnWhite:hover{
background: @gray;
color: @dark;
}
.actionBtn{
color: @dark;
border: 1px solid @dark;
line-height: 30px;
font-size: 30px;
padding: 20px 45px;
border-radius: 30px;
display: inline-block;
transition:0.3s;
}
.actionBtn:hover{
background: @dark;
color: @gray;
}
}
.brief{
height: 300px;
width: 100%;
text-align: center;
padding: 100px 0;
position: relative;
.slogan{
font-size: 16px;
color: @textDark;
}
}
.feature{
background: @darkGray;
width: 100%;
.featureContent{
width: @wideContent;
margin: 0 auto;
@itemheight : 190px;
.item{
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;
}
.iconWrapper{
float: left;
display: inline-block;
height: @itemheight;
line-height: @itemheight;
width: 70px;
text-align: center;
font-size: 40px;
color: @textDark;
}
h4{
color: @textDark;
margin: 60px 0 15px 0;
font-size: 20px;
}
h5{
color: @textLight;
margin: 0;
font-size: 14px;
}
}
}
.quickstart{
background: @gray;
width: 100%;
.quickstartContent{
position: relative;
}
.screenshot{
position: absolute;
right: 0;
bottom: 0;
}
code.simpleBash{
font-family: monospace;
font-weight: bold;
color: #333;
padding: 0;
}
}
.listSection{
.listContent{
width: @wideContent;
margin: 0 auto;
}
ul{
margin: 0 200px;
}
li{
color: @textDark;
font-size: 16px;
line-height: 40px;
}
}
.sample{
background: @gray;
.sampleContent{
width: @wideContent;
margin: 0 auto;
}
.item{
width: 1000px;
margin: 20px auto 0;
}
.figure{
vertical-align: top;
}
pre{
margin: 0;
display: inline-block;
vertical-align: top;
}
code{
width: 530px;
}
.readmore{
/*text-align: center;*/
padding-bottom: 20px;
}
}
.readMore{
background: @gray;
padding-bottom: 50px;
}
.learnMore{
width: 100%;
height: 300px;
background: @dark;
text-align: center;
position: relative;
.btnWrapper{
width: 100%;
text-align: center;
height: 60px;
margin-top: -30px;
position: absolute;
top:50%;
}
}

View File

@ -1 +0,0 @@
console.log('This would be the main JS file.');

View File

@ -1,20 +0,0 @@
fixScale = function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
};

5
lib.js Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
sampleA.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
sampleB.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
sampleC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
sampleD.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -1,70 +0,0 @@
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f0f3f3; }
.highlight .c { color: #0099FF; font-style: italic } /* Comment */
.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
.highlight .k { color: #006699; font-weight: bold } /* Keyword */
.highlight .o { color: #555555 } /* Operator */
.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #009999 } /* Comment.Preproc */
.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.highlight .go { color: #AAAAAA } /* Generic.Output */
.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #99CC66 } /* Generic.Traceback */
.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #006699 } /* Keyword.Pseudo */
.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #FF6600 } /* Literal.Number */
.highlight .s { color: #CC3300 } /* Literal.String */
.highlight .na { color: #330099 } /* Name.Attribute */
.highlight .nb { color: #336666 } /* Name.Builtin */
.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
.highlight .no { color: #336600 } /* Name.Constant */
.highlight .nd { color: #9999FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #CC00FF } /* Name.Function */
.highlight .nl { color: #9999FF } /* Name.Label */
.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #003333 } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
.highlight .sc { color: #CC3300 } /* Literal.String.Char */
.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
.highlight .sx { color: #CC3300 } /* Literal.String.Other */
.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #003333 } /* Name.Variable.Class */
.highlight .vg { color: #003333 } /* Name.Variable.Global */
.highlight .vi { color: #003333 } /* Name.Variable.Instance */
.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
.type-csharp .highlight .k { color: #0000FF }
.type-csharp .highlight .kt { color: #0000FF }
.type-csharp .highlight .nf { color: #000000; font-weight: normal }
.type-csharp .highlight .nc { color: #2B91AF }
.type-csharp .highlight .nn { color: #000000 }
.type-csharp .highlight .s { color: #A31515 }
.type-csharp .highlight .sc { color: #A31515 }

View File

@ -1,356 +0,0 @@
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
html {
background: #6C7989;
background: #6c7989 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7989), color-stop(100%, #434b55)) fixed;
background: #6c7989 -webkit-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -moz-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -o-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -ms-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 linear-gradient(#6c7989, #434b55) fixed;
}
body {
padding: 50px 0;
margin: 0;
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
font-weight: 300;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy82LzEygrTcTAAAAFRJREFUSIljfPDggZRf5RIGGNjUHsNATz6jXmSL1Kb2GLiAX+USBnrymRgGGDCORgFmoNAXjEbBaBSMRsFoFIxGwWgUjEbBaBSMRsFoFIxGwWgUAABYNujumib3wAAAAABJRU5ErkJggg==') fixed;
}
.wrapper {
width: 640px;
margin: 0 auto;
background: #DEDEDE;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
}
header, section, footer {
display: block;
}
a {
color: #069;
text-decoration: none;
}
p {
margin: 0 0 20px;
padding: 0;
}
strong {
color: #222;
font-weight: 700;
}
header {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #C6EAFA;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ddfbfc), color-stop(100%, #c6eafa));
background: -webkit-linear-gradient(#ddfbfc, #c6eafa);
background: -moz-linear-gradient(#ddfbfc, #c6eafa);
background: -o-linear-gradient(#ddfbfc, #c6eafa);
background: -ms-linear-gradient(#ddfbfc, #c6eafa);
background: linear-gradient(#ddfbfc, #c6eafa);
position: relative;
padding: 15px 20px;
border-bottom: 1px solid #B2D2E1;
}
header h1 {
margin: 0;
padding: 0;
font-size: 24px;
line-height: 1.2;
color: #069;
text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
}
header.without-description h1 {
margin: 10px 0;
}
header p {
margin: 0;
color: #61778B;
width: 300px;
font-size: 13px;
}
header p.view {
display: none;
font-weight: 700;
text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
-webkit-font-smoothing: antialiased;
}
header p.view a {
color: #06c;
}
header p.view small {
font-weight: 400;
}
header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 1;
right: 20px;
top: 20px;
height: 38px;
padding: 1px 0;
background: #5198DF;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77b9fb), color-stop(100%, #3782cd));
background: -webkit-linear-gradient(#77b9fb, #3782cd);
background: -moz-linear-gradient(#77b9fb, #3782cd);
background: -o-linear-gradient(#77b9fb, #3782cd);
background: -ms-linear-gradient(#77b9fb, #3782cd);
background: linear-gradient(#77b9fb, #3782cd);
border-radius: 5px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
-moz-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
width: auto;
}
header ul:before {
content: '';
position: absolute;
z-index: -1;
left: -5px;
top: -4px;
right: -5px;
bottom: -6px;
background: rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
}
header ul li {
width: 79px;
float: left;
border-right: 1px solid #3A7CBE;
height: 38px;
}
header ul li.single {
border: none;
}
header ul li + li {
width: 78px;
border-left: 1px solid #8BBEF3;
}
header ul li + li + li {
border-right: none;
width: 79px;
}
header ul a {
line-height: 1;
font-size: 11px;
color: #fff;
color: rgba(255, 255, 255, 0.8);
display: block;
text-align: center;
font-weight: 400;
padding-top: 6px;
height: 40px;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
}
header ul a strong {
font-size: 14px;
display: block;
color: #fff;
-webkit-font-smoothing: antialiased;
}
section {
padding: 15px 20px;
font-size: 15px;
border-top: 1px solid #fff;
background: -webkit-gradient(linear, 50% 0%, 50% 700, color-stop(0%, #fafafa), color-stop(100%, #dedede));
background: -webkit-linear-gradient(#fafafa, #dedede 700px);
background: -moz-linear-gradient(#fafafa, #dedede 700px);
background: -o-linear-gradient(#fafafa, #dedede 700px);
background: -ms-linear-gradient(#fafafa, #dedede 700px);
background: linear-gradient(#fafafa, #dedede 700px);
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
padding: 0;
margin: 0 0 20px;
line-height: 1.2;
}
p, ul, ol, table, pre, dl {
margin: 0 0 20px;
}
h1, h2, h3 {
line-height: 1.1;
}
h1 {
font-size: 28px;
}
h2 {
color: #393939;
}
h3, h4, h5, h6 {
color: #494949;
}
blockquote {
margin: 0 -20px 20px;
padding: 15px 20px 1px 40px;
font-style: italic;
background: #ccc;
background: rgba(0, 0, 0, 0.06);
color: #222;
}
img {
max-width: 100%;
}
code, pre {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
color: #333;
font-size: 12px;
overflow-x: auto;
}
pre {
padding: 20px;
background: #3A3C42;
color: #f8f8f2;
margin: 0 -20px 20px;
}
pre code {
color: #f8f8f2;
}
li pre {
margin-left: -60px;
padding-left: 60px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 5px 10px;
border-bottom: 1px solid #aaa;
}
dt {
color: #222;
font-weight: 700;
}
th {
color: #222;
}
small {
font-size: 11px;
}
hr {
border: 0;
background: #aaa;
height: 1px;
margin: 0 0 20px;
}
footer {
width: 640px;
margin: 0 auto;
padding: 20px 0 0;
color: #ccc;
overflow: hidden;
}
footer a {
color: #fff;
font-weight: bold;
}
footer p {
float: left;
}
footer p + p {
float: right;
}
@media print, screen and (max-width: 740px) {
body {
padding: 0;
}
.wrapper {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
}
footer {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
padding: 20px;
width: auto;
}
footer p {
float: none;
margin: 0;
}
footer p + p {
float: none;
}
}
@media print, screen and (max-width:580px) {
header ul {
display: none;
}
header p.view {
display: block;
}
header p {
width: 100%;
}
}
@media print {
header p.view a small:before {
content: 'at http://github.com/';
}
}

View File

@ -1,425 +0,0 @@
/*******************************************************************************
Slate Theme for GitHub Pages
by Jason Costello, @jsncostello
*******************************************************************************/
@import url(pygment_trac.css);
/*******************************************************************************
MeyerWeb Reset
*******************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*******************************************************************************
Theme Styles
*******************************************************************************/
body {
box-sizing: border-box;
color:#373737;
background: #212121;
font-size: 16px;
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-weight: 700;
color:#222222;
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
letter-spacing: -1px;
}
h1 {
font-size: 36px;
font-weight: 700;
}
h2 {
padding-bottom: 10px;
font-size: 32px;
background: url('../images/bg_hr.png') repeat-x bottom;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
margin: 10px 0 15px 0;
}
footer p {
color: #f2f2f2;
}
a {
text-decoration: none;
color: #007edf;
text-shadow: none;
transition: color 0.5s ease;
transition: text-shadow 0.5s ease;
-webkit-transition: color 0.5s ease;
-webkit-transition: text-shadow 0.5s ease;
-moz-transition: color 0.5s ease;
-moz-transition: text-shadow 0.5s ease;
-o-transition: color 0.5s ease;
-o-transition: text-shadow 0.5s ease;
-ms-transition: color 0.5s ease;
-ms-transition: text-shadow 0.5s ease;
}
a:hover, a:focus {text-decoration: underline;}
footer a {
color: #F2F2F2;
text-decoration: underline;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
img {
position: relative;
margin: 0 auto;
max-width: 739px;
padding: 5px;
margin: 10px 0 10px 0;
border: 1px solid #ebebeb;
box-shadow: 0 0 5px #ebebeb;
-webkit-box-shadow: 0 0 5px #ebebeb;
-moz-box-shadow: 0 0 5px #ebebeb;
-o-box-shadow: 0 0 5px #ebebeb;
-ms-box-shadow: 0 0 5px #ebebeb;
}
p img {
display: inline;
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
border: none;
}
pre, code {
width: 100%;
color: #222;
background-color: #fff;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 14px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
pre {
width: 100%;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
overflow: auto;
}
code {
padding: 3px;
margin: 0 3px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
pre code {
display: block;
box-shadow: none;
}
blockquote {
color: #666;
margin-bottom: 20px;
padding: 0 0 0 20px;
border-left: 3px solid #bbb;
}
ul, ol, dl {
margin-bottom: 15px
}
ul {
list-style-position: inside;
list-style: disc;
padding-left: 20px;
}
ol {
list-style-position: inside;
list-style: decimal;
padding-left: 20px;
}
dl dt {
font-weight: bold;
}
dl dd {
padding-left: 20px;
font-style: italic;
}
dl p {
padding-left: 20px;
font-style: italic;
}
hr {
height: 1px;
margin-bottom: 5px;
border: none;
background: url('../images/bg_hr.png') repeat-x center;
}
table {
border: 1px solid #373737;
margin-bottom: 20px;
text-align: left;
}
th {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 10px;
background: #373737;
color: #fff;
}
td {
padding: 10px;
border: 1px solid #373737;
}
form {
background: #f2f2f2;
padding: 20px;
}
/*******************************************************************************
Full-Width Styles
*******************************************************************************/
.outer {
width: 100%;
}
.inner {
position: relative;
max-width: 640px;
padding: 20px 10px;
margin: 0 auto;
}
#forkme_banner {
display: block;
position: absolute;
top:0;
right: 10px;
z-index: 10;
padding: 10px 50px 10px 10px;
color: #fff;
background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
font-weight: 700;
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
#header_wrap {
background: #212121;
background: -moz-linear-gradient(top, #373737, #212121);
background: -webkit-linear-gradient(top, #373737, #212121);
background: -ms-linear-gradient(top, #373737, #212121);
background: -o-linear-gradient(top, #373737, #212121);
background: linear-gradient(top, #373737, #212121);
}
#header_wrap .inner {
padding: 50px 10px 30px 10px;
}
#project_title {
margin: 0;
color: #fff;
font-size: 42px;
font-weight: 700;
text-shadow: #111 0px 0px 10px;
}
#project_tagline {
color: #fff;
font-size: 24px;
font-weight: 300;
background: none;
text-shadow: #111 0px 0px 10px;
}
#downloads {
position: absolute;
width: 210px;
z-index: 10;
bottom: -40px;
right: 0;
height: 70px;
background: url('../images/icon_download.png') no-repeat 0% 90%;
}
.zip_download_link {
display: block;
float: right;
width: 90px;
height:70px;
text-indent: -5000px;
overflow: hidden;
background: url(../images/sprite_download.png) no-repeat bottom left;
}
.tar_download_link {
display: block;
float: right;
width: 90px;
height:70px;
text-indent: -5000px;
overflow: hidden;
background: url(../images/sprite_download.png) no-repeat bottom right;
margin-left: 10px;
}
.zip_download_link:hover {
background: url(../images/sprite_download.png) no-repeat top left;
}
.tar_download_link:hover {
background: url(../images/sprite_download.png) no-repeat top right;
}
#main_content_wrap {
background: #f2f2f2;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
}
#main_content {
padding-top: 40px;
}
#footer_wrap {
background: #212121;
}
/*******************************************************************************
Small Device Styles
*******************************************************************************/
@media screen and (max-width: 480px) {
body {
font-size:14px;
}
#downloads {
display: none;
}
.inner {
min-width: 320px;
max-width: 480px;
}
#project_title {
font-size: 32px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
code, pre {
min-width: 320px;
max-width: 480px;
font-size: 11px;
}
}