From 710b0b2e0a951c8559d193a0093e370aa38350cf Mon Sep 17 00:00:00 2001
From: Boofdev <hexahigh0@gmail.com>
Date: Thu, 29 Jun 2023 14:55:10 +0200
Subject: [PATCH] updated the donation button so that you can choose between
 paypal and patreon

---
 about/index.html                         | 69 ++++++++++++++---------
 data/images/Patreon_logo.svg             | 72 ++++++++++++++++++++++++
 data/images/PayPal.svg                   |  1 +
 data/images/PayPal_Logo_Icon_2014.svg    |  1 +
 data/images/patreon-vector-logo-2023.svg | 20 +++++++
 data/js/donate-choose.js                 | 15 +++++
 data/style/style.css                     | 30 ++++++++++
 index.html                               | 17 +++++-
 news/index.html                          | 21 ++++++-
 projects/index.html                      | 19 ++++++-
 10 files changed, 234 insertions(+), 31 deletions(-)
 create mode 100644 data/images/Patreon_logo.svg
 create mode 100644 data/images/PayPal.svg
 create mode 100644 data/images/PayPal_Logo_Icon_2014.svg
 create mode 100644 data/images/patreon-vector-logo-2023.svg
 create mode 100644 data/js/donate-choose.js

diff --git a/about/index.html b/about/index.html
index 0175850..9381b15 100644
--- a/about/index.html
+++ b/about/index.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="../data/style/offline-language-english.css">
     <script src="https://hexahigh.github.io/cdn/js/min/offline.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="/data/js/donate-choose.js" defer></script>
     <meta name="CurrentPage" content="about">
 </head>
 
@@ -30,7 +31,7 @@
             <li><a href="../news/">News</a></li>
             <li><a href="../projects">Projects</a></li>
             <li><a href="../index.html#contact">Contact</a></li>
-            <li><a target="_blank" href="https://patreon.com/boofdev" id="nav-donate">Donate</a></li>
+            <li><a target="_blank" id="nav-donate">Donate</a></li>
         </ul>
         <ul id="nav-mobile">
             <li id="nav-menu-li"><button id="nav-menu"><img src="../data/images/menu.svg" alt="menu"
@@ -71,33 +72,49 @@
             <p class="colorurl"><a class="colorurl" href="../data/text/rsa-public-key.txt">RSA public-key</a></p>
             <p class="text" style="text-align: right;">Last updated: 26/03/2023</p>
         </div>
+        <!-- Donation popup -->
+        <div id="donate-choose-overlay"></div>
+        <div id="donate-choose-popup">
+            <h2 style="margin-top: 25px; text-align: center;" class="text">Choose a donation method</h3>
+                <div
+                    style="display: flex; text-align: center; float: left; width: 50%; height: 100%; align-items: center; justify-content: center;">
+                    <img onclick="window.location.href='https://patreon.com/boofdev'" class="donate-choose-button-image"
+                        src="/data/images/patreon-vector-logo-2023.svg" width="50%">
+                </div>
+                <div
+                    style="display: flex; text-align: center; float: right; width: 50%; height: 100%; align-items: center; justify-content: center;">
+                    <img onclick="window.location.href='https://www.paypal.com/donate/?hosted_button_id=N2US62KK87SB4'"" class="
+                        donate-choose-button-image" src="/data/images/PayPal.svg" width="50%">
+                </div>
+        </div>
+    </div>
 
-        <footer>
-            <div class="footer-links-wrapper">
-                <div class="footer-links">
-                    <p>Quick Links</p>
-                    <ul>
-                        <li><a href="index.html">Home</a></li>
-                        <li><a href="../about">About me</a></li>
-                        <li><a href="../news/">News</a></li>
-                        <li><a href="../index.html/#contact">Contact</a></li>
-                        <li><a href="../projects">Projects</a></li>
-                        <li><a href="../privacy.html">Privacy Policy</a></li>
-                        <li><a target="_blank" href="https://patreon.com/boofdev">Donate</a></li>
-                    </ul>
-                </div>
-                <div class="footer-links">
-                    <p>Social Links</p>
-                    <ul>
-                        <li><a href="mailto:admin@boofdev.eu.org">Email</a></li>
-                        <li><a href="https://github.com/hexahigh">Github</a></li>
-                        <li><a href="https://www.youtube.com/@Boofydev">Youtube</a></li>
-                    </ul>
-                </div>
-                <img src="../data/images/new-kopi.svg" width="75em" style="top: 50%;" alt="Copy Me">
+    <footer>
+        <div class="footer-links-wrapper">
+            <div class="footer-links">
+                <p>Quick Links</p>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="../about">About me</a></li>
+                    <li><a href="../news/">News</a></li>
+                    <li><a href="../index.html/#contact">Contact</a></li>
+                    <li><a href="../projects">Projects</a></li>
+                    <li><a href="../privacy.html">Privacy Policy</a></li>
+                    <li><a target="_blank" href="https://patreon.com/boofdev">Donate</a></li>
+                </ul>
             </div>
