updated the donation button so that you can choose between paypal and patreon

This commit is contained in:
Boofdev 2023-06-29 14:55:10 +02:00
parent 643615bc22
commit 710b0b2e0a
10 changed files with 234 additions and 31 deletions

View File

@ -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>

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.9 KiB

1
data/images/PayPal.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

15
data/js/donate-choose.js Normal file
View File

@ -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";
});

View File

@ -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;*/

View File

@ -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"

View File

@ -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>

View File

@ -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>