From 932f5f09fcbf7c2480f86ee0b3b12027d1e57294 Mon Sep 17 00:00:00 2001
From: "sanikamandale177@gmail.com" <sanikamandale17>
Date: Sun, 20 Oct 2024 00:26:20 +0530
Subject: [PATCH 1/2] Fix issue #624 Added cokkie feature

---
 index.html | 208 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
diff --git a/index.html b/index.html
index 4399007..d993edd 100644
--- a/index.html
+++ b/index.html
@@ -1481,6 +1481,214 @@ <h2 data-aos="zoom-out-down" data-aos-duration="1200" data-aos-delay="200">Share
         </div>
 
     </section>
+    <!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cookie Consent</title>
+
+ <style>
+#cookie-consent {
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+    background-color: #ffb8d2; /* Background color */
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 300px;
+    height: fit-content;
+    z-index: 10000;
+    border-radius: 10px;
+    margin: 20px;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    transition: border-color 0.3s;
+}
+
+#cookie-consent:hover {
+    border-right-color: #ff6fa7; /* Border on hover */
+    border-bottom-color: #ff6fa7;
+}
+
+#cookie-consent p {
+    color: #fff; /* Text color */
+    text-align: center; /* Center align the text */
+    margin: 10px 0; /* Margin for spacing */
+}
+
+.accept-cookies, .reject-cookies {
+    width: 260px; /* Button width */
+    height: 40px; /* Button height */
+    color: white; 
+    background-color: #ff6fa7; /* Button background color */
+    border: none;
+    border-radius: 5px; /* Rounded corners */
+    cursor: pointer;
+    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s; /* Smooth transition for effects */
+}
+
+.reject-cookies {
+    margin-top: 10px; /* Space between buttons */
+}
+
+.accept-cookies:hover, .reject-cookies:hover {
+    transform: scale(1.05); /* Slightly increase size on hover */
+    box-shadow: 0 0 15px rgba(255, 150, 195, 0.5); /* Shadow effect */
+}
+
+.accept-cookies:hover {
+    background-color: #ff99b8; /* Lighter pink on hover */
+}
+
+.reject-cookies:hover {
+    background-color: #ff99b8; /* Lighter pink on hover */
+}
+
+#learn-more-link, #show-less-link {
+    color: white; /* Link color */
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 18px; /* Font size for links */
+    margin-top: 10px; /* Margin for spacing */
+}
+
+#learn-more-link:hover, #show-less-link:hover {
+    text-decoration: underline; /* Underline on hover */
+}
+
+#learn-more-content {
+    display: none; /* Hidden by default */
+    margin-top: 10px; /* Margin for spacing */
+}
+
+.close-btn {
+    position: absolute; /* Positioned at the top-right */
+    top: 10px;
+    right: 10px;
+    padding: 5px;
+    height: 30px; /* Button size */
+    width: 30px; /* Button size */
+    border-radius: 50%; /* Circular shape */
+    font-size: 18px; /* Font size */
+    background-color: #ff6fa7; /* Button background color */
+    border: none;
+    cursor: pointer;
+    color: white; /* Button text color */
+}
+
+.close-btn:hover {
+    background-color: #ff99b8; /* Hover effect for the close button */
+}
+
+.dark-mode #cookie-consent {
+    background-color: #252423; /* Dark mode background */
+}
+
+.dark-mode #cookie-consent p {
+    color: white; /* Dark mode text color */
+}
+</style>
+
+</head>
+<body>
+
+  <div id="cookie-consent">
+    <button class="close-btn" id="closeBtn">&times;</button>
+    <p>
+      We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with our Cookie Policy.
+      <a href="#" id="learn-more-link">Learn More</a>
+    </p>
+    <div id="learn-more-content">
+      <p>Cookies are small text files that can be used by websites to make a user's experience more efficient. The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission.</p>
+      <p>This site uses different types of cookies. Some cookies are placed by third-party services that appear on our pages.</p>
+    </div>
+    <a href="#" id="show-less-link" style="display: none;">Show Less</a>
+    <button class="accept-cookies">Accept</button>
+    <button class="reject-cookies">Reject</button>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const cookieConsent = document.getElementById('cookie-consent');
+      const acceptButton = document.querySelector('.accept-cookies');
+      const rejectButton = document.querySelector('.reject-cookies');
+      const learnMoreLink = document.getElementById('learn-more-link');
+      const showLessLink = document.getElementById('show-less-link');
+      const learnMoreContent = document.getElementById('learn-more-content');
+      const closeButton = document.getElementById('closeBtn');
+
+      // Show the cookie consent banner
+      window.addEventListener('load', function () {
+        cookieConsent.style.display = 'block';
+      });
+
+      // Check if localStorage is available
+      function localStorageAvailable() {
+        try {
+          const test = '__localStorage_test__';
+          localStorage.setItem(test, test);
+          localStorage.removeItem(test);
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      if (localStorageAvailable()) {
+        // Check if the user has already made a choice
+        if (localStorage.getItem('cookieConsent')) {
+          cookieConsent.style.display = 'none';
+        }
+
+        // Function to handle cookie consent choice
+        function handleConsent(choice) {
+          localStorage.setItem('cookieConsent', choice);
+          cookieConsent.style.display = 'none';
+        }
+
+        // Add event listeners to buttons
+        acceptButton.addEventListener('click', function () {
+          handleConsent('accepted');
+        });
+
+        rejectButton.addEventListener('click', function () {
+          handleConsent('rejected');
+        });
+      } else {
+        // Hide consent if localStorage is not available
+        cookieConsent.style.display = 'none';
+      }
+
+      // Add event listener to "Learn More" link
+      learnMoreLink.addEventListener('click', function (event) {
+        event.preventDefault();
+        learnMoreContent.style.display = 'block';
+        learnMoreLink.style.display = 'none';
+        showLessLink.style.display = 'inline';
+      });
+
+      // Add event listener to "Show Less" link
+      showLessLink.addEventListener('click', function (event) {
+        event.preventDefault();
+        learnMoreContent.style.display = 'none';
+        showLessLink.style.display = 'none';
+        learnMoreLink.style.display = 'inline';
+      });
+
+      // Close the cookie consent banner
+      closeButton.addEventListener('click', function () {
+        cookieConsent.style.display = 'none';
+      });
+    });
+  </script>
+
+</body>
+</html>
+
 
     <!-- Footer Section Ends Here -->
 

