Land #20435, adds survey banner to the docs site

Adds survey banner to the docs site

Author: msutovsky-r7

docs/_includes/header_custom.html

@@ -1,2 +1,11 @@
 <link rel="stylesheet" href="{% link assets/css/main.css %}">
 
+<!-- User Engagement Survey Banner -->
+<div id="survey-banner">
+  <p>
+    Click <a href="https://docs.google.com/forms/d/e/1FAIpQLSd9fgpXmyHOYViSaS6jK_6f1Y1nVSU_eA4UH-fWKYeO5HLvww/viewform"
+       target="_blank">here</a>
+    to participate in our user engagement survey! Your feedback will help us improve Metasploit and inform our roadmap. It should take about 5 minutes to complete, and your email will not be collected. Thank you!
+  </p>
+  <button id="close-banner" aria-label="Close banner">&times;</button>
+</div>

docs/_includes/js/custom.js

@@ -58,3 +58,37 @@ 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');
+        }
+
+        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,102 @@
 ---
 ---
 
+/*
+ * 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: 60px !important;
+}
+
+body.banner-closed {
+    padding-top: 0 !important;
+}
+
+#survey-banner {
+    background-color: #2c3e50;
+    color: white;
+    padding: 12px 20px;
+    text-align: center;
+    font-size: 14px;
+    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;
+}
+
+@media (max-width: 768px) {
+    #survey-banner {
+        padding: 10px 15px;
+        font-size: 13px;
+        gap: 15px;
+    }
+
+    body {
+        padding-top: 70px !important;
+    }
+
+    body.banner-closed {
+        padding-top: 0 !important;
+    }
+
+    #close-banner {
+        font-size: 18px;
+        width: 22px;
+        height: 22px;
+    }
+}
+
 #main-content p {
     text-align: justify;
 }