Add banner and modal window 2020 spring fundraiser
[fsf-giving-guide.git] / v9 / givingguide.html
index 298f2ba53746a2ff4940f8e26b2d6e3f9827a8dc..effd7827d96ff63dcf7817f1a94821668ed15789 100644 (file)
 -->
 
 <body>
-  <iframe src="//static1p.fsf.org/nosvn/banners/2018fundraiser/" width="100%" height="100%" scrolling="no" style="overflow: hidden; border: 0 none; display: block;"></iframe>
+
+<!-- Add banner and modal window here -->
+
+<iframe src="//static.fsf.org/nosvn/banners/2020fundraiser-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;
+    border-bottom: 0px;
+}
+
+#fsf-modal-window-elem {
+    overflow: auto;
+    zoom: 1;
+    padding: 20px;
+    border-style: solid;
+    border-width: 5px;
+    border-color: #0f68a7;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px #111111;
+    background-color: #fdd474;
+}
+
+#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-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:#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 {
+}
+
+#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;
+    /* text-shadow: 0px 0px 8px #004067;*/
+}
+            </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>The free software community must grow in order to meet new threats.</h2>
+                            </div>
+                            <div id="fsf-modal-window-elem-left-column">
+                                <div id="fsf-modal-window-elem-text">
+
+<p>
+
+In our now socially distant society, we can't live, work, or learn in freedom unless the software we use is free. Your membership protects everyone's digital freedoms from powerful forces using technology to disempower the public.
+
+</p>
+
+<p>
+
+Join us today for $10/month ($5 for students) and help us reach our August 7th goal of 200 new associate members!
+
+</p>
+
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=frspring2020&pk_kwd=learn-more&pk_source=modal">Read more</a> | <a href="https://my.fsf.org/join?pk_campaign=frspring2020&pk_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: 0px 0px 5px #0c2b2b;">
+                                    <div style="background-color:#fb6b73; border-top-right-radius: 20px; border-top-left-radius: 20px;">
+                                      <a style="text-shadow: 0px 0px 8px #f999ef;" href="https://my.fsf.org/join?pk_campaign=frspring2020&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-check-circle">&nbsp;</i>Join</a>
+                                    </div>
+
+                                    <div style="background-color:#fdd474">
+                                      <a style="text-shadow: 0px 0px 8px #ffffff;" href="https://my.fsf.org/renew?pk_campaign=frspring2020&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-refresh">&nbsp;</i>Renew</a>
+                                    </div>
+
+                                    <div style="background-color:#99d8fd; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; margin-bottom: 2px">
+                                      <a style="text-shadow: 0px 0px 8px #ffffff;" href="https://my.fsf.org/donate?pk_campaign=frspring2020&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-money">&nbsp;</i>Donate</a>
+                                    </div>
+                                </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('2020-07-01T04:00:00Z');
+switchTextTime = new Date('2020-08-08T04:00:00Z');
+endTime = new Date('2020-08-08T04: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>In our now socially distant society, we can\'t live, work, or learn in freedom unless the software we use is free. Your membership protects everyone\'s digital freedoms from powerful forces using technology to disempower the public.<\/p><p>Join us today for $10\/month ($5 for students) and help us reach our August 7th goal of 200 new associate members!<\/p> \
+\
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=frspring2020&pk_kwd=learn-more&pk_source=modal">Read more<\/a> |  <a href="https://my.fsf.org/join?pk_campaign=frspring2020&pk_source=modal">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;
+
+    // see if cookie says not to show element
+    pattern = /showFsfSpring2020FundraiserModalWindowElementP\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 = "showFsfSpring2020FundraiserModalWindowElementP=false; path=/; domain=.fsf.org; expires=" + daysInFuture(forDays);
+    document.cookie = "showFsfSpring2020FundraiserModalWindowElementP=false; path=/; 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 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();
+});
+
+// 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 -->
+
   <nav class="navbar navbar-default">
     <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
         <ul class="nav navbar-nav">
           <li><a class="animated fadeIn" href="https://www.fsf.org/about/">About the FSF</a></li>
           <li><a class="animated fadeIn" href="https://www.fsf.org/campaigns/">Campaigns</a></li>
