✨chatbot added✨ (#471)

PR #443 has been resolved. <img width="89" alt="Screenshot 2024-10-13 at 1 38 08 PM" src="https://github.com/user-attachments/assets/931ca75f-56f5-4497-8dc2-5d7094b6518f"> @Anjaliavv51 can you please review this.
Anjaliavv51 · Oct 13, 2024 · a08dcdf · a08dcdf
2 parents 813c1d3 + 88f85ee
commit a08dcdf
Show file tree

Hide file tree

Showing 16 changed files with 275 additions and 277 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Coverpage.html b/Coverpage.html
@@ -139,5 +139,18 @@
             window.location.href = "index.html";
         }
     </script>
+    <script>
+        window.embeddedChatbotConfig = {
+        chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
+        domain: "www.chatbase.co"
+        }
+        </script>
+        <script
+        src="https://www.chatbase.co/embed.min.js"
+        chatbotId="dGlQ5bP-F7GodLWzgrVAx"
+        domain="www.chatbase.co"
+        defer>
+        </script>
+
 </body>
 </html>
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
@@ -354,21 +354,21 @@
   color: #181e20 !important;
 }
 
-          #sr {
-              display: none;
-              position: fixed;
-              bottom: 20px;
-              right: 30px;
-              z-index: 99;
-              font-size: 18px;
-              border: none;
-              outline: none;
-              background-color: transparent;
-              color: white;
-              cursor: pointer;
-              padding: 15px;
-              border-radius: 4px;
-          }
+#sr {
+display: none; 
+position: fixed; 
+bottom: 70px; 
+right: 15px; 
+z-index: 99; 
+font-size: 18px;
+border: none;
+outline: none;
+background-color: transparent; 
+color: rgb(17, 17, 17); 
+cursor: pointer; 
+padding: 15px; 
+border-radius: 4px; 
+}
 
           #sr:hover {
               color: #000;
@@ -870,5 +870,18 @@ <h2 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h2>
 })
     </script>
     <script src="cart.js"></script>
+    <script>
+        window.embeddedChatbotConfig = {
+        chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
+        domain: "www.chatbase.co"
+        }
+        </script>
+        <script
+        src="https://www.chatbase.co/embed.min.js"
+        chatbotId="dGlQ5bP-F7GodLWzgrVAx"
+        domain="www.chatbase.co"
+        defer>
+        </script>
+
 </body>
 </html>
diff --git a/Html-files/about.html b/Html-files/about.html
@@ -29,22 +29,21 @@
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
         @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
-#sr {
+        #sr {
 display: none; 
 position: fixed; 
-bottom: 20px; 
-right: 30px; 
+bottom: 70px; 
+right: 15px; 
 z-index: 99; 
 font-size: 18px;
 border: none;
 outline: none;
 background-color: transparent; 
-color: white; 
+color: rgb(17, 17, 17); 
 cursor: pointer; 
 padding: 15px; 
 border-radius: 4px; 
 }
-
 #sr:hover {
 background-color: transparent; 
 color: black;
@@ -901,6 +900,19 @@ <h3 class="f-title f_600 t_color f_size_18">Follow Us</h3>
 });
 
 </script>
+<script>
+  window.embeddedChatbotConfig = {
+  chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
+  domain: "www.chatbase.co"
+  }
+  </script>
+  <script
+  src="https://www.chatbase.co/embed.min.js"
+  chatbotId="dGlQ5bP-F7GodLWzgrVAx"
+  domain="www.chatbase.co"
+  defer>
+  </script>
+
 </body>
 
 </html>
diff --git a/Html-files/booknow.html b/Html-files/booknow.html
@@ -184,5 +184,18 @@ <h2 style="color: black;">Our Services</h2>
     <footer>
         <p>&copy; 2024 Retro. All rights reserved.</p>
     </footer>
+    <script>
+        window.embeddedChatbotConfig = {
+        chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
+        domain: "www.chatbase.co"
+        }
+        </script>
+        <script
+        src="https://www.chatbase.co/embed.min.js"
+        chatbotId="dGlQ5bP-F7GodLWzgrVAx"
+        domain="www.chatbase.co"
+        defer>
+        </script>
+
 </body>
 </html>
diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -112,23 +112,21 @@
 
     @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
     #sr {
-      display: none;
-      position: fixed;
-      bottom: 20px;
-      right: 30px;
-      z-index: 99;
-      font-size: 18px;
-      border: none;
-      outline: none;
-      background-color: transparent;
-      color: white;
-      cursor: pointer;
-      padding: 15px;
-      border-radius: 4px;
-    }
-
+display: none; 
+position: fixed; 
+bottom: 70px; 
+right: 15px; 
+z-index: 99; 
+font-size: 18px;
+border: none;
+outline: none;
+background-color: transparent; 
+color: rgb(17, 17, 17); 
+cursor: pointer; 
+padding: 15px; 
+border-radius: 4px; 
+}
     #sr:hover {
       background-color: transparent;
       color: black;
