Resolved the bug of the chatbot

ankit071105 · Oct 30, 2024 · dfcf4ab · dfcf4ab
1 parent d94b154
commit dfcf4ab
Showing 1 changed file with 186 additions and 9 deletions.
diff --git a/about.html b/about.html
@@ -19,20 +19,193 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="why-us.css">
+    <script src="chatbot.js"></script>
     <style>
         .nav-container{
       display: flex;
-}
+} 
 
 /* cursor */
 
 /* cursor */
     </style>
 </head>
+<style>
+/* code for chatbot button */
+         #chatbotBtn {
+            position: fixed;
+            bottom: 65px;
+            right: 30px;
+            z-index: 99;
+            border: none;
+            outline: none;
+            /* background-color: #1fb899; */
+            background-image: url('./images/bot.jpg');
+            background-size: cover;
+            background-position: center;
+            border: none;
+            padding: 0;
+            color: white;
+            cursor: pointer;
+            /* padding: 10px 6px; */
+            width: 50px !important;
+            height: 50px !important;
+            border-radius: 100%;
+        }
+
+        .chatbot-container {
+            display: none;
+            width: 370px;
+            max-width: 100%;
+            position: fixed;
+            bottom: 75px;
+            right: 30px;
+            margin: 50px auto;
+            padding: 20px;
+            z-index: 1001;
+            border-radius: 10px;
+            box-shadow: #64646f33 0px 7px 29px 0px;
+            background: #31363F;
+        }
+
+        .chatbot-container.chatbot-show {
+            display: block;
+        }
 
+        .chatbot-title {
+            text-align: center;
+            font-size: 24px;
+            font-weight: bold;
+            color: #edf1f3;
+        }
 
-<body>
+        .chatbot-chat {
+            height: 250px;
+            overflow-y: scroll;
+            margin: 20px 0;
+            padding: 10px;
+            border: 2px solid #545250;
+            border-radius: 5px;
+            background: #222831;
+        }
+
+        .chatbot-message {
+            display: flex;
+            align-items: center;
+            margin: 10px 0;
+        }
+
+        .chatbot-user {
+            justify-content: flex-end;
+        }
+
+        .chatbot-bot {
+            justify-content: flex-start;
+        }
+
+        .chatbot-avatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            margin: 0 10px;
+        }
+
+        .chatbot-user .chatbot-avatar {
+            order: 2;
+            background: url("./images/avatar.jpg");
+            background-size: cover;
+        }
+
+        .chatbot-bot .chatbot-avatar {
+            order: 1;
+            background: url("./images/bot.jpg");
+            background-size: cover;
+        }
+
+        .chatbot-text {
+            max-width: 70%;
+            padding: 10px;
+            border-radius: 10px;
+            font-size: 12px;
+            color: white;
+        }
 
+        .chatbot-user .chatbot-text {
+            background: #4a4d52;
+        }
+
+        .chatbot-bot .chatbot-text {
+            background: #8c8c8e;
+        }
+
+        .chatbot-input {
+            position: relative;
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #cbcbce;
+            border-radius: 5px;
+            outline: none;
+            font-size: 15px;
+
+        }
+
+        .chatbot-input:focus {
+            border-color: #8296d0;
+            color: #1e1f1f;
+        }
+
+        .chatbot-button {
+            position: absolute;
+            width: 80px;
+            border: none;
+            border-radius: 0%;
+            padding: 1px;
+            background: #31363F;
+            color: white;
+            font-size: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            margin-top: -1.02rem;
+            margin-left: -4.1rem;
+            outline: none;
+            border-radius: 100%;
+        }
+        .chatbot-button i{
+        font-size: 3rem;
+        }
+        .chatbot-button:hover {
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+        }
+
+        .chatbot-chat::-webkit-scrollbar {
+            width: 10px;
+        }
+
+        .chatbot-chat::-webkit-scrollbar-thumb {
+            background: #bcbdc0;
+            border-radius: 10px;
+        }
+        .progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 5px;
+    background: #1fb899; /* You can change this color */
+    width: 0;
+    transition: width 0.1s ease-in-out;
+    z-index: 9999; /* Make sure it's above other content */
+}
+        /* chatbot css end */
+  </style>
+<body>
+  <button onclick="toggleChatbot()" id="chatbotBtn" title="chat bot"></button>
+
+  <div class="chatbot-container" id="chatbot-container">
+      <div class="chatbot-title">Ticket Bot</div>
+      <div class="chatbot-chat" id="chatbot-chat"></div>
+      <input type="text" class="chatbot-input" id="chatbot-input" placeholder="Type your message here...." />
+      <button class="chatbot-button" id="chatbot-button"><i class="fa-brands fa-telegram"></i></button>
+    </div>
   <!-- cursor -->
 
   <!-- cursor ends -->
@@ -293,13 +466,17 @@ <h1>About Us 🚀</h1>
     }
 };
 
-// Scroll to top function
-scrollToTopBtn.onclick = function() {
-    window.scrollTo({
-        top: 0,
-        behavior: "smooth" // Smooth scroll effect
-    });
-};
+// toggle chatbot function
+function toggleChatbot() {
+        const chatbotContainer = document.getElementById("chatbot-container");
+        chatbotContainer.classList.toggle("chatbot-show");
+    }
+    window.addEventListener('scroll', () => {
+    const scrollProgressBar = document.getElementById('scrollProgressBar');
+    const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+    const progressHeight = (window.scrollY / totalHeight) * 100;
+    scrollProgressBar.style.width = progressHeight + '%';
+});
 
     </script>