DOCS-217 Test and implement the feedback form

	new file:   docs/js/feedback.js
	modified:   mkdocs-base.yml
	modified:   mkdocs.yml

Author: alina-derkach-oaza

docs/js/feedback.js

@@ -0,0 +1,59 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const container = document.createElement("div");
+    container.style.position = "fixed";
+    container.style.bottom = "20px";
+    container.style.right = "20px";
+    container.style.background = "#fff";
+    container.style.border = "1px solid #ddd";
+    container.style.padding = "10px 15px";
+    container.style.borderRadius = "8px";
+    container.style.boxShadow = "0 2px 6px rgba(0,0,0,0.15)";
+    container.style.zIndex = 9999;
+    container.style.fontFamily = "sans-serif";
+    container.style.textAlign = "center";
+  
+    const title = document.createElement("div");
+    title.innerText = "Do you like Percona docs?";
+    title.style.marginBottom = "8px";
+    title.style.fontSize = "14px"; // Make the text larger
+    title.style.fontWeight = "bold"; // Make text bold
+    title.style.color = "#0E5FB5"; // Set desired blue color
+    title.style.fontFamily = '"Poppins", "Roboto", Arial, Helvetica, sans-serif';
+    container.appendChild(title);
+  
+    const stars = document.createElement("div");
+  
+    for (let i = 1; i <= 5; i++) {
+      const star = document.createElement("span");
+      star.innerHTML = "☆";
+      star.style.fontSize = "24px";
+      star.style.cursor = "pointer";
+      star.style.margin = "0 3px";
+  
+      star.addEventListener("mouseover", () => {
+        [...stars.children].forEach((s, index) => {
+          s.innerHTML = index < i ? "★" : "☆";
+          s.style.color = index < i ? "#0e5fb5" : "#000";
+        });
+      });
+      
+      star.addEventListener("mouseleave", () => {
+        [...stars.children].forEach((s) => {
+          s.innerHTML = "☆";
+          s.style.color = "#000"; // or reset to default
+        });
+      });      
+  
+      star.addEventListener("click", () => {
+        const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfhscELpzoXB4uyh9pXNmXSeqKc10IH_DxmAoaVGID85sO0Aw/viewform";
+        const ratingURL = `${formURL}?entry.303027158=${i}`;
+        window.open(ratingURL, "_blank");
+      });
+  
+      stars.appendChild(star);
+    }
+  
+    container.appendChild(stars);
+    document.body.appendChild(container);
+  });
+

mkdocs-base.yml

@@ -70,6 +70,7 @@ extra_javascript:
   - js/version-select.js
   - js/promptremover.js
   - js/consent.js
+  - js/feedback.js
 
 markdown_extensions:
   attr_list: {}

mkdocs.yml

@@ -14,17 +14,17 @@ extra:
   analytics:
     provider: google
     property: G-J4J70BNH0G
-    feedback:
-      title: Was this page helpful?
-      ratings:
-        - icon: material/emoticon-happy-outline
-          name: This page was helpful
-          data: 1
-          note: >-
-            Thank you for your feedback!
-        - icon: material/emoticon-sad-outline
-          name: This page could be improved
-          data: 0
-          note: >- 
-            Thanks for your feedback! Want to improve this page? Click <strong>Edit this page on GitHub</strong> above to submit a pull request.
+#    feedback:
+#      title: Was this page helpful?
+#      ratings:
+#        - icon: material/emoticon-happy-outline
+#          name: This page was helpful
+#          data: 1
+#          note: >-
+#            Thank you for your feedback!
+#        - icon: material/emoticon-sad-outline
+#          name: This page could be improved
+#          data: 0
+#          note: >- 
+#            Thanks for your feedback! Want to improve this page? Click <strong>Edit this page on GitHub</strong> above to submit a pull request.