mirror of
https://github.com/librenms/librenms.git
synced 2024-09-29 22:36:40 +00:00
705 lines
29 KiB
HTML
705 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if lt IE 7]> <html class="no-js ie6 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
|
||
<!--[if IE 7]> <html class="no-js ie7 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
|
||
<!--[if IE 8]> <html class="no-js ie8 ie9-and-less ie8-and-less" lang="en"> <![endif]-->
|
||
<!--[if IE 9]> <html class="no-js ie9 ie9-and-less" lang="en"> <![endif]-->
|
||
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||
<title>PACE — Automatic page load progress bars</title>
|
||
<meta name="description" content="Pace is a Javascript and CSS library to automatically add beautiful progress and activity indicators for page loads and ajax navigation. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
|
||
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
|
||
<script type="text/javascript" src="//use.typekit.net/jbn8qxr.js"></script>
|
||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||
<script src="/pace/docs/lib/color.js"></script>
|
||
<script src="/pace/docs/lib/themes.js"></script>
|
||
<script src="/pace/pace.js"></script>
|
||
<link href="/pace/docs/resources/flash-white.css" rel="stylesheet" />
|
||
</head>
|
||
<body>
|
||
<style id="app-colors">
|
||
.section.colored, a.download-src-link, .button {
|
||
background: #29d;
|
||
}
|
||
|
||
a, a:hover, a:active, .header .title .title2:before {
|
||
color: #29d;
|
||
}
|
||
</style>
|
||
<style>
|
||
html, body {
|
||
margin: 0;
|
||
height: 100%;
|
||
color: #000;
|
||
}
|
||
|
||
a, a:hover, a:active {
|
||
text-decoration: none
|
||
}
|
||
|
||
body {
|
||
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
|
||
}
|
||
|
||
@media (min-width: 1700px) { html { font-size: 188%; } }
|
||
@media (max-width: 1700px) { html { font-size: 188%; } }
|
||
@media (max-width: 1680px) { html { font-size: 186%; } }
|
||
@media (max-width: 1660px) { html { font-size: 184%; } }
|
||
@media (max-width: 1640px) { html { font-size: 182%; } }
|
||
@media (max-width: 1620px) { html { font-size: 180%; } }
|
||
@media (max-width: 1600px) { html { font-size: 178%; } }
|
||
@media (max-width: 1580px) { html { font-size: 176%; } }
|
||
@media (max-width: 1560px) { html { font-size: 174%; } }
|
||
@media (max-width: 1540px) { html { font-size: 172%; } }
|
||
@media (max-width: 1520px) { html { font-size: 170%; } }
|
||
@media (max-width: 1500px) { html { font-size: 168%; } }
|
||
@media (max-width: 1480px) { html { font-size: 166%; } }
|
||
@media (max-width: 1460px) { html { font-size: 164%; } }
|
||
@media (max-width: 1440px) { html { font-size: 162%; } }
|
||
@media (max-width: 1420px) { html { font-size: 160%; } }
|
||
@media (max-width: 1400px) { html { font-size: 158%; } }
|
||
@media (max-width: 1380px) { html { font-size: 156%; } }
|
||
@media (max-width: 1360px) { html { font-size: 154%; } }
|
||
@media (max-width: 1340px) { html { font-size: 152%; } }
|
||
@media (max-width: 1320px) { html { font-size: 150%; } }
|
||
@media (max-width: 1300px) { html { font-size: 148%; } }
|
||
@media (max-width: 1280px) { html { font-size: 146%; } }
|
||
@media (max-width: 1260px) { html { font-size: 144%; } }
|
||
@media (max-width: 1240px) { html { font-size: 142%; } }
|
||
@media (max-width: 1220px) { html { font-size: 140%; } }
|
||
@media (max-width: 1200px) { html { font-size: 138%; } }
|
||
@media (max-width: 1180px) { html { font-size: 136%; } }
|
||
@media (max-width: 1160px) { html { font-size: 134%; } }
|
||
@media (max-width: 1140px) { html { font-size: 132%; } }
|
||
@media (max-width: 1120px) { html { font-size: 130%; } }
|
||
@media (max-width: 1100px) { html { font-size: 128%; } }
|
||
@media (max-width: 1080px) { html { font-size: 126%; } }
|
||
@media (max-width: 1060px) { html { font-size: 124%; } }
|
||
@media (max-width: 1040px) { html { font-size: 122%; } }
|
||
@media (max-width: 1020px) { html { font-size: 120%; } }
|
||
@media (max-width: 1000px) { html { font-size: 118%; } }
|
||
@media (max-width: 980px) { html { font-size: 116%; } }
|
||
@media (max-width: 960px) { html { font-size: 114%; } }
|
||
@media (max-width: 940px) { html { font-size: 112%; } }
|
||
@media (max-width: 920px) { html { font-size: 110%; } }
|
||
@media (max-width: 900px) { html { font-size: 108%; } }
|
||
@media (max-width: 880px) { html { font-size: 106%; } }
|
||
@media (max-width: 860px) { html { font-size: 104%; } }
|
||
@media (max-width: 840px) { html { font-size: 102%; } }
|
||
@media (max-width: 820px) { html { font-size: 100%; } }
|
||
@media (max-width: 800px) { html { font-size: 98%; } }
|
||
@media (max-width: 780px) { html { font-size: 96%; } }
|
||
@media (max-width: 760px) { html { font-size: 94%; } }
|
||
@media (max-width: 740px) { html { font-size: 92%; } }
|
||
@media (max-width: 720px) { html { font-size: 90%; } }
|
||
@media (max-width: 700px) { html { font-size: 88%; } }
|
||
@media (max-width: 680px) { html { font-size: 86%; } }
|
||
@media (max-width: 660px) { html { font-size: 84%; } }
|
||
@media (max-width: 640px) { html { font-size: 82%; } }
|
||
@media (max-width: 620px) { html { font-size: 80%; } }
|
||
@media (max-width: 600px) { html { font-size: 78%; } }
|
||
@media (max-width: 580px) { html { font-size: 76%; } }
|
||
@media (max-width: 560px) { html { font-size: 74%; } }
|
||
@media (max-width: 540px) { html { font-size: 72%; } }
|
||
@media (max-width: 520px) { html { font-size: 70%; } }
|
||
@media (max-width: 500px) { html { font-size: 68%; } }
|
||
@media (max-width: 480px) { html { font-size: 66%; } }
|
||
@media (max-width: 460px) { html { font-size: 64%; } }
|
||
@media (max-width: 440px) { html { font-size: 62%; } }
|
||
@media (max-width: 420px) { html { font-size: 60%; } }
|
||
@media (max-width: 400px) { html { font-size: 58%; } }
|
||
@media (max-width: 380px) { html { font-size: 56%; } }
|
||
@media (max-width: 360px) { html { font-size: 54%; } }
|
||
@media (max-width: 340px) { html { font-size: 52%; } }
|
||
@media (max-width: 320px) { html { font-size: 50%; } }
|
||
|
||
.header {
|
||
color: #000;
|
||
-webkit-transition: opacity 1s;
|
||
-moz-transition: opacity 1s;
|
||
-o-transition: opacity 1s;
|
||
transition: opacity 1s;
|
||
text-align: center;
|
||
margin: auto;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
position: absolute;
|
||
width: 29rem;
|
||
max-width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
.header h1 {
|
||
font-size: 10rem;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
}
|
||
.header h2 {
|
||
font-size: 5rem;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: .1em;
|
||
}
|
||
.header .subtitle {
|
||
position: absolute;
|
||
margin: auto;
|
||
top: 0rem;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 1rem;
|
||
padding-top: 9rem;
|
||
height: 4rem;
|
||
text-align: center;
|
||
}
|
||
.header .subtitle h3 {
|
||
margin: 0;
|
||
font-size: 1.8rem;
|
||
}
|
||
.header .title h1 {
|
||
position: absolute;
|
||
margin: auto;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 3rem;
|
||
height: 1.4em;
|
||
text-align: center;
|
||
}
|
||
.header .title .title1 {
|
||
color: #eee;
|
||
color: rgba(0, 0, 0, .1);
|
||
}
|
||
.header .title span {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
.header .title .title2:before {
|
||
position: absolute;
|
||
top: 16.5%;
|
||
bottom: 34%;
|
||
left: 2%;
|
||
right: 2%;
|
||
content: "Progress Automatically. Certain to Entertain.";
|
||
font-size: 1rem;
|
||
line-height: 1.3em;
|
||
padding: 1rem 15rem 1rem 1rem;
|
||
background: #fff;
|
||
opacity: 0;
|
||
text-align: left;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
-webkit-transform: translateY(-15px);
|
||
-webkit-transition: all .3s;
|
||
-moz-transition: all .3s;
|
||
transition: all .3s;
|
||
z-index: 10;
|
||
}
|
||
.header .title .title2:hover:before {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0px);
|
||
}
|
||
.header .title .char1 { left: .5%; width: 22%; }
|
||
.header .title .char2 { left: 25%; width: 22%; }
|
||
.header .title .char3 { left: 51%; width: 22%; }
|
||
.header .title .char4 { left: 79.5%; width: 22%; }
|
||
|
||
.section {
|
||
position: relative;
|
||
height: 100%;
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.section.colored {
|
||
color: #fff;
|
||
}
|
||
|
||
.section.colored .header .title .title2 {
|
||
color: #fff;
|
||
}
|
||
|
||
.section.colored .header .subtitle {
|
||
color: #fff;
|
||
}
|
||
|
||
.header .title .title2 span {
|
||
width: 0px;
|
||
-webkit-transition: width 2s linear;
|
||
-moz-transition: width 2s linear;
|
||
-ms-transition: width 2s linear;
|
||
-o-transition: width 2s linear;
|
||
transition: width 2s linear;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.page-loaded .header .title .title2 .char1 { width: 21%; }
|
||
.page-loaded .header .title .title2 .char2 { width: 24%; }
|
||
.page-loaded .header .title .title2 .char3 { width: 24%; }
|
||
.page-loaded .header .title .title2 .char4 { width: 21%; }
|
||
|
||
|
||
.up-arrow, .down-arrow {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.down-arrow {
|
||
position: absolute;
|
||
left: 0;
|
||
-webkit-transform: rotate(180deg);
|
||
-moz-transform: rotate(180deg);
|
||
-ms-transform: rotate(180deg);
|
||
-o-transform: rotate(180deg);
|
||
transform: rotate(180deg);
|
||
bottom: 30px;
|
||
}
|
||
|
||
.section.colored .down-arrow {
|
||
color: rgba(255, 255, 255, .5);
|
||
}
|
||
|
||
|
||
h2 {
|
||
text-align: center;
|
||
}
|
||
.themes {
|
||
overflow: hidden;
|
||
text-align: center;
|
||
}
|
||
.theme {
|
||
width: 46%;
|
||
}
|
||
.theme.even {
|
||
text-align: center;
|
||
float: left;
|
||
clear: both;
|
||
}
|
||
.theme.odd {
|
||
text-align: center;
|
||
float: right;
|
||
}
|
||
.browser {
|
||
background: #e0e0e0;
|
||
border: 4px solid #e0e0e0;
|
||
width: 100%;
|
||
height: 7rem;
|
||
padding-top: 20px;
|
||
margin: 0 0 10px;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
.browser iframe {
|
||
border: 0;
|
||
background: #fff;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
input[type="color"] {
|
||
width: 15rem;
|
||
height: 2.3rem;
|
||
font-size: 1rem;
|
||
position: relative;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
}
|
||
input[type="color"]::before {
|
||
content: " ";
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 3px;
|
||
right: 3px;
|
||
height: 100%;
|
||
border: 6px solid #fff;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
input[type="color"]::after {
|
||
content: "Choose a color";
|
||
display: block;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: -2px;
|
||
right: -2px;
|
||
height: 100%;
|
||
font-size: .7rem;
|
||
line-height: 2rem;
|
||
color: #fcfcfc;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
border: 6px solid #fff;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
input[type="color"]:active::after {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.themes h3 {
|
||
margin-top: 1.5em;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.themes h3 + p {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.page {
|
||
text-align: center;
|
||
max-width: 28rem;
|
||
padding: 0 10px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.themes a, .themes a:hover, .themes a:active {
|
||
text-decoration: none;
|
||
font-size: .7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.themes a.author, .themes a:hover.author {
|
||
margin: -1em 0;
|
||
display: block;
|
||
font-size: .5rem;
|
||
color: #888;
|
||
}
|
||
|
||
.themes a:hover.author {
|
||
color: #444;
|
||
}
|
||
|
||
.themes a.author:before {
|
||
content: "by: ";
|
||
color: #ccc;
|
||
}
|
||
|
||
a.button {
|
||
padding: 0.5rem 1rem;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .1em;
|
||
text-decoration: none;
|
||
}
|
||
.themes-pitch {
|
||
padding: 15px;
|
||
}
|
||
.block {
|
||
padding: 10px 0;
|
||
}
|
||
.color-label {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<div class="section colored">
|
||
<div class="header">
|
||
<div class="title">
|
||
<h1 class="title1"><span class="char1">p</span><span class="char2">a</span><span class="char3">c</span><span class="char4">e</span></h1>
|
||
<h1 class="title2"><span class="char1">p</span><span class="char2">a</span><span class="char3">c</span><span class="char4">e</span></h1>
|
||
</div>
|
||
<div class="subtitle">
|
||
<h3>Automatic page load progress bar</h3>
|
||
</div>
|
||
</div>
|
||
<div class="down-arrow">⇪</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="page">
|
||
<h2>What is Pace?</h2>
|
||
<p style="text-align: left">Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.</p>
|
||
<p style="text-align: left">No need to hook into any of your code, progress is detected automatically.</p>
|
||
<br/>
|
||
<h2>Install</h2>
|
||
<p>The easiest way to add Pace to your site is with <a href="http://eager.io" style="color: #bf0c78">Eager</a>.
|
||
<p>Click Install to see a live preview of Pace on your website.</p>
|
||
<iframe style="height: 48px; width: 180px" src="//install.eager.io?appId=kYKTiQjoVjQk" allowtransparency="true" scroll="no" frameBorder="0"></iframe>
|
||
<br/>
|
||
<br/>
|
||
<h2>Download</h2>
|
||
<p>If you’re a developer, download Pace directly here:</p>
|
||
<p><a class="button" href="https://raw.github.com/HubSpot/pace/v1.0.0/pace.min.js">Pace.js</a></p>
|
||
<br/>
|
||
<h2>Themes</h2>
|
||
<label class="color-label" for="color-select">Enter a color:</label>
|
||
<input type="color" value="#2299dd" id="color-select"></input>
|
||
<div class="themes"></div>
|
||
<p class="block">Submit a theme! <a href="https://github.com/HubSpot/pace">Fork us on GitHub</a></p>
|
||
<p class="block"><a class="button" href="http://github.hubspot.com/pace/">Documentation</a></p>
|
||
<br/>
|
||
<p style="font-size: 0.6rem"><a href="http://dev.hubspot.com">HubSpot</a></p>
|
||
<br/>
|
||
<br/>
|
||
<script>
|
||
$(function(){
|
||
if (!Modernizr.inputtypes.color)
|
||
$('.color-label').show();
|
||
|
||
var themes = [{
|
||
name: 'minimal',
|
||
title: 'Minimal',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'flash',
|
||
title: 'Flash',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'barber-shop',
|
||
title: 'Barber Shop',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'mac-osx',
|
||
title: 'Mac OSX',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'fill-left',
|
||
title: 'Fill Left',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'flat-top',
|
||
title: 'Flat Top',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'big-counter',
|
||
title: 'Big Counter',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'corner-indicator',
|
||
title: 'Corner Indicator',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'bounce',
|
||
title: 'Bounce',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'loading-bar',
|
||
title: 'Loading Bar',
|
||
author: 'gavJackson'
|
||
}, {
|
||
name: 'center-circle',
|
||
title: 'Center Circle',
|
||
author: 'adamschwartz'
|
||
}, {
|
||
name: 'center-atom',
|
||
title: 'Center Atom',
|
||
author: 'kennyglenn'
|
||
}, {
|
||
name: 'center-radar',
|
||
title: 'Center Radar',
|
||
author: 'kennyglenn'
|
||
}, {
|
||
name: 'center-simple',
|
||
title: 'Center Simple',
|
||
author: 'dineshgithub'
|
||
}];
|
||
|
||
var init = function() {
|
||
$.each(themes, function(i, theme){
|
||
$('.themes').append('<div class="theme ' + (i % 2 === 0 ? 'even' : 'odd') + '">'+
|
||
'<h3>' + theme.title + '</h3>' +
|
||
(theme.author ? '<br/><a class="author" href="https://github.com/' + theme.author + '" target="_blank" rel="nofollow">@' + theme.author + '</a></h4>' : '') +
|
||
'<p><a href="#" class="download-link" data-theme="' + theme.name + '">download</a></p>'+
|
||
'<div class="browser"><iframe data-theme="' + theme.name + '"></iframe></div>' +
|
||
'</div>');
|
||
});
|
||
|
||
var $color = $('input[type="color"]');
|
||
|
||
var cssCache = {};
|
||
var initFrame = function(frame, color){
|
||
if ($color.val() != '#2299dd')
|
||
color = $color.val();
|
||
|
||
var $styleEl = $('<style>')
|
||
$(frame).contents().find('body').append($styleEl);
|
||
|
||
var context = {};
|
||
if (color)
|
||
context.color = color;
|
||
|
||
var themeName = $(frame).data('theme')
|
||
loadTheme(themeName, function(theme){
|
||
body = compileTheme(theme, context);
|
||
|
||
cssCache[themeName] = body;
|
||
|
||
$styleEl.html(body);
|
||
});
|
||
|
||
$(frame).contents().find('.pace').addClass('pace-active');
|
||
};
|
||
|
||
var updateColor = function(color){
|
||
$('.browser iframe').each(function(){
|
||
initFrame(this, color);
|
||
});
|
||
};
|
||
|
||
var downloadTheme = function(theme){
|
||
location.href = 'data:text/css,' + encodeURIComponent(cssCache[theme]);
|
||
};
|
||
|
||
$('.browser iframe').each(function(){
|
||
var _this = this;
|
||
|
||
doc = (this.contentWindow || this.documentWindow).document;
|
||
doc.open();
|
||
doc.write('' +
|
||
'<div class="pace">' +
|
||
'<div class="pace-progress" data-progress="50" data-progress-text="50%" style="-webkit-transform: translate3d(50%, 0px, 0px); -ms-transform: translate3d(50%, 0px, 0px); transform: translate3d(50%, 0px, 0px);">' +
|
||
'<div class="pace-progress-inner"></div>' +
|
||
'</div>' +
|
||
'<div class="pace-activity"></div>' +
|
||
'</div>' +
|
||
'');
|
||
doc.close();
|
||
|
||
// For some strange reason, the Color library we depend on defines itself
|
||
// asyncronously
|
||
setTimeout(function(){
|
||
initFrame(_this);
|
||
}, 0);
|
||
});
|
||
|
||
$color.on('change keyup', function(){
|
||
var color = $(this).val();
|
||
updateColor(color);
|
||
|
||
var css = '.section.colored, a.button { background: ' + color + '; } a, a:hover, a:active, .header .title .title2:before { color: ' + color + '; }';
|
||
if ($('html').hasClass('ie8-and-less')) {
|
||
$('#app-colors').get(0).styleSheet.cssText = css
|
||
} else {
|
||
$('#app-colors').html(css);
|
||
}
|
||
});
|
||
|
||
$('a.download-link').click(function(e){
|
||
e.preventDefault();
|
||
|
||
var theme = $(this).data('theme');
|
||
|
||
downloadTheme(theme);
|
||
});
|
||
};
|
||
|
||
var initTimeout = setTimeout(function(){
|
||
$(window).unbind('scroll', scrollOnce);
|
||
init();
|
||
}, 3000);
|
||
|
||
var scrollOnce = function() {
|
||
$(window).unbind('scroll', scrollOnce);
|
||
clearTimeout(initTimeout);
|
||
init();
|
||
};
|
||
|
||
$(window).bind('scroll', scrollOnce);
|
||
});
|
||
</script>
|
||
</div>
|
||
</div>
|
||
|
||
<script>setTimeout(function(){ document.body.className = 'page-loaded' }, 0);</script>
|
||
|
||
<!-- Share -->
|
||
|
||
<style>
|
||
#retweet_button {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 30px;
|
||
width: 100px;
|
||
-webkit-filter: grayscale(1) contrast(1.3);
|
||
z-index: 3;
|
||
}
|
||
#retweet_button:hover {
|
||
-webkit-filter: none;
|
||
}
|
||
#github_stars {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 130px;
|
||
width: 100px;
|
||
-webkit-filter: grayscale(1) contrast(1.3);
|
||
z-index: 3;
|
||
}
|
||
#github_stars:hover {
|
||
-webkit-filter: none;
|
||
}
|
||
.hn-share-button-wrapper {
|
||
position: fixed;
|
||
bottom: 29px;
|
||
left: 227px;
|
||
-webkit-filter: grayscale(1) contrast(1.3);
|
||
z-index: 3;
|
||
}
|
||
.hn-share-button-wrapper:hover {
|
||
-webkit-filter: none;
|
||
}
|
||
</style>
|
||
<div id="retweet_button">
|
||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/pace/docs/welcome" data-text="pace.js - Add an automatic page load progress bar to your site" data-count="horizontal" data-via="HubSpotDev">Tweet</a>
|
||
<script>
|
||
if (Math.random() >= 0.5)
|
||
var recommends = ['hubspotdev', 'zackbloom', 'adamfschwartz'];
|
||
else
|
||
var recommends = ['hubspotdev', 'adamfschwartz', 'zackbloom'];
|
||
|
||
var $button = $('.twitter-share-button');
|
||
if ($button.length)
|
||
$button.data('related', recommends.join(','));
|
||
</script>
|
||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||
</div>
|
||
<div id="github_stars">
|
||
<iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&repo=pace&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="200" height="20"></iframe>
|
||
</div>
|
||
|
||
<!-- Start of Async HubSpot Analytics Code -->
|
||
<script type="text/javascript">
|
||
(function(d,s,i,r) {
|
||
if (d.getElementById(i)){return;}
|
||
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
|
||
n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
|
||
e.parentNode.insertBefore(n, e);
|
||
})(document,"script","hs-analytics",300000);
|
||
</script>
|
||
<!-- End of Async HubSpot Analytics Code -->
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-45159009-1', 'hubspot.com');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
<!-- Force 3d acceleration always and forever :) -->
|
||
<div style="-webkit-transform: translateZ(0)"></div>
|
||
</body>
|
||
</html>
|