-            <p><span class="current-year">2023</span> © Boofdev</p>
-        </footer>
+            <div class="footer-links">
+                <p>Social Links</p>
+                <ul>
+                    <li><a href="mailto:admin@boofdev.eu.org">Email</a></li>
+                    <li><a href="https://github.com/hexahigh">Github</a></li>
+                    <li><a href="https://www.youtube.com/@Boofydev">Youtube</a></li>
+                </ul>
+            </div>
+            <img src="../data/images/new-kopi.svg" width="75em" style="top: 50%;" alt="Copy Me">
+        </div>
+        <p><span class="current-year">2023</span> © Boofdev</p>
+    </footer>
 
 </body>
 
diff --git a/data/images/Patreon_logo.svg b/data/images/Patreon_logo.svg
new file mode 100644
index 0000000..4ed9167
--- /dev/null
+++ b/data/images/Patreon_logo.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="541.4375"
+   height="541.43744"
+   id="svg3168"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 4">
+  <defs
+     id="defs3170" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.24748737"
+     inkscape:cx="-612.89609"
+     inkscape:cy="147.0455"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-center="true"
+     inkscape:object-nodes="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3173">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-78.58618,-210.44369)">
+    <path
+       inkscape:connector-curvature="0"
+       id="path3204"
+       d="m 349.30488,210.44369 c -149.51545,0 -270.7187,121.20325 -270.7187,270.71875 l 0,270.4687 259.375,0 c 3.7608,0.155 7.5448,0.25 11.3437,0.25 149.5155,0 270.7188,-121.2032 270.7188,-270.7187 0,-149.5155 -121.2033,-270.71875 -270.7188,-270.71875 z"
+       style="fill:#ff5900;fill-opacity:1;stroke:none" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 349.30493,273.28744 c -114.80003,0 -207.875,93.07494 -207.875,207.875 l 0,123.90625 0,83.75 0,62.8125 83.1875,0 0,-270.25 c 0,-68.64109 55.64016,-124.3125 124.28125,-124.3125 68.64109,0 124.28125,55.67141 124.28125,124.3125 0,68.64109 -55.64016,124.28125 -124.28125,124.28125 -25.09566,0 -48.463,-7.45836 -68,-20.25 l 0,89.34375 c 13.09042,8.05513 42.97659,13.74429 78.03125,14.03125 110.32856,-5.03362 198.25,-96.05383 198.25,-207.625 0,-114.80006 -93.07493,-207.875 -207.875,-207.875 z m -8.71875,415.53125 c 2.8876,0.1191 5.80191,0.21875 8.71875,0.21875 3.07049,0 6.11821,-0.087 9.15625,-0.21875 l -17.875,0 z"
+       id="path3192"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/data/images/PayPal.svg b/data/images/PayPal.svg
new file mode 100644
index 0000000..e399fb7
--- /dev/null
+++ b/data/images/PayPal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="339.345" viewBox="0 0 338.667 89.785" xmlns:v="https://vecta.io/nano"><g transform="translate(936.898 -21.779)"><path clip-path="none" d="M-828.604 39.734c-.697 0-1.289.506-1.398 1.195l-8.068 51.165a1.31 1.31 0 0 0 1.294 1.513h9.568c.696 0 1.289-.507 1.398-1.195l2.37-15.025c.108-.688.701-1.195 1.398-1.195h8.699c10.164 0 18.792-7.416 20.368-17.465 1.589-10.134-6.328-18.971-17.549-18.993zm9.301 11.422h6.96c5.73 0 7.596 3.381 7.006 7.12-.59 3.747-3.488 6.507-9.031 6.507h-7.084zm45.788 3.478c-2.416.009-5.196.504-8.317 1.804-7.159 2.984-10.597 9.151-12.057 13.647 0 0-4.647 13.717 5.852 21.253 0 0 9.737 7.255 20.698-.447l-.189 1.203a1.31 1.31 0 0 0 1.292 1.513h9.083c.697 0 1.289-.507 1.398-1.195l5.525-35.038a1.31 1.31 0 0 0-1.292-1.515h-9.083c-.697 0-1.29.507-1.398 1.195l-.297 1.886s-3.967-4.333-11.216-4.306zm.297 11.067c1.043 0 1.997.144 2.853.419 3.919 1.258 6.141 5.023 5.498 9.104-.793 5.025-4.914 8.725-10.199 8.725-1.042 0-1.996-.143-2.853-.418-3.918-1.258-6.154-5.023-5.511-9.104.793-5.025 4.927-8.727 10.212-8.727z" fill="#003087"/><path clip-path="none" d="M-697.804 39.734c-.697 0-1.289.506-1.398 1.195l-8.068 51.165a1.31 1.31 0 0 0 1.294 1.513h9.568c.696 0 1.289-.507 1.398-1.195l2.37-15.025c.108-.688.701-1.195 1.398-1.195h8.699c10.164 0 18.791-7.416 20.366-17.465 1.59-10.134-6.326-18.971-17.547-18.993zm9.301 11.422h6.96c5.73 0 7.596 3.381 7.006 7.12-.59 3.747-3.487 6.507-9.031 6.507h-7.084zm45.787 3.478c-2.416.009-5.196.504-8.317 1.804-7.159 2.984-10.597 9.151-12.057 13.647 0 0-4.645 13.717 5.854 21.253 0 0 9.735 7.255 20.697-.447l-.189 1.203a1.31 1.31 0 0 0 1.294 1.513h9.082c.697 0 1.289-.507 1.398-1.195l5.527-35.038a1.31 1.31 0 0 0-1.294-1.515h-9.083c-.697 0-1.29.507-1.398 1.195l-.297 1.886s-3.967-4.333-11.216-4.306zm.297 11.067c1.043 0 1.997.144 2.853.419 3.919 1.258 6.141 5.023 5.498 9.104-.793 5.025-4.914 8.725-10.199 8.725-1.042 0-1.996-.143-2.853-.418-3.918-1.258-6.154-5.023-5.511-9.104.793-5.025 4.927-8.727 10.212-8.727z" fill="#0070e0"/><path clip-path="none" d="M-745.92 55.859c-.72 0-1.232.703-1.012 1.388l9.958 30.901-9.004 14.562c-.437.707.071 1.62.902 1.62h10.642a1.77 1.77 0 0 0 1.513-.854l27.811-46.007c.427-.707-.083-1.611-.909-1.611h-10.641a1.77 1.77 0 0 0-1.522.869l-10.947 18.482-5.557-18.345c-.181-.597-.732-1.006-1.355-1.006z" fill="#003087"/><path clip-path="none" d="M-609.107 39.734c-.696 0-1.289.507-1.398 1.195l-8.07 51.163a1.31 1.31 0 0 0 1.294 1.515h9.568c.696 0 1.289-.507 1.398-1.195l8.068-51.165a1.31 1.31 0 0 0-1.292-1.513z" fill="#0070e0"/><path clip-path="none" d="M-908.37 39.734a2.59 2.59 0 0 0-2.556 2.185l-4.247 26.936c.198-1.258 1.282-2.185 2.556-2.185h12.445c12.525 0 23.153-9.137 25.095-21.519a20.76 20.76 0 0 0 .245-2.793c-3.183-1.669-6.922-2.624-11.019-2.624z" fill="#001c64"/><path clip-path="none" d="M-874.832 42.359a20.76 20.76 0 0 1-.245 2.793c-1.942 12.382-12.571 21.519-25.095 21.519h-12.445c-1.273 0-2.358.926-2.556 2.185l-3.905 24.752-2.446 15.528a2.1 2.1 0 0 0 2.075 2.43h13.508a2.59 2.59 0 0 0 2.556-2.185l3.558-22.567a2.59 2.59 0 0 1 2.558-2.185h7.953c12.525 0 23.153-9.137 25.095-21.519 1.379-8.788-3.047-16.784-10.611-20.75z" fill="#0070e0"/><path clip-path="none" d="M-923.716 21.779c-1.273 0-2.358.926-2.556 2.183l-10.6 67.216c-.201 1.276.785 2.43 2.077 2.43h15.719l3.903-24.752 4.247-26.936a2.59 2.59 0 0 1 2.556-2.185h22.519c4.098 0 7.836.956 11.019 2.624.218-11.273-9.084-20.58-21.873-20.58z" fill="#003087"/></g></svg>
\ No newline at end of file
diff --git a/data/images/PayPal_Logo_Icon_2014.svg b/data/images/PayPal_Logo_Icon_2014.svg
new file mode 100644
index 0000000..a28f58f
--- /dev/null
+++ b/data/images/PayPal_Logo_Icon_2014.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="584.798" height="720" viewBox="0 0 154.728 190.5" xmlns:v="https://vecta.io/nano"><g transform="translate(898.192 276.071)"><path clip-path="none" d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z" fill="#001c64"/><path clip-path="none" d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z" fill="#0070e0"/><path clip-path="none" d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z" fill="#003087"/></g></svg>
\ No newline at end of file
diff --git a/data/images/patreon-vector-logo-2023.svg b/data/images/patreon-vector-logo-2023.svg
new file mode 100644
index 0000000..cbc7f66
--- /dev/null
+++ b/data/images/patreon-vector-logo-2023.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 652 652" style="enable-background:new 0 0 652 652;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F1465A;}
+</style>
+<path class="st0" d="M337.5,175.7c25.8,0,46.7,20.9,46.7,46.7S363.3,269,337.5,269c-25.8,0-46.7-20.9-46.7-46.7
+	S311.7,175.7,337.5,175.7z M254.7,175.7h22.8v124.6h-22.8V175.7z"/>
+<path class="st0" d="M22,385.5h33.2c17.6,0,28.9,13.3,28.9,28.7c0,15.4-11.3,28.7-28.9,28.7H40.4v22H22V385.5L22,385.5z M65.6,414.2
+	c0-7.4-5-13.7-12.7-13.7H40.4v27.4h12.6C60.6,427.9,65.6,421.6,65.6,414.2z M154.3,464.9l-3.1-9.6h-28.2l-3.1,9.6h-19.6l28.3-79.3
+	h16.9l28.7,79.3H154.3L154.3,464.9z M137.2,408.2l-9.7,32.6h19.3L137.2,408.2L137.2,408.2z M205.1,401.4h-17.9v-15.8h54.2v15.8h-18
+	v63.5h-18.4L205.1,401.4C205.1,401.4,205.1,401.4,205.1,401.4z M270,385.6h33.3c17.6,0,28.9,13.2,28.9,28.7c0,11.1-5.9,21-15.8,25.6
+	l15.9,25H311l-14-22h-8.6v22H270C270,464.9,270,385.6,270,385.6z M313.6,414.2c0-7.4-5-13.7-12.7-13.7h-12.6v27.4h12.6
+	C308.6,427.9,313.6,421.6,313.6,414.2z M381.7,400.3v18h30v14.4h-30v17.4h30v14.7h-48.4v-79.3h48.4v14.7
+	C411.7,400.3,381.7,400.3,381.7,400.3z M441.5,425.2c0-21.8,15.6-41.7,42-41.7c26.3,0,41.9,19.9,41.9,41.7s-15.6,41.7-41.9,41.7
+	C457.2,466.9,441.5,447,441.5,425.2z M506.8,425.2c0-13-8.8-25.1-23.2-25.1c-14.5,0-23.2,12.1-23.2,25.1c0,13,8.7,25.1,23.2,25.1
+	C498,450.4,506.8,438.2,506.8,425.2L506.8,425.2z M603.8,437.2v-51.7H622v79.3h-19.1l-28.6-51v51h-18.4v-79.3h19.2L603.8,437.2
+	L603.8,437.2z"/>
+</svg>
diff --git a/data/js/donate-choose.js b/data/js/donate-choose.js
new file mode 100644
index 0000000..24e01b2
--- /dev/null
+++ b/data/js/donate-choose.js
@@ -0,0 +1,15 @@
+const donatebutton = document.getElementById("nav-donate");
+const donatechooseoverlay = document.getElementById("donate-choose-overlay");
+const donatechoosepopup = document.getElementById("donate-choose-popup");
+
+donatebutton.addEventListener("click", function () {
+  donatechooseoverlay.style.display = "block";
+  donatechoosepopup.style.display = "block";
+  // Show our element
+  $("#donate-choose-popup").show();
+});
+
+donatechooseoverlay.addEventListener("click", function () {
+  donatechooseoverlay.style.display = "none";
+  donatechoosepopup.style.display = "none";
+});
\ No newline at end of file
diff --git a/data/style/style.css b/data/style/style.css
index 1b6fb9d..060818b 100644
--- a/data/style/style.css
+++ b/data/style/style.css
@@ -5,6 +5,36 @@
     src: url(/data/style/fonts/broadway%20regular.ttf);
 }
 