@@ -284,85 +282,6 @@
 }
 
   </style>
-  <style>
-    /* Modal styles */
-    .modal {
-      display: none; /* Hidden by default */
-      position: fixed; /* Stay in place */
-      z-index: 1000; /* Sit on top */
-      left: 0;
-      top: 0;
-      width: 100%; /* Full width */
-      height: 100%; /* Full height */
-      overflow: auto; /* Enable scroll if needed */
-      background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for better contrast */
-      animation: fadeIn 0.5s; /* Animation for modal display */
-    }
-
-    .modal-content {
-      background-color: #ffffff; /* White background */
-      margin: 10% auto; /* 10% from the top and centered */
-      padding: 20px;
-      border-radius: 10px; /* Rounded corners */
-      width: 400px; /* Adjusted width for better visibility */
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Shadow */
-      animation: slideIn 0.5s; /* Animation for content */
-    }
-
-    .close {
-      color: #aaa;
-      float: right;
-      font-size: 28px;
-      font-weight: bold;
-    }
-
-    .close:hover,
-    .close:focus {
-      color: #e74c3c; /* Red color on hover */
-      text-decoration: none;
-      cursor: pointer;
-    }
-
-    h2 {
-      color: #2c3e50; /* Darker text color */
-    }
-
-    #couponDisplay {
-      font-weight: bold;
-      color: #27ae60; /* Green color for coupon code */
-    }
-
-    #okButton {
-      background-color: #3498db; /* Blue */
-      color: white;
-      border: none;
-      padding: 10px 20px;
-      text-align: center;
-      text-decoration: none;
-      display: inline-block;
-      font-size: 16px;
-      margin: 4px 2px;
-      border-radius: 5px;
-      cursor: pointer;
-      transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
-    }
-
-    #okButton:hover {
-      background-color: #2980b9; /* Darker blue on hover */
-      transform: scale(1.05); /* Slightly enlarge on hover */
-    }
-
-    /* Animation keyframes */
-    @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-
-    @keyframes slideIn {
-      from { transform: translateY(-50px); opacity: 0; }
-      to { transform: translateY(0); opacity: 1; }
-    }
-  </style>
 </head>
 
 <body>
@@ -574,18 +493,6 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
       </div>
     </div>
   </footer>
-
-    <!-- Modal HTML -->
-    <div id="customAlert" class="modal">
-      <div class="modal-content">
-          <span class="close" id="closeModal">&times;</span>
-          <h2>Congratulations!</h2>
-          <p>Your coupon code is <span id="couponDisplay" style="font-weight: bold;"></span></p>
-          <p>You've received a 30% discount on your first order.</p>
-          <button id="okButton">OK</button>
-      </div>
-    </div>
-
     <script src="cart.js"></script>
 
   </script>
@@ -695,20 +602,21 @@ <h2>Congratulations!</h2>
         }, 3000);
       });
     });
+
   </script>
   <script>
-    // Check if the user is logged in
-    const isLoggedIn = localStorage.getItem('isLoggedIn');
-
-    if (isLoggedIn !== 'true') {
-        // If the user is not logged in, redirect to the login page
-        alert('You must be logged in to access the cart.');
-        window.location.href = 'login.html';
-    } else {
-        // Render the cart or any other content as normal
-        document.body.innerHTML += '<p>Here is your cart content.</p>';
-    }
-</script>
+    window.embeddedChatbotConfig = {
+    chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
+    domain: "www.chatbase.co"
+    }
+    </script>
+    <script
+    src="https://www.chatbase.co/embed.min.js"
+    chatbotId="dGlQ5bP-F7GodLWzgrVAx"
+    domain="www.chatbase.co"
+    defer>
+    </script>
+
 </body>
 
 </html>
diff --git a/Html-files/cart.js b/Html-files/cart.js
@@ -93,32 +93,12 @@ const applyFirstTimeDiscount = () => {
         couponCode = generateCouponCode();
         localStorage.setItem('couponCode', couponCode);
     }
-    if (document.getElementById('couponCode')) {
-        document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;">${couponCode}</span> for 30% off!`;
-
-        // Display the custom modal
-        document.getElementById('couponDisplay').innerText = couponCode; // Show the coupon code
-        document.getElementById('customAlert').style.display = "block"; // Show the modal
+    if(document.getElementById('couponCode')){
+        document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
+        alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
     }
+
 }
-
-// Close the modal when the user clicks on the <span> (x)
-document.getElementById('closeModal').onclick = function() {
-    document.getElementById('customAlert').style.display = "none";
-}
-
-// Close the modal when the user clicks the OK button
-document.getElementById('okButton').onclick = function() {
-    document.getElementById('customAlert').style.display = "none";
-}
-
-// Close the modal when the user clicks anywhere outside of the modal
-window.onclick = function(event) {
-    if (event.target == document.getElementById('customAlert')) {
-        document.getElementById('customAlert').style.display = "none";
-    }
-}
-
 window.onload = applyFirstTimeDiscount;
 
 function updateBadgeCount() {