Appearance updates

+ Improved scroll bar look
+ Implemented a preview mode

static/css/main.css

@@ -35,6 +35,29 @@ main#main-card {
     right: .5rem;
 }
 
+.hidden {
+    display: none !important;
+}
+
+#pad-content-area {
+    position: relative;
+
+    display: flex;
+    flex-flow: column;
+}
+
+#pad-content-toggler {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+
+    user-select: none;
+}
+
+#textarea-preview {
+    max-height: calc(20rem + 30vh);
+    overflow: auto;
+}
 
 textarea:focus,
 input[type="text"]:focus,
@@ -55,4 +78,28 @@ input[type="color"]:focus,
   border-color: none;
   box-shadow: none;
   outline: 0 none;
-}
+}
+
+
+/* ===== Scrollbar CSS ===== */
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #3b3b3b #ffffff00;
+  }
+
+  /* Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #ffffff00;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: #3b3b3b;
+    border-radius: 2px;
+    border: 1px solid #ffffff00;
+  }

static/js/pad-scripts.js

@@ -16,6 +16,11 @@ function sendMyData(el) {
 
     el.setAttribute(`readonly`, `1`);
 
+    const textareaPreview = document.getElementById(`textarea-preview`)
+    if ( !!textareaPreview ) {
+        textareaPreview.textContent = el.value;
+    }
+
     formData.set("content", el.value);
 
     updateStatus(`Attempting to save...`, `text-warning`);
@@ -184,11 +189,39 @@ function generateQRCode() {
     MicroModal.show(`qrmodal`)
 }
 
-document.addEventListener(`DOMContentLoaded`, e => {
+function toggleTextareaPreview() {
+    setTextareaPreview( !document.getElementById(`pad-content-toggler`).classList.contains(`read-only`) )
+}
 
-    { // Textarea Focusing
-        const textarea = document.getElementById(`pad-content`);
+// t == true - Read Only
+// t == false - Edit mode
+function setTextareaPreview( t = true ) {
+    const prev     = document.getElementById(`textarea-preview`)
+    const textarea = document.getElementById(`pad-content`);
+    const toggler  = document.getElementById(`pad-content-toggler`);
 
+    const togglerEdit = toggler.querySelector(`.edit-content-text`);
+    const togglerView = toggler.querySelector(`.view-content-text`);
+
+    if ( t ) {
+        // Toggle read only
+        prev.classList.remove(`hidden`)
+        toggler.classList.add(`read-only`);
+
+        togglerEdit.classList.remove(`hidden`);
+        togglerView.classList.add(`hidden`);
+
+        textarea.classList.add(`hidden`);
+    } else {
+        // Toggle edit mode
+        prev.classList.add(`hidden`)
+        toggler.classList.remove(`read-only`);
+
+        togglerEdit.classList.add(`hidden`);
+        togglerView.classList.remove(`hidden`);
+
+
+        textarea.classList.remove(`hidden`);
         // Focus
         textarea.focus();
         // Scroll
@@ -197,6 +230,15 @@ document.addEventListener(`DOMContentLoaded`, e => {
         textarea.setSelectionRange(textarea.value.length, textarea.value.length);
     }
 
+}
+
+document.addEventListener(`DOMContentLoaded`, e => {
+
+    { // Textarea Handling
+        const textarea = document.getElementById(`pad-content`);
+        setTextareaPreview( !!textarea.value );
+    }
+
     { // Archives
         renderArchivesSelection()
     }