-          <li><a class="animated fadeIn" href="https://my.fsf.org/donate?pk_campaign=fall18&pk_kwd=ggdonate">Donate</a></li>
+          <li><a class="animated fadeIn" href="https://my.fsf.org/join?pk_campaign=fall18&pk_kwd=ggjoin">Join</a></li>
           <li><a class="animated fadeIn" href="https://shop.fsf.org/">Shop</a>
           </ul>
 
         <h2 class="title text-center">Smartphones</h2>
         <div class="row is-table-row">
           <div class="good col-md-6 col-sm-6" style="position:relative">
+          <h5 class="text-center">Galaxy S3 with Replicant</h5>
             <img src="img/products/mobile_n2.png" alt="replicant phone" class="center-block" />
-            <h5 class="text-center">Galaxy S3 with Replicant</h5>
+  
 
             <!-- Buy/Download Button   -->
             <a id="get-item" class="btn get-item" role="button" data-toggle="collapse" href="#sellers" aria-expanded="false" aria-controls="sellers" style="display:none">
             <!-- End Buy/Download button -->
 
             <ul class="pros">
- <p>Why it's cool: Your smartphone is so much more than a phone: it's a tiny computer you carry with you every day, and for many people around the world, it's their only Internet-enabled device. Choosing one of these phones lets you bring software freedom everywhere you go. You <i>can</i> have a phone that respects your freedoms while still making calls, running your favorite apps, and sending all the text messages you want.</p>
+ <p>Why it's cool: Your smartphone is so much more than a phone: it's a tiny computer you carry with you every day, and for many people around the world, it's their only Internet-enabled device. Choosing one of these phones lets you bring software freedom everywhere you go. You <i>can</i> run your favorite apps and send all the text messages you want, while still running free software.</p>
 
-<p>         You can also get an <a href="https://tehnoetic.com/tehnoetic-s2-phone-replicant">S2</a> or an <a "https://tehnoetic.com/tet-n2">N2 phone/tablet</a>, complete with Replicant.</p>
+<p>         You can also get an <a href="https://tehnoetic.com/tehnoetic-s2-phone-replicant">S2</a> or an <a href="https://tehnoetic.com/tet-n2">N2 phone/tablet</a>, complete with Replicant.</p>
             </ul>
           </div>
           <!--End Good-->
         <h3 class="title text-center">Laptops</h3>
         <div class="row is-table-row">
           <div class="good col-md-6 col-sm-6">
-            <img src="img/products/t400.png" alt="t400" class="center-block" />
             <h5 class="text-center">T400 with GNU/Linux</h5>
+            <img src="img/products/t400.png" alt="t400" class="center-block" />
 
 
            
         <h3 class="title text-center">Compact Laptops</h3>
         <div class="row is-table-row">
           <div class="good col-md-6 col-sm-6">
+                <h5 class="text-center">X200 with GNU/Linux</h5> 
             <img src="img/products/x200.png" alt="x200" class="center-block" />
-            <h5 class="text-center">X200 with GNU/Linux</h5>
+
            
             <!-- Buy/Download Button   -->
             <a id="get-item-compact" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-compact" aria-expanded="false" aria-controls="sellers-compact" style="display:none">
                 <p class="sale-info links">
                   Libiquity's X200 is <a href="https://www.fsf.org/ryf">Respects Your Freedom</a> certified, but shipping is limited to the US. <a href="#libiquity-promotion">Sale details.</a>
 
+                </p>
+                               <a href="https://minifree.org/product/libreboot-x200-tablet/" class="seller action-button">Minifree</a>
+                <p class="sale-info links">
+                  Minifree's X200 is <a href="https://www.fsf.org/ryf">Respects Your Freedom</a> certified.
+
                 </p>
                 <a href="https://tehnoetic.com/tet-x200" class="seller action-button">Technoethical</a><br>
                 <p class="sale-info links">
                 <a href="https://shop.libiquity.com/product/taurinus-x200" class="seller action-button">Libiquity</a>
                 <p class="sale-info links">
                   Libiquity's X200 is <a href="https://www.fsf.org/ryf">Respects Your Freedom</a>-certified, but shipping is limited to the US. <a href="#libiquity-promotion">Sale details.</a>