+.donate-choose-button-image {
+    transition: transform .2s; /* Animation */
+}
+.donate-choose-button-image:hover {
+    transform: scale(1.5);
+}
+
+#donate-choose-popup {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60vw;
+    height: 70vh;
+    background-color: var(--body-bg);
+    border: 2px solid var(--nav-link-inactive);
+    z-index: 1;
+}
+
+#donate-choose-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 .noscriptwrapper {
     overflow-x: hidden;
     /*position: absolute;*/
diff --git a/index.html b/index.html
index 361f7ce..de4c31d 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,7 @@
     <script src="index-allpage.js" defer></script>
     <script src="https://hexahigh.github.io/cdn/js/min/offline.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="data/js/donate-choose.js" defer></script>
     <meta name="CurrentPage" content="Homepage">
 </head>
 
@@ -60,7 +61,7 @@
             <li><a href="news/">News</a></li>
             <li><a href="projects">Projects</a></li>
             <li><a href="#contact">Contact</a></li>
-            <li><a target="_blank" href="https://patreon.com/boofdev" id="nav-donate">Donate</a></li>
+            <li><a target="_blank" id="nav-donate">Donate</a></li>
         </ul>
         <ul id="nav-mobile">
             <li id="nav-menu-li"><button id="nav-menu"><img src="data/images/menu.svg" alt="menu"
