400 lines
20 KiB
HTML
400 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Koha — Reciprocal Support | Tractatus AI Safety</title>
|
|
<meta name="description" content="Join a relationship of mutual support for AI safety. Koha is reciprocal giving that maintains community bonds — your contribution sustains this work; our work serves you and the commons.">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1762222296032">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1762222296032">
|
|
<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: #1d4ed8;
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
|
|
<!-- Privacy-Preserving Analytics (Umami - GDPR Compliant, No Cookies) -->
|
|
<script src="/js/components/umami-tracker.js"></script>
|
|
<!-- Auto-reload on service worker update -->
|
|
</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.2.1762222296032"></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" data-i18n="heading">
|
|
Koha — Reciprocal Support
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="subheading">
|
|
Join a relationship of mutual support and shared responsibility for AI safety. Your contribution sustains this work, and this work serves you and our shared future.
|
|
</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" data-i18n="understanding_koha.title">Understanding Koha</h2>
|
|
<p class="text-blue-800 mb-3" data-i18n="understanding_koha.intro">
|
|
<strong>Koha</strong> (koh-hah) is a Māori practice of reciprocal giving that maintains and strengthens relationships. Unlike a one-sided donation, koha recognizes the mutual bond between giver and receiver — it affirms our shared humanity and interdependence.
|
|
</p>
|
|
<p class="text-blue-800 mb-3" data-i18n="understanding_koha.participation">
|
|
When you offer koha to support this work, you are not simply paying for a service. You are participating in <em>whanaungatanga</em> (relationship-building) and <em>manaakitanga</em> (reciprocal care). In return, you receive:
|
|
</p>
|
|
<ul class="text-blue-800 space-y-2 ml-6 mb-3">
|
|
<li data-i18n="understanding_koha.benefits.0">• Open access to all research, documentation, and code</li>
|
|
<li data-i18n="understanding_koha.benefits.1">• Participation in a community committed to value pluralism and AI safety</li>
|
|
<li data-i18n="understanding_koha.benefits.2">• Tools and frameworks that serve your needs and values</li>
|
|
<li data-i18n="understanding_koha.benefits.3">• Transparent governance and ongoing dialogue about this work's direction</li>
|
|
</ul>
|
|
<p class="text-blue-800 text-sm" data-i18n="understanding_koha.spirit">
|
|
The spirit of koha is not about the amount given, but about maintaining balance, mutual respect, and <em>aroha</em> (compassion) in our shared work. Your koha sustains us; our work serves you and the broader community. Together, we uphold the commons.
|
|
</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" data-i18n="form.participation_label">How Would You Like to Participate?</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" data-i18n="form.monthly">
|
|
Ongoing Koha (Monthly)
|
|
</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" data-i18n="form.one_time">
|
|
One-Time Koha
|
|
</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" data-i18n="form.tier_selection">Select Your Ongoing Contribution</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" data-i18n="form.tiers.foundation.name">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" data-i18n="form.tiers.foundation.description">
|
|
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" data-i18n="form.tiers.advocate.name">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" data-i18n="form.tiers.advocate.description">
|
|
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" data-i18n="form.tiers.champion.name">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" data-i18n="form.tiers.champion.description">
|
|
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" data-i18n="form.amount_label">Your Koha 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"
|
|
data-i18n-placeholder="form.amount_placeholder"
|
|
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="Koha 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" data-i18n="form.amount_help">The spirit of koha is in the giving, not the amount. Minimum: $1.00 NZD</p>
|
|
</div>
|
|
|
|
<!-- Donor Information -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4" data-i18n="form.donor_info">Your Information</h3>
|
|
|
|
<div class="mb-4">
|
|
<label for="donor-name" class="block text-sm font-medium text-gray-700 mb-1" data-i18n="form.name_label">Name (optional)</label>
|
|
<input
|
|
type="text"
|
|
id="donor-name"
|
|
placeholder="Leave blank to donate anonymously"
|
|
data-i18n-placeholder="form.name_placeholder"
|
|
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" data-i18n="form.name_help">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">
|
|
<span data-i18n="form.email_label">Email</span> <span class="text-red-500" aria-label="required">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="donor-email"
|
|
required
|
|
placeholder="your@email.com"
|
|
data-i18n-placeholder="form.email_placeholder"
|
|
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" data-i18n="form.email_help">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" data-i18n="form.country_label">Country (optional)</label>
|
|
<input
|
|
type="text"
|
|
id="donor-country"
|
|
placeholder="New Zealand"
|
|
data-i18n-placeholder="form.country_placeholder"
|
|
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" data-i18n="form.public_ack_label">
|
|
Include me in the public supporters list
|
|
</label>
|
|
<p class="text-sm text-gray-600 mt-1" data-i18n="form.public_ack_help">
|
|
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" data-i18n="form.public_name_label">Name to display publicly</label>
|
|
<input
|
|
type="text"
|
|
id="public-name"
|
|
placeholder="How you'd like to be acknowledged"
|
|
data-i18n-placeholder="form.public_name_placeholder"
|
|
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" data-i18n="form.public_name_help">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" data-i18n="form.allocation_heading">What Your Koha Sustains</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" data-i18n="form.allocation.development">Framework & website development</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-blue-900">30%</div>
|
|
<div class="text-gray-700" data-i18n="form.allocation.hosting">Server & infrastructure costs</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-blue-900">20%</div>
|
|
<div class="text-gray-700" data-i18n="form.allocation.research">AI safety research</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-blue-900">10%</div>
|
|
<div class="text-gray-700" data-i18n="form.allocation.operations">Operations & expansion</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-600 mt-3">
|
|
<a href="/koha/transparency.html" class="text-blue-600 hover:underline" data-i18n="form.transparency_link">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"
|
|
data-i18n="form.submit"
|
|
>
|
|
Offer Koha — Join Our Community
|
|
</button>
|
|
<p class="text-sm text-gray-500 mt-3" data-i18n="form.secure_payment">
|
|
🔒 Secure payment via Stripe. We don't store your card details.
|
|
</p>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Manage Subscription Section -->
|
|
<div class="bg-white shadow rounded-lg p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="manage_subscription.heading">Manage Your Subscription</h2>
|
|
<p class="text-gray-700 mb-6" data-i18n="manage_subscription.description">
|
|
Already supporting us with ongoing koha? You can manage your subscription, update payment methods, or cancel anytime — no questions asked.
|
|
</p>
|
|
|
|
<div id="manage-subscription-form" class="max-w-md">
|
|
<label for="manage-email" class="block text-sm font-medium text-gray-700 mb-2" data-i18n="manage_subscription.email_label">
|
|
Enter your email to manage your subscription:
|
|
</label>
|
|
<div class="flex gap-3">
|
|
<input
|
|
type="email"
|
|
id="manage-email"
|
|
placeholder="your@email.com"
|
|
data-i18n-placeholder="form.email_placeholder"
|
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-600 focus:outline-none"
|
|
aria-label="Email address for subscription management"
|
|
>
|
|
<button
|
|
type="button"
|
|
id="manage-subscription-btn"
|
|
class="bg-gray-800 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-900 transition"
|
|
data-i18n="manage_subscription.button"
|
|
>
|
|
Manage
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-2" data-i18n="manage_subscription.help">
|
|
We'll send you to a secure portal where you can update your payment method, view invoices, or cancel your subscription.
|
|
</p>
|
|
<div id="manage-error" class="hidden mt-3 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700"></div>
|
|
<div id="manage-loading" class="hidden mt-3 text-sm text-gray-600">
|
|
<span class="inline-block animate-pulse">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Section -->
|
|
<div class="bg-white shadow rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="faq.heading">Frequently Asked Questions</h2>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="faq.why_koha.question">Why do you use the term "Koha"?</h3>
|
|
<p class="text-gray-700 mb-2" data-i18n="faq.why_koha.answer_p1">
|
|
Koha is a Māori practice of reciprocal giving that maintains relationships and affirms mutual respect. It recognizes that what sustains a community is not one-way charity, but ongoing exchange that honors both giver and receiver.
|
|
</p>
|
|
<p class="text-gray-700" data-i18n="faq.why_koha.answer_p2">
|
|
We use this term 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 <em>whanaungatanga</em> (relationship), <em>manaakitanga</em> (reciprocal care), and <em>aroha</em> (compassion) — not transactional exchange. Your koha sustains our work; our work serves you and the commons.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="faq.tax.question">Is this tax-deductible?</h3>
|
|
<p class="text-gray-700" data-i18n="faq.tax.answer">
|
|
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" data-i18n="faq.manage.question">How do I pause or end my monthly koha?</h3>
|
|
<p class="text-gray-700" data-i18n="faq.manage.answer">
|
|
Relationships change, and we understand. You can manage your subscription using the "Manage Your Subscription" section above — just enter your email and you'll be taken to a secure portal where you can update payment methods, pause, or cancel anytime. No questions asked, and with gratitude for the time we shared.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="faq.currencies.question">What currencies do you accept?</h3>
|
|
<p class="text-gray-700" data-i18n="faq.currencies.answer">
|
|
We accept 10 major currencies: NZD, USD, EUR, GBP, AUD, CAD, JPY, CHF, SGD, and HKD. When you donate, you pay in your chosen currency (e.g., $10 USD), Stripe processes the payment in that currency, and then transfers funds to our NZD account after conversion. Your donation is tracked in both your original currency and NZD equivalent for complete transparency reporting.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="faq.one_time.question">Can I offer koha just once rather than monthly?</h3>
|
|
<p class="text-gray-700" data-i18n="faq.one_time.answer">
|
|
Absolutely. Both one-time and ongoing koha honor the reciprocal relationship between us. Click "One-Time Koha" at the top of the form to offer a single contribution of any amount.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<script src="/js/components/footer.js?v=0.1.2.1762222296032"></script>
|
|
|
|
<!-- Currency utilities and selector -->
|
|
<script src="/js/utils/currency.js?v=0.1.2.1762222296032"></script>
|
|
<script src="/js/components/currency-selector.js?v=0.1.2.1762222296032"></script>
|
|
|
|
<!-- Donation form functionality -->
|
|
<script src="/js/koha-donation.js?v=0.1.2.1762222296032"></script>
|
|
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=0.1.2.1762222296032"></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.2.1762222296032"></script>
|
|
</body>
|
|
</html>
|