added button for clear and add line

dist/index.html

@@ -20,6 +20,11 @@
         <button id="btn-toggle-scroll">Auto scroll: <span id="scroll-state" style="color: #27ae60; font-weight: bold;">on</span></button>
     </div>
 
+    <div class="actions-container">
+        <button id="btn-clear-console">Clear</button>
+        <button id="btn-add-line">Line</button>
+    </div>
+
     <div class="checkbox-container">
         <div class="checkbox-container-inside">
             <input type="checkbox" id="checkbox-alpha" name="alpha" value="alpha" checked>

dist/script.js

@@ -152,10 +152,6 @@ function formatMessageType(messageType) {
     return clampOn() + "<span style='color: " + messageTypesColors[messageType] + "'>" + messageTypes[messageType] + "</span>" + clampClosed()
 }
 
-function handleScrollState() {
-    console.log("here")
-}
-
 let scrollState = document.getElementById('scroll-state')
 
 document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
@@ -172,6 +168,14 @@ document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
     }
 })
 
+document.getElementById('btn-clear-console').addEventListener('click', () => {
+    messages.innerHTML = ""
+})
+
+document.getElementById('btn-add-line').addEventListener('click', () => {
+    addCustomMessage("<span style='color: #7f8c8d'>–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––</span>")
+})
+
 // websocket
 
 let ws = null

dist/style.css

@@ -34,7 +34,7 @@ ul {
 
 .scroll-container {
     position: absolute;
-    top: 10px;
+    top: 0;
     position: -webkit-sticky; /* Safari */
     position: sticky;
 }
@@ -46,19 +46,19 @@ button {
     background-color: #34495e;
     border: none;
     color: white;
-    padding: 15px 32px;
+    padding: 8px 18px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
-    border-radius: 14px;
+    border-radius: 6px;
 }
 
 .checkbox-container{
     position: absolute;
-    top: 10px;
+    top: 0;
     position: -webkit-sticky; /* Safari */
     position: sticky;
     color: #fff;
@@ -66,7 +66,7 @@ button {
 
 .checkbox-container .checkbox-container-inside {
     position: absolute;
-    top: 90px;
+    top: 110px;
     right: 0;
 }
 
@@ -83,7 +83,7 @@ input[type="checkbox" i] {
 
 .viewers-container {
     position: absolute;
-    top: 10px;
+    top: 0;
     position: -webkit-sticky; /* Safari */
     position: sticky;
     color: #fff;
@@ -91,13 +91,13 @@ input[type="checkbox" i] {
 
 .viewers-container span {
     position: absolute;
-    top: 65px;
+    top: 85px;
     right: 0;
 }
 
 .connection-status-container {
     position: absolute;
-    top: 10px;
+    top: 0;
     position: -webkit-sticky; /* Safari */
     position: sticky;
     color: #fff;
@@ -105,11 +105,27 @@ input[type="checkbox" i] {
 
 #connection-status {
     position: absolute;
-    top: 16px;
-    right: 180px;
+    top: 10px;
+    right: 150px;
     height: 20px;
     width: 20px;
     background-color: gray;
     border-radius: 50%;
     display: inline-block;
+}
+
+.actions-container {
+    position: absolute;
+    top: 0;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+}
+
+#btn-clear-console {
+    top: 40px;
+    right: 70px;
+}
+
+#btn-add-line {
+    top: 40px;
 }