From e22d2b96ade5f94b4af5a76f589e7d7d15781102 Mon Sep 17 00:00:00 2001
From: edidealt <eduardgit@prigoana.com>
Date: Sat, 21 Mar 2026 00:03:04 +0000
Subject: [PATCH] separate donate page

---
 index.html   | 89 ++++++++++++++++++----------------------------------
 js/app.js    | 27 ----------------
 js/router.js |  3 ++
 3 files changed, 34 insertions(+), 85 deletions(-)

diff --git a/index.html b/index.html
index 04b6aa1..68f6935 100644
--- a/index.html
+++ b/index.html
@@ -1457,52 +1457,6 @@
             </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 class="modal-overlay"></div>
             <div class="modal-content">
@@ -1609,7 +1563,7 @@
                                 </a>
                             </li>
                             <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" />
                                     <span>Donate</span>
                                 </a>
@@ -4507,9 +4461,7 @@
                                 "
                             >
                                 <a
-                                    href="https://ko-fi.com/monochromemusic"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
+                                    href="/donate"
                                     class="btn-secondary"
                                     style="
                                         text-decoration: none;
@@ -4658,21 +4610,42 @@
                     </div>
                 </div>
                 <div id="page-donate" class="page">
-                    <h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
-                    <div class="donate-content">
-                        <p style="text-align: center" class="donate-description">
-                            If Monochrome has been useful to you and you're able to, consider making a donation. <br />
-                            It helps pay for the domain, and you get to support us :)
+                    <div style="text-align: center; padding: 2rem; max-width: 500px; margin: 0 auto">
+                        <h2 class="section-title" style="margin-bottom: 1.5rem">Support Monochrome</h2>
+                        <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. It
+                            helps pay for the server and domain, and you get to support us :)
                         </p>
                         <a
                             href="https://ko-fi.com/monochromemusic"
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="btn-secondary"
-                            style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem"
+                            class="btn-primary"
+                            style="
+                                text-decoration: none;
+                                display: inline-flex;
+                                align-items: center;
+                                gap: 0.5rem;
+                                margin-bottom: 2rem;
+                            "
                         >
-                            Donate to Monochrome
+                            Donate on Ko-fi
                         </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>
             </main>
diff --git a/js/app.js b/js/app.js
index eb44c95..c616a47 100644
--- a/js/app.js
+++ b/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
     window.addEventListener('library-changed', () => {
         const path = window.location.pathname;
diff --git a/js/router.js b/js/router.js
index 708557f..0bc33e6 100644
--- a/js/router.js
+++ b/js/router.js
@@ -104,6 +104,9 @@ export function createRouter(ui) {
             case 'home':
                 await ui.renderHomePage();
                 break;
+            case 'donate':
+                ui.showPage('donate');
+                break;
             case 'user':
                 if (param && param.startsWith('@') && !param.includes('/')) {
                     await loadProfile(decodeURIComponent(param.slice(1)));