mirror of https://github.com/vitalif/phantomjs
Update content, optimize loading
Add favicon Update content Add links Add :hover states Add credits for icons Minify CSS http://code.google.com/p/phantomjs/issues/detail?id=3551.5
Maurice Svay
Ariya Hidayat
parent
e734c3180f
commit
28071ebcae
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 8.8 KiB |
|
|
@ -10,9 +10,7 @@
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
|
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||||
<link rel="stylesheet" href="reset.css">
|
<link rel="stylesheet" href="screen.min.css">
|
||||||
<link rel="stylesheet" href="960_12_col.css">
|
|
||||||
<link rel="stylesheet" href="screen.css">
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _gaq = _gaq || [];
|
var _gaq = _gaq || [];
|
||||||
_gaq.push(['_setAccount', 'UA-21665893-1']);
|
_gaq.push(['_setAccount', 'UA-21665893-1']);
|
||||||
|
|
@ -28,7 +26,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="intro">
|
<div id="intro">
|
||||||
<div id="header" class="container_12">
|
<div id="header" class="container_12">
|
||||||
<a href="#" class="grid_4 alpha"><img src="images/phantomjs-logo.png" alt="PhantomJS" id="logo" width="240" height="80"></a>
|
<a href="http://www.phantomjs.org/" class="grid_4 alpha"><img src="images/phantomjs-logo.png" alt="PhantomJS" id="logo" width="240" height="80"></a>
|
||||||
<ul id="nav" class="grid_8 omega">
|
<ul id="nav" class="grid_8 omega">
|
||||||
<li><a href="http://code.google.com/p/phantomjs/wiki/SourceCode?tm=4">Source Code</a></li>
|
<li><a href="http://code.google.com/p/phantomjs/wiki/SourceCode?tm=4">Source Code</a></li>
|
||||||
<li><a href="http://code.google.com/p/phantomjs/wiki/PhantomJS?tm=6">Documentation</a></li>
|
<li><a href="http://code.google.com/p/phantomjs/wiki/PhantomJS?tm=6">Documentation</a></li>
|
||||||
|
|
@ -48,7 +46,7 @@
|
||||||
PhantomJS is a headless WebKit with JavaScript API.
|
PhantomJS is a headless WebKit with JavaScript API.
|
||||||
It has <strong>fast</strong> and <strong>native</strong> support for various web standards:
|
It has <strong>fast</strong> and <strong>native</strong> support for various web standards:
|
||||||
DOM handling, CSS selector, JSON, Canvas, and SVG.<br>
|
DOM handling, CSS selector, JSON, Canvas, and SVG.<br>
|
||||||
PhantomJS is created by <a href="">Ariya Hidayat</a>.
|
PhantomJS is created by <a href="http://twitter.com/AriyaHidayat">Ariya Hidayat</a>.
|
||||||
</p>
|
</p>
|
||||||
<p class="action">
|
<p class="action">
|
||||||
<a href="http://code.google.com/p/phantomjs/downloads/list" id="download">Download <span class="version">v1.4</span></a>
|
<a href="http://code.google.com/p/phantomjs/downloads/list" id="download">Download <span class="version">v1.4</span></a>
|
||||||
|
|
@ -65,8 +63,7 @@ var <span class="object">url</span> = <span class="literal">"http://www.phantomj
|
||||||
<span class="object">page</span>.<span class="function">open</span>(url, <span class="function">function</span> (status) {
|
<span class="object">page</span>.<span class="function">open</span>(url, <span class="function">function</span> (status) {
|
||||||
<span class="comment">//Page is loaded!</span>
|
<span class="comment">//Page is loaded!</span>
|
||||||
<span class="object">phantom</span>.<span class="function">exit</span>();
|
<span class="object">phantom</span>.<span class="function">exit</span>();
|
||||||
});
|
});</pre>
|
||||||
</pre>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -92,7 +89,9 @@ var <span class="object">url</span> = <span class="literal">"http://www.phantomj
|
||||||
<h3>Headless Website Testing</h3>
|
<h3>Headless Website Testing</h3>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
PhantomJS works with testing frameworks such as Jasmine, QUnit or CasperJS.
|
Run functional tests with frameworks such as Jasmine, QUnit or CasperJS.
|
||||||
|
<br>
|
||||||
|
<a href="http://code.google.com/p/phantomjs/wiki/TestFrameworkIntegration">Learn more</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,6 +102,8 @@ var <span class="object">url</span> = <span class="literal">"http://www.phantomj
|
||||||
Access and manipulate webpages
|
Access and manipulate webpages
|
||||||
with the standard DOM API, or with
|
with the standard DOM API, or with
|
||||||
usual libraries like jQuery.
|
usual libraries like jQuery.
|
||||||
|
<br>
|
||||||
|
<a href="http://code.google.com/p/phantomjs/wiki/QuickStart#DOM_Manipulation">Learn more</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -110,8 +111,9 @@ var <span class="object">url</span> = <span class="literal">"http://www.phantomj
|
||||||
<h3>SVG Rendering</h3>
|
<h3>SVG Rendering</h3>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
PhantomJS is built with the popular rendering engine Webkit
|
Render SVG graphics with the built-in Webkit rendering engine.
|
||||||
and can render SVG graphics.
|
<br>
|
||||||
|
<a href="http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering">Learn more</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -119,17 +121,24 @@ var <span class="object">url</span> = <span class="literal">"http://www.phantomj
|
||||||
<h3>Network Monitoring</h3>
|
<h3>Network Monitoring</h3>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
PhantomJS can generate HAR files to
|
Monitor page speed loading. Export as standard HAR files.
|
||||||
for page loading speed monitoring.
|
<br>
|
||||||
|
<a href="http://code.google.com/p/phantomjs/wiki/QuickStart#Network_traffic">Learn more</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="feature-end" class="grid_12">
|
||||||
|
<p>
|
||||||
|
PhantomJS can also integrate with webservices (XML, JSONP, YQL) and with test frameworks (Jasmine, QUnit).
|
||||||
|
<a href="http://code.google.com/p/phantomjs/wiki/QuickStart">See more examples</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<div id="footer-content" class="container_12">
|
<div id="footer-content" class="container_12">
|
||||||
<p>
|
<p>
|
||||||
© Copyright 2010-2012 Ariya Hidayat — Design by <a href="http://svay.com/">Maurice Svay</a>
|
© Copyright 2010-2012 <a href="http://twitter.com/AriyaHidayat">Ariya Hidayat</a> — Website design by <a href="http://svay.com/">Maurice Svay</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,10 @@
|
||||||
|
/*
|
||||||
|
Credits
|
||||||
|
Icons from: http://www.smashingmagazine.com/2011/12/29/freebie-free-vector-web-icons-91-icons/
|
||||||
|
*/
|
||||||
|
@import "reset.css";
|
||||||
|
@import "960_12_col.css";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Droid Sans', 'Lucida Grande', sans-serif;
|
font-family: 'Droid Sans', 'Lucida Grande', sans-serif;
|
||||||
line-height: 1.125em;
|
line-height: 1.125em;
|
||||||
|
|
@ -91,6 +98,16 @@ body {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0px 2px 0px 0px #def67e,
|
inset 0px 2px 0px 0px #def67e,
|
||||||
0px 2px 5px rgba(0,0,0,.2);
|
0px 2px 5px rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
#download:hover {
|
||||||
|
background: #97bd38;
|
||||||
|
background: -moz-linear-gradient(top, #bef038 0%, #97bd38 100%);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bef038), color-stop(100%,#97bd38));
|
||||||
|
background: -webkit-linear-gradient(top, #bef038 0%,#97bd38 100%);
|
||||||
|
background: -o-linear-gradient(top, #bef038 0%,#97bd38 100%);
|
||||||
|
background: -ms-linear-gradient(top, #bef038 0%,#97bd38 100%);
|
||||||
|
background: linear-gradient(top, #bef038 0%,#97bd38 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bef038', endColorstr='#97bd38',GradientType=0 );
|
||||||
}
|
}
|
||||||
#download span {
|
#download span {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
@ -127,6 +144,10 @@ body {
|
||||||
color: #43413e;
|
color: #43413e;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
#community a:hover {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
#link-release,
|
#link-release,
|
||||||
#link-ml,
|
#link-ml,
|
||||||
#link-bugs {
|
#link-bugs {
|
||||||
|
|
@ -161,6 +182,10 @@ body {
|
||||||
#description .feature {
|
#description .feature {
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
}
|
}
|
||||||
|
#feature-end {
|
||||||
|
text-align: center;
|
||||||
|
margin: 1.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
background: #2ecbd6;
|
background: #2ecbd6;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}
|
||||||
|
body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_3{width:220px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_6{width:460px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_9{width:700px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_12 .grid_12{width:940px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_3{padding-left:240px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_6{padding-left:480px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_9{padding-left:720px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_3{padding-right:240px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_6{padding-right:480px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_9{padding-right:720px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_3{left:240px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_6{left:480px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_9{left:720px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_3{left:-240px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_6{left:-480px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_9{left:-720px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after,.container_12:before,.container_12:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.container_12:after{clear:both}.clearfix,.container_12{zoom:1}
|
||||||
|
body{font-family:'Droid Sans','Lucida Grande',sans-serif;line-height:1.125em}#intro{background:#43413e;color:#FFF}#header{height:90px}#nav{text-align:right;padding-top:36px}#nav li{display:inline}#nav a{color:#e1e0dc;text-decoration:none;font-weight:bold;text-transform:uppercase;margin:0 1em}#nav a:hover{color:#FFF}#introduction{padding:36px 0}#introduction a{color:#FFF}#introduction h1{color:#FFF;font-weight:bold;font-size:2.25em;line-height:1em;text-shadow:0 -1px 0 #000;margin:0 0 1em 0}#introduction .explanation{margin:1em 0 2em 0;font-size:.875em;color:#e1e0dc}#introduction .action a{display:inline-block;line-height:54px;color:#FFF;font-size:1.5em;margin-right:1em}#download{text-decoration:none;height:54px;padding:0 1em;border:1px solid #004513;border-radius:4px;background:#7da21a;background:-moz-linear-gradient(top,#afe225 0,#7da21a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#afe225),color-stop(100%,#7da21a));background:-webkit-linear-gradient(top,#afe225 0,#7da21a 100%);background:-o-linear-gradient(top,#afe225 0,#7da21a 100%);background:-ms-linear-gradient(top,#afe225 0,#7da21a 100%);background:linear-gradient(top,#afe225 0,#7da21a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#afe225',endColorstr='#7da21a',GradientType=0);font-weight:bold;text-shadow:0 -1px 0 #3d9700;box-shadow:;-webkit-box-shadow:inset 0 2px 0 0 #def67e,0px 2px 5px rgba(0,0,0,.2);-moz-box-shadow:inset 0 2px 0 0 #def67e,0px 2px 5px rgba(0,0,0,.2);box-shadow:inset 0 2px 0 0 #def67e,0px 2px 5px rgba(0,0,0,.2)}#download:hover{background:#97bd38;background:-moz-linear-gradient(top,#bef038 0,#97bd38 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bef038),color-stop(100%,#97bd38));background:-webkit-linear-gradient(top,#bef038 0,#97bd38 100%);background:-o-linear-gradient(top,#bef038 0,#97bd38 100%);background:-ms-linear-gradient(top,#bef038 0,#97bd38 100%);background:linear-gradient(top,#bef038 0,#97bd38 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bef038',endColorstr='#97bd38',GradientType=0)}#download span{font-weight:normal}#intro-example{border-radius:9px;background:#373633}#intro-example pre{margin:18px}#community{background:#e1e0dc;color:#43413e;text-align:center;font-size:1.125em;padding:1.5em 0}#community h2{font-weight:bold;display:inline-block}#community ul{display:inline}#community li{list-style:none;display:inline-block}#community a{margin:0 1.5em;color:#43413e;text-decoration:none}#community a:hover{color:#000;text-decoration:underline}#link-release,#link-ml,#link-bugs{display:inline-block;padding-left:44px;height:36px;line-height:36px;background:url(images/icon-release.png) no-repeat 0 50%}#link-ml{background:url(images/icon-ml.png) no-repeat 0 50%}#link-bugs{background:url(images/icon-bugs.png) no-repeat 0 50%}#description{color:#43413e;padding-bottom:2em}#description h2{color:#2ecbd6;font-size:2.25em;font-weight:bold;margin:1.5em 0;text-align:center}#description h3{font-weight:bold;text-transform:uppercase}#description .feature{font-size:.875em}#feature-end{text-align:center;margin:1.5em 0 0 0}#footer{background:#2ecbd6;color:#FFF;padding:18px 0;font-size:.875em}#footer a{color:#FFF}.solarized{color:#839496}.solarized .object{color:#b58900}.solarized .function{color:#268bd2}.solarized .literal{color:#29a197}.solarized .comment{color:#586e75}
|
||||||
Loading…
Reference in New Issue