Material und Hintergruende eingebunden

www/lib/waves/.bower.json

@@ -0,0 +1,34 @@
+{
+  "name": "Waves",
+  "version": "0.6.6",
+  "homepage": "http://fian.my.id/Waves",
+  "authors": [
+    "Alfiana E. Sibuea <alfian.sibuea@gmail.com>"
+  ],
+  "description": "Click effect inspired by Google's Material Design",
+  "main": [
+    "dist/waves.min.js",
+    "dist/waves.min.css"
+  ],
+  "keywords": [
+    "click",
+    "material-design"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "_release": "0.6.6",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.6.6",
+    "commit": "7cfc479b8246e6d15e660bc2a69fa5b3a792ce98"
+  },
+  "_source": "https://github.com/fians/Waves.git",
+  "_target": "0.6",
+  "_originalSource": "waves"
+}

www/lib/waves/Gruntfile.js

@@ -0,0 +1,254 @@
+var fs = require('fs');
+
+module.exports = function(grunt) {
+    grunt.initConfig({
+
+        less: {
+            build: {
+                options: {},
+                files: {
+                    'dist/waves.css': 'src/less/waves.less'
+                }
+            },
+            minified: {
+                options: {
+                    cleancss:true
+                },
+                files: {
+                    'dist/waves.min.css': 'src/less/waves.less'
+                }
+            },
+            // re-minify everything in tests/ so that they all
+            // have the same minification for comparision
+            test: {
+                options: {
+                    cleancss:true,
+                    cleancssOptions: {
+                        keepSpecialComments:'0'
+                    }
+                },
+                files: {
+                    'tests/less/waves.min.css': 'src/less/waves.less',
+                    'tests/sass/waves.min.css': 'tests/sass/waves.css',
+                    'tests/scss/waves.min.css': 'tests/scss/waves.css',
+                    'tests/stylus/waves.min.css': 'tests/stylus/waves.css'
+                }
+            }
+        },
+        
+        jshint: {
+            
+            files: [
+                'gruntfile.js', 
+                'src/js/*.js',
+            ],
+            
+            options: {
+                globals: {
+                    console: true
+                }
+            }
+        },
+   
+        uglify: {
+            options: {
+                mangle: true,  // false when debugging
+                compress: true,  // false when debugging
+                sourceMap: true,
+                sourceMapName: 'dist/waves.min.js.map',
+                preserveComments: 'some'
+            },
+            js: {
+                files: {
+                    'dist/waves.min.js': ['src/js/waves.js']
+                }
+            }
+        },
+
+        // Copy to dist
+        copy: {
+			js: {
+                expand: true,
+                cwd: 'src/js',
+				src: 'waves.js',
+				dest: 'dist/'
+			},
+            docs: {
+                expand: true,
+                cwd: 'dist',
+                src: ['waves.min.css', 'waves.min.js'],
+                dest: 'docs/static'
+            }
+		},
+        
+        //convert less to stylus
+        execute: {
+            less2stylus: {
+                call: function(grunt, options, async) {
+                    var done = async();
+                    var exec = require('child_process').exec;
+                    exec('cd node_modules/less2stylus && ./less2stylus ../../src/less/waves.less', function (error, stdout, stderr) {
+                        grunt.log.writeln('Executing less2styus...');
+
+                        if (error) {
+                            grunt.log.writeln('Error! ' + error);
+                        }
+
+                        var fs = require('fs');
+                        fs.writeFile("src/stylus/waves.styl", stdout, function(err) {
+                            if(err) {
+                                grunt.log.writeln(err);
+                            } else {
+                                grunt.log.writeln("Stylus file was saved!");
+                            }
+
+                            done(); // let grunt resume
+                        });
+                    });
+                }
+            },
+
+            less2scss: {
+                //FUTURE: Put less2scss as it's own script
+                call: function(grunt, options, async) {
+                    var done = async();
+                    var text = fs.readFileSync('src/less/waves.less', {encoding:'utf8'});
+
+                    //replace @ with $
+                    text = text.replace(/@(?!import|media|keyframes|-)/g, '$');
+                    //replace mixins
+                    text = text.replace(/\.([\w\-]*)\s*\((.*)\)\s*\{/g, '@mixin $1($2){');
+                    //replace includes
+                    text = text.replace(/\.([\w\-]*\(.*\)\s*;)/g, '@include $1');
+                    //replace string literals
+                    //eg. ~'!important' -> #{"!important"}
+                    text = text.replace(/~(?:\"|\')(.*)(?:\"|\')/g, '#{"$1"}');
+
+                    //NOTE: for true less->scss transpiling we'd need to replace spin to adjust-hue (not needed but anyway)
+
+                    fs.writeFileSync('src/scss/waves.scss', text);
+
+                    done();
+                }
+            },
+            
+            test: {
+                call: function(grunt, options, async) {
+                    var done = async();
+                    var lessTest = fs.readFileSync('tests/less/waves.min.css', {encoding:'utf8'});
+                    var sassTest = fs.readFileSync('tests/sass/waves.min.css', {encoding:'utf8'});
+                    var scssTest = fs.readFileSync('tests/scss/waves.min.css', {encoding:'utf8'});
+                    var stylusTest = fs.readFileSync('tests/stylus/waves.min.css', {encoding:'utf8'});
+                    
+                    var failure = false;
+                    if (lessTest != sassTest) {
+                        grunt.log.writeln('ERROR: sass failed test.');
+                        failure = true;
+                    }
+                    
+                    if (lessTest != scssTest) {
+                        grunt.log.writeln('ERROR: scss failed test.');
+                        failure = true;
+                    }
+                    
+                    if (lessTest != stylusTest) {
+                        grunt.log.writeln('ERROR: stylus failed test.');
+                        failure = true;
+                    }
+                    
+                    if (sassTest != scssTest) {
+                        grunt.log.writeln('WARNING: sass files aren\'t equal?');
+                        failure = true;
+                    }
+                    
+                    if (!failure) grunt.log.writeln('PASS: conversions generated same CSS');
+                    
+                    done();
+                }
+            }
+        },
+
+        'sass-convert': {
+            options: {
+                from: 'scss',
+                to: 'sass',
+                indent: 2
+            },
+            files: {
+                cwd: 'src/scss',
+                src: '*.scss',
+                dest: 'src/sass'
+            }
+        },
+        
+        sass: {
+            test: {
+                files: [{
+                    expand: true,
+                    cwd: 'src',
+                    src: ['**/*.sass', '**/*.scss'],
+                    dest: 'tests/',
+                    ext: '.css'
+                }]
+            }
+        },
+        
+        stylus: {
+            test: {
+                files: {
+                    'tests/stylus/waves.css': 'src/stylus/waves.styl'
+                }
+            }
+        },
+        
+        clean: {
+            test: ['tests/*']
+        },
+
+        watch: {
+            script: {
+               options: {
+                    spawn: false,
+                    event: ['added', 'deleted', 'changed']
+                },
+                files: ['src/**/*.js', 'src/**/*.less'],
+                tasks: ['build']
+            },
+            grunt: {
+                files: ['Gruntfile.js']
+            }
+        }
+    });
+    
+    // Load module
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-sass');
+    grunt.loadNpmTasks('grunt-contrib-stylus');
+    grunt.loadNpmTasks('grunt-execute');
+    grunt.loadNpmTasks('grunt-sass-convert');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    
+    // Create grunt task
+    grunt.registerTask('build', [
+        'less:build', 
+        'less:minified', 
+        'jshint', 
+        'uglify', 
+        'copy', 
+        'execute:less2stylus', 
+        'execute:less2scss', 
+        'sass-convert', 
+        'sass:test', 
+        'stylus:test', 
+        'less:test', 
+        'execute:test',
+        'clean:test'
+    ]);
+    
+    grunt.registerTask('default', ['build', 'watch']);
+};

www/lib/waves/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Alfiana E. Sibuea
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

www/lib/waves/README.md

@@ -0,0 +1,27 @@
+# Waves
+
+Click effect inspired by Google's Material Design
+http://fian.my.id/Waves/
+
+## Documentation
+
+Waves using [Situs](https://github.com/fians/situs) to generate documentation. Here are some steps to run documentation locally on your computer,
+
+1. Make sure [Node.js](http://nodejs.org/) and [Ruby](https://www.ruby-lang.org/en/) installed in your computer.
+2. Install SASS via RubyGems (`gem install sass`).
+3. Install Situs globally via npm (`npm install situs -g`).
+4. Clone Waves's Github repository, if you haven't already (`git clone https://github.com/fians/Waves.git`).
+5. Run `npm install` to install the necessary local node packages.
+6. Install grunt globally with `npm install -g grunt-cli`.
+7. Run `grunt` to watch the directory, or simply `grunt build` to do a single build.
+8. Now just start Situs server (`situs server`), then visit [http://localhost:4000/](http://localhost:4000/) on your browser.
+
+## Notes
+
+Thanks for [BrowserStack](http://www.browserstack.com/) by providing a great testing tools for this projects.
+
+
+## License
+Waves created by [Alfiana Sibuea](http://fian.my.id), and released under [MIT license](https://github.com/fians/Waves/blob/master/LICENSE). 
+
+Copyright © 2014 Alfiana E. Sibuea. All rights reserved.

www/lib/waves/bower.json

@@ -0,0 +1,22 @@
+{
+  "name": "Waves",
+  "version": "0.6.6",
+  "homepage": "http://fian.my.id/Waves",
+  "authors": [
+    "Alfiana E. Sibuea <alfian.sibuea@gmail.com>"
+  ],
+  "description": "Click effect inspired by Google's Material Design",
+  "main": ["dist/waves.min.js", "dist/waves.min.css"],
+  "keywords": [
+    "click",
+    "material-design"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

www/lib/waves/dist/waves.css

@@ -0,0 +1,136 @@
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+.waves-effect {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.waves-effect .waves-ripple {
+  position: absolute;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  margin-top: -50px;
+  margin-left: -50px;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.2);
+  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  -webkit-transition: all 0.5s ease-out;
+  -moz-transition: all 0.5s ease-out;
+  -o-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  -webkit-transition-property: -webkit-transform, opacity;
+  -moz-transition-property: -moz-transform, opacity;
+  -o-transition-property: -o-transform, opacity;
+  transition-property: transform, opacity;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+  transform: scale(0);
+  pointer-events: none;
+}
+.waves-effect.waves-light .waves-ripple {
+  background: rgba(255, 255, 255, 0.4);
+  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+}
+.waves-effect.waves-classic .waves-ripple {
+  background: rgba(0, 0, 0, 0.2);
+}
+.waves-effect.waves-classic.waves-light .waves-ripple {
+  background: rgba(255, 255, 255, 0.4);
+}
+.waves-notransition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+.waves-button,
+.waves-circle {
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
+}
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  color: inherit;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 1em;
+  line-height: 1em;
+  text-align: center;
+  text-decoration: none;
+  z-index: 1;
+}
+.waves-button {
+  padding: 0.85em 1.1em;
+  border-radius: 0.2em;
+}
+.waves-button-input {
+  margin: 0;
+  padding: 0.85em 1.1em;
+}
+.waves-input-wrapper {
+  border-radius: 0.2em;
+  vertical-align: bottom;
+}
+.waves-input-wrapper.waves-button {
+  padding: 0;
+}
+.waves-input-wrapper .waves-button-input {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.waves-circle {
+  text-align: center;
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-radius: 50%;
+}
+.waves-float {
+  -webkit-mask-image: none;
+  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
+}
+.waves-float:active {
+  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
+}
+.waves-block {
+  display: block;
+}
+/* Firefox Bug: link not triggered */
+a.waves-effect .waves-ripple {
+  z-index: -1;
+}

www/lib/waves/dist/waves.js

@@ -0,0 +1,349 @@
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+
+;(function(window, factory) {
+    "use strict";
+
+    // AMD. Register as an anonymous module.  Wrap in function so we have access
+    // to root via `this`.
+    if (typeof define === "function" && define.amd) {
+        define([], function() {
+            return factory.apply(window);
+        });
+    }
+
+    // Node. Does not work with strict CommonJS, but only CommonJS-like
+    // environments that support module.exports, like Node.
+    else if (typeof exports === "object") {
+        module.exports = factory.call(window);
+    }
+
+    // Browser globals.
+    else {
+        window.Waves = factory.call(window);
+    }
+})(typeof global === "object" ? global : this, function () {
+    "use strict";
+
+    var Waves = Waves || {};
+    var $$ = document.querySelectorAll.bind(document);
+
+    // Find exact position of element
+    function isWindow(obj) {
+        return obj !== null && obj === obj.window;
+    }
+
+    function getWindow(elem) {
+        return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
+    }
+
+    function offset(elem) {
+        var docElem, win,
+            box = {top: 0, left: 0},
+            doc = elem && elem.ownerDocument;
+
+        docElem = doc.documentElement;
+
+        if (typeof elem.getBoundingClientRect !== typeof undefined) {
+            box = elem.getBoundingClientRect();
+        }
+        win = getWindow(doc);
+        return {
+            top: box.top + win.pageYOffset - docElem.clientTop,
+            left: box.left + win.pageXOffset - docElem.clientLeft
+        };
+    }
+
+    function convertStyle(obj) {
+        var style = '';
+
+        for (var a in obj) {
+            if (obj.hasOwnProperty(a)) {
+                style += (a + ':' + obj[a] + ';');
+            }
+        }
+
+        return style;
+    }
+
+    var Effect = {
+
+        // Effect delay
+        duration: 750,
+
+        show: function(e, element) {
+
+            // Disable right click
+            if (e.button === 2) {
+                return false;
+            }
+
+            var el = element || this;
+
+            // Create ripple
+            var ripple = document.createElement('div');
+            ripple.className = 'waves-ripple';
+            el.appendChild(ripple);
+
+            // Get click coordinate and element witdh
+            var pos         = offset(el);
+            var relativeY   = (e.pageY - pos.top);
+            var relativeX   = (e.pageX - pos.left);
+            var scale       = 'scale('+((el.clientWidth / 100) * 3)+')';
+            
+            // Support for touch devices
+            if ('touches' in e) {
+              relativeY   = (e.touches[0].pageY - pos.top);
+              relativeX   = (e.touches[0].pageX - pos.left);
+            }
+
+            // Attach data to element
+            ripple.setAttribute('data-hold', Date.now());
+            ripple.setAttribute('data-scale', scale);
+            ripple.setAttribute('data-x', relativeX);
+            ripple.setAttribute('data-y', relativeY);
+
+            // Set ripple position
+            var rippleStyle = {
+                'top': relativeY+'px',
+                'left': relativeX+'px'
+            };
+            
+            ripple.className = ripple.className + ' waves-notransition';
+            ripple.setAttribute('style', convertStyle(rippleStyle));
+            ripple.className = ripple.className.replace('waves-notransition', '');
+
+            // Scale the ripple
+            rippleStyle['-webkit-transform'] = scale;
+            rippleStyle['-moz-transform'] = scale;
+            rippleStyle['-ms-transform'] = scale;
+            rippleStyle['-o-transform'] = scale;
+            rippleStyle.transform = scale;
+            rippleStyle.opacity   = '1';
+
+            rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
+            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
+            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
+            rippleStyle['transition-duration']         = Effect.duration + 'ms';
+
+            ripple.setAttribute('style', convertStyle(rippleStyle));
+        },
+
+        hide: function(e) {
+            TouchHandler.touchup(e);
+
+            var el = this;
+            var width = el.clientWidth * 1.4;
+            
+            // Get first ripple
+            var ripple = null;
+            var ripples = el.getElementsByClassName('waves-ripple');
+            if (ripples.length > 0) {
+                ripple = ripples[ripples.length - 1];
+            } else {
+                return false;
+            }
+
+            var relativeX   = ripple.getAttribute('data-x');
+            var relativeY   = ripple.getAttribute('data-y');
+            var scale       = ripple.getAttribute('data-scale');
+
+            // Get delay beetween mousedown and mouse leave
+            var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
+            var delay = 350 - diff;
+
+            if (delay < 0) {
+                delay = 0;
+            }
+
+            // Fade out ripple after delay
+            setTimeout(function() {
+                var style = {
+                    'top': relativeY+'px',
+                    'left': relativeX+'px',
+                    'opacity': '0',
+
+                    // Duration
+                    '-webkit-transition-duration': Effect.duration + 'ms',
+                    '-moz-transition-duration': Effect.duration + 'ms',
+                    '-o-transition-duration': Effect.duration + 'ms',
+                    'transition-duration': Effect.duration + 'ms',
+                    '-webkit-transform': scale,
+                    '-moz-transform': scale,
+                    '-ms-transform': scale,
+                    '-o-transform': scale,
+                    'transform': scale,
+                };
+
+                ripple.setAttribute('style', convertStyle(style));
+
+                setTimeout(function() {
+                    try {
+                        el.removeChild(ripple);
+                    } catch(e) {
+                        return false;
+                    }
+                }, Effect.duration);
+            }, delay);
+        },
+
+        // Little hack to make <input> can perform waves effect
+        wrapInput: function(elements) {
+            for (var a = 0; a < elements.length; a++) {
+                var el = elements[a];
+                
+                if (el.tagName.toLowerCase() === 'input') {
+                    var parent = el.parentNode;
+
+                    // If input already have parent just pass through
+                    if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
+                        continue;
+                    }
+
+                    // Put element class and style to the specified parent
+                    var wrapper = document.createElement('i');
+                    wrapper.className = el.className + ' waves-input-wrapper';
+
+                    var elementStyle = el.getAttribute('style');
+
+                    if (!elementStyle) {
+                        elementStyle = '';
+                    }
+
+                    wrapper.setAttribute('style', elementStyle);
+                    
+                    el.className = 'waves-button-input';
+                    el.removeAttribute('style');
+
+                    // Put element as child
+                    parent.replaceChild(wrapper, el);
+                    wrapper.appendChild(el);
+                }
+            }
+        }
+    };
+
+
+    /**
+     * Disable mousedown event for 500ms during and after touch
+     */
+    var TouchHandler = {
+        /* uses an integer rather than bool so there's no issues with
+         * needing to clear timeouts if another touch event occurred
+         * within the 500ms. Cannot mouseup between touchstart and
+         * touchend, nor in the 500ms after touchend. */
+        touches: 0,
+        allowEvent: function(e) {
+            var allow = true;
+
+            if (e.type === 'touchstart') {
+                TouchHandler.touches += 1; //push
+            } else if (e.type === 'touchend' || e.type === 'touchcancel') {
+                setTimeout(function() {
+                    if (TouchHandler.touches > 0) {
+                        TouchHandler.touches -= 1; //pop after 500ms
+                    }
+                }, 500);
+            } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
+                allow = false;
+            }
+
+            return allow;
+        },
+        touchup: function(e) {
+            TouchHandler.allowEvent(e);
+        }
+    };
+
+
+    /**
+     * Delegated click handler for .waves-effect element.
+     * returns null when .waves-effect element not in "click tree"
+     */
+    function getWavesEffectElement(e) {
+        if (TouchHandler.allowEvent(e) === false) {
+            return null;
+        }
+
+        var element = null;
+        var target = e.target || e.srcElement;
+
+        while (target.parentElement !== null) {
+            if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
+                element = target;
+                break;
+            } else if (target.classList.contains('waves-effect')) {
+                element = target;
+                break;
+            }
+            target = target.parentElement;
+        }
+
+        return element;
+    }
+
+    /**
+     * Bubble the click and show effect if .waves-effect elem was found
+     */
+    function showEffect(e) {
+        var element = getWavesEffectElement(e);
+
+        if (element !== null) {
+            Effect.show(e, element);
+
+            if ('ontouchstart' in window) {
+                element.addEventListener('touchend', Effect.hide, false);
+                element.addEventListener('touchcancel', Effect.hide, false);
+            }
+
+            element.addEventListener('mouseup', Effect.hide, false);
+            element.addEventListener('mouseleave', Effect.hide, false);
+        }
+    }
+
+    Waves.displayEffect = function(options) {
+        options = options || {};
+
+        if ('duration' in options) {
+            Effect.duration = options.duration;
+        }
+        
+        //Wrap input inside <i> tag
+        Effect.wrapInput($$('.waves-effect'));
+        
+        if ('ontouchstart' in window) {
+            document.body.addEventListener('touchstart', showEffect, false);
+        }
+        
+        document.body.addEventListener('mousedown', showEffect, false);
+    };
+
+    /**
+     * Attach Waves to an input element (or any element which doesn't
+     * bubble mouseup/mousedown events).
+     *   Intended to be used with dynamically loaded forms/inputs, or
+     * where the user doesn't want a delegated click handler.
+     */
+    Waves.attach = function(element) {
+        //FUTURE: automatically add waves classes and allow users
+        // to specify them with an options param? Eg. light/classic/button
+        if (element.tagName.toLowerCase() === 'input') {
+            Effect.wrapInput([element]);
+            element = element.parentElement;
+        }
+
+        if ('ontouchstart' in window) {
+            element.addEventListener('touchstart', showEffect, false);
+        }
+
+        element.addEventListener('mousedown', showEffect, false);
+    };
+
+    return Waves;
+});

www/lib/waves/dist/waves.min.css

@@ -0,0 +1,8 @@
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button:hover,.waves-button:visited,.waves-button-input{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:transparent;font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:.85em 1.1em}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12)}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}a.waves-effect .waves-ripple{z-index:-1}

www/lib/waves/dist/waves.min.js

@@ -0,0 +1,10 @@
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return b.apply(a)}):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}("object"==typeof global?global:this,function(){"use strict";function a(a){return null!==a&&a===a.window}function b(b){return a(b)?b:9===b.nodeType&&b.defaultView}function c(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function d(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function e(a){if(j.allowEvent(a)===!1)return null;for(var b=null,c=a.target||a.srcElement;null!==c.parentElement;){if(!(c instanceof SVGElement||-1===c.className.indexOf("waves-effect"))){b=c;break}if(c.classList.contains("waves-effect")){b=c;break}c=c.parentElement}return b}function f(a){var b=e(a);null!==b&&(i.show(a,b),"ontouchstart"in window&&(b.addEventListener("touchend",i.hide,!1),b.addEventListener("touchcancel",i.hide,!1)),b.addEventListener("mouseup",i.hide,!1),b.addEventListener("mouseleave",i.hide,!1))}var g=g||{},h=document.querySelectorAll.bind(document),i={duration:750,show:function(a,b){if(2===a.button)return!1;var e=b||this,f=document.createElement("div");f.className="waves-ripple",e.appendChild(f);var g=c(e),h=a.pageY-g.top,j=a.pageX-g.left,k="scale("+e.clientWidth/100*3+")";"touches"in a&&(h=a.touches[0].pageY-g.top,j=a.touches[0].pageX-g.left),f.setAttribute("data-hold",Date.now()),f.setAttribute("data-scale",k),f.setAttribute("data-x",j),f.setAttribute("data-y",h);var l={top:h+"px",left:j+"px"};f.className=f.className+" waves-notransition",f.setAttribute("style",d(l)),f.className=f.className.replace("waves-notransition",""),l["-webkit-transform"]=k,l["-moz-transform"]=k,l["-ms-transform"]=k,l["-o-transform"]=k,l.transform=k,l.opacity="1",l["-webkit-transition-duration"]=i.duration+"ms",l["-moz-transition-duration"]=i.duration+"ms",l["-o-transition-duration"]=i.duration+"ms",l["transition-duration"]=i.duration+"ms",f.setAttribute("style",d(l))},hide:function(a){j.touchup(a);var b=this,c=(1.4*b.clientWidth,null),e=b.getElementsByClassName("waves-ripple");if(!(e.length>0))return!1;c=e[e.length-1];var f=c.getAttribute("data-x"),g=c.getAttribute("data-y"),h=c.getAttribute("data-scale"),k=Date.now()-Number(c.getAttribute("data-hold")),l=350-k;0>l&&(l=0),setTimeout(function(){var a={top:g+"px",left:f+"px",opacity:"0","-webkit-transition-duration":i.duration+"ms","-moz-transition-duration":i.duration+"ms","-o-transition-duration":i.duration+"ms","transition-duration":i.duration+"ms","-webkit-transform":h,"-moz-transform":h,"-ms-transform":h,"-o-transform":h,transform:h};c.setAttribute("style",d(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},i.duration)},l)},wrapInput:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("input"===c.tagName.toLowerCase()){var d=c.parentNode;if("i"===d.tagName.toLowerCase()&&-1!==d.className.indexOf("waves-effect"))continue;var e=document.createElement("i");e.className=c.className+" waves-input-wrapper";var f=c.getAttribute("style");f||(f=""),e.setAttribute("style",f),c.className="waves-button-input",c.removeAttribute("style"),d.replaceChild(e,c),e.appendChild(c)}}}},j={touches:0,allowEvent:function(a){var b=!0;return"touchstart"===a.type?j.touches+=1:"touchend"===a.type||"touchcancel"===a.type?setTimeout(function(){j.touches>0&&(j.touches-=1)},500):"mousedown"===a.type&&j.touches>0&&(b=!1),b},touchup:function(a){j.allowEvent(a)}};return g.displayEffect=function(a){a=a||{},"duration"in a&&(i.duration=a.duration),i.wrapInput(h(".waves-effect")),"ontouchstart"in window&&document.body.addEventListener("touchstart",f,!1),document.body.addEventListener("mousedown",f,!1)},g.attach=function(a){"input"===a.tagName.toLowerCase()&&(i.wrapInput([a]),a=a.parentElement),"ontouchstart"in window&&a.addEventListener("touchstart",f,!1),a.addEventListener("mousedown",f,!1)},g});
+//# sourceMappingURL=waves.min.js.map

www/lib/waves/docs/index.html

@@ -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>

www/lib/waves/docs/static/prims.css

@@ -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;
+}
+

