mustache templating, reorganisation and cleanup of code

This commit is contained in:
2018-10-14 12:53:35 +02:00
parent 527201ad89
commit 687dec948e
11 changed files with 215 additions and 284 deletions

View File

@@ -0,0 +1,24 @@
<div class="box">
<h1 class="title">Upload a Dockerfile to toast</h1>
<p>Choose the file in your computer and click 'Submit' to proceed to validation.</p>
<form action="dockerfile" class="form-shell" enctype="multipart/form-data" method="post">
<div class="file has-label is-fullwidth">
<label class="file-label">
<input class="file-input inputfile inputfile-2" id="file" type="file" />
<label for="file"><span id="filename">Choose a Dockerfile...</span></label>
<span class="file-cta"><span class="file-icon"><i class="fa fa-upload"></i></span><span class="file-label">Upload</span></span>
</label></div>
<div class="field">
<div class="control">
<input class="button is-block is-info is-large is-fullwidth" name="submit" type="submit" value="submit" />
</div></div>
</form>
<script>
var file = document.getElementById("file");
file.onchange = function(){
if(file.files.length > 0) {
document.getElementById('filename').innerHTML = file.files[0].name;
}
};
</script>
</div>

View File

@@ -0,0 +1,28 @@
<footer class="footer">
<div class="content has-text-centered">
<p class="has-text-grey">toaster.do transforms your Docker prototype into an installable <a href="https://devuan.org">Devuan GNU+Linux</a> image, choose any supported target architecture.</p>
<div class="columns is-variable is-8">
<div class="column is-one-fifth">
<figure class="image"><img alt="European project DECODE (H2020 nr. 732546)" src="/static/img/ec_logo.png" /></figure>
</div>
<div class="column is-one-fifth">
<a href="https://decodeproject.eu">
<figure class="image"><img alt="DECODE project" src="/static/img/decode_logo.png" /></figure>
</a>
</div>
<div class="column is-one-fifth">
<a href="https://www.dyne.org">
<figure class="image"><img alt="Software by Dyne.org" src="/static/img/swbydyne.png" title="Software by Dyne.org" /></figure>
</a>
</div>
<div class="column is-one-fifth">
<a href="https://devuan.org">
<figure class="image"><img alt="powered by Devuan GNU+Linux" src="/static/img/devuan_logo.png" /></figure>
</a>
</div>
<div class="column is-one-fifth">
<figure class="image"><img alt="Affero GPLv3 License" src="/static/img/AGPLv3.png" title="Affero GPLv3 License" /></figure>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,27 @@
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<h3 class="title has-text-grey">toaster.do</h3>
<h4 class="subtitle has-text-grey">from Docker to VM in a few clicks, powered by <a href="https://decodeproject.eu">DECODEproject.EU</a></h4>
<p class="subtitle has-text-grey">please login to operate</p>
<div class="box">
<figure class="avatar"><img src="/static/img/cafudda.jpg" /></figure>
<form action="/login" method="post">
<div class="field">
<div class="control has-icons-left">
<input class="input is-large" name="username" placeholder="Email" type="email" /><span class="icon is-small is-left"><i class="fa fa-envelope fa-xs"></i></span></div>
</div>
<div class="field">
<div class="control has-icons-left"><input class="input is-large" name="password" placeholder="Password" type="password" /><span class="icon is-small is-left"><i class="fa fa-lock fa-xs"></i></span></div>
</div>
<div class="field">
<p class="control"><input class="button is-block is-info is-large has-icons-left is-fullwidth" type="submit" value="Login" /></p>
</div>
</form>
</div>
<p class="subtitle has-text-grey">...or <a href="/signup">signup for a new account</a></p>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,32 @@
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<h3 class="title has-text-grey">toaster.do</h3>
<h4 class="subtitle has-text-grey">sign up for a new account</h4>
<div class="box">
<figure class="avatar"><img src="/static/img/cafudda.jpg" /></figure>
<form action="/signup" method="post">
<div class="field">
<div class="control"><input class="input" name="name" placeholder="Name" type="text" /></div>
</div>
<div class="field">
<div class="control"><input class="input" name="email" placeholder="Email" type="email" /></div>
</div>
<div class="field">
<div class="control"><input class="input" name="password" placeholder="Password" type="password" /></div>
</div>
<div class="field">
<div class="control"><input class="input" name="repeat-password" placeholder="Repeat password" type="password" /></div>
</div>
<div class="field">
<div class="control"><input class="button is-block is-info is-large is-fullwidth" type="submit" value="Sign In" /></div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,15 @@
<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>toaster.do</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" />
<script src="/static/js/codemirror.js" type="text/javascript"></script>
<script src="/static/js/codemirror-simple.js" type="text/javascript"></script>
<script src="/static/js/codemirror-dockerfile.js" type="text/javascript"></script>
<link href="/static/css/bulma.min.css" rel="stylesheet" type="text/css" />
<link href="/static/css/json-html.css" rel="stylesheet" type="text/css" />
<link href="/static/css/codemirror.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="/static/css/toaster.css" rel="stylesheet" type="text/css" />
</head>