Add banner and modal window
[enc-live.git] / en / index.html
index 8d38e06df39dd6daf61090dea6ea867321e51c7e..3e1da8f9844c938daea57912c1ffcbe6a4124824 100644 (file)
@@ -14,12 +14,408 @@ self-defense in 40 minutes with GnuPG." />
 <link rel="shortcut icon"
 href="../static/img/favicon.ico" />
 </head>
-<body>
+<body><iframe title="FSF Fundraiser Banner" src="//static.fsf.org/nosvn/banners/202311fundraiser/" scrolling="no" style="width: 100%; height: 150px; display: block; margin: 0; border: 0 none; overflow: hidden;"></iframe>
 
 <!--<div style="text-align: center; padding: 2.5px; background-color: #a94442; color:#fcf8e3;"><p>Due to Enigmail's PGP functionality being migrated into Icedove and Thunderbird, steps 2 and 3 of the guide are currently out of date.</p><p> Thank you for your patience while we're working on a new round of updates.</p></div>-->
 
 <!-- PLACE FUNDRAISER MODAL WINDOW HERE -->
 
+            <!-- Begin fsf-modal-window-elem campaign element -->
+            <link type="text/css" rel="stylesheet" href="//static.fsf.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, a:active, a:focus {
+  outline: none;
+  border-bottom: 0px;
+  color: #002047; /* Text */
+}
+
+#fsf-modal-window-elem {
+  overflow: auto;
+  padding: 20px;
+  border-style: solid;
+  border-width: 5px;
+  /*border-color: #8DA399;*/ /* Border */
+  border-color: #002047; /* Border */
+  border-radius: 20px;
+  box-shadow: 0px 0px 10px #111111;
+  /*background-color: #008080;*/ /* Background */
+  background-color: #80ffff; /* 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: #002047; /* Text */
+  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: #002047; /* 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: #002047; /* 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; */
+  color: #002047; /* 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: #002047; /* 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: #002047; /* 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>Free software, free society, free education!</h2>
+                            </div>
+                            <div id="fsf-modal-window-elem-left-column">
+                                <div id="fsf-modal-window-elem-text">
+
+<p>
+
+We can only learn in freedom if the software we use is free. Your donation helps us bring free software to learning environments around the world. What better way is there to learn about free software than by using it? Free software in education is vital for a free society. Together, we can build a future in which everyone will be able to learn in freedom and will know their rights as a user.
+
+</p>
+
+<p>
+
+<b>Invest in a free future by donating to the FSF today</b> and help us reach our goal of collecting $375,000 USD by December 31.
+
+</p>
+
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?mtm_campaign=fall23&mtm_source=modal">Read more</a> | <a href="https://my.fsf.org/donate?mtm_campaign=fall23&mtm_source=modal">Donate</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 #002047, -5px 0 5px -6px #002047;">
+                                    <div class="join" style="background-color:#cc5500; 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=fall23&mtm_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-check-circle">&nbsp;</i>Join</a>
+                                    </div>
+
+                                    <div class="renew" style="background-color:#800000;">
+                                      <a style="color: #FFFEFC;" href="https://my.fsf.org/renew?mtm_campaign=fall23&mtm_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-refresh">&nbsp;</i>Renew</a>
+                                    </div>
+
+                                    <div class="donate" style="background-color:#e19329; 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=fall23&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('2023-11-08T04:00:00Z');
+switchTextTime = new Date('2023-01-01T04:00:00Z');
+// endTime is unused.
+// endTime = new Date('2023-01-19T04: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>We can only learn in freedom if the software we use is free. Your donation helps us bring free software to learning environments around the world. What better way is there to learn about free software than by using it? Free software in education is vital for a free society. Together, we can build a future in which everyone will be able to learn in freedom and will know their rights as a user.<\/p> \
+\
+<p><b>Invest in a free future by donating to the FSF today<\/b> and help us reach our goal of collecting \$375,000 USD by January 19.<\/p> \
+\
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?mtm_campaign=fall23&mtm_source=modal">Read more<\/a> |  <a href="https://my.fsf.org/donate?mtm_campaign=fall23&mtm_source=modal">Donate<\/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 = /showFsf202311FundraiserModalWindowElementP\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 = "showFsf202311FundraiserModalWindowElementP=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 -->
 
 <!-- ~~~~~~~~~ GnuPG Header and introduction text ~~~~~~~~~ -->
 <header class="row" id="header"><div>