Merge branch 'Anjaliavv51:main' into main

Naveenkumar30838 · Oct 13, 2024 · 2f9708e · 2f9708e
2 parents ef16672 + 1d45388
commit 2f9708e
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 4 deletions.
diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -284,6 +284,85 @@
 }
 
   </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>
@@ -495,6 +574,18 @@ <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>

diff --git a/Html-files/cart.js b/Html-files/cart.js
@@ -93,12 +93,32 @@ 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!`;
-        alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
+    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
     }
-
 }
+
+// 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() {