From 78c1105845557e10609b13a40dd28ecc58e804f4 Mon Sep 17 00:00:00 2001
From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Wed, 31 Aug 2016 16:59:22 +0100
Subject: [PATCH] Starting work on JS and Buy buttons

---
 css/master.css   | 56 ++++++++++++++++++++++--------
 givingguide.html | 89 +++++++++++++++++++++++++++++++++---------------
 js/magic.js      |  1 +
 3 files changed, 104 insertions(+), 42 deletions(-)

diff --git a/css/master.css b/css/master.css
index 22f8bf0..26dd894 100644
--- a/css/master.css
+++ b/css/master.css
@@ -368,25 +368,25 @@ section {
   background-size: 40px;
 }
 
-.good li {
+.pros li {
   background-image: url("../img/good.svg");
 }
 
-.bad li {
+.cons li {
   background-image: url("../img/bad.svg");
 }
 
-.bad .neutral {
+.neutral {
   background-image: url("../img/neutral.svg");
 }
 
-.bad ul,
-.good ul {
+.pros,
+.cons {
   padding-left: 15px;
 }
 
-.bad li,
-.good li {
+.pros li,
+.cons li {
   padding-left: 30px;
 
   list-style: none;
@@ -400,16 +400,16 @@ section {
 }
 
 .get-item {
-  width: 40%;
-  margin: 0 auto 25px;
-  padding: 6px 35px;
+  /*width: 40%;*/
+  margin: 0 auto;
+  width: 120px;
 
   text-align: center;
 
   color: white;
-  border-bottom: 0;
   border-radius: 100px;
   background: #2B81E3;
+  border-color: #135299;
 
   font-family: "Signika Regular";
   font-size: 24px;
@@ -421,6 +421,28 @@ section {
   color: white;
   border-bottom: 0;
 }
+
+.dropdown-toggle {
+  padding: 13px 55px;
+  background: #2B81E3;
+  border-color: #135299;
+  border-radius: 100px;
+  width: 40px;
+
+}
+
+.dropdown-menu {
+  margin: 0;
+}
+.dropdown-menu li {
+  list-style: none;
+  margin-bottom: 12px;
+}
+
+.dropdown-menu a {
+  border-bottom: 0;
+  padding: 3px 20px;
+}
 /*Charities*/
 
 .charities {
@@ -647,8 +669,8 @@ footer p {
   }
 
   .illustration img {
-    width: 80%;
-    margin-top: 80px;
+    width: 90%;
+    margin-top: 30px;
 
   }
   /*Footer*/
@@ -677,4 +699,10 @@ footer p {
 }
 
 /* Large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+  .illustration img {
+    width: 70%;
+    margin-top: 10px;
+
+  }
+}
diff --git a/givingguide.html b/givingguide.html
index 1ef527b..1aa4cd3 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -139,13 +139,46 @@
           <div class="rfy">RYF-certified</div>
           <!-- End RFY -->
 
-          <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80"/>
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80" />
           <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
-          <div class=" center-block get-item">
-            <a  href="#">BUY</a>
 
+          <!-- Buy/Download Button   -->
+          <div class="btn-container center-block" id="get-item" style="display:none">
+            <script>document.getElementById('get-item').style.display='';</script>
+
+            <div class="btn-group">
+              <button type="button" class="btn btn-primary get-item">BUY</button>
+              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="caret"></span>
+                <span class="sr-only">Toggle Dropdown</span>
+              </button>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li role="separator" class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </div>
           </div>
-          <ul>
+
+          <!-- End Buy/Download button -->
+
+
+          <noscript>
+            <div class="list-group">
+              <a href="#" class="list-group-item active">
+              Cras justo odio
+              </a>
+              <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
+              <a href="#" class="list-group-item">Morbi leo risus</a>
+              <a href="#" class="list-group-item">Porta ac consectetur ac</a>
+              <a href="#" class="list-group-item">Vestibulum at eros</a>
+            </div>
+          </noscript>
+
+
+          <ul class="pros">
             <li>Fully free software, based on Android.</li>
             <li><a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantStatus#Replicant-42">Supported devices</a> include both phones and tablets.</li>
             <li>Works on used devices, so your dollars won't go to proprietary OS companies. (All commercially available Android devices ship with some proprietary software.)</li>
@@ -157,7 +190,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block fix-iphone" width="80" />
           <h5 class="text-center">iPhone</h5>
-          <ul>
+          <ul class="cons">
             <li>Comes with no shortage of <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareIniThings">spyware</a>.</li>
             <li>
               iOS is a fully proprietary operating system, giving Apple control over the software on the devices.
@@ -180,7 +213,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250" />
           <h5 class="text-center">Minifree T400 with GNU/Linux</h5>
-          <ul>
+          <ul class="pros">
             <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system and libreboot firmware on hardware that is <a href="https://www.fsf.org/ryf">certified to Respect Your Freedom</a>.</li>
             <li>Durable hardware is meant to last and easy to repair.</li>
             <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
@@ -192,7 +225,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block fix-macbook" width="250" />
           <h5 class="text-center">Apple Macbook Pro with macOS</h5>
-          <ul>
+          <ul class="cons">
             <li>Runs on proprietary software that restricts the user's freedoms.</li>
             <li>
               Apple's App Store uses <a href="https://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> to restrict what you can do with your purchases.
@@ -213,7 +246,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="img/products/x200.jpg" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">Libiquity Taurinus X200 with GNU/Linux</h5>
-          <ul>
+          <ul class="pros">
             <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system and libreboot firmware on hardware that is certified to Respect Your Freedom.</li>
             <li>Durable hardware is meant to last and easy to repair.</li>
             <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
@@ -225,7 +258,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" height="150" />
           <h5 class="text-center">Lenovo U31 with Windows</h5>
-          <ul>
+          <ul class="cons">
             <li>Runs on proprietary software that profits from treating the user as a product -- <a href="https://edri.org/microsofts-new-small-print-how-your-personal-data-abused/">each account is assigned an advertising ID</a> to help Microsoft sell user
               data.
             </li>
@@ -246,7 +279,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">Lulzbot Mini</h5>
-          <ul>
+          <ul class="pros">
             <li><a href="https://www.fsf.org/ryf">Respects Your Freedom-certified</a> by the FSF to run with all free software, making 3D printing more accessible and encouraging innovation.</li>
             <li>Ease of use features like self-leveling and self-cleaning.</li>
             <li>Hardware designs available to make modification and improvement easy. Standardized material format allows 3D printing with plastics, wood-, stone-, bamboo-, rubber-, and metal-like materials.</li>
@@ -258,7 +291,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="212" />
           <h5 class="text-center">Makerbot Replicator Mini</h5>
-          <ul>
+          <ul class="cons">
             <li>
               MakerWare software is proprietary, restricting freedom and stifling innovation.
             </li>
@@ -281,7 +314,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">ThinkPenguin Router</h5>
-          <ul>
+          <ul class="pros">
             <li>
               Easily separate privacy-sensitive network traffic from Internet traffic to improve security.
             </li>
@@ -294,7 +327,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/router-blocked.png" alt="printer" class="center-block fix-router" height="150" />
           <h5 class="text-center">ISP-provided Routers</h5>
-          <ul>
+          <ul class="cons">
             <li>
               Proprietary firmware means that there's no way for you to know whether it's spying on you -- and it handles all your Internet traffic as well as local print jobs and file transfers.
             </li>
@@ -316,7 +349,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="replicant phone" class="center-block" width="250" />
           <h5 class="text-center">Project Gutenberg</h5>
-          <ul>
+          <ul class="pros">
             <li>All of the ebooks are gratis, including classics like Peter Pan and Huck Finn.</li>
             <li>The original purveyor of eBooks free of <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> (Digital Restrictions Management), <a href="https://www.defectivebydesign.org/guide/ebooks">inspiring many others</a>.</li>
             <li>Enjoy the freedom to read your ebooks on any device.</li>
@@ -327,7 +360,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/amazon-blocked.png" alt="printer" class="center-block fix-amazon" width="230" />
           <h5 class="text-center">Amazon.com</h5>
-          <ul>
+          <ul class="cons">
             <li>
               Amazon can remotely block or delete individual ebooks or your entire library with no warning or explanation (<a href="http://www.defectivebydesign.org/node/2250">they've done it before</a>).
             </li>
@@ -354,7 +387,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/nosvn/images/gimp_inkscape.png" alt="GIMP and Inskacape" class="center-block" height="150" />
           <h5 class="text-center">GIMP and Inkscape</h5>
-          <ul>
+          <ul class="pros">
             <li>Free software, with thriving developer communities.</li>
             <li>Designed for free formats, but can also open files created in other programs.</li>
             <li>Wide variety of plugins grants limitless features.</li>
@@ -366,7 +399,7 @@
         <div class="bad col-md-6 col-sm-6">
           <img src="img/products/adobe-blocked.png" alt="printer" class="center-block" height="150" />
           <h5 class="text-center">Photoshop and Illustrator</h5>
-          <ul>
+          <ul class="cons">
             <li>Proprietary software controlled by Adobe.</li>
             <li>Shuts down when its DRM is unable to verify the costly required subscription, even if it's actually up to date.</li>
             <li>Prefers locked-down proprietary formats.</li>
@@ -385,7 +418,7 @@
         <div class="good col-md-6 col-sm-6">
           <img src="https://static.fsf.org/fsforg/img/FSFCardPrepped.png" alt="replicant phone" class="center-block" height="200" />
           <h5 class="text-center">FSF Membership Card</h5>
-          <ul>
+          <ul class="pros">
             <li>Join over 3,500 active members working to make a better world built on free software.</li>
             <li>Enjoy a host of <a href="https://www.fsf.org/associate/benefits">member benefits</a>, including admission to the <a href="https://www.libreplanet.org/conference">yearly LibrePlanet conference</a>.</li>
             <li>Membership donations are tax-deductible in the US. For a smaller gift, <a href="https://www.fsf.org/donate">donate in a friend's name</a>.</li>
@@ -395,9 +428,9 @@
         <!--End Good-->
 
         <div class="bad col-md-6 col-sm-6">
-          <img src="img/products/itunes-blocked.png" alt="printer" class="center-block fix-itunes" height="150"/>
+          <img src="img/products/itunes-blocked.png" alt="printer" class="center-block fix-itunes" height="150" />
           <h5 class="text-center">iTunes Cards</h5>
-          <ul>
+          <ul class="cons">
             <li> <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> on everything (except music) controls what you can do with your purchases.
             </li>
 
@@ -465,28 +498,28 @@
     <div class="container">
       <h1>Recommended organizations for holiday donations</h1>
       <div class="row">
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.fsf.org/"><img src="img/charities/fsf.jpg" alt="fsf" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.sfconservancy.org/"><img src="img/charities/sfc.jpg" alt="sfc" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.eff.org/"><img src="img/charities/eff.jpg" alt="eff" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.creativecommons.org/"><img src="img/charities/cc.jpg" alt="cc" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://wikimedia.org/"><img src="img/charities/wikimedia.jpg" alt="wikimedia" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.softwarefreedom.org/"><img src="img/charities/sflc.jpg" alt="sflc" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.gnome.org/"><img src="img/charities/gnome.jpg" alt="gnome" class="center-block img-responsive" /></a>
         </div>
-        <div class="col-md-3 col-xs-4">
+        <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="https://ceata.org/"><img src="img/charities/ceata.jpg" alt="ceata" class="center-block img-responsive" /></a>
         </div>
       </div>
diff --git a/js/magic.js b/js/magic.js
index 518cb7f..4a9025a 100644
--- a/js/magic.js
+++ b/js/magic.js
@@ -1,2 +1,3 @@
 $(document).ready(function() {
+
 });
-- 
2.25.1