From 9a723edc5810a6e7935f5761ad001c2022599a1b Mon Sep 17 00:00:00 2001
From: Michael McMahon <michael@fsf.org>
Date: Wed, 18 Jun 2025 17:34:41 -0400
Subject: [PATCH] Add fundraiser banner and modal window

---
 2024/includes/banner.html | 416 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 415 insertions(+), 1 deletion(-)

diff --git a/2024/includes/banner.html b/2024/includes/banner.html
index fe3e04ba..e7c1205b 100644
--- a/2024/includes/banner.html
+++ b/2024/includes/banner.html
@@ -3,7 +3,7 @@
 
     <!-- Place banners here. -->
 
-    <!-- <iframe title="FSF Fundraiser Banner" src="//static.libreplanet.org/nosvn/banners/202411fundraiser/" scrolling="no" style="width: 100%; height: 300px; display: block; margin: 0; border: 0 none; overflow: hidden;"></iframe> -->
+    <iframe title="FSF Fundraiser Banner" src="//static.libreplanet.org/nosvn/banners/202506fundraiser/" scrolling="no" style="width: 100%; height: 300px; display: block; margin: 0; border: 0 none; overflow: hidden;"></iframe>
 
     <div class="lp-archived">
       <p>This is an archive of a past conference. Instead of hosting one LibrePlanet conference in 2025, the FSF is planning a jam-packed anniversary year, filled with several new and exciting activities in 2025. <a href="https://www.fsf.org/blogs/community/forty-years-of-commitment-to-software-freedom">
@@ -12,7 +12,421 @@
 
     <!-- Place modal window here. -->
 
+            <!-- Begin fsf-modal-window-elem campaign element -->
+            <link type="text/css" rel="stylesheet" href="//static.libreplanet.org/nosvn/fonts/fa/css/font-awesome.min.css">
+            <!-- Absolute link. -->
+            <style>
+#fsf-modal-window-elem-container div {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
 
