From 8dba7b8f4e2e7e4bd72517145afe4bb29196d7e5 Mon Sep 17 00:00:00 2001
From: Peter <62094358+Rogendo@users.noreply.github.com>
Date: Mon, 12 Feb 2024 20:12:43 +0300
Subject: [PATCH] Update index.html

---
 templates/index.html | 109 +++++++++++++------------------------------
 1 file changed, 32 insertions(+), 77 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index f8a1f2a..e487cbe 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,32 +11,41 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </head>
 <body>
+
+<div class="title">
+  <svg viewBox="0 0 640 512" title="robot">
+        <path fill="currentColor" d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z" />
+      </svg>
+  <h3>Chatbot</h3>
+ <div>
+<div id="chatbot" class="main-card collapsed">
+  <button id="chatbot_toggle">
+    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+</svg>
+  </button>
+  <div class="main-title">
+    <div>
+      <svg viewBox="0 0 640 512" title="robot">
+        <path fill="currentColor" d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z" />
+      </svg>
+    </div>
+    <span>
+      <i class="fas fa-bug"></i> Psychiatrist Bot <i class="fas fa-bug"></i>
+
+    </span>
+
+  </div>
   <!-- partial:index.partial.html -->
-  <section class="msger">
-    <header class="msger-header">
-      <div class="msger-header-title">
-          Psychiatrist Bot 
-      </div>
-    </header>
-    <main class="msger-chat">
-      <div class="msg left-msg">
-        <div class="msg-img" style="background-image: url(static/img/mhcicon.png)"></div>
-        
+
+  <main class="msger-chat">
+    <div class="msg left-msg">
+      <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"></div>
+
         <div class="msg-bubble">
           <div class="msg-info">
             <div class="msg-info-name"> Psychiatrist Bot</div>
           
-            <script>
-              function updateTime() {
-                var now = new Date();
-                var hours = now.getHours();
-                var minutes = now.getMinutes();
-                var seconds = now.getSeconds();
-                var timeString = hours + ':' + minutes;
-                document.getElementById('clock').textContent = timeString;
-              }
-              setInterval(updateTime, 1000);
-            </script>
             <div class="msg-info-time"><time id="clock"></time></div>
 
 
@@ -54,61 +63,7 @@
       <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
       <button type="submit" class="msger-send-btn">Send</button>
     </form>
-  </section>
-  <!-- partial -->
   <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
-  <script>
-    const msgerForm = get(".msger-inputarea");
-    const msgerInput = get(".msger-input");
-    const msgerChat = get(".msger-chat");
-    // Icons made by Freepik from www.flaticon.com
-    const BOT_IMG = "static/img/mhcicon.png";
-    const PERSON_IMG = "static/img/person.png";
-    const BOT_NAME = "    Psychiatrist Bot";
-    const PERSON_NAME = "You";
-    msgerForm.addEventListener("submit", event => {
-      event.preventDefault();
-      const msgText = msgerInput.value;
-      if (!msgText) return;
-      appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
-      msgerInput.value = "";
-      botResponse(msgText);
-    });
-    function appendMessage(name, img, side, text) {
-      //   Simple solution for small apps
-      const msgHTML = `
-<div class="msg ${side}-msg">
-  <div class="msg-img" style="background-image: url(${img})"></div>
-  <div class="msg-bubble">
-    <div class="msg-info">
-      <div class="msg-info-name">${name}</div>
-      <div class="msg-info-time">${formatDate(new Date())}</div>
-    </div>
-    <div class="msg-text">${text}</div>
-  </div>
-</div>
-`;
-      msgerChat.insertAdjacentHTML("beforeend", msgHTML);
-      msgerChat.scrollTop += 500;
-    }
-    function botResponse(rawText) {
-      // Bot Response
-      $.get("/get", { msg: rawText }).done(function (data) {
-        console.log(rawText);
-        console.log(data);
-        const msgText = data;
-        appendMessage(BOT_NAME, BOT_IMG, "left", msgText);
-      });
-    }
-    // Utils
-    function get(selector, root = document) {
-      return root.querySelector(selector);
-    }
-    function formatDate(date) {
-      const h = "0" + date.getHours();
-      const m = "0" + date.getMinutes();
-      return `${h.slice(-2)}:${m.slice(-2)}`;
-    }
-  </script>
+  <script src="{{ url_for('static', filename='js/bot.js') }}"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
