Merge pull request #20444 from cgranleese-r7/adds-survey-banner-docs-site

Adds survey banner to the docs site

Author: adfoster-r7

docs/_includes/header_custom.html

@@ -1,2 +1,7 @@
 <link rel="stylesheet" href="{% link assets/css/main.css %}">
 
+<!-- User Engagement Survey Banner -->
+<div id="survey-banner">
+  <p>📣 We value your feedback — <a href="https://docs.google.com/forms/d/e/1FAIpQLSd9fgpXmyHOYViSaS6jK_6f1Y1nVSU_eA4UH-fWKYeO5HLvww/viewform" target="_blank" rel="noopener">take our 5-minute survey</a></p>
+  <button id="close-banner" aria-label="Close banner">&times;</button>
+</div>

docs/_includes/js/custom.js

@@ -58,3 +58,44 @@ jtd.onReady(function(ready) {
         }
     }
 });
+/*
+ * Survey Banner Close Functionality
+ *
+ * This section handles the interactive behavior for the user engagement survey banner.
+ */
+(function() {
+    function initSurveyBanner() {
+        const banner = document.getElementById('survey-banner');
+        const closeButton = document.getElementById('close-banner');
+        const body = document.body;
+
+        if (!banner || !closeButton) {
+            return;
+        }
+
+        if (localStorage.getItem('surveyBannerClosed') === 'true') {
+            banner.style.display = 'none';
+            body.classList.add('banner-closed');
+        } else {
+            if (banner.offsetParent === null) {
+                body.appendChild(banner);
+            }
+            banner.style.display = 'flex';
+            banner.style.visibility = 'visible';
+            banner.style.opacity = '1';
+            body.classList.remove('banner-closed');
+        }
+
+        closeButton.addEventListener('click', function() {
+            banner.style.display = 'none';
+            body.classList.add('banner-closed');
+            localStorage.setItem('surveyBannerClosed', 'true');
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSurveyBanner);
+    } else {
+        initSurveyBanner();
+    }
+})();

docs/assets/css/main.css

@@ -1,6 +1,80 @@
 ---
 ---
 
+/*
+ * Survey Banner Styles
+ *
+ * This stylesheet contains all styling for the user engagement survey banner
+ * that appears at the top of all pages.
+ */
+body {
+    padding-top: 50px !important;
+}
+
+body.banner-closed {
+    padding-top: 0 !important;
+}
+
+#survey-banner {
+    background-color: #2c3e50;
+    color: white;
+    padding: 12px 20px;
+    text-align: center;
+    font-size: 13px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    box-sizing: border-box;
+    border-bottom: 2px solid #34495e;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+#survey-banner p {
+    margin: 0;
+    line-height: 1.4;
+    flex: 1;
+}
+
+#survey-banner a {
+    color: #3498db;
+    text-decoration: underline;
+}
+
+#survey-banner a:hover {
+    color: #5dade2;
+}
+
+#close-banner {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    flex-shrink: 0;
+}
+
+#close-banner:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+#close-banner:focus {
+    outline: 2px solid #3498db;
+    outline-offset: 2px;
+}
+
 #main-content p {
     text-align: justify;
 }