From a44d2125930516a6d85c01ba0a5014c8d18121b5 Mon Sep 17 00:00:00 2001
From: soyed <oyediransamuel1995@gmail.com>
Date: Thu, 15 Apr 2021 12:03:34 -0400
Subject: [PATCH] added the chat agent

---
 css/styles.css | 26 +++++++++++++++++++-------
 index.html     | 23 +++++++++++++++++++++--
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 7d7b3a2..f51979d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -262,11 +262,6 @@ input:invalid+span:after {
     position: absolute;
     content: '✖';
     padding-left: 5px;
-    <<<<<<< HEAD
-}
-
-input:valid+span:after {
-    =======
 }
 
 input:valid+span:after {
@@ -286,8 +281,6 @@ input:valid+span:after {
 
 /* Footer section */
 
-#footer {}
-
 .social-icon {
     margin: 20px 10px;
 }
@@ -355,3 +348,22 @@ input[type=submit] {
 input[type=submit]:hover {
     background-color: #fa4664;
 }
+
+.agent-box{
+    text-align: right;
+}
+#chat-bot{
+    display: none;
+    
+}
+
+#bot-display{
+    
+}
+.bot-icon{
+    color: #34626c;
+}
+
+.bot-icon:hover {
+    color: rgb(216, 181, 24);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4a2772b..74281fe 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
   <section class="colored-section2" id="title">
 
     <div class="container-fluid">
-      <img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px">
+      <img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px" alt="brand-img">
 
       <!-- Nav Bar -->
       <nav class="navbar navbar-expand-lg navbar-dark">
@@ -437,10 +437,18 @@
         <br>
         <button type="button" class="btn btn-lg btn-outline-success" id="submitButton" onclick="validateForm()">Submit</button>
       </form>
+
+      <!-- Dialog flow bot  -->
+      <div class="agent-box">
+        <iframe id="chat-bot" height="400" width="500" src="https://bot.dialogflow.com/d854ce2a-8fb4-41a4-9fa8-9e498be1accf"></iframe>
+        <div id="bot-display"> 
+            <i class="fas fa-comments-alt fa-3x bot-icon"></i>
+        </div>
+      </div>
+      
     </div>
   </section>
 
-
   <!-- Footer -->
 
   <footer class="colored-section2" id="footer">
@@ -457,6 +465,17 @@
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script src="scripts/index.js" charset="utf-8"></script>
+
+  <script>
+
+    const chatBot = document.getElementById("chat-bot")
+    const botBtn = document.getElementById("bot-display")
+
+    botBtn.addEventListener('click', () => {
+      chatBot.style.display === 'none' ? chatBot.style.display = 'inline-block' : chatBot.style.display = 'none';
+    })
+
+  </script>
 </body>