4a13e04aef
Apply the same contrast fixes from the homepage audit to 10 additional pages. All changes are one shade darker within the same hue family: - text-teal-600 → text-teal-700 (4.08:1 → 5.31:1) - text-emerald-600 → text-emerald-700 (4.52:1 → 5.94:1) - text-gray-500 → text-gray-600 on gray backgrounds (3.77:1 → 5.27:1) Files: architecture, village-case-study, implementer, leader, timeline, api-reference, koha, koha/transparency, gdpr, agent-lightning Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
235 lines
11 KiB
HTML
235 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Transparency Dashboard | Tractatus Koha</title>
|
|
<meta name="description" content="Full transparency on donations received and how they're allocated to support the Tractatus AI Safety Framework.">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=1761163813">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761163813">
|
|
<!-- Chart.js for visual analytics -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" integrity="sha256-DiMmxoaAcr7BWSdgxnKQQ8ruopYKK0bO5qIZKqxqv/A=" crossorigin="anonymous"></script>
|
|
<style>
|
|
.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 {
|
|
outline: 3px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
|
|
/* Progress bar animation */
|
|
.progress-bar {
|
|
transition: width 1s ease-out;
|
|
}
|
|
|
|
/* Stats card */
|
|
.stat-card {
|
|
transition: transform 0.2s;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
</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=1761163813"></script>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="max-w-7xl 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">
|
|
Transparency Dashboard
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="subheading">
|
|
Full visibility into donations received and how we allocate them to support the Tractatus Framework.
|
|
</p>
|
|
<div class="flex items-center justify-center gap-4 mt-6">
|
|
<p class="text-sm text-gray-600" id="last-updated">
|
|
Last updated: Loading...
|
|
</p>
|
|
<button id="export-csv" class="text-sm bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 transition flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
<span data-i18n="export_csv">Export CSV</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Metrics -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
|
|
|
<!-- Total Received -->
|
|
<div class="stat-card bg-white shadow rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.total_received">Total Received</h2>
|
|
<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="text-4xl font-bold text-gray-900" id="total-received">$0</div>
|
|
<div class="text-sm text-gray-500 mt-1" data-i18n="metrics.lifetime">NZD lifetime</div>
|
|
</div>
|
|
|
|
<!-- Monthly Supporters -->
|
|
<div class="stat-card bg-white shadow rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.monthly_supporters">Monthly Supporters</h2>
|
|
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="text-4xl font-bold text-gray-900" id="monthly-supporters">0</div>
|
|
<div class="text-sm text-gray-500 mt-1" data-i18n="metrics.active_subscriptions">Active subscriptions</div>
|
|
</div>
|
|
|
|
<!-- Monthly Recurring -->
|
|
<div class="stat-card bg-white shadow rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.monthly_recurring">Monthly Recurring</h2>
|
|
<svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="text-4xl font-bold text-gray-900" id="monthly-revenue">$0</div>
|
|
<div class="text-sm text-gray-500 mt-1" data-i18n="metrics.per_month">NZD per month</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Allocation Breakdown -->
|
|
<div class="bg-white shadow rounded-lg p-8 mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="allocation.heading">How Donations Are Allocated</h2>
|
|
|
|
<!-- Allocation Chart -->
|
|
<div class="mb-8 max-w-md mx-auto">
|
|
<canvas id="allocation-chart" aria-label="Donation allocation pie chart" role="img"></canvas>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Development: 40% -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<div>
|
|
<span class="font-semibold text-gray-900" data-i18n="allocation.development">Development</span>
|
|
<span class="text-sm text-gray-600 ml-2" data-i18n="allocation.development_desc">Feature development, bug fixes, security updates</span>
|
|
</div>
|
|
<span class="font-bold text-blue-600">40%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div class="progress-bar bg-blue-600 h-3 rounded-full" data-width="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hosting: 30% -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<div>
|
|
<span class="font-semibold text-gray-900" data-i18n="allocation.hosting">Hosting & Infrastructure</span>
|
|
<span class="text-sm text-gray-600 ml-2" data-i18n="allocation.hosting_desc">Servers, database, CDN, domain, SSL</span>
|
|
</div>
|
|
<span class="font-bold text-green-700">30%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div class="progress-bar bg-green-700 h-3 rounded-full" data-width="30"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Research: 20% -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<div>
|
|
<span class="font-semibold text-gray-900" data-i18n="allocation.research">Research</span>
|
|
<span class="text-sm text-gray-600 ml-2" data-i18n="allocation.research_desc">AI safety research, academic partnerships, publications</span>
|
|
</div>
|
|
<span class="font-bold text-purple-600">20%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div class="progress-bar bg-purple-600 h-3 rounded-full" data-width="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Community: 10% -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<div>
|
|
<span class="font-semibold text-gray-900" data-i18n="allocation.community">Community</span>
|
|
<span class="text-sm text-gray-600 ml-2" data-i18n="allocation.community_desc">Documentation, outreach, contributor support</span>
|
|
</div>
|
|
<span class="font-bold text-orange-700">10%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div class="progress-bar bg-orange-600 h-3 rounded-full" data-width="10"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- One-Time Donations -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
|
|
<div class="bg-white shadow rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="metrics.one_time_donations">One-Time Donations</h3>
|
|
<div class="text-3xl font-bold text-gray-900" id="onetime-count">0</div>
|
|
<div class="text-sm text-gray-500" data-i18n="metrics.total_gifts">Total gifts received</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="metrics.average_donation">Average Donation</h3>
|
|
<div class="text-3xl font-bold text-gray-900" id="average-donation">$0</div>
|
|
<div class="text-sm text-gray-500" data-i18n="metrics.across_all">NZD across all donations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Supporters (Public Acknowledgements) -->
|
|
<div class="bg-white shadow rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="supporters.heading">Recent Supporters</h2>
|
|
<p class="text-gray-600 mb-6" data-i18n="supporters.intro">
|
|
Thank you to these generous supporters who have opted to be publicly acknowledged. All supporters are valued equally, whether listed here or donating anonymously.
|
|
</p>
|
|
|
|
<div id="recent-donors" class="space-y-3">
|
|
<p class="text-gray-500 text-center py-8" data-i18n="supporters.loading">Loading supporters...</p>
|
|
</div>
|
|
|
|
<div id="no-donors" class="hidden text-center py-8 text-gray-500" data-i18n="supporters.none">
|
|
No public acknowledgements yet. Be the first to support Tractatus!
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div class="mt-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-center text-white">
|
|
<h2 class="text-2xl font-bold mb-4" data-i18n="cta.heading">Support the Tractatus Framework</h2>
|
|
<p class="text-blue-100 mb-6 max-w-2xl mx-auto" data-i18n="cta.text">
|
|
Help us build architectural AI safety constraints that preserve human agency. Every contribution makes a difference.
|
|
</p>
|
|
<a href="/koha.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="cta.button">
|
|
Make a Donation
|
|
</a>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<script src="/js/components/footer.js?v=1761163813"></script>
|
|
|
|
<!-- Transparency Dashboard JavaScript -->
|
|
<script src="/js/koha-transparency.js?v=1766784902"></script>
|
|
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=1761163813"></script>
|
|
<script src="/js/components/language-selector.js?v=1761163813"></script>
|
|
|
|
</body>
|
|
</html>
|