+                </p>
+                                               <a href="https://minifree.org/product/libreboot-x200-tablet/" class="seller action-button">Minifree</a>
+                <p class="sale-info links">
+                  Minifree's X200 is <a href="https://www.fsf.org/ryf">Respects Your Freedom</a> certified.
+
                 </p>
                 <a href="https://tehnoetic.com/tet-x200" class="seller action-button">Technoethical</a>
                 <p class="sale-info links">
         <h3 class="title text-center">Convertible Laptops/Tablets</h3>
         <div class="row is-table-row">
           <div class="good col-md-6 col-sm-6">
+                       <h5 class="text-center">X200t with GNU/Linux</h5>
             <img src="https://static.fsf.org/nosvn/images/technoethical-x200t.png" alt="Technoethical convertible tablet laptop" class="center-block" />
-            <h5 class="text-center">X200t with GNU/Linux</h5>
+
 
             <!-- Buy/Download Button   -->
             <a id="get-item-convertible" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-convertible" aria-expanded="false" aria-controls="sellers-convertible" style="display:none">
         <h3 class="title text-center">Desktops</h3>
         <div class="row is-table-row">
           <div class="good col-md-6 col-sm-6">
+                       <h5 class="text-center">D16 Workstation with GNU/Linux</h5>
             <img src="img/products/desktop.png" alt="The Workstation, a tower computer by Vikings" class="center-block" />
-            <h5 class="text-center">D16 Workstation with GNU/Linux</h5>
            
             <!-- Buy/Download Button   -->
             <a id="get-item-desktop" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-desktop" aria-expanded="false" aria-controls="sellers-desktop" style="display:none">
          <!--start bad-->
           <div class="good col-md-6 col-sm-6">
              <ul class="pros">
-               <li>Choose from two operating systems: the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel, or Parabola.</li>
+               <li>Choose from two operating systems: the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> operating systems Trisquel and Parabola.</li>
                <li>Comes with free boot firmware.</li>
                <li>You can customize and specialize this model to your needs -- the essence of user freedom!</li>
 
         <h3 class="title text-center">3D Printers</h3>
         <div class="row is-table-row">
           <div class="good col-md-6 col-sm-6">
+                       <h5 class="text-center">LulzBot Mini</h5>
             <img src="img/products/lulzbot.png" alt="lulzbot" class="center-block" />
-            <h5 class="text-center">LulzBot Mini</h5>
+
 
             <!-- Buy/Download Button   -->
             <a id="get-item-print" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-print" aria-expanded="false" aria-controls="sellers-print" style="display:none">
@@ -679,12 +1101,13 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
         <h2 class="title text-center">Cool Devices</h2>
 <div class="container">
         <div class="row is-table-row">
-          <div class="col-md-5 col-sm-6">
-            <img src="https://shop.fsf.org/sites/default/files/styles/product_full/public/randomnumber.jpg" alt="NeuG USB True Random Number Generator and a MicroSD card" class="center-block" style="height: 140px; margin-bottom: 110px"/>
-           <h5 class="text-center">NeuG USB True Random Number Generator</h5>
+          <div class="col-md-5 col-sm-6 recommended-img">
+                   <h5 class="text-center">NeuG USB True Random Number Generator</h5>
+            <img src="https://shop.fsf.org/sites/default/files/styles/product_full/public/randomnumber.jpg" alt="NeuG USB True Random Number Generator and a MicroSD card" class="center-block" style="height: 140px; margin-top: 90px; margin-bottom: 90px;"/>
+
 
             <!-- Buy/Download Button   -->
-            <a id="get-item-random-number-generator" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-random-number-generator" aria-expanded="false" aria-controls="sellers-random-number-generator" style="display:none; top:205px;">
+            <a id="get-item-random-number-generator" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-random-number-generator" aria-expanded="false" aria-controls="sellers-random-number-generator" style="display:none;">
               BUY
                 <!-- Begin Sale -->
               <span class="sale" >sale</span>
@@ -719,7 +1142,8 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
           </div>
           <div class="col-md-7 col-sm-6">
             </h5>
