diff --git a/index.html b/index.html index d561818..b8b64d3 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ Export Datasets Help + Donate πΊπ¦ @@ -437,6 +438,93 @@ + +
+ diff --git a/src/js/app.js b/src/js/app.js index e68f2f8..bbc9f4f 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -128,6 +128,13 @@ document.addEventListener('DOMContentLoaded', function () { }); } + const donateLink = document.getElementById('donate-link'); + if (donateLink) { + donateLink.addEventListener('click', function () { + openDonateModal(); + }); + } + // Dataset Manager const datasetsLink = document.getElementById('datasets-link'); const toggleDatasetsBtn = document.getElementById('toggle-datasets'); @@ -252,6 +259,23 @@ document.addEventListener('DOMContentLoaded', function () { }); } + // Donate Modal + const donateModal = document.getElementById('donate-modal'); + const donateModalClose = document.getElementById('donate-modal-close'); + + if (donateModalClose) { + donateModalClose.addEventListener('click', closeDonateModal); + } + + // Close on overlay click + if (donateModal) { + donateModal.addEventListener('click', function (e) { + if (e.target === donateModal) { + closeDonateModal(); + } + }); + } + // View mode toggle buttons document.getElementById('view-draft').addEventListener('click', () => { switchViewMode('draft'); @@ -364,6 +388,7 @@ const KeyboardActions = { const helpModal = document.getElementById('help-modal'); const datasetModal = document.getElementById('dataset-modal'); const extractModal = document.getElementById('extract-modal'); + const donateModal = document.getElementById('donate-modal'); if (helpModal && helpModal.style.display === 'flex') { closeHelpModal(); @@ -377,6 +402,10 @@ const KeyboardActions = { hideExtractModal(); return true; } + if (donateModal && donateModal.style.display === 'flex') { + closeDonateModal(); + return true; + } return false; } }; @@ -448,3 +477,18 @@ function closeHelpModal() { modal.style.display = 'none'; } } + +// Donate modal functions +function openDonateModal() { + const modal = document.getElementById('donate-modal'); + if (modal) { + modal.style.display = 'flex'; + } +} + +function closeDonateModal() { + const modal = document.getElementById('donate-modal'); + if (modal) { + modal.style.display = 'none'; + } +} diff --git a/src/styles.css b/src/styles.css index 012a5c8..18b1958 100644 --- a/src/styles.css +++ b/src/styles.css @@ -323,6 +323,10 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun .shortcut-key { font-family: var(--font-mono); font-weight: bold; background: var(--bg-light); border: 1px solid var(--win-gray-dark); padding: 6px 10px; border-radius: 2px; white-space: nowrap; width: 180px; } .shortcut-desc { color: var(--win-gray-darker); } +/* Two-column layout for donate sections */ +.donate-two-column { display: flex; gap: 20px; margin-bottom: 24px; } +.donate-two-column .help-section { flex: 1; margin-bottom: 0; } + /* Toast Notifications */ #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column-reverse; gap: 10px; max-width: 400px; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--win-gray); border: 2px outset var(--win-gray); box-shadow: 4px 4px 8px rgba(0,0,0,0.3); font-size: 12px; min-width: 300px; opacity: 0; transform: translateX(400px); transition: all 0.3s ease; }