From ea0af6bc4ee854ec88df9cd10c945cc34a1096c2 Mon Sep 17 00:00:00 2001
From: "sanikamandale177@gmail.com" <sanikamandale17>
Date: Sun, 20 Oct 2024 09:46:58 +0530
Subject: [PATCH 2/2] Fix issue #576 Improved UI and Added rating feature

---
 index.html | 676 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 631 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index d993edd..b918409 100644
--- a/index.html
+++ b/index.html
@@ -1377,63 +1377,649 @@ <h4>- Stacy Stone</h4>
 </div>
 
 <!--Review section ends-->
+<style>
+  body {
+      font-family: Arial, sans-serif;
+      background-color: #f8f4f4;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+  }
 
-<!--Review section for adding reviews-->
-<section class="review-section" id="review-section">
-  <div class="review-container">
-    <div class="review-left">
-      <img data-aos="zoom-out-down" data-aos-duration="1200" data-aos-delay="200" src="https://images.unsplash.com/photo-1505394033641-40c6ad1178d7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8aWNlY3JlYW18ZW58MHx8MHx8fDA%3D" alt="Delicious Ice Cream" class="ice-cream-image">
-    </div>
-    <div class="review-right">
-      <h2 data-aos="zoom-out-down" data-aos-duration="1200" data-aos-delay="200">Share Your Ice Cream Experience!</h2>
-<form id="review-form" onsubmit="storeReview(event)">
-  <label for="user-name" data-aos="zoom-out-down" data-aos-duration="1200" data-aos-delay="200">Your Name:</label>
-  <input type="text" id="user-name" name="user-name" data-aos="zoom-out-down" required>
-  
-  <label for="user-review" data-aos="zoom-out-down" data-aos-duration="1200" data-aos-delay="200">Your Review:</label>
-  <textarea id="user-review" name="user-review" rows="5" required data-aos="zoom-out-down"></textarea>
-  
-  <button type="submit" class="submit-button" data-aos="zoom-out-down">Submit Review</button>
-</form>
-<script>
-  // Function to store multiple reviews as JSON in local storage
-  function storeReview(event) {
-    event.preventDefault(); // Prevent default form submission
-    
-    const userName = document.getElementById('user-name').value.trim();
-    const userReview = document.getElementById('user-review').value.trim();
+  .feedback-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 15px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      width: 800px;
+      gap: 30px;
+  }
+
+  .feedback-image img {
+      width: 350px;
+      height: auto;
+      border-radius: 15px;
+      object-fit: cover;
+  }
+
+  .feedback-form {
+      width: 400px;
+  }
+
+  .feedback-form h2 {
+      font-size: 24px;
+      color: #ff6fa7;
+  }
+
+  .feedback-form label {
+      font-size: 16px;
+      color: #333;
+      display: block;
+      margin-bottom: 8px;
+  }
+
+  .feedback-form input, .feedback-form textarea {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 20px;
+      border: 2px solid #ffb8d2;
+      border-radius: 5px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.3s;
+  }
+
+  .feedback-form input:hover, .feedback-form textarea:hover {
+      border-color: #ff6fa7;
+  }
+
+  .feedback-form .submit-btn {
+      background-color: #ff6fa7;
+      color: white;
+      padding: 10px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: transform 0.3s, background-color 0.3s;
+  }
+
+  .feedback-form .submit-btn:hover {
+      background-color: #ff99b8;
+      transform: scale(1.05);
+  }
+
+  /* Rating System */
+  .rating {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+  }
+
+  .rating input {
+      display: none;
+  }
+
+  .rating label {
+      font-size: 30px;
+      color: #ffb8d2;
+      cursor: pointer;
+      transition: color 0.3s, transform 0.3s;
+  }
+
+  .rating input:checked ~ label,
+  .rating label:hover,
+  .rating label:hover ~ label {
+      color: #ff6fa7;
+  }
+
+  .rating input:checked + label:hover,
+  .rating input:checked ~ label:hover {
+      transform: scale(1.2);
+  }
 
-    // Check if either field is empty
-    if (userName === '' || userReview === '') {
-      alert('Both name and review must be filled out before submitting!');
-      return; // Exit the function if fields are empty
+</style>
+</head>
+<body>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f8f4f4;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
     }
 
-    // Create a JSON object for the new review
-    const newReview = {
-      name: userName,
-      review: userReview
-    };
+    .feedback-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 15px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      width: 800px;
+      gap: 30px;
+    }
 
