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