From 150bade1e5d1171f0e8055be7240f15072805d8a Mon Sep 17 00:00:00 2001
From: Gunwant Jain <mail@wantguns.dev>
Date: Sat, 19 Jun 2021 08:02:41 +0530
Subject: [PATCH] css: change placeholder and made the UI generally tighter
 Also I have encouraged the user to change their monospace font accordingly
 for the best personal satisfaction.

Signed-off-by: Gunwant Jain <mail@wantguns.dev>
---
 templates/base.html.tera  |  9 +----
 templates/index.html.tera | 77 +++++++++++++++++----------------------
 2 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/templates/base.html.tera b/templates/base.html.tera
index f7f9b1e..4dea323 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -12,22 +12,17 @@
 
     <style>
 
-      @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@460&display=swap');
-
       /* fill entire page */
       code {
-          padding: 0px;
           background: transparent !important;
-          font-family: 'Fira Code', monospace;
+          font-family: monospace;
       }
 
       body {
           /* Change background color to that of your theme's */
           background: #191f26;
-          padding: 20px 50px;
-          margin: 0px;
+          padding: 10px;
           color: #E6E1CF;
-          /* color: #5c6773; */
       }
 
       ::selection {
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 3b52c45..ed85a9d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -9,7 +9,6 @@ overflow-y:hidden;
 body {
 height: 100vh;
 font-family: monospace;
-padding: 3rem;
 
 display: flex;
 }
@@ -23,13 +22,11 @@ width: 100%;
 background: none;
 border: none;
 
-padding-left: 10px
-
 resize: none;
 overflow: auto;
 
 color: inherit;
-font-family: 'Fira Code', monospace;
+font-family: monospace;
 line-height: inherit;
 }
 
@@ -49,53 +46,40 @@ font-size: 0rem;
 cursor: pointer;
 }
 
-textarea:focus, input:focus {
-outline: none;
-}
-
 *:focus {
 outline: none;
 }
 
 button[type="submit"].hidden { display: none; }
-
-#drop_zone {
-border: 1px dashed grey;
-width: 100%;
-height: 100%;
-}
 {% endblock styles %}
 
 {% block body %}
 <form action="/submit" method="post">
-    <textarea style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
+    <textarea name="val" style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
 
-                                    ========
+bin(3)                            Bin Manual                              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 
-
-    Just press Ctrl + Enter once done.
-
+        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
 
-    Better use-cases of CLI mentioned at Github.
+SEE ALSO
+        github.com/wantguns/bin
 
-                                    ========
+AUTHOR
+        Gunwant Jain
 
-open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
+                                    2021-06-19                            bin(3)
+" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
         spellcheck="false"></textarea>
 
     <button type="submit" title="Paste">&#x2398</button>
@@ -106,6 +90,16 @@ open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autoco
     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();
+        }
+    });
+
     async function postData(url = '', data) {
         const response = await fetch(url, {
             method: 'POST',
@@ -117,16 +111,6 @@ open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autoco
         return response;
     }
 
-    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();
-        }
-    });
-
     function dropHandler(ev) {
         console.log('File(s) dropped');
 
@@ -155,5 +139,12 @@ open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autoco
             }
         }
     }
+
+    function dragOverHandler(ev) {
+        console.log('File(s) in drop zone');
+
+        ev.preventDefault();
+    }
+
 </script>
 {% endblock body %}
\ No newline at end of file