From 3f472904dac4ae5433246a80d559be496dc0868e Mon Sep 17 00:00:00 2001
From: swamimalode07 <swamimalode2004@gmail.com>
Date: Mon, 7 Oct 2024 19:08:22 +0530
Subject: [PATCH] Added new UI/UX to pop up

---
 index.html | 112 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 104 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 8ac9e068..52736fd4 100644
--- a/index.html
+++ b/index.html
@@ -65,6 +65,103 @@
       .chatbot-button:hover .tooltip-text {
           display: block; /* Show on hover */
       }
+  /* Pop up new styling */
+  .popup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7); /* Darker background for more focus */
+  z-index: 1000;
+  animation: fadeInBackground 0.5s ease-in-out;
+}
+
+.popup-box {
+  background: linear-gradient(160deg, #007bff, #ffffff); /* Gradient background */
+  padding: 2.5rem;
+  border-radius: 15px;
+  text-align: center;
+  width: 90%;
+  max-width: 450px;
+  position: relative;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Deep shadow for depth */
+  animation: popupSlideIn 0.5s ease-out;
+  color: white;
+}
+
+.popup-heading {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  font-family: 'Poppins', sans-serif; /* Modern font */
+  color: #fff;
+}
+
+.popup-text {
+  font-size: 1.2rem;
+  margin-bottom: 2.5rem;
+  line-height: 1.5;
+  color: #f0f0f0;
+  font-family: 'Poppins', sans-serif;
+}
+
+.popup-action-btn {
+  background-color: #ffffff;
+  color:#007bff;
+  padding: 0.9rem 1.7rem;
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-family: 'Poppins', sans-serif;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(255, 111, 97, 0.2);
+}
+
+.popup-action-btn:hover {
+  background-color: 007bff;
+  color: rgb(0, 0, 0);
+  box-shadow: 0 8px 20px rgba(255, 111, 97, 0.4);
+}
+
+.popup-close-btn {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  font-size: 2rem;
+  color: white;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.popup-close-btn:hover {
+  color: #ffffff;
+}
+
+/* Keyframes for animations */
+@keyframes fadeInBackground {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+}
+
+@keyframes popupSlideIn {
+  from {
+    transform: translateY(-30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
       </style>
 
   </head>
@@ -654,21 +751,20 @@ <h5>BuddyTrail &copy;</h5>
       </div>
     </footer>
     <!-- Deals and Offers Popup -->
-    <div id="dealsPopup" class="popup">
-      <div class="popup-content">
-        <span class="close-btn" id="closePopup">&times;</span>
-        <h2>Exclusive Deals and Offers!</h2>
-        <p>
+    <div id="exclusive-deals-popup" class="popup-container">
+      <div class="popup-box">
+        <span class="popup-close-btn" id="close-popup-btn">&times;</span>
+        <h2 class="popup-heading">Exclusive Deals and Offers!</h2>
+        <p class="popup-text">
           Get the best deals on flights, hotels, and travel packages. Don't miss
           out on our limited-time discounts. Plan your trip now!
         </p>
-        <button
-          onclick="document.getElementById('dealsPopup').style.display = 'none'; window.location.href='#deals'"
-        >
+        <button class="popup-action-btn" id="view-deals-btn">
           Check Out Deals
         </button>
       </div>
     </div>
+    
     <script>
       // script.js
       window.onscroll = function () {