templates: add drag and drop func, use ayu dark

Use a more man-like description

Signed-off-by: Gunwant Jain <mail@wantguns.dev>
This commit is contained in:
Gunwant Jain
2021-07-08 18:49:39 +05:30
parent e77c1a57e4
commit 0cd0d24549
5 changed files with 2057 additions and 540 deletions

View File

@@ -20,7 +20,7 @@
body {
/* Change background color to that of your theme's */
background: #191f26;
background: #0f1419;
padding: 10px;
color: #E6E1CF;
}

View File

@@ -16,7 +16,7 @@ display: flex;
form { flex: 1; }
textarea {
height: 90%;
height: 100%;
width: 100%;
background: none;
@@ -57,18 +57,25 @@ button[type="submit"].hidden { display: none; }
<form action="/submit" method="post">
<textarea name="val" style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
bin(3) Bin Manual bin(3)
bin(3) BIN bin(3)
NAME
bin - A highly opinionated and minamalistic Pastebin
WEB USAGE
Drag a file and drop it here, or
After typing, press the big yellow button to paste, or
Drag a file and drop it here,
or After typing, press the big yellow button to paste, or
Just press Ctrl + Enter once done.
CLI USAGE
curl -Ls -o /dev/null -w %{url_effective} --data-binary @file.txt https://bin.wantguns.dev
curl \
-Ls -o /dev/null \
-w %{url_effective} \
--data-binary @file.txt \
https://bin.wantguns.dev
Better use cases of CLI mentioned at Github
@@ -78,7 +85,7 @@ SEE ALSO
AUTHOR
Gunwant Jain
2021-06-19 bin(3)
2021-06-20 bin(3)
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
spellcheck="false"></textarea>

View File

@@ -1,49 +1,20 @@
{% extends "base" %}
{% block styles %}
/* Use Ayu-Colors by default */
.hljs{display:block;overflow-x:auto;background:#191f26;color:#e6e1cf;padding:.5em}.hljs-comment,.hljs-quote{color:#5c6773;font-style:italic}.hljs-attr,.hljs-attribute,.hljs-link,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#f73}.hljs-builtin-name,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#fe9}.hljs-bullet,.hljs-string{color:#b8cc52}.hljs-built_in,.hljs-section,.hljs-title{color:#ffb454}.hljs-keyword,.hljs-selector-tag,.hljs-symbol{color:#f73}.hljs-name{color:#36a3d9}.hljs-tag{color:#00568d}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#91b362}.hljs-deletion{color:#d96c75}
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: centre;
/* Change color to that of your theme's comment color */
color: #5c6773;
border-right: 20px solid transparent;
vertical-align: top;
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px;
}
body {
padding: 10px;
}
pre {
margin: 0px;
font-family: monospace;
}
{% endblock styles %}
{% block head %}
{% if theme %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/build/styles/{{ theme }}.min.css">
{% endif %}
{% endblock head %}
{% block body %}
<pre><code>{{ code }}</code></pre>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/build/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>
{{ body | safe }}
{% endblock body %}