oleh/astrolabe-nvc
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe-nvc.git synced 2025-12-21 21:22:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add donate link and modal with supporting information for Ukraine

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-10-16 20:31:50 +03:00
parent a8267918ca
commit 8b056b66e7
3 changed files with 136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
index.html
View File

@@ -23,6 +23,7 @@
<span class="header-link" id="export-link" title="Export all snippets to JSON file">Export</span>
<span class="header-link" id="datasets-link" title="Open dataset manager (Cmd/Ctrl+K)">Datasets</span>
<span class="header-link" id="help-link" title="View keyboard shortcuts and help">Help</span>
<span class="header-link" id="donate-link" title="Support Astrolabe creators">Donate 🇺🇦</span>
<input type="file" id="import-file-input" accept=".json" style="display: none;" />
</div>
</div>
@@ -437,6 +438,93 @@
</div>
</div>
<!-- Donate Modal -->
<div id="donate-modal" class="modal" style="display: none;">
<div class="modal-content" style="height: auto;">
<div class="modal-header">
<span class="modal-title"></span>
<button class="btn btn-icon" id="donate-modal-close" title="Close (Escape)">×</button>
</div>
<div class="modal-body">
<div class="help-content">
<section class="help-section">
<h3 class="help-heading">Why Donate?</h3>
<p class="help-text">
Astrolabe is a free open-source project built by a Ukrainian in Kyiv, Ukraine.
If you're thinking of donating, I should be transparent about where that money actually goes - it doesn't go to me or the project.
It goes to something I care about much more. Right now, while I've been building this passion project, there are people I know - my relatives, friends, colleagues - who took arms and joined Ukraine's Armed Forces. They're defending their country against Russian invasion.
Most of them were civilians before this. They're still civilians, really, just doing something they had to do.
I feel deep gratitude to them. So my goal is to support these brave people however I can.
</p>
<p class="help-text">
You might wonder if the military really needs donations.
The honest answer: yes. The government and Ministry of Defense cover basics, but when you're on the frontlines, every small thing matters.
Better equipment, better protection, better conditions - these things can make a difference between life and death.
</p>
<p class="help-text">
If you have concerns about donating to the military: I get it. Not everyone is comfortable with that for various reasons, and I respect that.
The good news is that many of the organizations below also run humanitarian projects for civilians affected by the war. So you have options.
</p>
</section>
<div class="donate-two-column">
<section class="help-section">
<h3 class="help-heading">Where to Donate</h3>
<p class="help-text">
<ul class="help-list">
<li>
<strong><a href="https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi">
National Bank of Ukraine's special account for Ukraine's Armed Forces
</a> - Direct government channel</strong>
</li>
<li>
<strong><a href="https://savelife.in.ua/en/donate-en/#donate-army-card-once">
Come Back Alive Foundation</a></strong> - One of the biggest and most trusted. They've been around since 2014 and share <a href="https://savelife.in.ua/en/reporting-en/">detailed reports</a> of where money goes.
</li>
<li>
<strong><a href="https://macpaw.foundation/">
MacPaw Foundation</a></strong> - Founded by MacPaw (where I work). Started in 2016, shifted focus in 2022 to support the Defence Forces.
</li>
<li>
<strong><a href="https://foundation.kse.ua/en/humanitarian-projects/">
KSE Foundation</a></strong>. Kyiv School of Economics (where I teach). Focuses on both education and humanitarian support for people and defenders
</li>
<li>
<strong><a href="https://standforukraine.com/">
Stand for Ukraine</a></strong> - Not a foundation, but an aggregator of reliable organizations.
The list of fundraisers goes beyond military and covers recovery of veterans & victims of war, shelter for the refugees and many more.
</li>
</ul>
</p>
</section>
<section class="help-section">
<h3 class="help-heading">Other Ways to Support</h3>
<p class="help-text">
Not able to donate? You can still help by:
</p>
<ul class="help-list">
<li>Sharing Astrolabe with colleagues and friends</li>
<li>Reporting bugs and suggesting improvements</li>
<li>Contributing code or documentation</li>
<li>Writing about your experience using Astrolabe</li>
</ul>
</section>
</div>
<section class="help-section">
<p class="help-text" style="text-align: center; font-style: italic; color: var(--win-gray-darker);">
Thank you for considering this.
</p>
<p class="help-text" style="text-align: center; font-style: italic; color: var(--win-gray-darker);">
Oleh Omelchenko
</p>
</section>
</div>
</div>
</div>
</div>
<!-- Toast Notification Container -->
<div id="toast-container"></div>

44
src/js/app.js
View File

@@ -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';
}
}

4
src/styles.css
View File

@@ -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; }