bin/templates/index.html.tera
Gunwant Jain 594f89385b templates: fix cascaded scrolling, add more aez
Signed-off-by: Gunwant Jain <mail@wantguns.dev>
2021-01-09 08:05:53 +05:30

109 lines
2.1 KiB
Plaintext

{% extends "base" %}
{% block styles %}
html, body {
overflow-y:hidden;
}
body {
height: 100vh;
font-family: monospace;
padding: 3rem;
display: flex;
}
form { flex: 1; }
textarea {
height: 90%;
width: 100%;
background: none;
border: none;
padding-left: 10px
resize: none;
overflow: auto;
color: inherit;
font-family: 'Fira Code', monospace;
line-height: inherit;
}
button[type="submit"] {
position: absolute;
bottom: 1rem;
right: 1rem;
height: 4rem;
width: 4rem;
border: none;
border-radius: 50%;
background: #F29718;
font-size: 0rem;
cursor: pointer;
}
textarea:focus, input:focus{
outline: none;
}
*:focus {
outline: none;
}
button[type="submit"].hidden { display: none; }
{% endblock styles %}
{% block body %}
<form action="/submit" method="post">
<textarea name="val" placeholder="
========
WEB USAGE
---------
Press the big yellow button to paste.
or
Just press Ctrl + Enter once done.
CLI USAGE
---------
curl --data-binary @file.txt https://bin.wantguns.dev
========
open-sourced at: github.com/wantguns/bin" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
<button type="submit" title="Paste">&#x2398</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.key === 'Enter' && e.ctrlKey) {
form.submit();
}
});
</script>
{% endblock body %}