www/lib/waves/docs/static/prims.js

@@ -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)})})();;

www/lib/waves/docs/static/snarl.min.css

@@ -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}}

www/lib/waves/docs/static/snarl.min.js

@@ -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);

www/lib/waves/docs/static/style.css

@@ -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;
+    }
+
+}

www/lib/waves/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "node-waves",
+  "version": "0.6.6",
+  "description": "Click effect insipired by Google Material Design",
+  "author": "Alfiana E. Sibuea <alfian.sibuea@gmail.com>",
+  "main": "src/js/waves.js",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-copy": "^0.7.0",
+    "grunt-contrib-jshint": "^0.10.0",
+    "grunt-contrib-less": "^0.12.0",
+    "grunt-contrib-sass": "^0.8.1",
+    "grunt-contrib-stylus": "^0.20.0",
+    "grunt-contrib-uglify": "^0.6.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-execute": "^0.2.2",
+    "grunt-sass-convert": "^0.2.0",
+    "less2stylus": "^0.1.0"
+  },
+  "scripts": {
+    "test": ""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fians/Waves.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fians/Waves/issues"
+  },
+  "homepage": "http://fian.my.id/Waves"
+}

www/lib/waves/situs.json

@@ -0,0 +1,3 @@
+{
+    "source": "./docs"
+}

