44a91e7fcf
Case Submission Portal (Admin Moderation Queue): - Add statistics endpoint (GET /api/cases/submissions/stats) - Enhance filtering: status, failure_mode, AI relevance score - Add sorting options: date, relevance, completeness - Create admin moderation interface (case-moderation.html) - Implement CSP-compliant admin UI (no inline event handlers) - Deploy moderation actions: approve, reject, request-info - Fix API parameter mapping for different action types Internationalization (i18n): - Implement lightweight i18n system (i18n-simple.js, ~5KB) - Add language selector component with flag emojis - Create German and French translations for homepage - Document Te Reo Māori translation requirements - Add i18n attributes to homepage - Integrate language selector into navbar Bug Fixes: - Fix search button modal display on docs.html (remove conflicting flex class) Page Enhancements: - Add dedicated JS modules for researcher, leader, koha pages - Improve page-specific functionality and interactions Documentation: - Add I18N_IMPLEMENTATION_SUMMARY.md (implementation guide) - Add TE_REO_MAORI_TRANSLATION_REQUIREMENTS.md (cultural sensitivity guide) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
334 lines
14 KiB
HTML
334 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Support Tractatus | Koha Donation System</title>
|
|
<meta name="description" content="Support the Tractatus AI Safety Framework. Help fund hosting, development, research, and community building for architectural AI safety.">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
|
<style>
|
|
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.skip-link { position: absolute; left: -9999px; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
|
|
|
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
|
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
|
outline: 3px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
|
|
/* Tier card selection */
|
|
.tier-card {
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
border: 3px solid transparent;
|
|
}
|
|
.tier-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
|
|
}
|
|
.tier-card.selected {
|
|
border-color: #3b82f6;
|
|
background-color: #eff6ff;
|
|
}
|
|
.tier-badge {
|
|
display: inline-block;
|
|
background: #3b82f6;
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Skip Link for Keyboard Navigation -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Navigation (injected by navbar.js) -->
|
|
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
|
Support Tractatus
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Your donation helps fund the development, hosting, and research behind the world's first production implementation of architectural AI safety constraints.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Koha Explanation -->
|
|
<div class="bg-blue-50 border-l-4 border-blue-500 p-6 mb-12 rounded">
|
|
<h2 class="text-lg font-semibold text-blue-900 mb-2">What is Koha?</h2>
|
|
<p class="text-blue-800">
|
|
<strong>Koha</strong> (koh-hah) is a Māori word meaning "gift" or "donation." In the spirit of Te Tiriti partnership and reciprocity, we use this term to honor the indigenous wisdom that informs our approach to technology governance and human agency.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Currency Selector Container -->
|
|
<div id="currency-selector-container"></div>
|
|
|
|
<!-- Donation Form -->
|
|
<div class="bg-white shadow-lg rounded-lg p-8 mb-12">
|
|
<form id="donation-form">
|
|
|
|
<!-- Frequency Selection -->
|
|
<div class="mb-8">
|
|
<label class="block text-lg font-semibold text-gray-900 mb-4">Donation Type</label>
|
|
<div class="flex gap-4">
|
|
<button type="button" id="freq-monthly" class="flex-1 py-3 px-6 border-2 border-blue-600 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
|
|
Monthly Support
|
|
</button>
|
|
<button type="button" id="freq-onetime" class="flex-1 py-3 px-6 border-2 border-gray-300 bg-white text-gray-700 rounded-lg font-semibold hover:border-blue-600 transition">
|
|
One-Time Gift
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tier Selection (Monthly) -->
|
|
<div id="tier-selection" class="mb-8">
|
|
<label class="block text-lg font-semibold text-gray-900 mb-4">Choose Your Monthly Support Level</label>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<!-- Tier: $5 NZD -->
|
|
<div class="tier-card bg-white border-2 border-gray-200 rounded-lg p-6" data-tier="5" data-amount="500">
|
|
<div class="text-center">
|
|
<div class="tier-badge mb-3">Foundation</div>
|
|
<div class="text-4xl font-bold text-gray-900 mb-2">$5</div>
|
|
<div class="text-sm text-gray-500 mb-4">NZD / month</div>
|
|
<p class="text-gray-600 text-sm">
|
|
Essential support for hosting and infrastructure. Every contribution matters.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tier: $15 NZD -->
|
|
<div class="tier-card bg-white border-2 border-gray-200 rounded-lg p-6 selected" data-tier="15" data-amount="1500">
|
|
<div class="text-center">
|
|
<div class="tier-badge mb-3">Advocate</div>
|
|
<div class="text-4xl font-bold text-gray-900 mb-2">$15</div>
|
|
<div class="text-sm text-gray-500 mb-4">NZD / month</div>
|
|
<p class="text-gray-600 text-sm">
|
|
Support development and research. Help expand the framework's capabilities.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tier: $50 NZD -->
|
|
<div class="tier-card bg-white border-2 border-gray-200 rounded-lg p-6" data-tier="50" data-amount="5000">
|
|
<div class="text-center">
|
|
<div class="tier-badge mb-3">Champion</div>
|
|
<div class="text-4xl font-bold text-gray-900 mb-2">$50</div>
|
|
<div class="text-sm text-gray-500 mb-4">NZD / month</div>
|
|
<p class="text-gray-600 text-sm">
|
|
Sustaining support for community building and advanced features.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Amount (One-Time) -->
|
|
<div id="custom-amount" class="mb-8 hidden">
|
|
<label for="amount-input" class="block text-lg font-semibold text-gray-900 mb-2">Donation Amount (NZD)</label>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-2xl text-gray-700">$</span>
|
|
<input
|
|
type="number"
|
|
id="amount-input"
|
|
min="1"
|
|
step="0.01"
|
|
placeholder="Enter amount"
|
|
class="flex-1 px-4 py-3 border-2 border-gray-300 rounded-lg text-lg focus:border-blue-600 focus:outline-none"
|
|
aria-label="Donation amount in NZD"
|
|
aria-describedby="amount-help"
|
|
>
|
|
<span class="text-lg text-gray-600">NZD</span>
|
|
</div>
|
|
<p id="amount-help" class="text-sm text-gray-500 mt-2">Minimum donation: $1.00 NZD</p>
|
|
</div>
|
|
|
|
<!-- Donor Information -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Your Information</h3>
|
|
|
|
<div class="mb-4">
|
|
<label for="donor-name" class="block text-sm font-medium text-gray-700 mb-1">Name (optional)</label>
|
|
<input
|
|
type="text"
|
|
id="donor-name"
|
|
placeholder="Leave blank to donate anonymously"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-600 focus:outline-none"
|
|
aria-describedby="name-help"
|
|
>
|
|
<p id="name-help" class="text-xs text-gray-500 mt-1">Your name will only be used if you opt-in for public acknowledgement below</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="donor-email" class="block text-sm font-medium text-gray-700 mb-1">
|
|
Email <span class="text-red-500" aria-label="required">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="donor-email"
|
|
required
|
|
placeholder="your@email.com"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-600 focus:outline-none"
|
|
aria-required="true"
|
|
aria-describedby="email-help"
|
|
>
|
|
<p id="email-help" class="text-xs text-gray-500 mt-1">Required for payment receipt. We never share your email.</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="donor-country" class="block text-sm font-medium text-gray-700 mb-1">Country (optional)</label>
|
|
<input
|
|
type="text"
|
|
id="donor-country"
|
|
placeholder="New Zealand"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-600 focus:outline-none"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Public Acknowledgement -->
|
|
<div class="mb-8 bg-gray-50 p-6 rounded-lg">
|
|
<div class="flex items-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
id="public-acknowledgement"
|
|
class="mt-1 h-5 w-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
|
|
|
>
|
|
<div class="flex-1">
|
|
<label for="public-acknowledgement" class="font-medium text-gray-900 cursor-pointer">
|
|
Include me in the public supporters list
|
|
</label>
|
|
<p class="text-sm text-gray-600 mt-1">
|
|
We value privacy. By default, all donations are anonymous. Check this box to be listed as a supporter on our transparency dashboard.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="public-name-field" class="mt-4 hidden">
|
|
<label for="public-name" class="block text-sm font-medium text-gray-700 mb-1">Name to display publicly</label>
|
|
<input
|
|
type="text"
|
|
id="public-name"
|
|
placeholder="How you'd like to be acknowledged"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-600 focus:outline-none"
|
|
aria-describedby="public-name-help"
|
|
>
|
|
<p id="public-name-help" class="text-xs text-gray-500 mt-1">Can be your real name, organization, or pseudonym</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allocation Transparency -->
|
|
<div class="mb-8 bg-blue-50 p-6 rounded-lg">
|
|
<h3 class="font-semibold text-gray-900 mb-3">How Your Donation is Used</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<div class="font-bold text-blue-900">40%</div>
|
|
<div class="text-gray-700">Development</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-blue-900">30%</div>
|
|
<div class="text-gray-700">Hosting</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-blue-900">20%</div>
|
|
<div class="text-gray-700">Research</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-blue-900">10%</div>
|
|
<div class="text-gray-700">Community</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-600 mt-3">
|
|
<a href="/koha/transparency" class="text-blue-600 hover:underline">View full transparency dashboard →</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="text-center">
|
|
<button
|
|
type="submit"
|
|
class="bg-blue-600 text-white px-12 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition shadow-lg hover:shadow-xl"
|
|
>
|
|
Proceed to Secure Payment
|
|
</button>
|
|
<p class="text-sm text-gray-500 mt-3">
|
|
🔒 Secure payment via Stripe. We don't store your card details.
|
|
</p>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<!-- FAQ Section -->
|
|
<div class="bg-white shadow rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Why do you use the term "Koha"?</h3>
|
|
<p class="text-gray-700">
|
|
Koha is a Māori concept of gift-giving and reciprocity. We use it to honor the indigenous wisdom of Aotearoa New Zealand, where our lead developer is based, and to acknowledge that technology governance should be rooted in values of reciprocity and collective responsibility.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Is this tax-deductible?</h3>
|
|
<p class="text-gray-700">
|
|
We are currently operating as an open-source project, not a registered charity. Donations are not tax-deductible at this time. You will receive a receipt for your records.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">How do I cancel my monthly donation?</h3>
|
|
<p class="text-gray-700">
|
|
You can cancel anytime by emailing <a href="mailto:support@agenticgovernance.digital" class="text-blue-600 hover:underline">support@agenticgovernance.digital</a> with your email address. We'll process your cancellation within 24 hours.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">What currencies do you accept?</h3>
|
|
<p class="text-gray-700">
|
|
We accept 10 major currencies: NZD, USD, EUR, GBP, AUD, CAD, JPY, CHF, SGD, and HKD. Prices are automatically converted from our base currency (NZD) using current exchange rates. All donations are tracked in both your chosen currency and NZD for transparency reporting.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Can I make a one-time donation instead?</h3>
|
|
<p class="text-gray-700">
|
|
Yes! Click the "One-Time Gift" button at the top of the form to make a single donation of any amount.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<script src="/js/components/footer.js"></script>
|
|
|
|
<!-- Currency utilities and selector -->
|
|
<script src="/js/utils/currency.js"></script>
|
|
<script src="/js/components/currency-selector.js"></script>
|
|
|
|
<!-- Coming Soon Overlay (remove when Stripe is configured) -->
|
|
<script src="/js/components/coming-soon-overlay.js"></script>
|
|
|
|
<!-- Donation form functionality -->
|
|
<script src="/js/koha-donation.js"></script>
|
|
</body>
|
|
</html>
|