-            <ul class="pros">
+<ul class="pros">
+  <li>The perfect present for the cryptogeek in your life.</li>
               <li>FST-01 (Flying Stone Tiny ZERO-ONE) is a tiny USB 32-bit computer based on a free (as in freedom) hardware design.</li>
              <li>NeuG is an implementation of a true random number generator (TRNG) for STM32F103 MCU.</li>
             </ul>
@@ -731,11 +1155,11 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
        
         <div class="row is-table-row">
           <div class="col-md-5 col-sm-6 recommended-img">
+                       <h5 class="text-center">Mini Wi-Fi Adapter</h5>
             <img src="https://static.fsf.org/nosvn/images/technoethical-adapter.png" alt="Mini Wi-Fi Adapter" class="center-block" />
-               <h5 class="text-center">Mini Wi-Fi Adapter</h5>
 
             <!-- Buy/Download Button   -->
-            <a id="get-item-mini-adapter" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-mini-adapter" aria-expanded="false" aria-controls="sellers-mini-adapter" style="display:none; top:205px;">
+            <a id="get-item-mini-adapter" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-mini-adapter" aria-expanded="false" aria-controls="sellers-mini-adapter" style="display:none;">
               BUY
               <!-- Begin Sale -->
               <span class="sale">sale</span>
@@ -798,11 +1222,11 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
  <div class="container">
         <div class="row is-table-row">
           <div class="col-md-5 col-sm-6 recommended-img">
+                   <h5 class="text-center">Long Range Wi-Fi Adapter</h5>
             <img src="img/products/thinkpenguin-long-range-adapter.png" alt="Long-range Wi-Fi Adapter" class="center-block" />
-           <h5 class="text-center">Long Range Wi-Fi Adapter</h5>
 
             <!-- Buy/Download Button   -->
-            <a id="get-item-long-range-adapter" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-long-range-adapter" aria-expanded="false" aria-controls="sellers-long-range-adapter" style="display:none; top:205px;">
+            <a id="get-item-long-range-adapter" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-long-range-adapter" aria-expanded="false" aria-controls="sellers-long-range-adapter" style="display:none;">
               BUY
               <!-- Begin Sale -->
               <span class="sale">sale</span>
@@ -850,11 +1274,12 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
         <div class="container">
           <div class="row is-table-row">
             <div class="col-md-5 col-sm-6 recommended-img">
-              <img src="img/products/thinkpenguin-mini-router.png" alt="VPN Router" class="center-block" />
              <h5 class="text-center">VPN Router</h5>
+              <img src="img/products/thinkpenguin-mini-router.png" alt="VPN Router" class="center-block" />
+
 
               <!-- Buy/Download Button   -->
-              <a id="get-item-vpn-router" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-vpn-router" aria-expanded="false" aria-controls="sellers-vpn-router" style="display:none; top:205px;">
+              <a id="get-item-vpn-router" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-vpn-router" aria-expanded="false" aria-controls="sellers-vpn-router" style="display:none;">
                 BUY
                 <!-- Begin Sale -->
                 <span class="sale">sale</span>
@@ -890,7 +1315,7 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
               <ul class="pros">
                 <li>Designed to complement your existing router by providing a VPN that enhances privacy and security and circumvents network controls.</li>
                 <li>Designed for easy setup.</li>
-                <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> LibreCMC operating system on hardware that is certified to <a href="https://www.fsf.org/ryf">Respect Your Freedom</a>.</li>
+                <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> LibreCMC operating system on a product that is certified to <a href="https://www.fsf.org/ryf">Respect Your Freedom</a>.</li>
               </ul>
             </div>
           </div>
@@ -909,11 +1334,12 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
 
             <ul class="pros">
              <p>There are <a href="https://www.defectivebydesign.org/guide/ebooks">plenty of places</a> to get your literature fix without any pesky DRM. We're highlighting some publishers and shops you should patronize below!</p>
