Move business logic out of main, use askama and bound the ENTRIES
This commit is contained in:
parent
3093b06b4e
commit
9d4b3ecafc
8 changed files with 156 additions and 578 deletions
29
templates/base.html
Normal file
29
templates/base.html
Normal file
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>bin.</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body { margin: 0; }
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
padding: 2rem;
|
||||
background: #263238;
|
||||
color: #B0BEC5;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
{% block styles %}
|
||||
{% endblock styles %}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</body>
|
||||
</html>
|
59
templates/index.html
Normal file
59
templates/index.html
Normal file
|
@ -0,0 +1,59 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block styles %}
|
||||
form { flex: 1; }
|
||||
|
||||
textarea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-family: monospace;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
background: #2196F3;
|
||||
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"].hidden { display: none; }
|
||||
{% endblock styles %}
|
||||
|
||||
{% block content %}
|
||||
<form action="/" method="post">
|
||||
<textarea name="val" placeholder="bin something" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
|
||||
|
||||
<button type="submit" title="⌘+⏎">✎</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const form = document.querySelector('form');
|
||||
const input = document.querySelector('textarea');
|
||||
const button = document.querySelector('button[type="submit"]');
|
||||
|
||||
const onInput = () => button.classList.toggle('hidden', !input.value);
|
||||
input.addEventListener('input', onInput);
|
||||
onInput();
|
||||
|
||||
document.body.addEventListener('keydown', (e) => {
|
||||
if (e.keyCode === 13 && e.metaKey) {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
16
templates/paste.html
Normal file
16
templates/paste.html
Normal file
|
@ -0,0 +1,16 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block styles %}
|
||||
pre {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: scroll;
|
||||
font-family: Courier;
|
||||
line-height: 1.1;
|
||||
}
|
||||
{% endblock styles %}
|
||||
|
||||
{% block content %}
|
||||
<pre><code>{{ content|safe }}</code></pre>
|
||||
{% endblock content %}
|
Loading…
Add table
Add a link
Reference in a new issue