Add basic UI templates.
Signed-off-by: Jan Losinski <losinski@wh2.tu-dresden.de>
This commit is contained in:
parent
e3743dd6da
commit
c49a4a0816
|
|
@ -0,0 +1,15 @@
|
||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin-bottom: 80px; /* Margin bottom by footer height */
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px; /* Set the fixed height of the footer here */
|
||||||
|
line-height: 60px; /* Vertically center the text there */
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
|
||||||
|
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="{{ static('css/custom.css') }}">
|
||||||
|
|
||||||
|
<title>Wallabag Kindle Consumer</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<h1>Walabag Kindle Consumer</h1>
|
||||||
|
|
||||||
|
<p>This transfers all articles tagged with {{ tags|join(", ") }} in <a
|
||||||
|
href="{{ wallabag_host }}">{{ wallabag_host }}</a>
|
||||||
|
to the given kindle account.</p>
|
||||||
|
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<span class="text-muted">Wallabag-Kindle-Consumer. Source is on
|
||||||
|
<a href="https://github.com/janLo/wallabag-kindle-consumer">Github</a>.</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- Optional JavaScript -->
|
||||||
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
|
||||||
|
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
|
||||||
|
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
|
{% import 'macros.html' as forms %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">Add or edit an account</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form method="post">
|
||||||
|
<div class="row">
|
||||||
|
{{ forms.input('user', "Username", description='Your wallabag username at ' + wallabag_host) }}
|
||||||
|
{{ forms.input('password', "Password", type='password', description='Your wallabag password at ' + wallabag_host + ". The password will not be stored") }}
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{{ forms.input('clientId', "Client id", description='A valid client id') }}
|
||||||
|
{{ forms.input('clientSecret', "Client secret", description='A valid client secret ' + wallabag_host) }}
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{{ forms.input('kindleEmail', "Kindle Email", type='email', description='Your kindle email addess ' + wallabag_host) }}
|
||||||
|
{{ forms.input('notifyEmail', "Alt. Email",type='email', description='An alternative email where we can send any problems. ' + wallabag_host) }}
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg">
|
||||||
|
<button type="submit" class="btn btn-primary">Register</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{% macro input(id, label, type='text', description='', placeholder='') %}
|
||||||
|
<div class="form-group col-lg">
|
||||||
|
<label for="{{ id }}">{{ label }}</label>
|
||||||
|
<input type="{{ type }}" class="form-control form-control-sm" id="{{ id }}" aria-describedby="{{ id }}Help" placeholder="{{ placeholder }}">
|
||||||
|
<small id="{{ id }}Help" class="form-text text-muted">{{ description }}</small>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
|
{% import 'macros.html' as forms %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">Fetch a new Wallabag API token</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
{{ forms.input('user', "Username", description='Your wallabag username at ' + wallabag_host) }}
|
||||||
|
{{ forms.input('password', "Password", type='password', description='Your wallabag password at ' + wallabag_host + ". The password will not be stored") }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg">
|
||||||
|
<button type="submit" class="btn btn-primary">Register</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue