mirror of
https://github.com/basicswap/basicswap.git
synced 2026-01-28 03:15:10 +01:00
319 lines
15 KiB
HTML
319 lines
15 KiB
HTML
{% include 'header.html' %}
|
|
{% from 'style.html' import love_svg %}
|
|
{% from 'macros.html' import page_header %}
|
|
|
|
{{ page_header('Support BasicSwap Development', 'Help keep BasicSwap free and open-source. Your donations directly fund development, security audits, and community growth.', title_size='text-3xl', dots_style='all') }}
|
|
|
|
<div class="xl:container mx-auto">
|
|
|
|
<section class="p-6">
|
|
<div class="lg:container mx-auto">
|
|
<div class="text-center mb-8">
|
|
<h3 class="font-semibold text-2xl text-black dark:text-white mb-4">Why Your Support Matters</h3>
|
|
<div class="flex justify-center mb-6">
|
|
{{ love_svg | safe }}
|
|
</div>
|
|
<div class="max-w-4xl mx-auto">
|
|
<p class="text-lg text-coolGray-500 dark:text-gray-300 mb-6">
|
|
BasicSwap is completely free and open-source software that charges no fees for its use. The project is entirely funded by generous community donations from users who believe in decentralized, censorship-resistant trading.
|
|
</p>
|
|
<p class="text-lg text-coolGray-500 dark:text-gray-300 mb-8">
|
|
Your donations are vital to keeping this project alive, accelerating development, and expanding our reach to more users who value financial freedom and privacy.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-coolGray-100 dark:bg-gray-500 rounded-lg p-6">
|
|
<div class="text-green-500 mb-3">
|
|
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-coolGray-900 dark:text-white mb-2">Core Development</h4>
|
|
<p class="text-sm text-coolGray-500 dark:text-gray-300">New features and improvements</p>
|
|
</div>
|
|
<div class="bg-coolGray-100 dark:bg-gray-500 rounded-lg p-6">
|
|
<div class="text-green-500 mb-3">
|
|
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-coolGray-900 dark:text-white mb-2">Security Audits</h4>
|
|
<p class="text-sm text-coolGray-500 dark:text-gray-300">Testing and security infrastructure</p>
|
|
</div>
|
|
<div class="bg-coolGray-100 dark:bg-gray-500 rounded-lg p-6">
|
|
<div class="text-green-500 mb-3">
|
|
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-coolGray-900 dark:text-white mb-2">Documentation</h4>
|
|
<p class="text-sm text-coolGray-500 dark:text-gray-300">Educational resources and guides</p>
|
|
</div>
|
|
<div class="bg-coolGray-100 dark:bg-gray-500 rounded-lg p-6">
|
|
<div class="text-green-500 mb-3">
|
|
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-coolGray-900 dark:text-white mb-2">Community Growth</h4>
|
|
<p class="text-sm text-coolGray-500 dark:text-gray-300">Outreach and adoption initiatives</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-lg text-coolGray-500 dark:text-gray-300">
|
|
Together, we're building financial tools that empower individuals and resist censorship. Thank you for being part of this movement toward true financial freedom.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="px-6 py-0 h-full overflow-hidden">
|
|
<div class="pb-6 border-coolGray-100">
|
|
<div class="flex flex-wrap items-center justify-between -m-2">
|
|
<div class="w-full pt-2">
|
|
<div class="lg:container mt-5 mx-auto">
|
|
<div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
|
<div class="px-6">
|
|
<h3 class="mb-6 text-2xl text-coolGray-900 dark:text-white font-bold text-center">
|
|
Donation Addresses
|
|
</h3>
|
|
<div class="w-full pb-6 overflow-x-auto">
|
|
<table class="w-full text-lg lg:text-sm">
|
|
<thead class="uppercase">
|
|
<tr class="text-left">
|
|
<th class="p-0 w-1/6">
|
|
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
|
<span class="text-md lg:text-xs text-gray-600 dark:text-gray-300 font-semibold">Cryptocurrency</span>
|
|
</div>
|
|
</th>
|
|
<th class="p-0 w-5/6">
|
|
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
|
<span class="text-md lg:text-xs text-gray-600 dark:text-gray-300 font-semibold">Donation Address</span>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- Monero -->
|
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
|
<td class="py-3 px-6 bold">
|
|
<span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
|
<img class="h-7" src="/static/images/coins/Monero.png" alt="Monero">
|
|
</span>
|
|
Monero (XMR)
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<input type="text" readonly
|
|
class="donation-address cursor-pointer hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 font-mono"
|
|
value="8BuQsYBNdfhfoWsvVR1unE7YuZEoTkC4hANaPm2fD6VR5VM2DzQoJhq2CHHXUN1UCWQfH3dctJgorSRxksVa5U4RNTJkcAc"
|
|
data-address="8BuQsYBNdfhfoWsvVR1unE7YuZEoTkC4hANaPm2fD6VR5VM2DzQoJhq2CHHXUN1UCWQfH3dctJgorSRxksVa5U4RNTJkcAc">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Litecoin -->
|
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
|
<td class="py-3 px-6 bold">
|
|
<span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
|
<img class="h-7" src="/static/images/coins/Litecoin.png" alt="Litecoin">
|
|
</span>
|
|
Litecoin (LTC)
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<input type="text" readonly
|
|
class="donation-address cursor-pointer hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 font-mono"
|
|
value="ltc1qevlumv48nz2afl0re9ml4tdewc56svxq3egkyt"
|
|
data-address="ltc1qevlumv48nz2afl0re9ml4tdewc56svxq3egkyt">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Litecoin MWEB -->
|
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
|
<td class="py-3 px-6 bold">
|
|
<span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
|
<img class="h-7" src="/static/images/coins/Litecoin-MWEB.png" alt="Litecoin MWEB">
|
|
</span>
|
|
Litecoin MWEB
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<input type="text" readonly
|
|
class="donation-address cursor-pointer hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 font-mono"
|
|
value="ltcmweb1qqt9rwznnxzkghv4s5wgtwxs0m0ry6n3atp95f47slppapxljde3xyqmdlnrc8ag7y2k354jzdc4pc4ks0kr43jehr77lngdecgh6689nn5mgv5yn"
|
|
data-address="ltcmweb1qqt9rwznnxzkghv4s5wgtwxs0m0ry6n3atp95f47slppapxljde3xyqmdlnrc8ag7y2k354jzdc4pc4ks0kr43jehr77lngdecgh6689nn5mgv5yn">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Bitcoin -->
|
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
|
<td class="py-3 px-6 bold">
|
|
<span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
|
<img class="h-7" src="/static/images/coins/Bitcoin.png" alt="Bitcoin">
|
|
</span>
|
|
Bitcoin (BTC)
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<input type="text" readonly
|
|
class="donation-address cursor-pointer hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 font-mono"
|
|
value="bc1q72j07vkn059xnmsrkk8x9up9lgvd9h9xjf8cq8"
|
|
data-address="bc1q72j07vkn059xnmsrkk8x9up9lgvd9h9xjf8cq8">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Particl -->
|
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
|
<td class="py-3 px-6 bold">
|
|
<span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
|
<img class="h-7" src="/static/images/coins/Particl.png" alt="Particl">
|
|
</span>
|
|
Particl (PART)
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<input type="text" readonly
|
|
class="donation-address cursor-pointer hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 font-mono"
|
|
value="pw1qf59ef0zjdckldjs8smfhv4j04gsjv302w7pdpz"
|
|
data-address="pw1qf59ef0zjdckldjs8smfhv4j04gsjv302w7pdpz">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="text-center mt-6">
|
|
<p class="text-lg text-coolGray-500 dark:text-gray-300">
|
|
Every contribution helps make decentralized trading more accessible to everyone.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setupDonationAddressCopy();
|
|
});
|
|
|
|
function setupDonationAddressCopy() {
|
|
const donationAddresses = document.querySelectorAll('.donation-address');
|
|
|
|
donationAddresses.forEach(element => {
|
|
element.addEventListener('click', function(e) {
|
|
const address = this.value;
|
|
|
|
copyToClipboard(address);
|
|
|
|
this.select();
|
|
this.setSelectionRange(0, 99999);
|
|
|
|
this.classList.add('bg-blue-50', 'dark:bg-blue-900');
|
|
|
|
showCopyFeedback(this);
|
|
|
|
setTimeout(() => {
|
|
this.classList.remove('bg-blue-50', 'dark:bg-blue-900');
|
|
this.blur(); // Remove focus
|
|
}, 1000);
|
|
});
|
|
});
|
|
}
|
|
|
|
let activeTooltip = null;
|
|
|
|
function showCopyFeedback(element) {
|
|
if (activeTooltip && activeTooltip.parentNode) {
|
|
activeTooltip.parentNode.removeChild(activeTooltip);
|
|
}
|
|
|
|
const popup = document.createElement('div');
|
|
popup.className = 'copy-feedback-popup fixed z-50 bg-blue-600 text-white text-sm py-2 px-3 rounded-md shadow-lg';
|
|
popup.innerText = 'Address copied!';
|
|
document.body.appendChild(popup);
|
|
|
|
activeTooltip = popup;
|
|
|
|
updateTooltipPosition(popup, element);
|
|
|
|
const scrollHandler = () => {
|
|
if (popup.parentNode) {
|
|
updateTooltipPosition(popup, element);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', scrollHandler, { passive: true });
|
|
|
|
popup.style.opacity = '0';
|
|
popup.style.transition = 'opacity 0.2s ease-in-out';
|
|
|
|
setTimeout(() => {
|
|
popup.style.opacity = '1';
|
|
}, 10);
|
|
|
|
setTimeout(() => {
|
|
window.removeEventListener('scroll', scrollHandler);
|
|
popup.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
if (popup.parentNode) {
|
|
popup.parentNode.removeChild(popup);
|
|
}
|
|
if (activeTooltip === popup) {
|
|
activeTooltip = null;
|
|
}
|
|
}, 200);
|
|
}, 1500);
|
|
}
|
|
|
|
function updateTooltipPosition(tooltip, element) {
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
let top = rect.top - tooltip.offsetHeight - 8;
|
|
const left = rect.left + rect.width / 2;
|
|
|
|
if (top < 10) {
|
|
top = rect.bottom + 8;
|
|
}
|
|
|
|
tooltip.style.top = `${top}px`;
|
|
tooltip.style.left = `${left}px`;
|
|
tooltip.style.transform = 'translateX(-50%)';
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(text).catch(err => {
|
|
console.error('Failed to copy: ', err);
|
|
copyToClipboardFallback(text);
|
|
});
|
|
} else {
|
|
copyToClipboardFallback(text);
|
|
}
|
|
}
|
|
|
|
function copyToClipboardFallback(text) {
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = text;
|
|
|
|
textArea.style.position = 'fixed';
|
|
textArea.style.left = '-999999px';
|
|
textArea.style.top = '-999999px';
|
|
|
|
document.body.appendChild(textArea);
|
|
textArea.focus();
|
|
textArea.select();
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
} catch (err) {
|
|
console.error('Failed to copy text: ', err);
|
|
}
|
|
|
|
document.body.removeChild(textArea);
|
|
}
|
|
</script>
|
|
|
|
{% include 'footer.html' %}
|