fix chatbot design

MariferVL · Sep 19, 2023 · 2e49cd0 · 2e49cd0
1 parent f9a3ca5
commit 2e49cd0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -135,27 +135,42 @@ h2 {
     bottom: 20px;
     right: 20px;
     cursor: pointer;
+    font-size: 1.33rem;
 }
 
 #chat-container {
-    width: 400px;
+    width: 22rem;
+    height: 29rem;
     margin: 20px auto;
     background-color: #ffffff;
     border-radius: 10px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    bottom: 3.3rem; 
+    right: 1.3rem; 
+    justify-content: space-between;
 }
 
+
 #chat-header {
     background-color: #37a21f;
+    font-weight: bold;
     color: #ffffff;
     padding: 10px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }
 
+.emoji {
+    font-size: 1.3rem; 
+    margin-right: 0.3rem; 
+
+}
+
+
 #chat-messages {
     padding: 10px;
-    max-height: 400px;
+    height: 21.1rem;
     overflow-y: auto;
 }
 
@@ -178,12 +193,14 @@ h2 {
 
 #input-container {
     display: flex;
-    padding: 10px;
-}
-
+    padding: 0.8rem;
+    height: 2rem;
+  }
+
+
 #user-input {
     flex-grow: 1;
-    padding: 5px;
+    padding: 11px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }

diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,8 @@
     <meta name="description" content="Sitio web sobre la Ley REP en Chile y el reciclaje con un chatbot de consulta.">
     <title>Recicla Chile</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
     <link rel="stylesheet" type="text/css" href="./css/styles.css">
 
     <meta name="keywords" content="Ley REP, reciclaje, Chile">
@@ -29,18 +31,19 @@
 </head>
 
 <body>
-    <button id="chat-button">Chat</button>
+    <button id="chat-button"><i class="fas fa-comment"></i>
+    </button>
 
     <div id="chat-container" style="display: none;">
         <div id="chat-header">
-            Chatbot
+            <span class="emoji">👩🏻‍🦱🌻</span>Verdia
         </div>
         <div id="chat-messages">
             <!-- Aquí se mostrarán los mensajes -->
         </div>
         <div id="input-container">
-            <input type="text" id="user-input" placeholder="Type your question">
-            <button id="send-button">Send</button>
+            <input type="text" id="user-input" placeholder="Escribe tu pregunta">
+            <button id="send-button">Enviar</button>
         </div>
     </div>
 

diff --git a/src/chatbot.js b/src/chatbot.js
@@ -27,14 +27,17 @@ sendButton.addEventListener('click', () => {
     }
 });
 
-
 const chatContainer = document.getElementById('chat-container');
 const chatButton = document.getElementById('chat-button');
 
 chatButton.addEventListener('click', () => {
     if (chatContainer.style.display === 'none') {
         chatContainer.style.display = 'block';
+        chatButton.innerHTML = '<i class="fas fa-times"></i>';
+
     } else {
         chatContainer.style.display = 'none';
+        chatButton.innerHTML = '<i class="fas fa-comment"></i>';
+
     }
 });