add paypal donate button

abhinavMoulik · Mar 12, 2014 · 66b623d · 66b623d
1 parent 9f1c974
commit 66b623d
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -80,12 +80,21 @@ <h1 class="title">2048</h1>
     <div class="sharing">
       <a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out 2048, a game where you join numbers to score high! #2048game" data-via="gabrielecirulli">Tweet</a>
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+      <form class="pp-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+        <input type="hidden" name="cmd" value="_s-xclick">
+        <input type="hidden" name="hosted_button_id" value="W59BD72T97DVC">
+        <button name="submit"><img src="meta/icon_PP.svg">Donate</button>
+        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+      </form>
+
       <span class="btc-donate">
         <a href="bitcoin:1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i">
-          <img src="meta/icon_bitcoin.svg">Donate
+          <img src="meta/icon_bitcoin.svg">Donate BTC
         </a>
         <span class="address"><code>1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i</code></span>
       </span>
+
     </div>
   </div>
 

diff --git a/meta/icon_pp.svg b/meta/icon_pp.svg
diff --git a/style/helpers.scss b/style/helpers.scss
@@ -60,3 +60,10 @@
     @content;
   }
 }
+
+// Appearance
+@mixin appearance($args...) {
+  -webkit-appearance: $args;
+  -moz-appearance: $args;
+  appearance: $args;
+}
diff --git a/style/main.css b/style/main.css
@@ -459,7 +459,7 @@ hr {
 .sharing {
   margin-top: 20px;
   text-align: center; }
-  .sharing > iframe, .sharing span {
+  .sharing > iframe, .sharing > span, .sharing > form {
     display: inline-block;
     vertical-align: middle; }
 
@@ -653,7 +653,32 @@ hr {
     line-height: 30px !important;
     margin-top: 90px !important; }
   .game-message .lower {
-    margin-top: 30px !important; } }
+    margin-top: 30px !important; }
+
+  .sharing > iframe, .sharing > span, .sharing > form {
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 20px; } }
+.pp-donate button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+  background: #8f7a66;
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px; }
+  .pp-donate button img {
+    vertical-align: -4px;
+    margin-right: 8px; }
+
 .btc-donate {
   position: relative;
   margin-left: 20px;
@@ -711,11 +736,13 @@ hr {
     top: -45px;
     pointer-events: auto; }
   @media screen and (max-width: 480px) {
-    .btc-donate .address {
-      margin-right: -85px;
-      width: 300px; }
-      .btc-donate .address code {
-        font-size: 13px; }
-      .btc-donate .address:after {
-        left: 73%;
-        bottom: 2px; } }
+    .btc-donate {
+      width: 120px; }
+      .btc-donate .address {
+        margin-right: -150px;
+        width: 300px; }
+        .btc-donate .address code {
+          font-size: 13px; }
+        .btc-donate .address:after {
+          left: 50%;
+          bottom: 2px; } }
diff --git a/style/main.scss b/style/main.scss
@@ -438,7 +438,7 @@ hr {
   margin-top: 20px;
   text-align: center;
 
-  > iframe, span {
+  > iframe, > span, > form {
     display: inline-block;
     vertical-align: middle;
   }
@@ -510,6 +510,31 @@ hr {
       margin-top: 30px !important;
     }
   }
+
+  .sharing {
+    > iframe, > span, > form {
+      display: block;
+      margin: 0 auto;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+// PP Donate button
+.pp-donate {
+  button {
+    @include appearance(none);
+    border: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    @include button;
+
+    img {
+      vertical-align: -4px;
+      margin-right: 8px;
+    }
+  }
 }
 
 // Bitcoin donate button
@@ -583,8 +608,10 @@ hr {
 
   // Styles for small screens
   @include smaller(480px) {
-    .address{
-      margin-right: -85px;
+    width: 120px;
+
+    .address {
+      margin-right: -150px;
       // background: red;
       width: 300px;
 
@@ -593,7 +620,7 @@ hr {
       }
 
       &:after {
-        left: 73%;
+        left: 50%;
         bottom: 2px;
       }
     }