#7: Create Donate section (#11)

* Created popup for donating crypto via QR
* Added Bitcoin and Ethereum using the popup
* Added Buymeacoffee donate button
* Added Patreon donate button
---------

Co-authored-by: Kirill Taran <[email protected]>

content/support/bitcoin.md

@@ -0,0 +1,13 @@
++++
+weight = 20
+title = "Donate using Bitcoin"
+template = "popup.html"
+description = "Send us the transaction id by email [email protected] to receive premium support. We`ll make our best to help you with any issue you encounter while using our Software."
+
+[extra]
+image = "support/bitcoin.svg"
+alt = "Donate Bitcoin"
+crypto = true
+qr_code = "support/qr/btc.jpg"
+wallet_address = "bc1qx8n9r4uwpgrhgnamt2uew53lmrxd8tuevp7lv5"
++++

content/support/buymeacoffee.md

@@ -4,7 +4,7 @@ title = "Buy me a coffee"
 template = "404.html"
 
 [extra]
-image = "support/buymeacoffee"
+image = "support/buymeacoffee.png"
 alt = "Buy Me A Coffee"
 url = "https://www.buymeacoffee.com/arkbuilders"
 +++

content/support/ethereum.md

@@ -0,0 +1,13 @@
++++
+weight = 20
+title = "Donate using Ethereum"
+template = "popup.html"
+description = "Send us the transaction id by email [email protected] to receive premium support. We will make our best to help you with any issue you encounter while using our Software."
+
+[extra]
+image = "support/ethereum.svg"
+alt = "Donate Ethereum"
+crypto = true
+qr_code = "support/qr/eth.jpg"
+wallet_address = "0x9765C5aC38175BFbd2dC7a840b63e50762B80a1b"
++++

content/support/patreon.md

@@ -0,0 +1,10 @@
++++
+weight = 30
+title = "Support us on Patreon"
+template = "404.html"
+
+[extra]
+image = "support/patreon.png"
+alt = "Support us on Patreon"
+url = "https://www.patreon.com/ARKBuilders"
++++

sass/_custom.scss

@@ -10,7 +10,6 @@
     border-radius: 10px;
 }
 
-
 /* Styles for the popup */
 .popup {
     display: none;
@@ -43,7 +42,6 @@
     cursor: pointer;
   }
 
-
 /*
  CSS for the main interaction
 */

static/js/main.js

@@ -59,6 +59,8 @@ function copyWalletAddress(){
 }
 
 function openPopup(data) {
+  console.log(data)
+
   document.getElementById("myPopup").style.display = "block";
   const popupContent = document.getElementById("popupContent");
 
@@ -639,5 +641,4 @@ window.addEventListener("load", () => {
       })
     });
   });
-});
-
+});

templates/404.html

@@ -21,13 +21,12 @@
     <section class="section container-fluid mt-n3 pb-3">
       <div class="row justify-content-center">
         <div class="row justify-content-center">
-					<div class="col-md-12 col-lg-10 col-xxl-8">
-						<article>
-							<h1 class="text-center">Page not found :(</h1>
-							<p class="text-center">The page you are looking for doesn't exist or has been moved.</p>
-						</article>
-					</div>
-				</div>
+	    <div class="col-md-12 col-lg-10 col-xxl-8">
+	        <article>
+		    <h1 class="text-center">Page not found :(</h1>
+		        <p class="text-center">The page you are looking for doesn't exist or has been moved.</p>
+		</article>
+	    </div>
       </div>
     </section>
   </div>

templates/popup.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block seo %}
+  {{ super() }} 
+
+  {% set title = page.title %}
+
+  {% if config.title %}
+    {% set title_addition = title_separator ~ config.title %}
+  {% else %}
+    {% set title_addition = "" %}
+  {% endif %}
+
+  {% set description = page.description %}
+
+  {{ macros_head::seo(title=title, title_addition=title_addition, description=description) }}
+{% endblock seo %}

templates/support/section.html

@@ -14,7 +14,7 @@
 <div class="wrap container" role="document">
   <div class="content">
     <div class="row justify-content-center">
-      <div class="col-md-12 col-lg-10 col-xxl-8">
+      <div class="col-md-12 col-lg-12 col-xxl-12">
           <h1 class="text-center">{{ section.title }}</h1>
           <p class="text-center">{{ section.description }}</b>
       </div>
@@ -26,14 +26,39 @@ <h1 class="text-center">{{ section.title }}</h1>
   <div class="container">
     <div class="row justify-content-center text-center">
       {% for page in paginator.pages %}
-      <div class="col-lg-5">
-        <a href="{{ page.extra.url }}" target="_blank">
-          <img class="col-lg-6" src="/{{ page.extra.image }}.png" alt="{{ page.extra.alt }}" style="height: 60px !important;width: 217px !important;"/>
-        </a>
-        <p>
-      </div>
+
+        {% if page.extra.crypto %}
+        <div class="col-12 col-lg-4">
+          <button onclick="openPopup({ title: '{{ page.title }}', qr_code: '{{ page.extra.qr_code }}', wallet_address: '{{page.extra.wallet_address}}', description: '{{page.description}}' })" class="bg-transparent border-0">
+            <img class="image-display" src="/{{ page.extra.image }}" alt="{{ page.extra.alt }}" />
+          </button>
+          <p>
+        </div>
+        {% else %}
+        <div class="col-12 col-lg-4">
+          <a href="{{ page.extra.url }}" target="_blank">
+            <img class="image-display" src="/{{ page.extra.image }}" alt="{{ page.extra.alt }}" />
+          </a>
+          <p>
+        </div>
+        {% endif %}
       {% endfor %}
     </div>
   </div>
+  <div class="modal" id="myPopup">
+    <div class="modal-dialog">
+      <div class="modal-content shadow-lg border-0">
+        <div class="modal-body">
+          <div id="popupContent"></div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" onclick="closePopup()">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </section>
+
 {% endblock content %}
+