-    // Get existing reviews from local storage or initialize as an empty array
-    let reviews = JSON.parse(localStorage.getItem('reviews')) || [];
+    .feedback-image img {
+      width: 350px;
+      height: auto;
+      border-radius: 15px;
+      object-fit: cover;
+    }
 
-    // Add the new review to the beginning of the array
-    reviews.unshift(newReview); // Adds new review to the top
+    .feedback-form {
+      width: 400px;
+    }
 
-    // Store the updated array back in local storage
-    localStorage.setItem('reviews', JSON.stringify(reviews));
+    .feedback-form h2 {
+      font-size: 24px;
+      color: #ff6fa7;
+    }
 
-    // Clear the form fields after submission
-    document.getElementById('user-name').value = '';
-    document.getElementById('user-review').value = '';
+    .feedback-form label {
+      font-size: 16px;
+      color: #333;
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .feedback-form input, .feedback-form textarea {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 20px;
+      border: 2px solid #ffb8d2;
+      border-radius: 5px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.3s;
+    }
+
+    .feedback-form input:hover, .feedback-form textarea:hover {
+      border-color: #ff6fa7;
+    }
+
+    .feedback-form .submit-btn {
+      background-color: #ff6fa7;
+      color: white;
+      padding: 10px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: transform 0.3s, background-color 0.3s;
+    }
+
+    .feedback-form .submit-btn:hover {
+      background-color: #ff99b8;
+      transform: scale(1.05);
+    }
+
+    /* Rating System */
+    .rating {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
 
-    alert('Thank you for sharing your review!'); // Show a success message
+    .rating input {
+      display: none;
+    }
+
+    .rating label {
+      font-size: 30px;
+      color: #ffb8d2;
+      cursor: pointer;
+      transition: color 0.3s, transform 0.3s;
+    }
+
+    .rating input:checked ~ label,
+    .rating label:hover,
+    .rating label:hover ~ label {
+      color: #ff6fa7;
+    }
+
+    .rating input:checked + label:hover,
+    .rating input:checked ~ label:hover {
+      transform: scale(1.2);
+    }
+
+    /* Pop-up message styling */
+    .popup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      display: none;
+      z-index: 1000;
+    }
+
+    .popup h3 {
+      font-size: 20px;
+      margin-bottom: 10px;
+      color: #ff6fa7;
+    }
+
+    .popup button {
+      background-color: #ff6fa7;
+      color: white;
+      padding: 8px 16px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+
+    .popup button:hover {
+      background-color: #ff99b8;
+    }
+
+    /* Background overlay */
+    .overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 999;
+      display: none;
+    }
+  </style>
+</head>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f4f4;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
   }