www/lib/waves/src/js/waves.js

@@ -0,0 +1,349 @@
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+
+;(function(window, factory) {
+    "use strict";
+
+    // AMD. Register as an anonymous module.  Wrap in function so we have access
+    // to root via `this`.
+    if (typeof define === "function" && define.amd) {
+        define([], function() {
+            return factory.apply(window);
+        });
+    }
+
+    // Node. Does not work with strict CommonJS, but only CommonJS-like
+    // environments that support module.exports, like Node.
+    else if (typeof exports === "object") {
+        module.exports = factory.call(window);
+    }
+
+    // Browser globals.
+    else {
+        window.Waves = factory.call(window);
+    }
+})(typeof global === "object" ? global : this, function () {
+    "use strict";
+
+    var Waves = Waves || {};
+    var $$ = document.querySelectorAll.bind(document);
+
+    // Find exact position of element
+    function isWindow(obj) {
+        return obj !== null && obj === obj.window;
+    }
+
+    function getWindow(elem) {
+        return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
+    }
+
+    function offset(elem) {
+        var docElem, win,
+            box = {top: 0, left: 0},
+            doc = elem && elem.ownerDocument;
+
+        docElem = doc.documentElement;
+
+        if (typeof elem.getBoundingClientRect !== typeof undefined) {
+            box = elem.getBoundingClientRect();
+        }
+        win = getWindow(doc);
+        return {
+            top: box.top + win.pageYOffset - docElem.clientTop,
+            left: box.left + win.pageXOffset - docElem.clientLeft
+        };
+    }
+
+    function convertStyle(obj) {
+        var style = '';
+
+        for (var a in obj) {
+            if (obj.hasOwnProperty(a)) {
+                style += (a + ':' + obj[a] + ';');
+            }
+        }
+
+        return style;
+    }
+
+    var Effect = {
+
+        // Effect delay
+        duration: 750,
+
+        show: function(e, element) {
+
+            // Disable right click
+            if (e.button === 2) {
+                return false;
+            }
+
+            var el = element || this;
+
+            // Create ripple
+            var ripple = document.createElement('div');
+            ripple.className = 'waves-ripple';
+            el.appendChild(ripple);
+
+            // Get click coordinate and element witdh
+            var pos         = offset(el);
+            var relativeY   = (e.pageY - pos.top);
+            var relativeX   = (e.pageX - pos.left);
+            var scale       = 'scale('+((el.clientWidth / 100) * 3)+')';
+            
+            // Support for touch devices
+            if ('touches' in e) {
+              relativeY   = (e.touches[0].pageY - pos.top);
+              relativeX   = (e.touches[0].pageX - pos.left);
+            }
+
+            // Attach data to element
+            ripple.setAttribute('data-hold', Date.now());
+            ripple.setAttribute('data-scale', scale);
+            ripple.setAttribute('data-x', relativeX);
+            ripple.setAttribute('data-y', relativeY);
+
+            // Set ripple position
+            var rippleStyle = {
+                'top': relativeY+'px',
+                'left': relativeX+'px'
+            };
+            
+            ripple.className = ripple.className + ' waves-notransition';
+            ripple.setAttribute('style', convertStyle(rippleStyle));
+            ripple.className = ripple.className.replace('waves-notransition', '');
+
+            // Scale the ripple
+            rippleStyle['-webkit-transform'] = scale;
+            rippleStyle['-moz-transform'] = scale;
+            rippleStyle['-ms-transform'] = scale;
+            rippleStyle['-o-transform'] = scale;
+            rippleStyle.transform = scale;
+            rippleStyle.opacity   = '1';
+
+            rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
+            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
+            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
+            rippleStyle['transition-duration']         = Effect.duration + 'ms';
+
+            ripple.setAttribute('style', convertStyle(rippleStyle));
+        },
+
+        hide: function(e) {
+            TouchHandler.touchup(e);
+
+            var el = this;
+            var width = el.clientWidth * 1.4;
+            
+            // Get first ripple
+            var ripple = null;
+            var ripples = el.getElementsByClassName('waves-ripple');
+            if (ripples.length > 0) {
+                ripple = ripples[ripples.length - 1];
+            } else {
+                return false;
+            }
+
+            var relativeX   = ripple.getAttribute('data-x');
+            var relativeY   = ripple.getAttribute('data-y');
+            var scale       = ripple.getAttribute('data-scale');
+
+            // Get delay beetween mousedown and mouse leave
+            var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
+            var delay = 350 - diff;
+
+            if (delay < 0) {
+                delay = 0;
+            }
+
+            // Fade out ripple after delay
+            setTimeout(function() {
+                var style = {
+                    'top': relativeY+'px',
+                    'left': relativeX+'px',
+                    'opacity': '0',
+
+                    // Duration
+                    '-webkit-transition-duration': Effect.duration + 'ms',
+                    '-moz-transition-duration': Effect.duration + 'ms',
+                    '-o-transition-duration': Effect.duration + 'ms',
+                    'transition-duration': Effect.duration + 'ms',
+                    '-webkit-transform': scale,
+                    '-moz-transform': scale,
+                    '-ms-transform': scale,
+                    '-o-transform': scale,
+                    'transform': scale,
+                };
+
+                ripple.setAttribute('style', convertStyle(style));
+
+                setTimeout(function() {
+                    try {
+                        el.removeChild(ripple);
+                    } catch(e) {
+                        return false;
+                    }
+                }, Effect.duration);
+            }, delay);
+        },
+
+        // Little hack to make <input> can perform waves effect
+        wrapInput: function(elements) {
+            for (var a = 0; a < elements.length; a++) {
+                var el = elements[a];
+                
+                if (el.tagName.toLowerCase() === 'input') {
+                    var parent = el.parentNode;
+
+                    // If input already have parent just pass through
+                    if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
+                        continue;
+                    }
+
+                    // Put element class and style to the specified parent
+                    var wrapper = document.createElement('i');
+                    wrapper.className = el.className + ' waves-input-wrapper';
+
+                    var elementStyle = el.getAttribute('style');
+
+                    if (!elementStyle) {
+                        elementStyle = '';
+                    }
+
+                    wrapper.setAttribute('style', elementStyle);
+                    
+                    el.className = 'waves-button-input';
+                    el.removeAttribute('style');
+
+                    // Put element as child
+                    parent.replaceChild(wrapper, el);
+                    wrapper.appendChild(el);
+                }
+            }
+        }
+    };
+
+
+    /**
+     * Disable mousedown event for 500ms during and after touch
+     */
+    var TouchHandler = {
+        /* uses an integer rather than bool so there's no issues with
+         * needing to clear timeouts if another touch event occurred
+         * within the 500ms. Cannot mouseup between touchstart and
+         * touchend, nor in the 500ms after touchend. */
+        touches: 0,
+        allowEvent: function(e) {
+            var allow = true;
+
+            if (e.type === 'touchstart') {
+                TouchHandler.touches += 1; //push
+            } else if (e.type === 'touchend' || e.type === 'touchcancel') {
+                setTimeout(function() {
+                    if (TouchHandler.touches > 0) {
+                        TouchHandler.touches -= 1; //pop after 500ms
+                    }
+                }, 500);
+            } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
+                allow = false;
+            }
+
+            return allow;
+        },
+        touchup: function(e) {
+            TouchHandler.allowEvent(e);
+        }
+    };
+
+
+    /**
+     * Delegated click handler for .waves-effect element.
+     * returns null when .waves-effect element not in "click tree"
+     */
+    function getWavesEffectElement(e) {
+        if (TouchHandler.allowEvent(e) === false) {
+            return null;
+        }
+
+        var element = null;
+        var target = e.target || e.srcElement;
+
+        while (target.parentElement !== null) {
+            if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
+                element = target;
+                break;
+            } else if (target.classList.contains('waves-effect')) {
+                element = target;
+                break;
+            }
+            target = target.parentElement;
+        }
+
+        return element;
+    }
+
+    /**
+     * Bubble the click and show effect if .waves-effect elem was found
+     */
+    function showEffect(e) {
+        var element = getWavesEffectElement(e);
+
+        if (element !== null) {
+            Effect.show(e, element);
+
+            if ('ontouchstart' in window) {
+                element.addEventListener('touchend', Effect.hide, false);
+                element.addEventListener('touchcancel', Effect.hide, false);
+            }
+
+            element.addEventListener('mouseup', Effect.hide, false);
+            element.addEventListener('mouseleave', Effect.hide, false);
+        }
+    }
+
+    Waves.displayEffect = function(options) {
+        options = options || {};
+
+        if ('duration' in options) {
+            Effect.duration = options.duration;
+        }
+        
+        //Wrap input inside <i> tag
+        Effect.wrapInput($$('.waves-effect'));
+        
+        if ('ontouchstart' in window) {
+            document.body.addEventListener('touchstart', showEffect, false);
+        }
+        
+        document.body.addEventListener('mousedown', showEffect, false);
+    };
+
+    /**
+     * Attach Waves to an input element (or any element which doesn't
+     * bubble mouseup/mousedown events).
+     *   Intended to be used with dynamically loaded forms/inputs, or
+     * where the user doesn't want a delegated click handler.
+     */
+    Waves.attach = function(element) {
+        //FUTURE: automatically add waves classes and allow users
+        // to specify them with an options param? Eg. light/classic/button
+        if (element.tagName.toLowerCase() === 'input') {
+            Effect.wrapInput([element]);
+            element = element.parentElement;
+        }
+
+        if ('ontouchstart' in window) {
+            element.addEventListener('touchstart', showEffect, false);
+        }
+
+        element.addEventListener('mousedown', showEffect, false);
+    };
+
+    return Waves;
+});

