From ab44273cb384a9dcca2e1a11f58218b7645670f3 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Tue, 6 Jan 2026 22:45:01 +0300
Subject: [PATCH] Add Donation Option (I feel like such a bitch adding this
 ugh)

---
 index.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 4c2ed92..b7cf28a 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
                 <input type="text" id="playlist-name-input" placeholder="Playlist name" style="width: 100%; margin: 1rem 0; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground);">
                 <div id="csv-import-section" style="display: none; margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background-secondary);">
                     <p style="margin-bottom: 0.5rem; font-size: 0.9rem;">Import from CSV</p>
-                    <p style="font-size: 0.8rem; margin: 0;">Only Spotify Is Supported for now. please use <a href="https://exportify.app/" style="text-decoration: underline;">Exportify</a> to export your playlist into a csv.</p>
+                    <p style="font-size: 0.8rem; margin: 0;">Only Spotify Is Supported for now. please use <a href="https://exportify.app/" style="text-decoration: underline;">Exportify</a> to export your playlist into a csv. Also Make sure its headers are in english.</p>
                     <br>
                     <input type="file" id="csv-file-input" class="btn-secondary" accept=".csv" style="width: 100%; margin-bottom: 0.5rem;">
                     <p style="font-size: 0.8rem; margin: 0;">This Feature Isnt Perfect And is Prone To Errors! Please check Your Playlist After To Remove Weird Songs That Were Added By The System.</p>
@@ -677,6 +677,17 @@
                         <h4>Technology Stack</h4>
                         <p>Vanilla JavaScript • ES6 Modules • IndexedDB • Service Workers • Media Session API</p>
                     </div>
+                    <br><br><br>
+                    <div class="about-donate">
+                        <h2 class="section-title" style="text-align: center;">Donate to Monochrome</h2>
+                        <p style="text-align: center;" class="donate-description">If Monochrome has been useful To you and you're able to, consider giving a little donation. <br> It helps pay for the domain, and you get to support us :)</p>
+                        <div class="donate-button" id="donate-button-container" style="display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 50px; flex-wrap: wrap;">
+                        <a href="https://ko-fi.com/monochromemusic">
+                        <button id="donate-btn" class="btn-secondary">Donate To Monochrome</button>
+                        </a>
+                        </div>
+                    </div>
+                    <br><br><br>
                     <div class="about-links">
                         <a href="https://github.com/SamidyFR/monochrome" target="_blank" rel="noopener noreferrer" class="github-link">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github-icon lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
@@ -728,6 +739,12 @@
                     </div>
                 </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 giving a little donation. <br> It helps Pay for the domain, and you get To support us :)</p>
+                    <button id="donate-btn" class="btn-secondary">Donate To Monochrome</button>
+                    
         </main>
         
         <footer class="now-playing-bar">