separate donate page
This commit is contained in:
edidealt
parent
d8709f447f
commit
e22d2b96ad
3 changed files with 34 additions and 85 deletions
89
index.html
89
index.html
|
|
@ -1457,52 +1457,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="donate-modal" class="modal">
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<h3 style="text-align: center; margin-bottom: 1rem">Support Monochrome</h3>
|
|
||||||
<p style="text-align: center; margin-bottom: 1.5rem; line-height: 1.6; color: var(--muted-foreground)">
|
|
||||||
If Monochrome has been useful to you and you're able to, consider making a donation. It helps pay
|
|
||||||
for the server and domain, and you get to support us :)
|
|
||||||
</p>
|
|
||||||
<div style="display: flex; justify-content: center; margin-bottom: 2rem">
|
|
||||||
<a
|
|
||||||
href="https://ko-fi.com/monochromemusic"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="btn-primary"
|
|
||||||
style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem"
|
|
||||||
>
|
|
||||||
Donate on Ko-fi
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center; padding-top: 1rem; border-top: 1px solid var(--border)">
|
|
||||||
<p style="font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 0.5rem">
|
|
||||||
If you cannot financially support us, please consider starring the project on GitHub and sharing
|
|
||||||
with friends!
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="https://github.com/monochrome-music/monochrome"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="btn-secondary"
|
|
||||||
style="
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
Star on GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="modal-actions" style="justify-content: center; margin-top: 1.5rem">
|
|
||||||
<button id="close-donate-modal-btn" class="btn-secondary">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="desktop-update-modal" class="modal">
|
<div id="desktop-update-modal" class="modal">
|
||||||
<div class="modal-overlay"></div>
|
<div class="modal-overlay"></div>
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
@ -1609,7 +1563,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" id="sidebar-nav-donate">
|
<li class="nav-item" id="sidebar-nav-donate">
|
||||||
<a id="sidebar-donate-link" style="cursor: pointer">
|
<a id="sidebar-donate-link" href="/donate">
|
||||||
<use svg="!lucide/hand-heart.svg" size="24" />
|
<use svg="!lucide/hand-heart.svg" size="24" />
|
||||||
<span>Donate</span>
|
<span>Donate</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -4507,9 +4461,7 @@
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="https://ko-fi.com/monochromemusic"
|
href="/donate"
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="btn-secondary"
|
class="btn-secondary"
|
||||||
style="
|
style="
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -4658,21 +4610,42 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="page-donate" class="page">
|
<div id="page-donate" class="page">
|
||||||
<h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
|
<div style="text-align: center; padding: 2rem; max-width: 500px; margin: 0 auto">
|
||||||
<div class="donate-content">
|
<h2 class="section-title" style="margin-bottom: 1.5rem">Support Monochrome</h2>
|
||||||
<p style="text-align: center" class="donate-description">
|
<p style="margin-bottom: 1.5rem; line-height: 1.6; color: var(--muted-foreground)">
|
||||||
If Monochrome has been useful to you and you're able to, consider making a donation. <br />
|
If Monochrome has been useful to you and you're able to, consider making a donation. It
|
||||||
It helps pay for the domain, and you get to support us :)
|
helps pay for the server and domain, and you get to support us :)
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
href="https://ko-fi.com/monochromemusic"
|
href="https://ko-fi.com/monochromemusic"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="btn-secondary"
|
class="btn-primary"
|
||||||
style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem"
|
style="
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
"
|
||||||
>
|
>
|
||||||
Donate to Monochrome
|
Donate on Ko-fi
|
||||||
</a>
|
</a>
|
||||||
|
<div style="padding-top: 1.5rem; border-top: 1px solid var(--border)">
|
||||||
|
<p style="font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 1rem">
|
||||||
|
If you cannot financially support us, please consider starring the project on GitHub and
|
||||||
|
sharing with friends!
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://github.com/monochrome-music/monochrome"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="btn-secondary"
|
||||||
|
style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem"
|
||||||
|
>
|
||||||
|
Star on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
27
js/app.js
27
js/app.js
|
|
@ -2710,33 +2710,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Donate Modal Logic
|
|
||||||
const donateModal = document.getElementById('donate-modal');
|
|
||||||
const closeDonateModalBtn = document.getElementById('close-donate-modal-btn');
|
|
||||||
const sidebarDonateLink = document.getElementById('sidebar-donate-link');
|
|
||||||
const donateBtnAbout = document.getElementById('donate-btn');
|
|
||||||
const donateBtnPage = document.getElementById('donate-btn-page');
|
|
||||||
|
|
||||||
const openDonateModal = (e) => {
|
|
||||||
if (e) e.preventDefault();
|
|
||||||
trackOpenModal('Donate');
|
|
||||||
donateModal.classList.add('active');
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeDonateModal = () => {
|
|
||||||
donateModal.classList.remove('active');
|
|
||||||
trackCloseModal('Donate');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (donateModal) {
|
|
||||||
if (closeDonateModalBtn) closeDonateModalBtn.addEventListener('click', closeDonateModal);
|
|
||||||
donateModal.querySelector('.modal-overlay')?.addEventListener('click', closeDonateModal);
|
|
||||||
|
|
||||||
if (sidebarDonateLink) sidebarDonateLink.addEventListener('click', openDonateModal);
|
|
||||||
if (donateBtnAbout) donateBtnAbout.addEventListener('click', openDonateModal);
|
|
||||||
if (donateBtnPage) donateBtnPage.addEventListener('click', openDonateModal);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listener for Pocketbase Sync updates
|
// Listener for Pocketbase Sync updates
|
||||||
window.addEventListener('library-changed', () => {
|
window.addEventListener('library-changed', () => {
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
|
|
|
||||||
|
|
@ -104,6 +104,9 @@ export function createRouter(ui) {
|
||||||
case 'home':
|
case 'home':
|
||||||
await ui.renderHomePage();
|
await ui.renderHomePage();
|
||||||
break;
|
break;
|
||||||
|
case 'donate':
|
||||||
|
ui.showPage('donate');
|
||||||
|
break;
|
||||||
case 'user':
|
case 'user':
|
||||||
if (param && param.startsWith('@') && !param.includes('/')) {
|
if (param && param.startsWith('@') && !param.includes('/')) {
|
||||||
await loadProfile(decodeURIComponent(param.slice(1)));
|
await loadProfile(decodeURIComponent(param.slice(1)));
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue