{{ define "title" }}Loop{{ end }}
{{ define "styles" }}
    <style type="text/css">
        /* Parallax base styles
        --------------------------------------------- */

        .parallax {
            height: 500px; /* fallback for older browsers */
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-perspective: 300px;
                    perspective: 300px;
            -webkit-perspective-origin-x: 100%;
                    perspective-origin-x: 100%;
        }

        .parallax-group {
            position: relative;
            height: 500px; /* fallback for older browsers */
            height: 100vh;
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
        }

        .parallax-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transform-origin-x: 100%;
                    transform-origin-x: 100%;
        }

        .parallax-layer-fore {
            -webkit-transform: translateZ(90px) scale(.7);
                    transform: translateZ(90px) scale(.7);
            z-index: 1;
        }

        .parallax-layer-base {
            -webkit-transform: translateZ(0);
                    transform: translateZ(0);
            z-index: 4;
        }

        .parallax-layer-back {
            -webkit-transform: translateZ(-300px) scale(2);
                    transform: translateZ(-300px) scale(2);
            z-index: 3;
        }

        .parallax-layer-deep {
            -webkit-transform: translateZ(-600px) scale(3);
                    transform: translateZ(-600px) scale(3);
            z-index: 2;
        }

        /* Debugger styles - used to show the effect
        --------------------------------------------- */

        .debug {
            position: fixed;
            bottom: 0;
            right: 0;
            z-index: 999;
            background: rgba(0,0,0,.85);
            color: #fff;
            padding: .5em;
            /*border-radius: 0 0 5px 5px;*/
        }
        .debug-on .parallax-group {
            -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
                    transform: translate3d(700px, 0, -800px) rotateY(30deg);
        }
        .debug-on .parallax-layer {
            box-shadow: 0 0 0 2px #000;
            opacity: 0.9;
        }
        .parallax-group {
            -webkit-transition: -webkit-transform 0.5s;
                    transition: transform 0.5s;
        }

        /* demo styles
        --------------------------------------------- */

        body, html {
            overflow: hidden;
        }

        body {
            font: 100% / 1.5 Arial;
        }

        * {
            margin:0;
            padding:0;
        }

        .parallax {
            font-size: 200%;
            background: rgb(255, 249, 242);
        }

        /* centre the content in the parallax layers */
        .title {
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
        }

        /* style the groups
        --------------------------------------------- */

        #group1 {
            z-index: 5; /* slide over group 2 */
        }
        #group1 .parallax-layer-base {
            background: rgb(255, 249, 242);
        }

        #group2 {
            z-index: 3; /* slide under groups 1 and 3 */
        }
        #group2 .parallax-layer-back {
            background: rgb(0, 0, 0);
            color: rgb(255, 249, 242);
        }

        #group3 {
            z-index: 4; /* slide over group 2 and 4 */
        }
        #group3 .parallax-layer-base {
            background: rgb(255, 249, 242);
        }

        #group4 {
            z-index: 2; /* slide under group 3 and 5 */
        }
        #group4 .parallax-layer-deep {
            background: rgb(184, 223, 101);
        }

        #group5 {
            z-index: 3; /* slide over group 4 and 6 */
        }
        #group5 .parallax-layer-base {
            background: rgb(214, 229, 100);
        }

        #group6 {
            z-index: 2; /* slide under group 5 and 7 */
        }
        #group6 .parallax-layer-back {
            background: rgb(245, 235, 100);
        }

        #group7 {
            z-index: 3; /* slide over group 7 */
        }
        #group7 .parallax-layer-base {
            background: rgb(255, 241, 100);
        }


        /* misc
        --------------------------------------------- */
        .demo__info {
            position: absolute;
            z-index:100;
            bottom: 1vh;
            top: auto;
            font-size:80%;
            text-align:center;
            width: 100%;
        }

        .fa {
            max-width: 55px;
        }
    </style>
{{end}}
{{ define "content" }}
    <div class="parallax">
        <div id="group1" class="parallax-group">
            <div class="parallax-layer parallax-layer-base">
                <div class="col-sm-6 text-center">
                    <img src="loop.png" alt="loop" class="img-responsive img-circle" style="display: inline;" />
                </div>
                <div class="col-sm-5" style="padding-top: 5em;">
                    <h1>Loop</h1>
                    <p>Shortening the feedback loop in business and life.</p>

                    <form action="" method="post" class="form form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" id="username" name="u" class="form-control" placeholder="Username" required autofocus />
                            </div>
                            <div class="col-sm-6">
                                <input type="password" id="password" name="p" class="form-control" placeholder="Password" required />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-8 col-sm-4">
                                <button class="btn btn-lg btn-primary btn-block" type="submit" title="Sign in">Sign in</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-sm-1">&nbsp;</div>
            </div>
        </div>
        <div id="group2" class="parallax-group">
            <div class="parallax-layer parallax-layer-base">
            </div>
            <div class="parallax-layer parallax-layer-back">
                <div class="title">Features</div>
            </div>
        </div>
        <div id="group3" class="parallax-group">
            <div class="parallax-layer parallax-layer-base">
                <div class="container" style="padding-top: 5em;">
                    <div class="row">
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-cloud-download"></i>
                            <h3>Easy to install</h3>
                            <p>Compiled to a single binary deploying first-time installs and updates is incredibly simple.</p>
                        </div>
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-desktop"></i>
                            <h3>Cross-platform</h3>
                            <p>Loop runs everywhere! Just download the appropriate binary for one of the following platforms: Linux, Mac OS X, or Windows.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-paper-plane"></i>
                            <h3>Lightweight</h3>
                            <p>No additional databases, dependencies on external resources, and on-demand processing keeps minimum requirements low.</p>
                        </div>
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-code"></i>
                            <h3>Open Source</h3>
                            <p>The project is licensed under the GPLv2 and can be tailored to suit your needs.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-edit"></i>
                            <h3>Blogging</h3>
                            <p>Whether it is a simple note, todo list, or marketing for your business blogging is made simple by taking advantage of the simplicity of Markdown and ease of publishing.</p>
                        </div>
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-line-chart"></i>
                            <h3>Metrics</h3>
                            <p>Without understanding where you have started you cannot accurately gauge where you have gone. This is why metrics are stored with every action within the system.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-credit-card"></i>
                            <h3>Payments</h3>
                            <p>Internal invoicing has never been so easy with built-in handling to Stripe.</p>
                        </div>
                        <div class="col-sm-6">
                            <i class="pull-left fa fa-3x fa-archive"></i>
                            <h3>Data storage</h3>
                            <p>Containers can store any file type making it simple to organize and store data privately in the cloud.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="parallax-layer parallax-layer-back"></div>
        </div>
        <div id="group4" class="parallax-group">
            <div class="parallax-layer parallax-layer-base"></div>
            <div class="parallax-layer parallax-layer-deep">
            </div>
        </div>
    </div>

    <div class="debug">
        <label>
            <input id="debugToggle" type="checkbox" />Debug
        </label>
    </div>
{{ end }}
{{ define "scripts" }}
    <script type="text/javascript">
        var debugInput = document.getElementById("debugToggle");
        function updateDebugState() {
            document.body.classList.toggle('debug-on', debugInput.checked);
        }
        debugInput.addEventListener("click", updateDebugState);
        updateDebugState();
    </script>
{{ end }}