Merge pull request #386 from TobiGr/donation-info

Add bank transfer and PayPal donation info

Author: Stypox

css/donate.css

@@ -58,7 +58,7 @@ main .row [class^="col"] {
 #donate {
     padding: 90px 0;
     color: white;
-    background: rgba(115, 115, 115, 0.88);
+    background: rgba(90, 90, 90, 0.9)
 }
 
 #donate h3 {
@@ -78,26 +78,41 @@ main .row [class^="col"] {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin-bottom: 30px;
+    margin-bottom: 0;
+    padding: 0 15px;
+}
+
+#button-container > .row {
+    display: initial;
+    width: 100%;
 }
 
 #button-container > * {
     flex-grow: 0;
 }
 
-.button-wrapper {
-    flex-grow: 1;
-    margin-bottom: 30px;
+#button-container .donate {
+    width: 100%;
 }
 
-#liberapay-donation {
-    text-align: right;
+#button-container .donate.button-large {
+    text-align: center;
 }
 
 /* hidden until we have the full info */
-#liberapay-donation span,
 #bank-transfer-donation {
-    display: none;
+    font-weight: inherit;
+    border: 3px solid white;
+    backdrop-filter: blur(10px);
+    background: rgba(3, 3, 3, 0.2);
+}
+
+#bank-transfer-donation h4 {
+    font-weight: bold;
+}
+
+#bank-transfer-donation th {
+    padding-right: 1rem;
 }
 
 #bank-transfer-donation pre {
@@ -142,6 +157,13 @@ main .row [class^="col"] {
         display: block;
         order: 3;
     }
+    #bank-transfer-donation table * {
+        text-align: left;
+    }
+    #bank-transfer-donation table {
+        position: relative;
+        margin: 0 auto;
+    }
 }
 
 #parallax-background {
@@ -175,15 +197,22 @@ main .row [class^="col"] {
 }
 
 .phone-background img {
-    max-width: 230px;
+    max-width: 200px;
     display: none;
     position: relative;
+    margin-top: 105px;
 }
 
 @media (min-width: 768px) {
     .phone-background img {
+        max-width: 230px;
         display: block;
-        margin-top: 30px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .phone-background img {
+        margin-top: 60px;
     }
 }
 
@@ -194,12 +223,6 @@ main .row [class^="col"] {
     }
 }
 
-@media (min-width: 992px) {
-    .phone-background img {
-        margin-top: 45px;
-    }
-}
-
 #footer .image-buffer {
     background-color: #D0CDCD;
 }
@@ -218,3 +241,13 @@ main .row [class^="col"] {
 .donate-section-title {
     font-size: 18px;
 }
+
+.donate-action-subtitle {
+    position: absolute;
+    bottom: 3px;
+    font-size: 8pt;
+    font-weight: normal;
+    opacity: 0.9;
+    left: 50%;
+    transform: translate(-50%, 0%);
+}

donate/index.html

@@ -46,16 +46,38 @@ <h3 class="with-subtitle">Do you like what we did so far?</h3>
                                 <p class="subtitle">Help us to bring NewPipe forward!</p>
                             </div>
                             <div class="col-xs-12 col-lg-10" id="button-container">
-                                <div class="button-wrapper" id="liberapay-donation">
-                                    <a href="https://liberapay.com/TeamNewPipe/" target="_blank">
-                                        <button class="button button-large action donate">Liberapay</button>
-                                    </a>
+                                <div class="row" style="width: 100%;">
+                                    <div class="col-sm-12 col-lg-6">
+                                        <div class="button-wrapper" id="liberapay-donation">
+                                            <a href="https://liberapay.com/TeamNewPipe/" target="_blank"
+                                               class="button button-large action donate" title="Donate to NewPipe via Liberapay">
+                                                Liberapay
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-12 col-lg-6">
+                                        <div class="button-wrapper" id="paypal-donation">
+                                            <a href="https://www.paypal.com/donate/?hosted_button_id=MZXL7WW8DXZBJ" target="_blank"
+                                               class="button button-large action donate" title="Donate to NewPipe via PayPal">
+                                                PayPal
+                                                <div class="donate-action-subtitle">(higher fees)</div>
+                                            </a>
+                                        </div>
+                                    </div>
                                     <div class="clearfix"></div>
-                                    <span>recurrent donations&nbsp;&nbsp;</span>
-                                </div>
-                                <div class="button-wrapper" id="bank-transfer-donation">
-<pre></pre>
-
+                                    <div class="col-sm-12">
+                                        <div class="button-wrapper button action donate" id="bank-transfer-donation">
+                                            <h4>Bank transfer</h4>
+                                            <table>
+                                                <tbody>
+                                                    <tr><th scope="row">Account holder:</th><td>NewPipe e.V.</td></tr>
+                                                    <tr><th scope="row">IBAN:</th><td>DE94 4306 0967 1308 7563 00</td></tr>
+                                                    <tr><th scope="row">Bank:</th><td>GLS Gemeinschaftsbank eG</td></tr>
+                                                    <tr><th scope="row">BIC:</th><td>GENODEM1GLS</td></tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>