Raataar/pokedex
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Material und Hintergruende eingebunden

Browse Source
This commit is contained in:
Hilmer, Carsten
2016-08-12 13:40:39 +02:00
parent 7a6a74acf2
commit 30a5df79aa
145 changed files with 14553 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

684
www/lib/waves/docs/index.html Normal file
View File

@@ -0,0 +1,684 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="icon" href="http://fian.my.id/static/favicon.png" />
<meta name="msapplication-tap-highlight" content="no"/>
<title>Waves</title>
<meta name="description" content="Waves - Click effect inspired by Google's Material Design" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./static/prims.css">
<link rel="stylesheet" type="text/css" href="./static/snarl.min.css">
<link rel="stylesheet" type="text/css" href="./static/waves.min.css">
<link rel="stylesheet" type="text/css" href="./static/style.css">
<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-36521756-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="bg-pattern" class="bg-pattern waves-effect waves-block waves-light"></div>
<div id="navigation" class="shadow">
<a href="#examples">Examples</a>
<a href="#start">Docs</a>
<a href="#api">API</a>
<a href="#faq">FAQ</a>
</div>
<div id="landing" class="section hide">
<h1>Waves</h1>
<p>Click effect inspired by Google's Material Design</p>
<p>v0.6.6</p>
<div class="button">
<a href="#examples" class="waves-effect waves-button waves-float">See the examples</a>
<br>
<span>Hint: click button or background</span>
</div>
</div>
<div id="example" class="section page hide">
<h1>Examples</h1>
<div id="box-button" class="box shadow">
<h2>Buttons</h2>
<a class="top-button" title="Show Source" data-code="button">
<i class="fa fa-code"></i>
</a>
<p class="text-center">
<a class="waves-effect waves-button waves-classic">Button A</a>
<button class="waves-effect waves-button">Button B</button>
<input class="waves-effect waves-button" type="submit" value="Button C">
</p>
<p class="text-center">
<a class="waves-effect waves-button waves-float waves-classic" style="background: #01BCFF;color:#fff">Button A</a>
<button class="waves-effect waves-button waves-light waves-float" style="background: #1bb556;color: #fff;">Button B</button>
<input class="waves-effect waves-button waves-float" style="background: #ff4f0f;color:#fff" type="submit" value="Button C">
</p>
</div>
<div id="box-icon" class="box shadow">
<h2>Icons</h2>
<a class="top-button" title="Show Source" data-code="icon">
<i class="fa fa-code"></i>
</a>
<p class="text-center">
<i class="fa fa-bars waves-effect waves-circle waves-classic"></i>
<i class="fa fa-bookmark waves-effect waves-circle waves-classic"></i>
<i class="fa fa-calendar waves-effect waves-circle"></i>
<i class="fa fa-envelope waves-effect waves-circle"></i>
<i class="fa fa-exclamation waves-effect waves-circle"></i>
<i class="fa fa-folder waves-effect waves-circle"></i>
</p>
<p class="text-center">
<i class="fa fa-bars waves-effect waves-circle waves-classic" style="background: #ff6400;color:#fff;"></i>
<i class="fa fa-bookmark waves-effect waves-circle waves-light waves-classic" style="background: #d54f38;color:#fff;"></i>
<i class="fa fa-calendar waves-effect waves-circle" style="background: #eb4d7e;color:#fff;"></i>
<i class="fa fa-envelope waves-effect waves-circle waves-light" style="background: #d138c8;color:#fff;"></i>
<i class="fa fa-exclamation waves-effect waves-circle" style="background: #bd73ff;color:#fff;"></i>
<i class="fa fa-folder waves-effect waves-circle waves-light" style="background: #0074d6;color:#fff;"></i>
</p>
</div>
<div id="box-other" class="box shadow">
<h2>DIVs &amp; Images</h2>
<a class="top-button" title="Show Source" data-code="other">
<i class="fa fa-code"></i>
</a>
<div class="boxes flat-box waves-effect waves-block waves-classic">Flat Box</div>
<div class="boxes float-box waves-effect waves-float waves-block">Float Box</div>
<div class="clear"></div>
<p class="text-center">
<span class="waves-effect">
<img src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
</span>
</p>
<p class="text-center">
Image Source: <a href="https://www.flickr.com/photos/aigle_dore/5238554034/" target="_blank">&copy; Moyan Brenn. Flickr</a>
</p>
</div>
<div id="box-action" class="box shadow">
<h2>Action/Event</h2>
<a class="top-button" title="Show Source" data-code="action">
<i class="fa fa-code"></i>
</a>
<p>Works fully with jQuery and JavaScript click event handlers, like <a href="http://hoxxep.github.io/Snarl" target="_blank">Snarl</a></p>
<p class="text-center"><button id="snarl-demo" class="waves-effect waves-button waves-float" style="background:#04d654;color: #fff;">Click Me!</button></p>
</div>
</div>
<div id="source-code" class="hide">
<div class="bg"></div>
<div class="box shadow">
<a title="Close" class="top-button"><i class="fa fa-times"></i></a>
<div id="code-button" class="hide code">
<h2>Buttons</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<p class="text-center">
<a class="waves-effect waves-button waves-classic">Button A</a>
<button class="waves-effect waves-button">Button B</button>
<input class="waves-effect waves-button" type="submit" value="Button C">
</p>
<p class="text-center">
<a class="waves-effect waves-button waves-float waves-classic" style="background: #01BCFF;color:#fff">Button A</a>
<button class="waves-effect waves-button waves-light waves-float" style="background: #1bb556;color: #fff;">Button B</button>
<input class="waves-effect waves-button waves-float" style="background: #ff4f0f;color:#fff" type="submit" value="Button C">
</p>
{{/code}}
</div>
</div>
<div id="code-icon" class="hide code">
<h2>Icons</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<p class="text-center">
<i class="fa fa-bars waves-effect waves-circle waves-classic"></i>
<i class="fa fa-bookmark waves-effect waves-circle waves-classic"></i>
<i class="fa fa-calendar waves-effect waves-circle"></i>
<i class="fa fa-envelope waves-effect waves-circle"></i>
<i class="fa fa-exclamation waves-effect waves-circle"></i>
<i class="fa fa-folder waves-effect waves-circle"></i>
</p>
<p class="text-center">
<i class="fa fa-bars waves-effect waves-circle waves-classic" style="background: #ff6400;color:#fff;"></i>
<i class="fa fa-bookmark waves-effect waves-circle waves-light waves-classic" style="background: #d54f38;color:#fff;"></i>
<i class="fa fa-calendar waves-effect waves-circle" style="background: #eb4d7e;color:#fff;"></i>
<i class="fa fa-envelope waves-effect waves-circle waves-light" style="background: #d138c8;color:#fff;"></i>
<i class="fa fa-exclamation waves-effect waves-circle" style="background: #bd73ff;color:#fff;"></i>
<i class="fa fa-folder waves-effect waves-circle waves-light" style="background: #0074d6;color:#fff;"></i>
</p>
{{/code}}
</div>
</div>
<div id="code-other" class="hide code">
<h2>DIVs &amp; Images</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<div class="boxes flat-box waves-effect waves-block waves-classic">Flat Box</div>
<div class="boxes float-box waves-effect waves-float waves-block">Float Box</div>
<div class="clear"></div>
<p class="text-center">
<span class="waves-effect">
<img src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
</span>
</p>
{{/code}}
</div>
</div>
<div id="code-action" class="hide code">
<h2>Action/Event</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<p class="text-center">
<button id="snarl-demo" class="waves-effect waves-button waves-float" style="background:#04d654;color: #fff;">Click Me!</button>
</p>
<script type="text/javascript">
Snarl.setDefaultOptions({
timeout: 5000
});
$('#snarl-demo').click(function() {
Snarl.addNotification({
title: 'Snarl Notification',
text: 'You clicked the Waves button!'
});
});
</script>
{{/code}}
</div>
</div>
</div>
</div>
<div id="getting-started" class="content section page hide">
<h1>Getting Started</h1>
<div class="box shadow">
<p>
It's easy to use Waves. Download the latest version of Waves from <a href="https://github.com/publicis-indonesia/Waves/releases">Github repository</a>. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use!
</p>
{{#code class="lang-markup"}}
<!DOCTYPE html>
<html>
<head>
<title>Waves example</title>
<link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />
</head>
<body>
<a href="#" class="waves-effect waves-button">Click Here</a>
<script type="text/javascript" src="/path/to/waves.min.js"></script>
<script type="text/javascript">
Waves.displayEffect();
</script>
</body>
</html>
{{/code}}
<p>
<strong>Advanced:</strong> <br>
Waves also provide LESS, SCSS, and SASS source. So, feel free to used it :)
</p>
<p>
To put Waves effect on your buttons, just add <code class="language-css">.waves-effect</code> and <code class="language-css">.waves-button</code> class to your buttons.
</p>
{{#code class="lang-markup"}}
<button class="waves-effect waves-button">Click Here</button>
<!-- It also support a, input submit and input button tag -->
<a href="#" class="waves-effect waves-button">A Tag</a>
<input type="submit" class="waves-effect waves-button" value="Input Submit">
<input type="button" class="waves-effect waves-button" value="Input Button">
{{/code}}
<p>
Normally, the effect will not work on single tag element like <code class="language-markup">&lt;input&gt;</code>. That's why Waves will wrap <code class="language-markup">&lt;input&gt;</code> inside <code class="language-markup">&lt;i&gt;</code> automatically if you display the effect.
</p>
{{#code class="lang-markup"}}
<!-- Before displaying the effect -->
<input class="waves-button-input" type="submit" value="Button C">
<!-- After displaying the effect -->
<i class="waves-effect waves-button waves-input-wrapper" style="width:85px;height:36px;">
<input class="waves-button-input" type="submit" value="Button C">
</i>
{{/code}}
<p>
Waves can also be applied with icons (like FontAwesome) by using <code class="language-css">waves-circle</code>, so you can give the icons Waves effect. It's simple, just give additional <code class="language-css">.waves-effect</code> and <code class="language-css">.waves-circle</code> class to your <code class="language-markup">&lt;i&gt;</code> tags and Waves will wrap icon inside circle spot that will prevent Waves effect spreading.
</p>
{{#code class="lang-markup"}}
<i class="fa fa-gear waves-effect waves-circle"></i>
{{/code}}
<p>
You can also give Waves effect to other element tag like <code class="language-markup">&lt;div&gt;</code> or <code class="language-markup">&lt;img&gt;</code>. All you need to do is just put <code class="language-css">.waves-effect</code> class. For element that not have closing tag like <code class="language-markup">&lt;img&gt;</code>, you have to wrap it inside <code class="language-markup">&lt;span&gt;</code>, and for element that have blocky display like <code class="language-markup">&lt;div&gt;</code>, you need to put <code class="language-css">.waves-block</code> class to keep its shape.
</p>
{{#code class="lang-markup"}}
<!-- For single tag element -->
<span class="waves-effect">
<img src="/path/to/images.jpg">
</span>
<!-- For blocky display to keep its shape -->
<div class="waves-effect waves-block">
Block A
</div>
{{/code}}
<h2>Styling</h2>
<p>
Waves give you capabilities to color your <code class="language-css">.waves-effect</code>. You can do this by set up the color and background-color/background properties on your element style (or CSS file).
</p>
{{#code class="lang-markup"}}
<!-- Put color in inline style -->
<span class="waves-effect waves-button" style="background: #01BCFF;color: #fff;">
<button>Button B</button>
</span>
<!-- Put color inside style tag or css file -->
<style>
.blue-button {
background: #01BCFF;
color: #FFF;
}
</style>
<span class="waves-effect waves-button blue-button">
<button>Button B</button>
</span>
{{/code}}
<p>
By default, Waves ripple is darker. If you want the ripple is lighter, you can set <code class="language-css">.waves-light</code> along side <code class="language-css">.waves-effect</code> class. Make sure the element has been colored, because if it haven't colored yet, you cannot see the light ripple.
</p>
{{#code class="lang-markup"}}
<style>
.blue-button {
background: #01BCFF;
color: #FFF;
}
</style>
<span class="waves-effect waves-button waves-light blue-button">
<button>Button B</button>
</span>
{{/code}}
<p>
Not only give your "Waves effect", Waves also provide float effect when you click an element
by adding <code class="language-css">.waves-float</code> class to the element. Once again, before put float effect, your have to make sure the element has been colored, to prevent weird shadow on the element.
</p>
{{#code class="lang-markup"}}
<style>
.blue-button {
background: #01BCFF;
color: #FFF;
}
</style>
<span class="waves-effect waves-button waves-float blue-button">
<button>Button B</button>
</span>
{{/code}}
<h2>Quick Fix</h2>
<p>
<strong>IE Tap highlight on Windows Phone</strong>
</p>
<p>
By default if you access a web page using IE in Windows Phone, you will get tap highlight
effect when you tapping a link or button and this highlight will shadowed Waves effect. To prevent this thing happen, you will need to add <code>msapplication-tap-highlight</code> meta tag on your header.
</p>
{{#code class="lang-markup"}}
<!DOCTYPE html>
<html>
<head>
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no"/>
<title>Your Web Page</title>
<link rel="stylesheet" type="text/css" href="/path/to/waves.css" />
</head>
<body>
<script type="text/javascript" src="/path/to/waves.js">\</script\>
<script type="text/javascript">
Waves.displayEffect();
</script>
</body>
</html>
{{/code}}
</div>
</div>
<div id="api" class="content section page hide">
<h1>API</h1>
<div class="box shadow">
<h3 class="code-head">displayEffect(config)</h3>
<p>
<strong>Arguments</strong>
</p>
<ul>
<li><span class="code">config</span> - (optional) Configuration object for displaying Waves effect.</li>
</ul>
{{#code class="lang-javascript"}}
{
// How long Waves effect duration
// when its clicked (in milisecond)
duration: 500
}
{{/code}}
</div>
</div>
<div id="faq" class="content section page hide">
<h1>FAQ</h1>
<div class="box shadow">
<p>
<strong>Browser support?</strong>
</p>
<ul>
<li>IE 10++</li>
<li>Chrome 14++</li>
<li>Firefox 9++</li>
<li>Safari 5.1++</li>
<li>Opera 11.6++</li>
<li>iOS 6++ (Safari)</li>
<li>Windows Phone 8.1 (IE)</li>
<li>Android Browser 4++</li>
</ul>
<p>
<strong>Can I make Waves better?</strong>
</p>
<p>
Yes, I strongly encourage you to contribute to make Waves better. So, if you find a bug, or have nice idea for Waves development, please <a href="https://github.com/fians/Waves/issues" target="_blank">mention me</a>.
</p>
</div>
</div>
<script type="text/javascript" src="./static/prims.js"></script>
<script type="text/javascript" src="./static/snarl.min.js"></script>
<script type="text/javascript" src="./static/waves.min.js"></script>
<script type="text/javascript" src="./static/jquery.js"></script>
<script type="text/javascript">
var currentRoute = false;
function enterTransition(name, callback) {
var element = $('#'+name);
element.removeClass('hide');
setTimeout(function() {
element.addClass('show')
.addClass('appear');
setTimeout(function() {
element.addClass('flow');
return callback();
}, 1000);
}, 100);
}
function leaveTransition(name, callback) {
var element = $('#'+name);
element.removeClass('flow')
.removeClass('show');
setTimeout(function() {
element.removeClass('appear');
setTimeout(function() {
element.addClass('hide');
return callback();
}, 500);
}, 300);
}
var routes = {
// Landing Page Animation
index: {
enter: function(callback) {
$('#landing').removeClass('hide');
setTimeout(function() {
$('#landing').addClass('show');
return callback();
}, 100);
},
leave: function(callback) {
$('#landing').removeClass('show');
setTimeout(function() {
$('#landing').addClass('hide');
return callback();
}, 500);
}
},
// Example Page Animation
examples: {
enter: function(callback) {
enterTransition('example', callback);
},
leave: function(callback) {
leaveTransition('example', callback);
}
},
// Getting Started Page Animation
start: {
enter: function(callback) {
enterTransition('getting-started', callback);
},
leave: function(callback) {
leaveTransition('getting-started', callback);
}
},
// API Page Animation
api: {
enter: function(callback) {
enterTransition('api', callback);
},
leave: function(callback) {
leaveTransition('api', callback);
}
},
// FAQ Page Animation
faq: {
enter: function(callback) {
enterTransition('faq', callback);
},
leave: function(callback) {
leaveTransition('faq', callback);
}
}
}
function routing() {
var hash = window.location.hash.replace('#', '');
if (!hash.length) {
hash = 'index';
}
if (['index', 'examples', 'start', 'api', 'faq'].indexOf(hash) === -1) {
return false;
}
if (currentRoute === false) {
return routes[hash].enter(function() {
currentRoute = hash;
});
}
return routes[currentRoute].leave(function() {
routes[hash].enter(function() {
currentRoute = hash;
});
});
}
function init() {
setTimeout(function() {
$('#navigation').addClass('show');
routing();
}, 500);
}
$(document).on('ready', function() {
// Init Waves
Waves.displayEffect();
init();
$(window).on('hashchange', routing);
Snarl.setDefaultOptions({
timeout: 5000
});
$('#snarl-demo').click(function() {
Snarl.addNotification({
title: 'Snarl Notification',
text: 'You clicked the Waves button!'
});
});
/**
* Example source code click
*/
$('#example .top-button').on('click', function() {
var type = $(this).data('code');
$('#source-code .box .code').addClass('hide');
$('#source-code .box #code-'+type).removeClass('hide');
$('#source-code').removeClass('hide');
setTimeout(function() {
$('#source-code').addClass('show');
}, 50);
});
$('#source-code .top-button').on('click', function() {
$('#source-code').removeClass('show');
setTimeout(function() {
$('#source-code .box .code').addClass('hide');
$('#source-code').addClass('hide');
}, 500);
});
});
</script>
</body>
</html>

4
www/lib/waves/docs/static/jquery.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

115
www/lib/waves/docs/static/prims.css vendored Normal file
View File

@@ -0,0 +1,115 @@
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
text-shadow: 0 1px rgba(0,0,0,0.3);
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol {
color: #f92672;
}
.token.boolean,
.token.number{
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.builtin {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value
{
color: #e6db74;
}
.token.keyword{
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}

7
www/lib/waves/docs/static/prims.js vendored Normal file
View File

@@ -0,0 +1,7 @@
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=file-highlight */
var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);;
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
(function(){if(!self.Prism||!self.document||!document.querySelector)return;var e={js:"javascript",html:"markup",svg:"markup",xml:"markup",py:"python"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){var n=t.getAttribute("data-src"),r=(n.match(/\.(\w+)$/)||[,""])[1],i=e[r]||r,s=document.createElement("code");s.className="language-"+i;t.textContent="";s.textContent="Loading…";t.appendChild(s);var o=new XMLHttpRequest;o.open("GET",n,!0);o.onreadystatechange=function(){if(o.readyState==4)if(o.status<400&&o.responseText){s.textContent=o.responseText;Prism.highlightElement(s)}else o.status>=400?s.textContent="✖ Error "+o.status+" while fetching file: "+o.statusText:s.textContent="✖ Error: File does not exist or is empty"};o.send(null)})})();;

9
www/lib/waves/docs/static/snarl.min.css vendored Normal file
View File

@@ -0,0 +1,9 @@
/*!
* Snarl - Web Notifications based on Growl
* @version v0.1.3
* @link https://hoxxep.github.io/snarl
*
* Copyright 2014-2015 Liam Gray <hoxxep@gmail.com>
* Released under the MIT license
* @license https://github.com/hoxxep/Snarl/blob/master/LICENSE
*/#snarl-wrapper{position:fixed;top:20px;right:20px;bottom:auto;left:auto;width:380px;z-index:100;pointer-events:none}.snarl-notification{box-sizing:border-box;width:100%;padding:15px;margin:0 0 10px;position:relative;overflow:hidden;cursor:pointer;pointer-events:all;background:#f2f2f2;box-shadow:0 2px 2px rgba(0,0,0,0.25),0 0 15px rgba(0,0,0,0.05) inset;border-radius:5px;opacity:0;left:400px;transition:opacity .21s ease,left .35s ease-in,margin .35s ease}.snarl-notification.inbound{opacity:1;left:0;transition:opacity .28s ease-out .07s,left .35s ease-out}.snarl-notification.no-hover:not(.not-dismissable){padding:15px 95px 15px 15px}.snarl-notification.no-hover:not(.not-dismissable) .snarl-close{opacity:1;box-shadow:none}.snarl-notification.not-dismissable{padding:15px}.snarl-notification.not-dismissable .snarl-close{display:none}.snarl-notification .snarl-close{position:absolute;top:0;right:0;bottom:0;width:80px;height:100%;z-index:2;vertical-align:middle;text-align:center;border-left:1px solid rgba(0,0,0,0.1);background:#f2f2f2;box-shadow:-30px 0 30px #f2f2f2;opacity:0;transition:opacity .25s ease-out;cursor:pointer}.snarl-notification .snarl-close svg{position:relative;width:18px;height:18px;margin:-9px;top:50%;vertical-align:top;fill:#ccc;pointer-events:none;transition:fill .25s ease}.snarl-notification .snarl-close:hover svg{fill:#aaa}.snarl-notification:hover .snarl-close{opacity:1}.snarl-notification h3{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:1.4em}.snarl-notification p{margin:3px 0 0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:1em;line-height:1.25em}.snarl-notification.waves-effect .waves-ripple{z-index:3;background:-webkit-radial-gradient(rgba(0,0,0,0.05) 0, rgba(0,0,0,0.075) 40%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 60%, rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,0.05) 0, rgba(0,0,0,0.075) 40%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 60%, rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,0.05) 0, rgba(0,0,0,0.075) 40%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 60%, rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,0.05) 0, rgba(0,0,0,0.075) 40%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 60%, rgba(255,255,255,0) 70%)}@media screen and (max-width:480px){#snarl-wrapper{top:auto;bottom:0;left:0;right:0;width:auto}#snarl-wrapper .snarl-notification{margin:0;padding:10px 90px 10px 10px;border-radius:0;box-shadow:none;border-top:1px solid #ccc}#snarl-wrapper .snarl-notification .snarl-close{box-shadow:none;opacity:1}#snarl-wrapper .snarl-notification h3{font-size:1.2em}}

10
www/lib/waves/docs/static/snarl.min.js vendored Normal file
View File

@@ -0,0 +1,10 @@
/*!
* Snarl - Web Notifications based on Growl
* @version v0.1.3
* @link https://hoxxep.github.io/snarl
*
* Copyright 2014-2015 Liam Gray <hoxxep@gmail.com>
* Released under the MIT license
* @license https://github.com/hoxxep/Snarl/blob/master/LICENSE
*/
!function(t,i){"use strict";function n(){var t="",i="abcdefghijklmnopqrstuvwxyz0123456789";do{t="";for(var n=0;5>n;n++)t+=i.charAt(Math.floor(Math.random()*i.length))}while(u.exists(t));return t}function e(i){if("snarl-wrapper"!==i.toElement.getAttribute("id")){for(var n=i.toElement,e=!1;!c(n,"snarl-notification");)c(n,"snarl-close")&&(e=!0),n=n.parentElement;var o=n.getAttribute("id");if(o=/snarl-notification-([a-zA-Z0-9]+)/.exec(o)[1],e&&u.notifications[o].options.dismissable)u.removeNotification(o);else{var a=u.notifications[o].action;if(void 0===a||null===a)return;"string"==typeof a?t.location=a:"function"==typeof a?a(o):(console.log("Snarl Error: Invalid click action:"),console.log(a))}}}function o(t){if(void 0===u.notifications[t]&&(u.notifications[t]={}),null===u.notifications[t].element||void 0===u.notifications[t].element){var n='<h3 class="snarl-title"></h3><p class="snarl-text"></p><div class="snarl-close waves-effect"><!--<i class="fa fa-close"></i>-->'+m+"</div>",e=i.createElement("div");e.innerHTML=n,s(e,"snarl-notification waves-effect"),e.setAttribute("id","snarl-notification-"+t),u.notifications[t].element=e}if(null===u.notifications[t].element.parentElement){var o=i.getElementById("snarl-wrapper");i.body.clientWidth>480?o.appendChild(u.notifications[t].element):o.insertBefore(u.notifications[t].element,o.firstChild)}}function a(t,i){var n,e={};for(n in t)e[n]=t[n];for(n in i)e[n]=i[n];return e}function s(t,i){c(t,i)||(t.className+=" "+i)}function c(t,i){var n=new RegExp("(?:^|\\s)"+i+"(?!\\S)","g");return null!==t.className.match(n)}function l(t,i){var n=new RegExp("(?:^|\\s)"+i+"(?!\\S)","g");t.className=t.className.replace(n,"")}function r(){return"ontouchstart"in t||"onmsgesturechange"in t}function f(){var t=i.createElement("div");t.setAttribute("id","snarl-wrapper"),t.addEventListener("click",e),i.body.appendChild(t)}var u=u||{};u={count:0,notifications:{},defaultOptions:{title:"",text:"",timeout:3e3,action:null,dismissable:!0},setDefaultOptions:function(t){u.defaultOptions=a(u.defaultOptions,t)},addNotification:function(t){u.count+=1;var i=n();return o(i),u.editNotification(i,t),i},editNotification:function(t,i){null!==u.notifications[t].removeTimer&&(clearTimeout(u.notifications[t].removeTimer),u.notifications[t].removeTimer=null),o(t),i=i||{},void 0===u.notifications[t].options&&(u.notifications[t].options=u.defaultOptions),i=a(u.notifications[t].options,i);var n=u.notifications[t].element;n.getElementsByClassName("snarl-title")[0].textContent=i.title,n.getElementsByClassName("snarl-text")[0].textContent=i.text,null!==i.timer&&clearTimeout(u.notifications[t].timer);var e=null;null!==i.timeout&&(e=setTimeout(function(){u.removeNotification(t)},i.timeout)),u.notifications[t].timer=e,u.notifications[t].action=i.action,i.dismissable?l(n,"not-dismissable"):s(n,"not-dismissable"),setTimeout(function(){s(n,"inbound"),n.removeAttribute("style")},0),r()&&s(n,"no-hover"),u.notifications[t].options=i},reOpenNotification:function(t){u.editNotification(t)},removeNotification:function(t){if(u.isDismissed(t))return!1;var n=u.notifications[t].element;return l(n,"inbound"),i.body.clientWidth>480?n.style.marginBottom=-n.offsetHeight+"px":n.style.marginTop=-n.offsetHeight+"px",u.notifications[t].removeTimer=setTimeout(function(){n.parentElement.removeChild(n)},500),clearTimeout(u.notifications[t].timer),!0},isDismissed:function(t){return u.exists(t)?null===u.notifications[t].element.parentElement:!0},exists:function(t){return void 0!==u.notifications[t]},setTitle:function(t,i){u.editNotification(t,{title:i})},setText:function(t,i){u.editNotification(t,{text:i})},setTimeout:function(t,i){u.editNotification(t,{timeout:i})}};var m='<svg class="snarl-close-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"><g><path d="M49.5,5c-24.9,0-45,20.1-45,45s20.1,45,45,45s45-20.1,45-45S74.4,5,49.5,5z M71.3,65.2c0.3,0.3,0.5,0.7,0.5,1.1 s-0.2,0.8-0.5,1.1L67,71.8c-0.3,0.3-0.7,0.5-1.1,0.5s-0.8-0.2-1.1-0.5L49.5,56.6L34.4,71.8c-0.3,0.3-0.7,0.5-1.1,0.5 c-0.4,0-0.8-0.2-1.1-0.5l-4.3-4.4c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1L43,49.9L27.8,34.9c-0.6-0.6-0.6-1.6,0-2.3 l4.3-4.4c0.3-0.3,0.7-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5l15.2,15l15.2-15c0.3-0.3,0.7-0.5,1.1-0.5s0.8,0.2,1.1,0.5l4.3,4.4 c0.6,0.6,0.6,1.6,0,2.3L56.1,49.9L71.3,65.2z"/></g></svg>';!function(){"complete"===i.readyState||"interactive"===i.readyState&&i.body?f():i.addEventListener?i.addEventListener("DOMContentLoaded",function(){i.removeEventListener("DOMContentLoaded",null,!1),f()},!1):i.attachEvent&&i.attachEvent("onreadystatechange",function(){"complete"===i.readyState&&(i.detachEvent("onreadystatechange",null),f())})}(),t.Snarl=u}(window,document);

777
www/lib/waves/docs/static/style.css vendored Normal file
View File

@@ -0,0 +1,777 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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-size: 100%;
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;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* Structure
*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background:#fff;
color: #333;
font-size:15px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
a,
a:hover,
a:active,
a:visited {
cursor:pointer;
color:#01bcff;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
strong {
font-weight:bold;
}
p {
padding:10px;
}
ul {
list-style:initial;
padding:10px;
}
ul li {
margin-left:30px;
line-height: 160%;
}
/* Helper */
.code-head,
.code {
font-family: Consolas, monaco, monospace;
}
.text-center {
text-align:center;
}
.clear {
clear:both !important;
}
.hide {
display:none;
}
.shadow {
box-shadow: 0 1px 1.5px 1px rgba(0,0,0,.12);
-webkit-box-shadow: 0 1px 1.5px 1px rgba(0,0,0,.12);
}
.box {
padding: 10px;
background: #fff;
border-radius: .2em;
box-sizing: border-box;
}
.box h2 {
font-size: 20px;
margin-bottom: 10px;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
}
.box .top-button {
position: absolute;
top: 9px;
right: 10px;
padding: 5px;
font-size: 20px;
color: #333;
border: 1px solid #ccc;
border-radius: 5px 5px 0 0;
cursor: pointer;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
transition: all 500ms;
}
.box .top-button:hover {
color: #fff;
background: #01bcff;
border-color: #01bcff;
}
.section {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
.section.flow {
overflow-y: auto;
}
.section.appear {
opacity: 1;
}
.section.page h1 {
position: absolute;
left: 50%;
top: 70px;
margin-left: -200px;
color: #fff;
text-align: center;
font-size: 60px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 5px 0 10px;
width: 400px;
}
/**
* Main Background
*/
#bg-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: default;
background-color: #01bcff;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNvdW50PScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc1JScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nIzQxOTRiMycgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4zJyBmaWxsPScjNDE5NGIzJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPScxNSUnIGZpbGwtb3BhY2l0eT0nLjMnIGZpbGw9JyM0MTk0YjMnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nIzQxOTRiMycgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMjUlJyBmaWxsLW9wYWNpdHk9Jy4zJyBmaWxsPScjNDE5NGIzJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjMnIGZpbGw9JyM0MTk0YjMnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzM1JScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nIzQxOTRiMycgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4zJyBmaWxsPScjNDE5NGIzJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc0NSUnIGZpbGwtb3BhY2l0eT0nLjMnIGZpbGw9JyM0MTk0YjMnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nIzQxOTRiMycgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzgwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzkwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzI1YTJjZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzEwMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyMyNWEyY2YnIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjMDA3MDk5JyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzAwNzA5OScgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyMwMDcwOTknIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjMDA3MDk5JyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nIzAwNzA5OScgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyMwMDcwOTknIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNzAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjMDA3MDk5JyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzdkZGNmZicgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPScyMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyM3ZGRjZmYnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nMzAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjN2RkY2ZmJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzdkZGNmZicgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPSc1MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyM3ZGRjZmYnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nNjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjN2RkY2ZmJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzdkZGNmZicgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPScxMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyMwMDgxYjAnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjMDA4MWIwJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzAwODFiMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc0MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyMwMDgxYjAnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjMDA4MWIwJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzAwODFiMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc3MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyMwMDgxYjAnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzY2ZDZmZicgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjNjZkNmZmJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyM2NmQ2ZmYnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzY2ZDZmZicgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjNjZkNmZmJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyM2NmQ2ZmYnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nIzY2ZDZmZicgLz4KPC9zdmc+');
}
/**
* Top Navigation
*/
#navigation {
position: fixed;
top: -60px;
left: 50%;
margin-left: -200px;
width:400px;
background: #fff;
text-align: center;
border-radius: 0 0 .2em .2em;
z-index: 9999;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#navigation a {
display:inline-block;
padding: 5px 20px;
margin: 10px 0px;
text-align: center;
border-left: 1px solid;
box-sizing: border-box;
}
#navigation a:first-child {
border-left: none;
}
#navigation.show {
top: 0;
}
/**
* Landing Page
*/
#landing {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
color: #fff;
text-align:center;
width: 500px;
height: 300px;
opacity: 0;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#landing.show {
opacity: 1;
}
#landing h1 {
font-size: 120px;
}
#landing p {
font-size: 20px;
line-height: 160%;
}
#landing .button {
margin-top:20px;
position: relative;
}
#landing .button a {
display: inline-block;
background: #fff;
padding: 10px 25px;
color:#01bcff;
transition: all 500ms;
}
#landing .button span {
display: inline-block;
position: absolute;
left: 0;
bottom: -20px;
width: 100%;
text-align: center;
font-size: 10px;
font-style: italic;
}
#landing.on {
opacity: 1;
}
#landing.off {
opacity: 0;
}
/**
* Example
*/
#example .box {
position: absolute;
left: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
-ms-transition: all 1000ms;
-o-transition: all 1000ms;
transition: all 1000ms;
}
#example #box-button {
top: 200px;
left: 0%;
}
#example.show #box-button {
left: 50%;
}
#example #box-button p .waves-button {
margin: 0px 10px;
}
#example #box-icon {
top: 450px;
left: 100%;
}
#example.show #box-icon {
left: 50%;
}
#example #box-icon p .waves-circle {
margin: 0 8px;
}
#example #box-other {
top: 700px;
height: 450px;
left: 0%;
}
#example.show #box-other {
left: 50%;
}
#example #box-other .boxes {
width:125px;
height:125px;
text-align:center;
padding:55px 0;
margin:10px 30px;
float:left;
box-sizing:border-box;
border-radius:0px;
}
#example #box-other .flat-box {
border: 1px solid #ccc;
}
#example #box-other .float-box {
background:#ff4f0f;
color:#fff;
}
#example #box-other img {
width: 260px;
height: auto;
}
#example #box-action {
top: 1200px;
left: 100%;
margin-bottom: 40px;
}
#example.show #box-action {
left: 50%;
}
/**
* Source code popup
*/
#source-code {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#source-code .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
opacity: 0;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#source-code.show .bg {
opacity: 1;
}
#source-code .box {
position: absolute;
top: -100%;
left: 50%;
width: 500px;
height: 300px;
margin-left: -250px;
margin-top: -150px;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#source-code.show .box {
top: 50%;
}
#source-code .box .top-button {
padding: 5px 10px;
}
#source-code .wrapper {
padding: 5px 10px 10px;
}
#source-code pre {
height: 190px;
}
/**
* Content
*/
.content .box {
position: absolute;
top: 180px;
left: 50%;
margin-left: -275px;
padding: 20px 25px;
width: 550px;
box-sizing: border-box;
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
-ms-transition: all 1000ms;
-o-transition: all 1000ms;
transition: all 1000ms;
}
.content .box code,
.content .box pre {
font-size: 14px;
}
.content .box p {
line-height: 160%;
}
.content h2 {
margin-top: 40px;
}
h2 {
font-size:30px;
}
h3 {
margin-top:10px;
margin-bottom: 10px;
font-size:25px;
}
/**
* Page transition
*/
#getting-started .box {
left: -550px;
}
#getting-started.show .box {
left: 50%;
}
#api .box {
top: 100%;
}
#api.show .box {
top: 180px;
}
#faq .box {
left: 100%;
margin-left: 0px;
}
#faq.show .box {
left: 50%;
margin-left: -275px;
}
/**
* Snarl Notification
*/
.snarl-notification h3 {
font-size: 1.3em;
font-weight: 400;
margin-bottom: 0.3em;
}
.snarl-notification p {
padding: 0;
}
/**
* Responsive stuff
*/
/* 480px - 639px */
@media all and (max-width: 639px) {
#landing {
margin-left: -200px;
width: 400px;
}
#landing h1 {
font-size: 100px;
}
.section.page h1 {
margin-left: -150px;
width: 300px;
font-size: 40px;
}
#example #box-button {
top: -200px;
left: 50%;
margin-left: -200px;
}
#example.show #box-button {
top: 150px;
}
#example #box-icon {
top: -200px;
left: 50%;
margin-left: -200px;
}
#example.show #box-icon {
top: 370px;
left: 50%;
margin-left: -200px;
}
#example #box-other {
top: -450px;
left: 50%;
width: 400px;
margin-left: -200px;
}
#example.show #box-other {
top: 590px;
}
#example #box-other .boxes {
width: 125px;
}
#example #box-action {
top: -200px;
left: 50%;
margin-left: -200px;
width: 400px;
}
#example.show #box-action {
top: 1070px;
left: 50%;
margin-left: -200px;
}
#source-code .box {
margin-left: -200px;
width: 400px;
}
.content .box {
top: 150px;
margin-bottom: 40px;
margin-left: -200px;
width: 400px;
}
#api.show .box {
top: 150px;
}
#faq.show .box {
margin-left: -200px;
}
}
/* 320px - 479px */
@media all and (max-width: 479px) {
#navigation {
width: 320px;
margin-left: -160px;
}
#navigation.show {
top: 0px;
}
#navigation a {
padding: 5px 0px;
width: 75px;
}
#landing {
margin-top: -130px;
margin-left: -150px;
width: 300px;
height: 260px;
}
#landing h1 {
font-size: 80px;
}
#landing p {
font-size: 18px;
}
.section.page h1 {
margin-left: -120px;
width: 240px;
font-size: 40px;
}
#example.show #box-button {
top: 150px;
}
#example #box-button {
left: 10px;
width: 300px;
height: 300px;
}
#example #box-button p {
padding: 0;
}
#example #box-button p .waves-button {
margin: 10px;
}
#example #box-icon {
top: -300px;
left: 10px;
width: 300px;
height: 300px;
}
#example.show #box-icon {
top: 480px;
left: 10px;
}
#example #box-icon p {
padding: 0;
}
#example #box-icon p .waves-circle {
margin: 10px 8px;
}
#example #box-other {
top: -590px;
left: 10px;
width: 300px;
height: 590px;
}
#example.show #box-other {
top: 810px;
left: 10px;
}
#example #box-other .boxes {
width: 220px;
}
#example #box-action {
top: -180px;
left: 10px;
width: 300px;
height: 180px;
}
#example.show #box-action {
top: 1430px;
left: 10px;
margin-bottom: 40px;
}
#source-code .box {
margin-left: -150px;
width: 300px;
}
.content .box {
margin-left: -150px;
width: 300px;
}
#getting-started h1 {
font-size: 30px;
}
#getting-started .box {
top: 140px;
}
#api.show .box {
top: 150px;
}
#api h3 {
font-size: 18px;
}
#faq .box {
top: 150px;
}
#faq.show .box {
margin-left: -150px;
}
}