From b2c5a8f9ef8548f7160657d13c6bf4beef63dce2 Mon Sep 17 00:00:00 2001
From: Chinatu Lucia Eke <chinatuluciaeke@gmail.com>
Date: Sat, 3 Jun 2023 21:12:03 +0100
Subject: [PATCH 1/2] change chatbot position and add chatbot to all pages

---
 ServiceSection/index.html | 18 ++++++++++++++++++
 aboutUs/index.html        | 18 ++++++++++++++++++
 contact/index.html        | 18 ++++++++++++++++++
 css/style.css             |  6 +++---
 repair/index.html         | 18 ++++++++++++++++++
 5 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/ServiceSection/index.html b/ServiceSection/index.html
index 9156bba1..b9e57e3f 100644
--- a/ServiceSection/index.html
+++ b/ServiceSection/index.html
@@ -447,6 +447,24 @@ <h1>Transform your living space into a work of Art!</h1>
 
   <a class="gotop" href="#"><i class="fa-solid fa-arrow-up fa-lg"></i></a>
 
+  <!-- chatbot start -->
+  <button type="button" aria-label="Open chatbot" class="chatbot-btn">
+    <i class="fa-regular fa-comment " style="font-size: 1.5rem;"></i>
+  </button>
+  <div class="chat-container">
+    <div class="chat-header">
+      <h2>Chat with us</h2>
+    </div>
+    <div class="chat-body"></div>
+    <form class="chat-form" novalidate>
+      <input type="text" id="chat-input" class="chat-input" name="Chat" aria-label="Enter your message here" autofocus>
+      <button type="submit" aria-label="Send message" class="chatform-btn" disabled>
+        <i class="fa-regular fa-paper-plane"></i>
+      </button>
+    </form>
+  </div>
+  <!-- chatbot end -->
+
   <!-- Footer Section Started -->
   <footer class="footer">
     <div class="container">
diff --git a/aboutUs/index.html b/aboutUs/index.html
index f95a7317..1ec354b5 100644
--- a/aboutUs/index.html
+++ b/aboutUs/index.html
@@ -447,6 +447,24 @@ <h1>Transform your living space into a work of Art!</h1>
 
   <a class="gotop" href="#"><i class="fa-solid fa-arrow-up fa-lg"></i></a>
 
+  <!-- chatbot start -->
+  <button type="button" aria-label="Open chatbot" class="chatbot-btn">
+    <i class="fa-regular fa-comment " style="font-size: 1.5rem;"></i>
+  </button>
+  <div class="chat-container">
+    <div class="chat-header">
+      <h2>Chat with us</h2>
+    </div>
+    <div class="chat-body"></div>
+    <form class="chat-form" novalidate>
+      <input type="text" id="chat-input" class="chat-input" name="Chat" aria-label="Enter your message here" autofocus>
+      <button type="submit" aria-label="Send message" class="chatform-btn" disabled>
+        <i class="fa-regular fa-paper-plane"></i>
+      </button>
+    </form>
+  </div>
+  <!-- chatbot end -->
+
   <!-- Footer Section Started -->
   <footer class="footer">
     <div class="container">
diff --git a/contact/index.html b/contact/index.html
index 3c10b118..58fe3fd0 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -363,6 +363,24 @@ <h1>Transform your living space into a work of Art!</h1>
 
   <a class="gotop" href="#"><i class="fa-solid fa-arrow-up fa-lg"></i></a>
 
+  <!-- chatbot start -->
+  <button type="button" aria-label="Open chatbot" class="chatbot-btn">
+    <i class="fa-regular fa-comment " style="font-size: 1.5rem;"></i>
+  </button>
+  <div class="chat-container">
+    <div class="chat-header">
+      <h2>Chat with us</h2>
+    </div>
+    <div class="chat-body"></div>
+    <form class="chat-form" novalidate>
+      <input type="text" id="chat-input" class="chat-input" name="Chat" aria-label="Enter your message here" autofocus>
+      <button type="submit" aria-label="Send message" class="chatform-btn" disabled>
+        <i class="fa-regular fa-paper-plane"></i>
+      </button>
+    </form>
+  </div>
+  <!-- chatbot end -->
+
   <!-- Footer Section Started -->
   <footer class="footer">
     <div class="container">
diff --git a/css/style.css b/css/style.css
index 857c4e19..41d50e99 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1106,8 +1106,8 @@ canvas {
 /* chatbot START */
 .chatbot-btn {
     position: fixed;
-    right: 8rem;
-    bottom: 2.5rem;
+    right: 3.125rem;
+    bottom: 6rem;
     width: 50px;
     height: 50px;
     background-color: #2a2a72;
@@ -1144,7 +1144,7 @@ canvas {
 }
 .chat-container {
     position: fixed;
-    bottom: 7rem;
+    bottom: 10rem;
     right: 3rem;
     z-index: 3;
     background-color: white;
diff --git a/repair/index.html b/repair/index.html
index d248bfbb..708a5406 100644
--- a/repair/index.html
+++ b/repair/index.html
@@ -388,6 +388,24 @@ <h1>Transform your living space into a work of Art!</h1>
 
   <a class="gotop" href="#"><i class="fa-solid fa-arrow-up fa-lg"></i></a>
 
+  <!-- chatbot start -->
+  <button type="button" aria-label="Open chatbot" class="chatbot-btn">
+    <i class="fa-regular fa-comment " style="font-size: 1.5rem;"></i>
+  </button>
+  <div class="chat-container">
+    <div class="chat-header">
+      <h2>Chat with us</h2>
+    </div>
+    <div class="chat-body"></div>
+    <form class="chat-form" novalidate>
+      <input type="text" id="chat-input" class="chat-input" name="Chat" aria-label="Enter your message here" autofocus>
+      <button type="submit" aria-label="Send message" class="chatform-btn" disabled>
+        <i class="fa-regular fa-paper-plane"></i>
+      </button>
+    </form>
+  </div>
+  <!-- chatbot end -->
+
   <!-- Footer Section Started -->
   <footer class="footer">
     <div class="container">

From 45a63b3ed3c8654354f4f6c000ef032f22cc38fd Mon Sep 17 00:00:00 2001
From: Chinatu Lucia Eke <chinatuluciaeke@gmail.com>
Date: Thu, 8 Jun 2023 12:05:24 +0100
Subject: [PATCH 2/2] reverse position of chatbot

---
 css/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 41d50e99..1b751f47 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1094,7 +1094,7 @@ canvas {
   background: linear-gradient(315deg, #2a2a72 20%, #14227b 20%, #243fe9 60%);
   /* -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; */
-  bottom: 40px;
+  bottom: 6rem;
   right: 50px;
   border-radius: 50px;
   text-decoration: none;
@@ -1107,7 +1107,7 @@ canvas {
 .chatbot-btn {
     position: fixed;
     right: 3.125rem;
-    bottom: 6rem;
+    bottom: 40px;
     width: 50px;
     height: 50px;
     background-color: #2a2a72;