Add banner and modal window
authorMichael McMahon <michael@fsf.org>
Mon, 14 Nov 2022 22:58:05 +0000 (17:58 -0500)
committerMichael McMahon <michael@fsf.org>
Mon, 14 Nov 2022 22:58:05 +0000 (17:58 -0500)
v12/givingguide.html

index 430c5988b38a6399c9e270ec13cca069ce1512f8..bf290277c91ef9764e2477c5443175ce5ea651b7 100644 (file)
 <body>
 
 <!-- Add banner and modal window here -->
+    <iframe src="//static.fsf.org/nosvn/banners/202211fundraiser/" scrolling="no" style="width: 100%; height: 150px; display: block; margin: 0; border: 0 none; overflow: hidden;"></iframe>
+
+            <link type="text/css" rel="stylesheet" href="https://static.fsf.org/nosvn/fonts/fa/css/font-awesome.min.css">
+            <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;
+  }
+
+  #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, a:active, a:focus {
+  outline: none;
+  border-bottom: 0px;
+}
+
+#fsf-modal-window-elem {
+  overflow: auto;
+  padding: 20px;
+  border-style: solid;
+  border-width: 5px;
+  border-color: #720000;
+  border-radius: 20px;
+  box-shadow: 0px 0px 10px #111111;
+  background-color: #e2c6a5;
+}
+
+#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: #002047;
+  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;
+  cursor: pointer;
+}
+
+#fsf-modal-window-elem-close-button:hover {
+  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:#002047;
+  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;
+  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: #002047;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+#fsf-modal-window-elem-text a:hover {
+  color: #fd8e1b;
+}
+
+#fsf-modal-window-elem-text a:focus {
+  color: #fd8e1b;
+}
+
+#fsf-modal-window-elem-text a:active {
+  color: #ffac30;
+}
+
+#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: #002047;
+}
+            </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>Defend the freedom to share!</h2>
+                            </div>
+                            <div id="fsf-modal-window-elem-left-column">
+                                <div id="fsf-modal-window-elem-text">
+
+<p>
+
+Consider the presence of software in your life and how so much of what we do depends upon the works of others. This is why the freedom to share is at the core of the FSF's work. We can only truly foster free software, free documentation, and free cultural works for users around the world if we have the ability to share.
+
+</p>
+
+<p>
+
+Join us today for $10/month ($5 for students), and help us reach our goal of 455 new associate members by December 31!
+
+</p>
+
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?mtm_campaign=fall22&mtm_source=modal">Read more</a> | <a href="https://my.fsf.org/join?mtm_campaign=fall22&mtm_source=modal">Join</a></span></p>
+
+                                </div>
+                            </div>
+                            <div id="fsf-modal-window-elem-right-column">
+                                <div id="fsf-modal-window-elem-buttons" style="border-radius: 20px;box-shadow: 5px 0 5px -6px #002047, -5px 0 5px -6px #002047;">
+                                    <div style="background-color:#720000; border-top-right-radius: 20px; border-top-left-radius: 20px;">
+                                      <a style="text-shadow: 0px 0px 4px #ffe6b4;" href="https://my.fsf.org/join?mtm_campaign=fall22&mtm_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-check-circle">&nbsp;</i>Join</a>
+                                    </div>
+
+                                    <div style="background-color:#e2c6a5;">
+                                      <a href="https://my.fsf.org/renew?mtm_campaign=fall22&mtm_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-refresh">&nbsp;</i>Renew</a>
+                                    </div>
+
+                                    <div style="background-color:#da9d4d; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; margin-bottom: 2px">
+                                      <a style="text-shadow: 0px 0px 4px #ffe6b4;" href="https://my.fsf.org/donate?mtm_campaign=fall22&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 GPLv3-or-later by Andrew Engelbrecht
+
+var startTime, endTime, switchTextTime;
+
+startTime = new Date('2022-11-13T04:00:00Z');
+switchTextTime = new Date('2023-12-12T04:00:00Z');
+// endTime is unused.
+endTime = new Date('2023-12-17T04: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>Consider the presence of software in your life and how so much of what we do depends upon the works of others. This is why the freedom to share is at the core of the FSF\'s work. We can only truly foster free software, free documentation, and free cultural works for users around the world if we have the ability to share.<\/p><p>Join us today for \$10\/month \(\$5 for students\), and help us reach our goal of 455 new associate members by December 31!<\/p> \
+\
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?mtm_campaign=fall22&mtm_source=modal">Read more<\/a> |  <a href="https://my.fsf.org/join?mtm_campaign=fall22&mtm_source=modal">Join<\/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 = /showFsf202211FundraiserModalWindowElementP\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 = "showFsf202211FundraiserModalWindowElementP=false; path=/; domain=.fsf.org; expires=" + daysInFuture(forDays);
+    document.cookie = "showFsf202211FundraiserModalWindowElementP=false; path=/; SameSite=Strict; Secure; expires=" + daysInFuture(forDays);
+}
+
+// Hide the element from now to two weeks after closing it
+function fsfModalWindowElemDontShowForAWhile () {
+  fsfModalWindowElemDontShowForDays(7, true);
+}
+
+// Keep the element visible for now, but do not show it for a while
+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>
 
   <nav class="navbar navbar-default">
     <div class="container-fluid">