-             <li><a href="https://leanpub.com/">Leanpub</a> is an author driven ebook Web site encouraging people to "publish early, publish often."</li>
+             <li><a href="https://leanpub.com/">Leanpub</a> is an author-driven ebook Web site encouraging people to "publish early, publish often."</li>
              <li><a href="https://lektu.com/">Lektu</a> provides you with media in Spanish.</li>
              <li><a href="https://www.manning.com/ebooks">Manning Publications</a> has audio and video in addition to ebooks.</li>
              <li><a href="https://nostarch.com/">No Starch Press</a> offers "the finest in geek entertainment."</li>
              <li><a href="https://www.packtpub.com/">Packt Publishing</a> has ebooks and videos covering a range of technical topics.</li>
+             <li><a href="https://www.smashwords.com/books/category/1/bestsellers/0/any/any">Smashwords</a> is the world's largest distributor of indie ebooks.</li>
            <li>Looking to buy paper books? Check out the <a href="https://shop.fsf.org/collection/books-docs">GNU Press Shop</a> for your technical manuals and documentation needs.</li>
            </ul>
 
@@ -956,10 +1382,11 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
          <!--start bad-->
           <div class="good col-md-6 col-sm-6">
             <ul class="cons">
-             <h5 class="text-center">Stay away from: Spotify (and all other major streaming services)</h5>
+             <h5 class="text-center">Stay away from: Spotify, iTunes, (and all other major streaming services)</h5>
              <ul>
           <li>Spotify is only one of many offenders when it comes to putting DRM in music: all major streaming services do this, with the support of big record labels.</li>
           <li>In addition to streaming music encumbered by DRM, people who want to use Spotify are required to install additional proprietary software. Even <a href="https://www.spotify.com/us/download/linux/">Spotify's client for GNU/Linux</a> relies on proprietary software.</li>
+          <li>Apple Music and iTunes streaming also use DRM on its files.</li>
             </ul>
           </div>
           <!--End Bad-->
@@ -1026,7 +1453,7 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
   </ul>
            <h5 class="text-center">Stay away from: These devices</h5>
             <ul class="cons">
-             <li>Internet of Things connected home appliances, smart speakers, and virtual assistants are little more than spying devices brought into your home.</li>
+             <li>Internet of Things connected home appliances, smart speakers, and virtual assistants are little more than spying devices brought into your home. These include Amazon Alexa, Amazon Echo, Google Home, Nest, Philips Hue lighting, Ring doorbell, Sonos One, and Wembo.</li>
              <li>Self-driving cars are full of proprietary software, and they also pose a terrible risk to cyclists, pedestrians, and riders. <a href="https://www.theguardian.com/technology/2017/jul/31/tesla-model-3-electric-car-doesnt-have-key-things-we-learned-speedometer-battery-sleep">Read more about</a> the Tesla Model 3's anti-features and autopilot system.</li>
             </ul>
           </div>
@@ -1045,7 +1472,14 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
         <div class="container">
           <h1 class="text-center">Recommended organizations for holiday donations</h1>
           <div class="row">
-            <div class="col-md-3 col-sm-4 col-xs-6">
+           <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
+              <a href="https://www.fsf.org/"><img src="img/charities/fsf.png" alt="fsf" class="center-block img-responsive" /></a>
+             <p>The Giving Guide is brought to you by the <a href="https://fsf.org">Free Software Foundation</a>. We are powered by our Associate Members. Will you help us propel free software to new frontiers by <a href="https://my.fsf.org/join?pk_campaign=fall18&pk_kwd=ggjoin">joining today</a>?</p>
+            </div>
+          </div>
+          <div style="height: 30px"></div>
+          <div class="row">
+           <div class="col-md-3 col-sm-4 col-xs-6">
               <a href="https://april.org/"><img src="img/charities/april.png" alt="april" class="center-block img-responsive" /></a>
             </div>
             <div class="col-md-3 col-sm-4 col-xs-6">
@@ -1066,9 +1500,6 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
             <div class="col-md-3 col-sm-4 col-xs-6">
               <a href="https://www.wikimedia.org/"><img src="img/charities/wikimedia.png" alt="wikimedia" class="center-block img-responsive" /></a>
             </div>
-           <div class="col-md-3 col-sm-4 col-sx-6">
-              <a href="https://www.fsf.org/"><img src="img/charities/fsf.png" alt="fsf" class="center-block img-responsive" /></a>
-            </div>
           </div>
         </div>
           </div>
