From c476a16ad982e778580d74b8e4120ed29118129a Mon Sep 17 00:00:00 2001
From: RblSb <msrblsb@gmail.com>
Date: Tue, 20 Jun 2023 23:33:13 +0300
Subject: Scroll to chat end button

---
 res/index.html | 45 +++++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

(limited to 'res/index.html')

diff --git a/res/index.html b/res/index.html
index 6310f8b..9ab9d03 100644
--- a/res/index.html
+++ b/res/index.html
@@ -185,29 +185,34 @@
     </ul>
     <!-- Messages -->
     <div id="messagebuffer"></div>
-    <!-- Message input -->
-    <div id="chatbox">
-      <input id="chatline" type="text" placeholder="${chatlinePlaceholder}">
-      <button id="smilesbtn" title="${emotes}">
-        <ion-icon name="happy"></ion-icon>
+    <div id="chat-inputs-wrapper">
+      <button id="scroll-to-chat-end" style="display: none; opacity: 0;" class="active">
+        <ion-icon name="arrow-down" role="img" class="md hydrated" aria-label="arrow down"></ion-icon>
       </button>
-    </div>
-    <div id="smiles-wrap" class="collapsible">
-      <div id="smiles-list"></div>
-    </div>
-    <!-- Guest login -->
-    <div id="guestlogin" style="display: none;">
-      <label>${enterAsGuest}</label>
-      <input id="guestname" type="text" placeholder="${yourName}">
-    </div>
-    <div id="guestpassword" style="display: none;">
-      <label>${enterUserPassword}</label>
-      <div id="passwordbox">
-        <input id="guestpass" type="text" placeholder="${yourPassword}">
-        <button id="guestpass_icon">
-          <ion-icon name="eye"></ion-icon>
+      <!-- Message input -->
+      <div id="chatbox">
+        <input id="chatline" type="text" placeholder="${chatlinePlaceholder}">
+        <button id="smilesbtn" title="${emotes}">
+          <ion-icon name="happy"></ion-icon>
         </button>
       </div>
+      <div id="smiles-wrap" class="collapsible">
+        <div id="smiles-list"></div>
+      </div>
+      <!-- Guest login -->
+      <div id="guestlogin" style="display: none;">
+        <label>${enterAsGuest}</label>
+        <input id="guestname" type="text" placeholder="${yourName}">
+      </div>
+      <div id="guestpassword" style="display: none;">
+        <label>${enterUserPassword}</label>
+        <div id="passwordbox">
+          <input id="guestpass" type="text" placeholder="${yourPassword}">
+          <button id="guestpass_icon">
+            <ion-icon name="eye"></ion-icon>
+          </button>
+        </div>
+      </div>
     </div>
   </aside>
 
-- 
cgit v1.2.3