mirror of https://github.com/w4/bin.git
67 lines
1.6 KiB
HTML
67 lines
1.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block styles %}
|
|
form { flex: 1; }
|
|
|
|
textarea {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
background: none;
|
|
border: none;
|
|
outline: 0;
|
|
padding: 0;
|
|
|
|
resize: none;
|
|
overflow: auto;
|
|
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
line-height: inherit;
|
|
}
|
|
|
|
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.key === 'Enter' && (e.metaKey || e.ctrlKey || e.altKey)) {
|
|
form.submit();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock content %}
|