暫無描述

default.html 11KB

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