-</script>
 
-</section>
+  .feedback-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 800px;
+    gap: 30px;
+  }
+
+  .feedback-image img {
+    width: 350px;
+    height: auto;
+    border-radius: 15px;
+    object-fit: cover;
+  }
+
+  .feedback-form {
+    width: 400px;
+  }
 
+  .feedback-form h2 {
+    font-size: 24px;
+    color: #ff6fa7;
+  }
+
+  .feedback-form label {
+    font-size: 16px;
+    color: #333;
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  .feedback-form input, .feedback-form textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 2px solid #ffb8d2;
+    border-radius: 5px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.3s;
+  }
+
+  .feedback-form input:hover, .feedback-form textarea:hover {
+    border-color: #ff6fa7;
+  }
+
+  .feedback-form .submit-btn {
+    background-color: #ff6fa7;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.3s, background-color 0.3s;
+  }
+
+  .feedback-form .submit-btn:hover {
+    background-color: #ff99b8;
+    transform: scale(1.05);
+  }
+
+  /* Rating System */
+  .rating {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+
+  .rating input {
+    display: none;
+  }
+
+  .rating label {
+    font-size: 30px;
+    color: #ffb8d2;
+    cursor: pointer;
+    transition: color 0.3s, transform 0.3s;
+  }
+
+  .rating input:checked ~ label,
+  .rating label:hover,
+  .rating label:hover ~ label {
+    color: #ff6fa7;
+  }
+
+  .rating input:checked + label:hover,
+  .rating input:checked ~ label:hover {
+    transform: scale(1.2);
+  }
+
+  /* Pop-up message styling */
+  .popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    display: none;
+    z-index: 1000;
+  }
+
+  .popup h3 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #ff6fa7;
+  }
+
+  .popup button {
+    background-color: #ff6fa7;
+    color: white;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .popup button:hover {
+    background-color: #ff99b8;
+  }
+
+  /* Background overlay */
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    display: none;
+  }
+</style>
+</head>
+<body>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f8f4f4;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+
+    .feedback-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 15px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      width: 800px;
+      gap: 30px;
+    }
+
+    .feedback-image img {
+      width: 350px;
+      height: auto;
+      border-radius: 15px;
+      object-fit: cover;
+    }
+
+    .feedback-form {
+      width: 400px;
+    }
+
+    .feedback-form h2 {
+      font-size: 24px;
+      color: #ff6fa7;
+    }
+
+    .feedback-form label {
+      font-size: 16px;
+      color: #333;
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .feedback-form input, .feedback-form textarea {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 20px;
+      border: 2px solid #ffb8d2;
+      border-radius: 5px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.3s;
+    }
+
+    .feedback-form input:hover, .feedback-form textarea:hover {
+      border-color: #ff6fa7;
+    }
+
+    .feedback-form .submit-btn {
+      background-color: #ff6fa7;
+      color: white;
+      padding: 10px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: transform 0.3s, background-color 0.3s;
+    }
+
+    .feedback-form .submit-btn:hover {
+      background-color: #ff99b8;
+      transform: scale(1.05);
+    }
+
+    /* Rating System */
+    .rating {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+
+    .rating input {
+      display: none;
+    }
+
+    .rating label {
+      font-size: 30px;
+      color: #ffb8d2;
+      cursor: pointer;
+      transition: color 0.3s, transform 0.3s;
+    }
+
+    .rating input:checked ~ label,
+    .rating label:hover,
+    .rating label:hover ~ label {
+      color: #ff6fa7;
+    }
+
+    .rating input:checked + label:hover,
+    .rating input:checked ~ label:hover {
+      transform: scale(1.2);
+    }
+
+    /* Pop-up message styling */
+    .popup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      display: none;
+      z-index: 1000;
+    }
+
+    .popup h3 {
+      font-size: 20px;
+      margin-bottom: 10px;
+      color: #ff6fa7;
+    }
+
+    .popup button {
+      background-color: #ff6fa7;
+      color: white;
+      padding: 8px 16px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+
+    .popup button:hover {
+      background-color: #ff99b8;
+    }
+
+    /* Background overlay */
+    .overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 999;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+
+<div class="feedback-container">
+  <div class="feedback-image">
+    <img src="https://images.unsplash.com/photo-1505394033641-40c6ad1178d7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8aWNlY3JlYW18ZW58MHx8MHx8fDA%3D" alt="Ice Cream Image">
+  </div>
+  <div class="feedback-form">
+    <h2>Share Your Ice Cream Experience!</h2>
+    <form id="review-form">
+      <label for="name">Your Name:</label>
+      <input type="text" id="name" name="name" placeholder="Enter your name" required>
+      
+      <label for="review">Your Review:</label>
+      <textarea id="review" name="review" placeholder="Write your review" required></textarea>
+
+      <label>Rate Your Experience:</label>
+      <div class="rating">
+        <input type="radio" id="star5" name="rating" value="5" required><label for="star5" title="5 stars">★</label>
+        <input type="radio" id="star4" name="rating" value="4"><label for="star4" title="4 stars">★</label>
+        <input type="radio" id="star3" name="rating" value="3"><label for="star3" title="3 stars">★</label>
+        <input type="radio" id="star2" name="rating" value="2"><label for="star2" title="2 stars">★</label>
+        <input type="radio" id="star1" name="rating" value="1"><label for="star1" title="1 star">★</label>
+      </div>
+      
+      <button type="submit" class="submit-btn">Submit Review</button>
+    </form>
+  </div>
+</div>
+
+<!-- Pop-up message and overlay -->
+<div class="overlay"></div>
+<div class="popup" id="popup-message">
+  <h3>Thank you for your review!</h3>
+  <p>We appreciate your feedback.</p>
+  <button id="close-popup">Close</button>
+</div>
+<div class="overlay" id="overlay"></div>
+<div class="popup" id="popup-message">
+  <h3>Thank you for your review!</h3>
+  <p>We appreciate your feedback.</p>
+  <button id="close-popup">Close</button>
+</div>
+
+<script>
+  // Hide popup and overlay initially
+  document.getElementById('popup-message').style.display = 'none';
+  document.getElementById('overlay').style.display = 'none';
+
+  // Function to show popup and overlay
+  function showPopup() {
+    document.getElementById('popup-message').style.display = 'block';
+    document.getElementById('overlay').style.display = 'block';
+  }
+
+  // Function to close popup and overlay
+  function closePopup() {
+    document.getElementById('popup-message').style.display = 'none';
+    document.getElementById('overlay').style.display = 'none';
+  }
+
+  // Add event listener to close the popup when the "Close" button is clicked
+  document.getElementById('close-popup').addEventListener('click', closePopup);
+
+  // Form submission event listener
+  document.getElementById('review-form').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent default form submission
+
+    // Show popup after form submission
+    showPopup();
+    
+    // Optional: Clear the form after submission
+    document.getElementById('review-form').reset();
+  });
+</script>
 <script>
   //chatbot added here!
   window.embeddedChatbotConfig = {