@@ -120,7 +121,18 @@
             <p class="text">Python</p>
         </div>
     </div>
-
+    <!-- Donation popup -->
+    <div id="donate-choose-overlay"></div>
+    <div id="donate-choose-popup">
+        <h2 style="margin-top: 25px; text-align: center;" class="text">Choose a donation method</h3>
+        <div style="display: flex; text-align: center; float: left; width: 50%; height: 100%; align-items: center; justify-content: center;">
+            <img onclick="window.location.href='https://patreon.com/boofdev'" class="donate-choose-button-image" src="data/images/patreon-vector-logo-2023.svg" width="50%">
+        </div>
+        <div style="display: flex; text-align: center; float: right; width: 50%; height: 100%; align-items: center; justify-content: center;">
+            <img onclick="window.location.href='https://www.paypal.com/donate/?hosted_button_id=N2US62KK87SB4'"" class="donate-choose-button-image" src="data/images/PayPal.svg" width="50%">
+        </div>
+    </div>
+    <!-- Contact Form -->
     <div id="contact"></div>
     <div class="contact">
         <div class="contact-sidepanel">
@@ -155,6 +167,7 @@
             <button class="emailformbutton" id="emailformbutton" type="button">Subscribe to my newsletter</button>
         </form>
     </div>
+    <!-- Email Form -->
     <div id="email-form-overlay"></div>
     <div id="email-form-popup">
         <iframe width="540" height="305"
