Skip to content

Commit 5a42615

Browse files
Merge remote-tracking branch 'origin/popup-form' into staging-aggregate-20260216-152829
2 parents fb0cb3f + 674f493 commit 5a42615

3 files changed

Lines changed: 216 additions & 0 deletions

File tree

layouts/partials/survey-btn.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<div class="survey-float-container" id="surveyFloat">
2+
<div class="survey-float-content">
3+
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeeopWpzqf0IEk8rAvxu8Pv5DoGRGK3aDvql1a3VapQ5_5bVg/viewform"
4+
target="_blank"
5+
rel="noopener noreferrer"
6+
class="survey-float-button"
7+
id="surveyFloatButton">
8+
Help us improve the FORRT website
9+
</a>
10+
</div>
11+
</div>
12+
13+
<style>
14+
.survey-float-container {
15+
position: fixed;
16+
top: 80px;
17+
right: 20px;
18+
z-index: 999;
19+
animation: floatBubble 2s infinite;
20+
}
21+
22+
.survey-float-button {
23+
display: inline-block;
24+
background: linear-gradient(to bottom, #ffffff, #F9F4CB );
25+
color: linear-gradient(135deg, #3498db, #2c3e50) !important;
26+
padding: 8px 15px;
27+
border-radius: 30px;
28+
text-decoration: none;
29+
font-weight: 500;
30+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
31+
transition: all 0.3s ease;
32+
transform-origin: center;
33+
font-size: 0.9rem;
34+
border: none;
35+
cursor: pointer;
36+
}
37+
38+
.survey-float-button:hover {
39+
background: #ffffff;
40+
transform: scale(1.05);
41+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
42+
}
43+
44+
@keyframes floatBubble {
45+
0% { transform: translateY(0px) translateX(0px); }
46+
50% { transform: translateY(-5px) translateX(3px); }
47+
100% { transform: translateY(0px) translateX(0px); }
48+
}
49+
50+
@media (max-width: 768px) {
51+
.survey-float-container {
52+
top: 60px;
53+
right: 10px;
54+
}
55+
.survey-float-button {
56+
padding: 10px 20px;
57+
font-size: 0.8rem;
58+
}
59+
}
60+
</style>
61+
62+
<script>
63+
document.addEventListener('DOMContentLoaded', function() {
64+
// Check if user has completed survey
65+
if (!localStorage.getItem('surveyCompleted')) {
66+
document.getElementById('surveyFloat').style.display = 'block';
67+
}
68+
69+
// Track survey button click
70+
document.getElementById('surveyFloatButton').addEventListener('click', function() {
71+
localStorage.setItem('surveyCompleted', 'true');
72+
document.getElementById('surveyFloat').style.display = 'none';
73+
});
74+
});
75+
</script>
76+

layouts/partials/survey-popup.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<div class="survey-popup" id="surveyPopup">
2+
<div class="survey-content">
3+
<button class="close-btn">&times;</button>
4+
<h2>Help us improve the FORRT website</h2>
5+
<p>We would be grateful if you could complete this survey.
6+
Your feedback will directly inform improvements to navigation, accessibility, and content structure.<br>
7+
<strong>Note:</strong>All answers are anonymous and will help us make the website better for everyone!</p>
8+
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeeopWpzqf0IEk8rAvxu8Pv5DoGRGK3aDvql1a3VapQ5_5bVg/viewform"
9+
target="_blank"
10+
rel="noopener"
11+
class="survey-button"
12+
id="surveyLink">
13+
Take the Survey
14+
</a>
15+
</div>
16+
</div>
17+
18+
<style>
19+
.survey-popup {
20+
position: fixed;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
background: rgba(0, 0, 0, 0.6);
26+
display: none;
27+
justify-content: center;
28+
align-items: center;
29+
z-index: 1000;
30+
}
31+
32+
.survey-content {
33+
background: white;
34+
padding: 2rem;
35+
border-radius: 15px;
36+
max-width: 800px;
37+
position: relative;
38+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
39+
text-align: center;
40+
}
41+
42+
.close-btn {
43+
position: absolute;
44+
top: 15px;
45+
right: 15px;
46+
background: none;
47+
border: none;
48+
font-size: 1.5rem;
49+
cursor: pointer;
50+
color: #666;
51+
}
52+
53+
.survey-button {
54+
display: inline-block;
55+
background: #4CAF50;
56+
color: white;
57+
padding: 12px 24px;
58+
border-radius: 25px;
59+
text-decoration: none;
60+
margin-top: 1rem;
61+
transition: transform 0.2s, background 0.2s;
62+
}
63+
64+
.survey-button:hover {
65+
background: #45a049;
66+
transform: translateY(-2px);
67+
}
68+
a.survey-button:hover {
69+
color: white;
70+
}
71+
72+
h2 {
73+
color: #2c3e50;
74+
margin-bottom: 1rem;
75+
}
76+
77+
p {
78+
color: #666;
79+
line-height: 1.6;
80+
margin: 1rem 0;
81+
}
82+
83+
@media (max-width: 600px) {
84+
.survey-content {
85+
width: 90%;
86+
padding: 1.5rem;
87+
}
88+
}
89+
</style>
90+
91+
<!-- The below Cookie functions manage visit counts by retrieving and updating a cookie,
92+
while the survey shows only on the 5th visit if it hasn't been completed.
93+
Once the survey is completed, its state is saved in localStorage,
94+
preventing further popups on subsequent visits. -->
95+
96+
<script>
97+
// Helper function to get a cookie value
98+
function getCookie(name) {
99+
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
100+
return match ? match[2] : null;
101+
}
102+
103+
// Helper function to set a cookie
104+
function setCookie(name, value, days = 365) {
105+
const expires = new Date(Date.now() + days * 864e5).toUTCString();
106+
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
107+
}
108+
109+
document.addEventListener('DOMContentLoaded', function () {
110+
const hasCompleted = localStorage.getItem('surveyCompleted') === 'true';
111+
112+
let visitCount = parseInt(getCookie('visitCount')) || 0;
113+
visitCount++;
114+
setCookie('visitCount', visitCount);
115+
116+
if (!hasCompleted && visitCount >= 5) {
117+
document.getElementById('surveyPopup').style.display = 'flex';
118+
}
119+
120+
// Close button handler
121+
document.querySelector('.close-btn').addEventListener('click', function () {
122+
closeSurvey();
123+
});
124+
125+
// Survey link handler
126+
document.getElementById('surveyLink').addEventListener('click', function () {
127+
localStorage.setItem('surveyCompleted', 'true');
128+
closeSurvey();
129+
});
130+
});
131+
132+
function closeSurvey() {
133+
document.getElementById('surveyPopup').style.display = 'none';
134+
}
135+
</script>

themes/academic/layouts/_default/baseof.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
{{ partial "search" . }}
2525

2626
{{ partial "navbar" . }}
27+
28+
{{ partial "survey-btn.html" . }}
2729

2830
{{ block "main" . }}{{ end }}
2931

@@ -38,5 +40,8 @@
3840

3941
{{ partial "citation" . }}
4042

43+
{{ partial "survey-popup.html" . }}
44+
45+
4146
</body>
4247
</html>

0 commit comments

Comments
 (0)