@@ -1089,8 +1520,10 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
                 <div class="panel-body" id="promotion-details">
 <h2>Companies, distributors, and makers of freedom-friendly gadgets want to make it easier for you to give gifts that you feel good about. Check out these discounts and promotions.</h2>
             <ul style="list-style: none inside none;">
-               <li id="libiquity-promotion"><strong>Libiquity:</strong> Receive a 10% rebate off your subtotal price for any items you buy from the Web site. Libiquity will donate 5% of each purchase's subtotal price to the FSF. Ends at 00:00 EST on February 1st, 2019. Claim the rebate by sending the code <span class="label label-default">FSFGIVING</span> and your order number to <a href="mailto:sales@libiquity.com">sales@libiquity.com</a>. Libiquity will then credit the rebate amount to your payment method.</li>
-               <li id="lulzbot-promotion"><strong>LulzBot: </strong><a href="https://www.lulzbot.com/lulzbot-sales-clearance-items">features sales and clearance items on their Web site.</li>
+             <li id="GNU-promotion"><strong>GNU Press Shop: </strong>5% discount on all items using the coupon code <span class="label label-default">GIVEFREELY</span>. Code expires on December 31st. As always, FSF members get a 20% discount.</li>
+              <li id="libiquity-promotion"><strong>Libiquity: </strong>10% rebate off your subtotal price for any items you buy from the Web site. Libiquity will donate 5% of each purchase's subtotal price to the FSF. Ends at 00:00 EST on February 1st, 2019. Claim the rebate by sending the code <span class="label label-default">FSFGIVING</span> and your order number to <a href="mailto:sales@libiquity.com">sales@libiquity.com</a>. Libiquity will then credit the rebate amount to your payment method.</li>
+              <li id="lulzbot-promotion"><strong>LulzBot: </strong><a href="https://www.lulzbot.com/lulzbot-sales-clearance-items">Features sales and clearance items on their Web site</a>.</li>
+             <li id="minifree-promotion"><strong>Minifree: </strong><a href="https://minifree.org/">Offering a discount on all products through the end of the year.</a>
                <li id="technoethical-promotion"><strong>Technoethical:</strong> 5% discount on <b>all</b> purchases using the coupon code <span class="label label-default">FSFHOLIDAYS</span>. FSF members get an additional 10% off, using the code <span class="label label-default">FSREWARDS</span>.</li>
                      <li id="thinkpenguin-promotion"><strong>ThinkPenguin:</strong> 5% discount on <b>all</b> products is available to <a href="https://fsf.org/join">FSF members</a>.</li>
                       <li id="vikings-promotion"><strong>Vikings:</strong> 5% discount on <b>all</b> products and services between now and February 1, 2019. <b>Help the FSF:</b> Vikings will also make a donation to the FSF for each product purchased using the coupon code  <span class="label label-default">fsfftw</span>.</li>
@@ -1171,13 +1604,14 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
               </div>
               <div class="col-md-8 col-sm-8">
                 <p>The FSF is a nonprofit with a worldwide mission to advance software freedom —
-                  <a href="https://fsf.org/about">learn about our history and work.</a>
+                  <a href="https://fsf.org/about">learn about our history and work</a>.
                 </p>
                 <p>Version 9.0. Copyright © 2004-2018
                   <a href="https://fsf.org/about/contact.html" title="Find out how to contact us">
                     Free Software Foundation
                   </a>, Inc.
                   <a href="https://www.fsf.org/about/free-software-foundation-privacy-policy"> Privacy Policy</a>.
+                 <a href="js/weblabels.html" rel="jslicense">Javascript License Information</a>.
                 </p>
               </div>
             </div>
@@ -1207,7 +1641,6 @@ MakerBot was founded with a more freedom-respecting philosophy, but <a href="htt
         // @license-end
         </script><noscript><p><img src="//piwik.fsf.org/piwik.php?idsite=14" style="border:0" alt="" /></p></noscript>
         <!-- End Piwik Tracking Code -->
-        <a href="js/weblabels.html" rel="jslicense"></a>
       </body>
 
       </html>