diff --git a/news/index.html b/news/index.html
index e3dc69b..c824948 100644
--- a/news/index.html
+++ b/news/index.html
@@ -36,6 +36,7 @@
     <script src="../index-allpage.js" defer></script>
     <script src="https://hexahigh.github.io/cdn/js/min/offline.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="/data/js/donate-choose.js" defer></script>
     <meta name="CurrentPage" content="news">
 </head>
 
@@ -58,7 +59,7 @@
             <li><a href="../news/" id="nav-active">News</a></li>
             <li><a href="../projects">Projects</a></li>
             <li><a href="../index.html#contact">Contact</a></li>
-            <li><a target="_blank" href="https://patreon.com/boofdev" id="nav-donate">Donate</a></li>
+            <li><a target="_blank" id="nav-donate">Donate</a></li>
         </ul>
         <ul id="nav-mobile">
             <li id="nav-menu-li"><button id="nav-menu"><img src="../data/images/menu.svg" alt="menu"
@@ -84,7 +85,8 @@
             <h1 class="text" style="text-align: center; color: #1470e9;">News</h1>
             <br>
             <p class="text">Here you can find site-updates and other news.</p>
-            <p>All of the text files are cryptographically signed using my private key in order to prove that these news come from me.</p>
+            <p>All of the text files are cryptographically signed using my private key in order to prove that these news
+                come from me.</p>
             <p>You can find the public keys used for verifying and decrypting the text files in the about-me page.</p>
         </div>
         <br><br>
