POP UP survey form

layouts/partials/survey-btn.html

@@ -0,0 +1,76 @@
+<div class="survey-float-container" id="surveyFloat">
+    <div class="survey-float-content">
+      <a href="https://docs.google.com/forms/d/e/1FAIpQLSeeopWpzqf0IEk8rAvxu8Pv5DoGRGK3aDvql1a3VapQ5_5bVg/viewform"
+         target="_blank"
+         rel="noopener noreferrer"
+         class="survey-float-button"
+         id="surveyFloatButton">
+         Help us improve the FORRT website
+      </a>
+    </div>
+  </div>
+
+  <style>
+  .survey-float-container {
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    z-index: 999;
+    animation: floatBubble 2s infinite;
+  }
+
+  .survey-float-button {
+    display: inline-block;
+    background: #4CAF50;
+    color: white !important;
+    padding: 12px 25px;
+    border-radius: 30px;
+    text-decoration: none;
+    font-weight: 500;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    transform-origin: center;
+    font-size: 0.9rem;
+    border: none;
+    cursor: pointer;
+  }
+
+  .survey-float-button:hover {
+    background: #45a049;
+    transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+  }
+
+  @keyframes floatBubble {
+    0% { transform: translateY(0px) translateX(0px); }
+    50% { transform: translateY(-5px) translateX(3px); }
+    100% { transform: translateY(0px) translateX(0px); }
+  }
+
+  @media (max-width: 768px) {
+    .survey-float-container {
+      top: 60px;
+      right: 10px;
+    }
+    .survey-float-button {
+      padding: 10px 20px;
+      font-size: 0.8rem;
+    }
+  }
+  </style>
+
+  <script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Check if user has completed survey
+    if (!localStorage.getItem('surveyCompleted')) {
+      document.getElementById('surveyFloat').style.display = 'block';
+    }
+
+    // Track survey button click
+    document.getElementById('surveyFloatButton').addEventListener('click', function() {
+      localStorage.setItem('surveyCompleted', 'true');
+      document.getElementById('surveyFloat').style.display = 'none';
+    });
+  });
+  </script>
+

layouts/partials/survey-popup.html

@@ -0,0 +1,135 @@
+<div class="survey-popup" id="surveyPopup">
+  <div class="survey-content">
+    <button class="close-btn">&times;</button>
+    <h2>Help us improve the FORRT website</h2>
+    <p>We would be grateful if you could complete this survey. 
+      Your feedback will directly inform improvements to navigation, accessibility, and content structure.<br>
+    <strong>Note:</strong>All answers are anonymous and will help us make the website better for everyone!</p>
+    <a href="https://docs.google.com/forms/d/e/1FAIpQLSeeopWpzqf0IEk8rAvxu8Pv5DoGRGK3aDvql1a3VapQ5_5bVg/viewform" 
+       target="_blank" 
+       rel="noopener"
+       class="survey-button"
+       id="surveyLink">
+       Take the Survey
+    </a>
+  </div>
+</div>
+
+<style>
+  .survey-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .survey-content {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    max-width: 800px;
+    position: relative;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #666;
+  }
+
+  .survey-button {
+    display: inline-block;
+    background: #4CAF50;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 25px;
+    text-decoration: none;
+    margin-top: 1rem;
+    transition: transform 0.2s, background 0.2s;
+  }
+
+  .survey-button:hover {
+    background: #45a049;
+    transform: translateY(-2px);
+  }
+  a.survey-button:hover {
+    color: white;
+  }
+
+  h2 {
+    color: #2c3e50;
+    margin-bottom: 1rem;
+  }
+
+  p {
+    color: #666;
+    line-height: 1.6;
+    margin: 1rem 0;
+  }
+
+  @media (max-width: 600px) {
+    .survey-content {
+      width: 90%;
+      padding: 1.5rem;
+    }
+  }
+</style>
+
+<!-- The below Cookie functions manage visit counts by retrieving and updating a cookie,
+while the survey shows only on the 5th visit if it hasn't been completed.
+Once the survey is completed, its state is saved in localStorage, 
+preventing further popups on subsequent visits. -->
+
+<script>
+  // Helper function to get a cookie value
+  function getCookie(name) {
+    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+    return match ? match[2] : null;
+  }
+
+  // Helper function to set a cookie
+  function setCookie(name, value, days = 365) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const hasCompleted = localStorage.getItem('surveyCompleted') === 'true';
+
+    let visitCount = parseInt(getCookie('visitCount')) || 0;
+    visitCount++;
+    setCookie('visitCount', visitCount);
+
+    if (!hasCompleted && visitCount >= 5) {
+      document.getElementById('surveyPopup').style.display = 'flex';
+    }
+
+    // Close button handler
+    document.querySelector('.close-btn').addEventListener('click', function () {
+      closeSurvey();
+    });
+
+    // Survey link handler
+    document.getElementById('surveyLink').addEventListener('click', function () {
+      localStorage.setItem('surveyCompleted', 'true');
+      closeSurvey();
+    });
+  });
+
+  function closeSurvey() {
+    document.getElementById('surveyPopup').style.display = 'none';
+  }
+</script>

themes/academic/layouts/_default/baseof.html

@@ -24,6 +24,8 @@
   {{ partial "search" . }}
 
   {{ partial "navbar" . }}
+
+  {{ partial "survey-btn.html" . }}
 
   {{ block "main" . }}{{ end }}
 
@@ -38,5 +40,8 @@
 
   {{ partial "citation" . }}
 
+  {{ partial "survey-popup.html" . }}
+
+
 </body>
 </html>