www/lib/waves/src/less/waves.less

@@ -0,0 +1,161 @@
+
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+
+.waves-transition (@transition) {
+    -webkit-transition: @transition;
+    -moz-transition: @transition; 
+    -o-transition: @transition;
+    transition: @transition;  
+}
+
+.waves-transform(@string) {
+    -webkit-transform: @string;
+    -moz-transform: @string;
+    -ms-transform: @string;
+    -o-transform: @string;
+    transform: @string;
+}
+
+.waves-box-shadow(@shadow) {
+    -webkit-box-shadow: @shadow;
+    box-shadow: @shadow;
+}
+
+.waves-effect {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    
+    .waves-ripple {
+        position: absolute;
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        margin-top:-50px;
+        margin-left:-50px;
+        opacity: 0;
+        background: rgba(0,0,0,0.2);
+        @gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient(@gradient);
+        background: -o-radial-gradient(@gradient);
+        background: -moz-radial-gradient(@gradient);
+        background: radial-gradient(@gradient);
+        .waves-transition(all 0.5s ease-out);
+        -webkit-transition-property: -webkit-transform, opacity;
+        -moz-transition-property: -moz-transform, opacity;
+        -o-transition-property: -o-transform, opacity;
+        transition-property: transform, opacity;
+        .waves-transform(scale(0));
+        pointer-events: none;
+    }
+
+    &.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+        @gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient(@gradient);
+        background: -o-radial-gradient(@gradient);
+        background: -moz-radial-gradient(@gradient);
+        background: radial-gradient(@gradient);
+    }
+    
+    &.waves-classic .waves-ripple {
+        background: rgba(0,0,0,0.2);
+    }
+    
+    &.waves-classic.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+    }
+}
+
+.waves-notransition {
+    .waves-transition(none ~'!important');
+}
+
+.waves-button, 
+.waves-circle {
+    .waves-transform(translateZ(0));
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 1em;
+    line-height:1em;
+    text-align: center;
+    text-decoration: none;
+    z-index: 1;
+}
+
+.waves-button {
+    padding: 0.85em 1.1em;
+    border-radius: 0.2em;
+}
+
+.waves-button-input {
+    margin: 0;
+    padding: 0.85em 1.1em;
+}
+
+.waves-input-wrapper {
+    border-radius: 0.2em;
+    vertical-align: bottom;
+
+    &.waves-button {
+        padding: 0;
+    }
+
+    .waves-button-input {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+.waves-circle {
+    text-align: center;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    border-radius: 50%;
+}
+
+.waves-float {
+    -webkit-mask-image: none;
+    .waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+
+    &:active {
+        .waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
+    }
+}
+
+.waves-block {
+    display: block;
+}
+
+/* Firefox Bug: link not triggered */
+a.waves-effect .waves-ripple {
+    z-index: -1;
+}

www/lib/waves/src/sass/waves.sass

@@ -0,0 +1,131 @@
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE
+
+=waves-transition($transition)
+  -webkit-transition: $transition
+  -moz-transition: $transition
+  -o-transition: $transition
+  transition: $transition
+
+=waves-transform($string)
+  -webkit-transform: $string
+  -moz-transform: $string
+  -ms-transform: $string
+  -o-transform: $string
+  transform: $string
+
+=waves-box-shadow($shadow)
+  -webkit-box-shadow: $shadow
+  box-shadow: $shadow
+
+.waves-effect
+  position: relative
+  cursor: pointer
+  display: inline-block
+  overflow: hidden
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+  -webkit-tap-highlight-color: transparent
+  .waves-ripple
+    position: absolute
+    border-radius: 50%
+    width: 100px
+    height: 100px
+    margin-top: -50px
+    margin-left: -50px
+    opacity: 0
+    background: rgba(0, 0, 0, 0.2)
+    $gradient: rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%
+    background: -webkit-radial-gradient($gradient)
+    background: -o-radial-gradient($gradient)
+    background: -moz-radial-gradient($gradient)
+    background: radial-gradient($gradient)
+    +waves-transition(all 0.5s ease-out)
+    -webkit-transition-property: -webkit-transform, opacity
+    -moz-transition-property: -moz-transform, opacity
+    -o-transition-property: -o-transform, opacity
+    transition-property: transform, opacity
+    +waves-transform(scale(0))
+    pointer-events: none
+  &.waves-light .waves-ripple
+    background: rgba(255, 255, 255, 0.4)
+    $gradient: rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%
+    background: -webkit-radial-gradient($gradient)
+    background: -o-radial-gradient($gradient)
+    background: -moz-radial-gradient($gradient)
+    background: radial-gradient($gradient)
+  &.waves-classic .waves-ripple
+    background: rgba(0, 0, 0, 0.2)
+  &.waves-classic.waves-light .waves-ripple
+    background: rgba(255, 255, 255, 0.4)
+
+.waves-notransition
+  +waves-transition(none #{"!important"})
+
+.waves-button,
+.waves-circle
+  +waves-transform(translateZ(0))
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input
+  white-space: nowrap
+  vertical-align: middle
+  cursor: pointer
+  border: none
+  outline: none
+  color: inherit
+  background-color: rgba(0, 0, 0, 0)
+  font-size: 1em
+  line-height: 1em
+  text-align: center
+  text-decoration: none
+  z-index: 1
+
+.waves-button
+  padding: 0.85em 1.1em
+  border-radius: 0.2em
+
+.waves-button-input
+  margin: 0
+  padding: 0.85em 1.1em
+
+.waves-input-wrapper
+  border-radius: 0.2em
+  vertical-align: bottom
+  &.waves-button
+    padding: 0
+  .waves-button-input
+    position: relative
+    top: 0
+    left: 0
+    z-index: 1
+
+.waves-circle
+  text-align: center
+  width: 2.5em
+  height: 2.5em
+  line-height: 2.5em
+  border-radius: 50%
+
+.waves-float
+  -webkit-mask-image: none
+  +waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12))
+  &:active
+    +waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.3))
+
+.waves-block
+  display: block
+
+/* Firefox Bug: link not triggered
+a.waves-effect .waves-ripple
+  z-index: -1

www/lib/waves/src/scss/waves.scss

@@ -0,0 +1,161 @@
+
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+
+@mixin waves-transition($transition){
+    -webkit-transition: $transition;
+    -moz-transition: $transition; 
+    -o-transition: $transition;
+    transition: $transition;  
+}
+
+@mixin waves-transform($string){
+    -webkit-transform: $string;
+    -moz-transform: $string;
+    -ms-transform: $string;
+    -o-transform: $string;
+    transform: $string;
+}
+
+@mixin waves-box-shadow($shadow){
+    -webkit-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
+
+.waves-effect {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    
+    .waves-ripple {
+        position: absolute;
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        margin-top:-50px;
+        margin-left:-50px;
+        opacity: 0;
+        background: rgba(0,0,0,0.2);
+        $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient($gradient);
+        background: -o-radial-gradient($gradient);
+        background: -moz-radial-gradient($gradient);
+        background: radial-gradient($gradient);
+        @include waves-transition(all 0.5s ease-out);
+        -webkit-transition-property: -webkit-transform, opacity;
+        -moz-transition-property: -moz-transform, opacity;
+        -o-transition-property: -o-transform, opacity;
+        transition-property: transform, opacity;
+        @include waves-transform(scale(0));
+        pointer-events: none;
+    }
+
+    &.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+        $gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient($gradient);
+        background: -o-radial-gradient($gradient);
+        background: -moz-radial-gradient($gradient);
+        background: radial-gradient($gradient);
+    }
+    
+    &.waves-classic .waves-ripple {
+        background: rgba(0,0,0,0.2);
+    }
+    
+    &.waves-classic.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+    }
+}
+
+.waves-notransition {
+    @include waves-transition(none #{"!important"});
+}
+
+.waves-button, 
+.waves-circle {
+    @include waves-transform(translateZ(0));
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 1em;
+    line-height:1em;
+    text-align: center;
+    text-decoration: none;
+    z-index: 1;
+}
+
+.waves-button {
+    padding: 0.85em 1.1em;
+    border-radius: 0.2em;
+}
+
+.waves-button-input {
+    margin: 0;
+    padding: 0.85em 1.1em;
+}
+
+.waves-input-wrapper {
+    border-radius: 0.2em;
+    vertical-align: bottom;
+
+    &.waves-button {
+        padding: 0;
+    }
+
+    .waves-button-input {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+.waves-circle {
+    text-align: center;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    border-radius: 50%;
+}
+
+.waves-float {
+    -webkit-mask-image: none;
+    @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+
+    &:active {
+        @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
+    }
+}
+
+.waves-block {
+    display: block;
+}
+
+/* Firefox Bug: link not triggered */
+a.waves-effect .waves-ripple {
+    z-index: -1;
+}