@@ -92,6 +94,21 @@
             <h2>Pinned:</h2>
             <p><a class="colorurl" href="../data/text/news/services.txt">Services i host</a></p>
         </div>
+        <!-- Donation popup -->
+        <div id="donate-choose-overlay"></div>
+        <div id="donate-choose-popup">
+            <h2 style="margin-top: 25px; text-align: center;" class="text">Choose a donation method</h3>
+                <div
+                    style="display: flex; text-align: center; float: left; width: 50%; height: 100%; align-items: center; justify-content: center;">
+                    <img onclick="window.location.href='https://patreon.com/boofdev'" class="donate-choose-button-image"
+                        src="/data/images/patreon-vector-logo-2023.svg" width="50%">
+                </div>
+                <div
+                    style="display: flex; text-align: center; float: right; width: 50%; height: 100%; align-items: center; justify-content: center;">
+                    <img onclick="window.location.href='https://www.paypal.com/donate/?hosted_button_id=N2US62KK87SB4'"" class="
+                        donate-choose-button-image" src="/data/images/PayPal.svg" width="50%">
+                </div>
+        </div>
 
     </div>
 
diff --git a/projects/index.html b/projects/index.html
index dd7ff5c..1045355 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="../data/style/offline-language-english.css">
     <script src="https://hexahigh.github.io/cdn/js/min/offline.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="/data/js/donate-choose.js" defer></script>
     <meta name="CurrentPage" content="projects">
 </head>
 
@@ -30,7 +31,7 @@
             <li><a href="../news/">News</a></li>
             <li><a href="../projects" id="nav-active">Projects</a></li>
             <li><a href="../index.html#contact">Contact</a></li>
-            <li><a target="_blank" href="https://patreon.com/boofdev" id="nav-donate">Donate</a></li>
+            <li><a target="_blank" id="nav-donate">Donate</a></li>
         </ul>
         <ul id="nav-mobile">
             <li id="nav-menu-li"><button id="nav-menu"><img src="../data/images/menu.svg" alt="menu"
@@ -70,6 +71,22 @@
                 <h4 class="text">A project for the game Havocado.<br>
                     The goal is to be able to add custom maps and skins.</h4>
             </div>
+            <!-- Donation popup -->
+            <div id="donate-choose-overlay"></div>
+            <div id="donate-choose-popup">
+                <h2 style="margin-top: 25px; text-align: center;" class="text">Choose a donation method</h3>
+                    <div
+                        style="display: flex; text-align: center; float: left; width: 50%; height: 100%; align-items: center; justify-content: center;">
+                        <img onclick="window.location.href='https://patreon.com/boofdev'"
+                            class="donate-choose-button-image" src="/data/images/patreon-vector-logo-2023.svg"
+                            width="50%">
+                    </div>
+                    <div
+                        style="display: flex; text-align: center; float: right; width: 50%; height: 100%; align-items: center; justify-content: center;">
+                        <img onclick="window.location.href='https://www.paypal.com/donate/?hosted_button_id=N2US62KK87SB4'"" class="
+                            donate-choose-button-image" src="/data/images/PayPal.svg" width="50%">
+                    </div>
+            </div>
 
         </div>