Ungoing refactoring

website/public/script.js

@@ -52,3 +52,27 @@ if (document.readyState === 'loading') {
 } else {
     highlightForth();
 }
+
+const kofiModal = document.getElementById('kofi-modal');
+const kofiFrame = document.getElementById('kofi-frame');
+
+document.querySelectorAll('.downloads-table a').forEach(link => {
+    link.addEventListener('click', () => {
+        if (sessionStorage.getItem('kofi-dismissed')) return;
+        kofiFrame.src = 'https://ko-fi.com/raphaelbubo/?hidefeed=true&widget=true&embed=true';
+        kofiModal.showModal();
+    });
+});
+
+kofiModal.addEventListener('close', () => {
+    sessionStorage.setItem('kofi-dismissed', '1');
+    kofiFrame.src = 'about:blank';
+});
+
+document.getElementById('kofi-close').addEventListener('click', () => {
+    kofiModal.close();
+});
+
+kofiModal.addEventListener('click', (e) => {
+    if (e.target === kofiModal) kofiModal.close();
+});

website/public/style.css

@@ -111,6 +111,47 @@ pre {
     color: var(--text);
 }
 
+#kofi-modal {
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--text-muted);
+    border-radius: 0;
+    padding: 1rem;
+    max-width: 420px;
+    width: 90vw;
+}
+
+#kofi-modal::backdrop {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+#kofi-modal p {
+    margin-bottom: 0.5rem;
+}
+
+#kofi-frame {
+    border: none;
+    width: 100%;
+    height: 570px;
+}
+
+#kofi-close {
+    font-family: 'CozetteVector', monospace;
+    background: none;
+    color: var(--text-muted);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: inherit;
+    text-decoration: underline;
+    display: block;
+    margin: 0.5rem auto 0;
+}
+
+#kofi-close:hover {
+    color: var(--text);
+}
+
 #theme-toggle {
     font-family: 'CozetteVector', monospace;
     background: none;

website/src/pages/index.astro

@@ -54,6 +54,12 @@
     </table>
     <p class="note">All releases are available on <a href="https://github.com/Bubobubobubobubo/cagire/releases/latest">GitHub</a>. You can also compile the software yourself by getting it from Cargo!</p>
 
+    <dialog id="kofi-modal">
+        <p>If you enjoy Cagire, consider supporting the project:</p>
+        <iframe id="kofi-frame" src="about:blank" title="Ko-fi donation widget"></iframe>
+        <button id="kofi-close">CLOSE</button>
+    </dialog>
+
     <video src="/mono_cagire.mp4" autoplay muted loop playsinline></video>
 
     <h2>About</h2>