Merge pull request #423 from aslams2020/main

✔️ Added "Custom Popup" for feedback form
sk66641 · Jul 14, 2024 · 597d95a · 597d95a
2 parents 1e54254 + fda8dc7
commit 597d95a
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 10 deletions.
diff --git a/assets/images/Feed-purple-tick-unscreen.gif b/assets/images/Feed-purple-tick-unscreen.gif
diff --git a/css/feedback.css b/css/feedback.css
@@ -150,4 +150,65 @@ strong{
 .star-rating label:hover,
 .star-rating label:hover ~ label {
     color: #f5b301;
+}
+
+/* Popup Styles */
+.popup {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup-content {
+    background: linear-gradient(to bottom, #7a0a7d, #250027);
+    padding: 0px  12px;
+    margin: 15% auto;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    text-align: center;
+    border-radius: 10px;
+}
+
+.popup-content h2 {
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 35px;
+    margin-bottom: 20px;
+
+}
+
+.popup-content p {
+    font-size: 19px;
+    color: #afabab;
+    margin-bottom: 20px;
+}
+.popup-content img {
+    filter: brightness(-200) saturate(100%) invert(14%) sepia(97%) saturate(74979%) hue-rotate(296deg) brightness(40%) contrast(140%);
+
+}
+
+.popup.open {
+    display: block;
+}
+
+.no-scroll {
+    overflow: hidden;
+}
+
+#backToHomeBtn {
+    background-color: #ad27b2;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-bottom: 8px;
 }
diff --git a/pages/feedback.html b/pages/feedback.html
@@ -100,11 +100,16 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
             <div style="display: flex; justify-content: center;">
                 <button type="submit" style="width: 150px;">Submit</button>
             </div>
-            <div id="thankYouMessage" style="display: none; font-size:25px; text-align: center; color: green; margin-top: 20px;">
-                Thank you for your feedback!
-            </div>
         </form>
     </div>
+    <div id="feedbackPopup" class="popup">
+        <div class="popup-content">
+            <h2>Thank You for your Feedback!</h2>
+            <img src="/assets/images/Feed-purple-tick-unscreen.gif" alt="✅" width="160" height="140">
+            <p>Your feedback has been submitted successfully.</p>
+            <button id="backToHomeBtn">Back to Home</button>
+        </div>
+    </div>
     <footer class="footer" style="width: 100%;height: 2px;">
         <div class="socialIcons">
             <span class="icons">
@@ -138,19 +143,29 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
     <script src="../js/background.js"></script>
     <script src="../js/script.js"></script>
     <script>
+
         document.getElementById("feedbackForm").addEventListener("submit", function (event) {
             event.preventDefault(); 
-            setTimeout(function ()
-            {
+            setTimeout(function () {
                 document.getElementById("feedbackForm").reset();
-                document.getElementById("thankYouMessage").style.display = "block";
-                setTimeout(function () {
-                    document.getElementById("thankYouMessage").style.display = "none";
-                }, 3000);
+                document.getElementById("feedbackPopup").style.display = "block";
             }, 100); 
+        });
 
+        document.getElementById("backToHomeBtn").addEventListener("click", function () {
+            document.getElementById("feedbackPopup").style.display = "none";
+            window.location.href = "../index.html"; // Redirect to home page
         });
-    </script>
+
+
+        window.onclick = function(event) {
+            var popup = document.getElementById("feedbackPopup");
+            if (event.target == popup) {
+                popup.style.display = "none";
+            }
+        }
+</script>
+
     <script src="../js/backToTopBtn.js"></script>
     <script src="../js/social.js"></script>
     <div id="accountNotAvailableModal" class="account-not-available-modal">