+@media screen and (min-width: 700px) {
+  #fsf-modal-window-elem-outer-v-center {
+    display: table;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  #fsf-modal-window-elem-inner-v-center {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  #fsf-modal-window-elem {
+    width: 687px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #fsf-modal-window-elem-right-column {
+    float: right;
+    width: 280px;
+    padding-left: 20px;
+    color: #002047; /* Text */
+  }
+
+  #fsf-modal-window-elem-left-column {
+    width: 100%;
+    float: left;
+    margin-right: -280px;
+  }
+
+  #fsf-modal-window-elem-text {
+    margin-right: 280px;
+  }
+}
+
+@media screen and (max-width: 699px) {
+  #fsf-modal-window-elem {
+    -ms-box-orient: horizontal;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+  }
+
+  #fsf-modal-window-elem {
+    width: 80vw;
+    margin-left: 10vw;
+    margin-right: 10vw;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  #fsf-modal-window-elem-right-column {
+    width: 100%;
+    order: 1;
+  }
+
+  #fsf-modal-window-elem-left-column {
+    width: 100%;
+    order: 2;
+  }
+
+  #fsf-modal-window-elem-text {
+    margin-top: 20px;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .long-button-text {
+    font-size: 25px !important;
+  }
+}
+
+#fsf-modal-window-elem-container {
+  position: fixed;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.8);
+  font-weight: normal;
+}
+
+#fsf-modal-window-elem a, 
+#fsf-modal-window-elem a:active,
+#fsf-modal-window-elem a:focus {
+  outline: none;
+  border-bottom: 0px;
+  color: #fff; /* Text */
+}
+
+#fsf-modal-window-elem {
+  overflow: auto;
+  padding: 20px;
+  border-style: solid;
+  border-width: 5px;
+  border-color: #0065ff; /* Border */
+  border-radius: 20px;
+  box-shadow: 0px 0px 10px #111111;
+  background-color: #1d0c3b; /* Background */
+}
+
+#fsf-modal-window-elem-header {
+  width: 100%;
+}
+
+#fsf-modal-window-elem-header h2 {
+  font-family: sans-serif,"Helvetica",Arial;
+  font-weight: bold;
+  font-size: 24px;
+  color: #fdd538; /* Header Text */
+  text-shadow: 0px 0px 8px #00378c; /* Header Text Shadow */
+  padding-bottom: 20px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  border: none;
+}
+
+#fsf-modal-window-elem-close-button {
+  float: right;
+  height: 40px;
+  margin-right: -20px;
+  margin-top: -20px;
+  padding: 11px;
+  color: #888; /* Close button */ /* Text */
+  cursor: pointer;
+}
+
+#fsf-modal-window-elem-close-button:hover,
+#fsf-modal-window-elem-text a:hover,
+#fsf-modal-window-elem-text a:focus,
+#fsf-modal-window-elem-text a:active {
+  color: #aaf;
+}
+
+#fsf-modal-window-elem-right-column {
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+#fsf-modal-window-elem-buttons div {
+  height:53.333px;
+  line-height: 53.333px;
+  margin-left:auto;
+  margin-right:auto;
+  display:block;
+}
+
+#fsf-modal-window-elem-buttons a {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-size: 35px;
+  color: #fff; /* Text */
+  text-decoration: none;
+  font-family: sans-serif,"Helvetica",Arial;
+  font-weight: normal;
+}
+
+#fsf-modal-window-elem-maybe-later {
+  margin-top: 5px;
+  margin-bottom: -5px;
+}
+
+#fsf-modal-window-elem-maybe-later a {
+  color: #367c93; /* Text */
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: normal;
+  font-family: sans-serif,"Helvetica",Arial;
+  font-size: 16px;
+}
+
+#fsf-modal-window-elem-text a {
+  color: #fdd538; /* Text */
+  font-weight: 700;
+  text-decoration: none;
+}
+
+#fsf-modal-window-elem-text p {
+  font-family: sans-serif,"Helvetica",Arial;
+  font-size: 17px;
+  font-weight: normal;
+  margin: 0px 0px 10px 0px;
+  line-height: 20px;
+  color: #fff; /* Text */
+}
+
+            </style>
+            <div id="fsf-modal-window-elem-container" style="display: none;">
+              <div id="fsf-modal-window-elem-outer-v-center">
+                <div id="fsf-modal-window-elem-inner-v-center">
+                  <div id="fsf-modal-window-elem">
+                    <div id="fsf-modal-window-elem-header">
+                      <div id="fsf-modal-window-elem-close-button"
+                        onclick="//fsfModalWindowElemDontShowForAWhile();">
+                        <i class="fa fa-close">&#8203;</i>
+                      </div>
+                      <h2>Defy dystopia</h2>
+                    </div>
+                    <div id="fsf-modal-window-elem-left-column">
+                      <div id="fsf-modal-window-elem-text">
+
+<p>
+  In a world where technology is becoming more and more predatory, a dystopian
+  reality seems just around the corner. It can feel like others hold the reins
+  and dictate how we live our lives. Fear not: free software can defy dystopia
+  because you, the user, have full control over the software vital to your daily
+  life.
+</p>
+
+<p>
+  The FSF has been campaigning for your software freedom for forty years. We
+  can't prevent a dystopian future alone - join us in our crucial work to guard
+  user freedom and defy dystopia. Become an associate member today!
+</p>
+
+<p><span id="fsf-modal-window-text-link"><!--<a href="https://my.fsf.org/join?mtm_campaign=spring25&mtm_source=modal">Join</a> --><a href="https://www.fsf.org/appeal">Read more</a></span></p>
+
+                      </div>
+                    </div>
+                    <div id="fsf-modal-window-elem-right-column">
+                      <!-- Keep these styles inline because they are copied to the appeal page. -->
+                      <div id="fsf-modal-window-elem-buttons"
+                        style="border-radius: 20px;box-shadow: 5px 0 5px -6px #0c2b2b, -5px 0 5px -6px #0c2b2b;">
+                        <div class="join" style="background-color:#3498DB; border-top-right-radius: 20px; border-top-left-radius: 20px;">
+                          <a style="color:#fdd538;text-shadow: 0px 0px 4px #2670a1;"
+                            href="https://my.fsf.org/join?mtm_campaign=spring25&mtm_source=modal"
+                            onclick="//fsfModalWindowElemFollowedLink();">
+                            <i class="fa fa-check-circle">&nbsp;</i>Join
+                          </a>
+                        </div>
+
+                        <div class="renew" style="background-color:#2ecc71;">
+                          <a style="color: #FFF;text-shadow: 0px 0px 8px #219452;"
+                            href="https://my.fsf.org/renew?mtm_campaign=spring25&mtm_source=modal"
+                            onclick="//fsfModalWindowElemFollowedLink();">
+                            <i class="fa fa-refresh">&nbsp;</i>Renew
+                          </a>
+                        </div>
+
+                        <div class="donate"
+                          style="background-color:#1abc9c; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; margin-bottom: 2px">
+                          <a style="text-shadow: 0px 0px 4px #138c74;"
+                            href="https://my.fsf.org/donate?mtm_campaign=spring25&mtm_source=modal"
+                            onclick="//fsfModalWindowElemFollowedLink();">
+                            <i class="fa fa-money">&nbsp;</i>Donate
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <script>
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
+
+// Licensed GPL-3.0-or-later by Andrew Engelbrecht.
+
+var startTime, endTime, switchTextTime;
+
+startTime = new Date('2025-03-08T04:00:00Z');
+switchTextTime = new Date('2025-07-30T04:00:00Z');
+// Turning this off for now.
+
+// endTime is unused.
+// endTime = new Date('2025-07-29T04:00:00Z');
+
+// Possibly switch the text that is displayed in the modal window, depending
+// upon the current date.
+function fsfModalWindowElemMaybeSwitchText () {
+
+    var now;
+
+    now = new Date();
+    if (now.getTime() < switchTextTime.getTime()) {
+        return; // Do not switch the text.
+    }
+
+    // Switch text
+    document.getElementById("fsf-modal-window-elem-text").innerHTML =' \
+\
+<p>In a world where technology is becoming more and more predatory, a dystopian reality seems just around the corner. It can feel like others hold the reins and dictate how we live our lives. Fear not: free software can defy dystopia because you, the user, have full control over the software vital to your daily life.<\/p> \
+\
+<p>The FSF has been campaigning for your software freedom for forty years. We can\'t prevent a dystopian future alone - join us in our crucial work to guard user freedom and defy dystopia. Become an associate member today!<\/p> \
+\
+<p><span id="fsf-modal-window-text-link"><!--<a href="https://my.fsf.org/join?mtm_campaign=spring25&mtm_source=modal">Join<\/a> | --><a href="https://www.fsf.org/appeal?mtm_campaign=spring25&mtm_source=modal">Read more<\/a><\/span><\/p>';
+}
+
+// Show fsf-modal-window-elem if it has not been previously closed by the user,
+// nor recently hit "maybe later", and the campaign is still happening.
+function fsfModalWindowElemMaybeShow () {
+
+    var pattern, noShowFsfModalWindowElementP, now;
+
+    // See if cookie says not to show element
+    pattern = /showFsf202506FundraiserModalWindowElementP\s*=\s*false/;
+    noShowFsfModalWindowElementP = pattern.test(document.cookie);
+
+    // Uncomment here to enable modal window hiding
+    if (!noShowFsfModalWindowElementP) {
+        setTimeout(function () {
+            // display the element
+            document.getElementById("fsf-modal-window-elem-container").style.display="block";
+        }, 0);
+    }
+}
+
+// Call this first to set the proper text.
+fsfModalWindowElemMaybeSwitchText();
+// Check if appeal is the url.
+if (window.location.href.indexOf("appeal") == -1) {
+  // Call this right away to avoid flicker.
+  fsfModalWindowElemMaybeShow();
+}
+
+// Get the time `plusDays` in the future.
+// This can be a fraction.
+function daysInFuture (plusDays) {
+    var now, future;
+
+    now = new Date();
+    future = new Date(now.getTime() + Math.floor(1000 * 60 * 60 * 24 * plusDays));
+    return future.toGMTString();
+}
+
+// Hide the fsf-modal-window-elem
+function fsfModalWindowElemHide () {
+    document.getElementById("fsf-modal-window-elem-container").style.display="none";
+}
+
+// Optionally hide elem and set a cookie to keep the fsf-modal-window-elem hidden for the next `forDays`.
+function fsfModalWindowElemDontShowForDays (forDays, hideNow) {
+    if (hideNow === true) {
+        fsfModalWindowElemHide();
+    }
+    document.cookie = "showFsf202506FundraiserModalWindowElementP=false; path=/; SameSite=Strict; Secure; expires=" + daysInFuture(forDays);
+}
+
+// Hide the element for one week after closing it.
+function fsfModalWindowElemDontShowForAWhile () {
+  fsfModalWindowElemDontShowForDays(7, true);
+}
+
+// Keep the element visible for now, but do not show it for two weeks.
+function fsfModalWindowElemFollowedLink () {
+  fsfModalWindowElemDontShowForDays(14, false);
+}
+
+// Check if visiting appeal page.
+if (window.location.href.indexOf("appeal") > -1) {
+  fsfModalWindowElemDontShowForAWhile();
+}
+
+// Close popup if user clicks trasparent part
+document.getElementById("fsf-modal-window-elem-container").addEventListener("click", function(event){
+  fsfModalWindowElemDontShowForAWhile();
+});
+
+// Do not close popup if clicking non-trasparent part (with the text and buttons)
+document.getElementById("fsf-modal-window-elem").addEventListener("click", function(event){
+  event.stopPropagation();
+});
+
+// Close popup if user clicks X icon.
+document.getElementById("fsf-modal-window-elem-close-button").addEventListener("click", function(event){
+  fsfModalWindowElemDontShowForAWhile();
+});
+
+// Disable popup if user clicks one of the main buttons.
+document.getElementById("fsf-modal-window-elem-buttons").addEventListener("click", function(event){
+  fsfModalWindowElemFollowedLink();
+});
+
+// Disable popup if user clicks one of the "Read more" link.
+document.getElementById("fsf-modal-window-text-link").addEventListener("click", function(event){
+  fsfModalWindowElemFollowedLink();
+});
+
+// Close popup if user presses escape key.
+window.addEventListener("keydown",  function  (event)  {
+    switch  (event.key)  {
+        case  "Escape":
+            fsfModalWindowElemDontShowForAWhile();
+            break;
+        default:
+            return;
+    }
+},  true);
+// @license-end
+              </script>
+            </div>
+            <!-- End fsf-modal-window-elem campaign element -->
 
     <div id="wrapper"> <!-- start of wrapper -->
       <div class="lp-banner hidden-xs"> <!--start of lp banner -->
-- 
2.25.1