Add banner and modal window
authorMichael McMahon <michael@fsf.org>
Mon, 17 Jun 2019 22:44:25 +0000 (18:44 -0400)
committerMichael McMahon <michael@fsf.org>
Mon, 17 Jun 2019 22:44:25 +0000 (18:44 -0400)
en/index.html

index 53b87ca2044a45bb7a1f56b99ff63c98f5891d35..4f43dc8cc39dfef72aa714431f1b9f95babe2a17 100644 (file)
@@ -17,6 +17,432 @@ href="//static.fsf.org/nosvn/enc-dev0/img/favicon.ico" />
 
 <body>
 
+    <iframe src="//static.fsf.org/nosvn/banners/2019fundraiser-spring/" width="100%" height="100%" scrolling="no"
+      style="overflow: hidden; margin: 0; border: 0 none; display: block;">
+    </iframe>
+
+            <!-- begin fsf-modal-window-elem campaign element -->
+            <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;
+    }
+
+    #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;
+}
+
+#fsf-modal-window-elem {
+    overflow: auto;
+    zoom: 1;
+    padding: 20px;
+    border-style: solid;
+    border-width: 5px;
+    border-color: #0065ff;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px #111111;
+    background-color: #1d0c3b;
+}
+
+#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;
+    text-shadow: 0px 0px 8px #00378c;
+    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 {
+}
+
+#fsf-modal-window-elem-buttons a {
+    width: 100%;
+    display: block;
+    text-align:center;
+    font-size:35px;
+    color:#FFFFFF;
+    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 {
+    text-align: justify;
+    text-justify: inter-word;
+}
+
+#fsf-modal-window-elem-text a {
+    color: #fdd538;
+    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: 18px;
+    font-weight: normal;
+    margin: 0px 0px 10px 0px;
+    line-height: 20px;
+    color: #ffffff;
+    text-shadow: 0px 0px 8px #4600ba;
+}
+            </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"></i>
+                                </div>
+                                <h2>Become a member today and help the FSF fight for user freedom!</h2>
+                            </div>
+                            <div id="fsf-modal-window-elem-left-column">
+                                <div id="fsf-modal-window-elem-text">
+
+<p>
+
+Our large, diverse group of members and donors help the Free Software
+Foundation remain proudly independent. Join us today and help us achieve our
+goal of 200 new members in only 28 days (July 15). 
+
+</p>
+
+<p>
+
+Small contributions create a big impact! 
+
+</p>
+
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=fr_sp2019&pk_kwd=learn-more&pk_source=modal">READ MORE</a> | <a href="https://my.fsf.org/join?pk_campaign=fr_sp2019&pk_source=modal2">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: 0px 0px 5px #0c2b2b;">
+                                    <div style="background-color:#3498DB; border-top-right-radius: 20px; border-top-left-radius: 20px;">
+                                      <a style="color:#fdd538;text-shadow: 0px 0px 8px #2670a1;" href="https://my.fsf.org/join?pk_campaign=fr_sp2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-check-circle">&nbsp;</i>Join</a>
+                                    </div>
+
+                                    <div style="background-color:#2ecc71">
+                                      <a style="text-shadow: 0px 0px 8px #219452;" href="https://my.fsf.org/renew?pk_campaign=fr_sp2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-refresh"></i> Renew</a>
+                                    </div>
+
+                                    <div style="background-color:#1abc9c; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; margin-bottom: 2px">
+                                      <a style="text-shadow: 0px 0px 8px #138c74;" href="https://my.fsf.org/donate?pk_campaign=fr_sp2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-money"></i> Donate</a>
+                                    </div>
+                                </div>
+                                <!--
+                                <div id="fsf-modal-window-elem-maybe-later">
+                                    <a onclick="//fsfModalWindowElemMaybeLater();">maybe later</a>
+                                </div>
+                                -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <script type="text/javascript">
+// @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('2019-05-30T04:00:00Z');
+switchTextTime = new Date('2019-06-28T04:00:00Z');
+endTime = new Date('2019-07-12T04: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; // don't switch the dbd text
+    }
+
+    // switch dbd text
+    document.getElementById("fsf-modal-window-elem-text").innerHTML =' \
+\
+<p>Our large, diverse group of members and donors help the Free Software Foundation remain proudly independent. Join us and help us achieve our goal of 200 new members before July 15!</p> <p>Small contributions create a big impact!</p> \
+\
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=fr_sp2019&pk_kwd=learn-more&pk_source=modal">READ MORE</a> | <a href="https://my.fsf.org/join?pk_campaign=fr_sp2019&pk_source=modal2">JOIN</a></span></p>';
+}
+
+// show fsf-modal-window-elem if it hasn't been previously closed by
+// the user, nor recently hit "maybe later",
+// and the campaign is still happening
+function fsfModalWindowElemMaybeShow () {
+
+    var pattern, noShowFsfModalWindowElementP, now;
+
+    now = new Date();
+    if (now.getTime() < startTime.getTime() || now.getTime() > endTime.getTime()) {
+        return; // don't show the fsf-modal-window-elem
+    }
+
+    // see if cookie says not to show element
+    pattern = /showFsfSpring2019FundraiserModalWindowElementP\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();
+// call this right away to avoid flicker
+fsfModalWindowElemMaybeShow();
+
+
+// get the time `plusDays` in the future.
+// 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 = "showFsfSrping2019FundraiserModalWindowElementP=false; path=/; domain=.fsf.org; expires=" + daysInFuture(forDays);
+    document.cookie = "showFsfSpring2019FundraiserModalWindowElementP=false; path=/; expires=" + daysInFuture(forDays);
+}
+
+// hide the element from now to two weeks after closing it
+function fsfModalWindowElemDontShowForAWhile () {
+    fsfModalWindowElemDontShowForDays(14, true);
+}
+// hide the element from now to past the date of the campaign
+//function fsfModalWindowElemDontShowAgain () {
+//    fsfModalWindowElemDontShowForDays(120, true);
+//}
+// don't show the element for a while
+//function fsfModalWindowElemMaybeLater () {
+//    fsfModalWindowElemDontShowForDays(1, true);
+//}
+// keep the element visible for now, but don't show it for a while
+function fsfModalWindowElemFollowedLink () {
+    fsfModalWindowElemDontShowForDays(14, false);
+}
+
+// close popup if user clicks trasparent part
+document.getElementById("fsf-modal-window-elem-container").addEventListener("click", function(event){
+    fsfModalWindowElemDontShowForAWhile();
+});
+// don't 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();
+});
+//// close popup if user clicks maybe-later div
+//document.getElementById("fsf-modal-window-elem-maybe-later").addEventListener("click", function(event){
+//    fsfModalWindowElemMaybeLater();
+//});
+// 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>