www/lib/waves/src/stylus/waves.styl

@@ -0,0 +1,116 @@
+lesscss-percentage(n)
+  (n * 100)%
+/*!
+ * Waves v0.6.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+waves-transition(transition)
+  -webkit-transition transition
+  -moz-transition transition
+  -o-transition transition
+  transition transition
+waves-transform(string)
+  -webkit-transform string
+  -moz-transform string
+  -ms-transform string
+  -o-transform string
+  transform string
+waves-box-shadow(shadow)
+  -webkit-box-shadow shadow
+  box-shadow shadow
+.waves-effect
+  position relative
+  cursor pointer
+  display inline-block
+  overflow hidden
+  -webkit-user-select none
+  -moz-user-select none
+  -ms-user-select none
+  user-select none
+  -webkit-tap-highlight-color transparent
+  .waves-ripple
+    position absolute
+    border-radius 50%
+    width 100px
+    height 100px
+    margin-top -50px
+    margin-left -50px
+    opacity 0
+    background rgba(0, 0, 0, 0.2)
+    gradient = rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%
+    background -webkit-radial-gradient(gradient)
+    background -o-radial-gradient(gradient)
+    background -moz-radial-gradient(gradient)
+    background radial-gradient(gradient)
+    waves-transition(all 0.5s ease-out)
+    -webkit-transition-property -webkit-transform, opacity
+    -moz-transition-property -moz-transform, opacity
+    -o-transition-property -o-transform, opacity
+    transition-property transform, opacity
+    waves-transform(scale(0))
+    pointer-events none
+  &.waves-light .waves-ripple
+    background rgba(255, 255, 255, 0.4)
+    gradient = rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%
+    background -webkit-radial-gradient(gradient)
+    background -o-radial-gradient(gradient)
+    background -moz-radial-gradient(gradient)
+    background radial-gradient(gradient)
+  &.waves-classic .waves-ripple
+    background rgba(0, 0, 0, 0.2)
+  &.waves-classic.waves-light .waves-ripple
+    background rgba(255, 255, 255, 0.4)
+.waves-notransition
+  waves-transition(none unquote('!important'))
+.waves-button, .waves-circle
+  waves-transform(translateZ(0))
+  -webkit-mask-image -webkit-radial-gradient(circle, rgb(255, 255, 255, 1) 100%, rgb(0, 0, 0, 1) 100%)
+.waves-button, .waves-button:hover, .waves-button:visited, .waves-button-input
+  white-space nowrap
+  vertical-align middle
+  cursor pointer
+  border none
+  outline none
+  color inherit
+  background-color rgba(0, 0, 0, 0)
+  font-size 1em
+  line-height 1em
+  text-align center
+  text-decoration none
+  z-index 1
+.waves-button
+  padding 0.85em 1.1em
+  border-radius 0.2em
+.waves-button-input
+  margin 0
+  padding 0.85em 1.1em
+.waves-input-wrapper
+  border-radius 0.2em
+  vertical-align bottom
+  &.waves-button
+    padding 0
+  .waves-button-input
+    position relative
+    top 0
+    left 0
+    z-index 1
+.waves-circle
+  text-align center
+  width 2.5em
+  height 2.5em
+  line-height 2.5em
+  border-radius 50%
+.waves-float
+  -webkit-mask-image none
+  waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12))
+  &:active
+    waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.3))
+.waves-block
+  display block
+/* Firefox Bug: link not triggered */
+a.waves-effect .waves-ripple
+  z-index -1