d6abefefdb
- Added Umami tracking script to koha/transparency.html - Added Umami tracking script to koha/success.html - Ensures complete tracking coverage across all public pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
279 lines
12 KiB
HTML
279 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thank You! | Tractatus Koha</title>
|
|
<meta name="description" content="Thank you for supporting the Tractatus AI Safety Framework. Your donation helps preserve human agency in AI systems.">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=1761163813">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761163813">
|
|
<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; }
|
|
|
|
/* Checkmark animation */
|
|
@keyframes checkmark {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.checkmark {
|
|
animation: checkmark 0.5s ease-out;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
}
|
|
|
|
/* Animation delays */
|
|
.delay-1 { animation-delay: 0.1s; }
|
|
.delay-2 { animation-delay: 0.2s; }
|
|
.delay-3 { animation-delay: 0.3s; }
|
|
.delay-4 { animation-delay: 0.4s; }
|
|
.delay-5 { animation-delay: 0.5s; }
|
|
</style>
|
|
|
|
<!-- Privacy-Preserving Analytics (Umami - GDPR Compliant, No Cookies) -->
|
|
<script src="/js/components/umami-tracker.js"></script>
|
|
</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-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Success Message (Default) -->
|
|
<div id="success-content" class="text-center">
|
|
|
|
<!-- Checkmark Icon -->
|
|
<div class="checkmark mb-8 inline-flex items-center justify-center w-24 h-24 bg-green-100 rounded-full">
|
|
<svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 fade-in-up">
|
|
Ngā mihi nui! Thank You!
|
|
</h1>
|
|
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto fade-in-up delay-1">
|
|
Your generous support helps us build architectural AI safety constraints that preserve human agency for everyone.
|
|
</p>
|
|
|
|
<!-- Donation Details -->
|
|
<div id="donation-details" class="bg-white shadow-lg rounded-lg p-8 mb-8 fade-in-up delay-2">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Donation Details</h2>
|
|
|
|
<div class="space-y-4 text-left max-w-md mx-auto">
|
|
<div class="flex justify-between py-3 border-b border-gray-200">
|
|
<span class="text-gray-600">Amount:</span>
|
|
<span id="amount" class="font-semibold text-gray-900">Loading...</span>
|
|
</div>
|
|
<div class="flex justify-between py-3 border-b border-gray-200">
|
|
<span class="text-gray-600">Type:</span>
|
|
<span id="frequency" class="font-semibold text-gray-900">Loading...</span>
|
|
</div>
|
|
<div class="flex justify-between py-3 border-b border-gray-200">
|
|
<span class="text-gray-600">Status:</span>
|
|
<span id="status" class="font-semibold text-green-600">✓ Confirmed</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 p-4 bg-blue-50 rounded-lg">
|
|
<p class="text-sm text-blue-900">
|
|
📧 A receipt has been sent to your email address for your records.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- What Happens Next -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 mb-8 text-white fade-in-up delay-3">
|
|
<h2 class="text-2xl font-bold mb-4">What Happens Next</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
|
|
<div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<span class="text-white font-bold">1</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold mb-1">Receipt Delivered</h3>
|
|
<p class="text-blue-100 text-sm">You'll receive a detailed receipt via email within minutes for your tax records.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<span class="text-white font-bold">2</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold mb-1">Transparent Allocation</h3>
|
|
<p class="text-blue-100 text-sm">Your donation is allocated: 40% development, 30% hosting, 20% research, 10% community.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<span class="text-white font-bold">3</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold mb-1">Dashboard Updated</h3>
|
|
<p class="text-blue-100 text-sm">Your contribution appears on our transparency dashboard within 24 hours.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<span class="text-white font-bold">4</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold mb-1">Immediate Impact</h3>
|
|
<p class="text-blue-100 text-sm">Your support helps us continue building safer AI systems that respect human agency.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monthly Donors Section -->
|
|
<div id="monthly-section" class="hidden bg-white shadow rounded-lg p-8 mb-8 fade-in-up delay-4">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Managing Your Monthly Donation</h2>
|
|
<p class="text-gray-600 mb-6">
|
|
Your monthly support provides sustainable funding for the Tractatus Framework. You can cancel or modify your donation anytime.
|
|
</p>
|
|
|
|
<div class="space-y-4 text-left max-w-2xl mx-auto">
|
|
<div class="flex items-start gap-3">
|
|
<svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Next payment:</p>
|
|
<p class="text-gray-600 text-sm">Automatically charged on the same day next month</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3">
|
|
<svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
</svg>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Email reminders:</p>
|
|
<p class="text-gray-600 text-sm">You'll receive a notification 3 days before each charge</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3">
|
|
<svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
<div>
|
|
<p class="font-medium text-gray-900">To cancel:</p>
|
|
<p class="text-gray-600 text-sm">Email <a href="mailto:support@agenticgovernance.digital" class="text-blue-600 hover:underline">support@agenticgovernance.digital</a> - we'll process it within 24 hours</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next Steps -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center fade-in-up delay-5">
|
|
<a href="/koha/transparency" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
|
View Transparency Dashboard
|
|
</a>
|
|
<a href="/docs.html" class="inline-block bg-gray-200 text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-300 transition">
|
|
Read the Documentation
|
|
</a>
|
|
<a href="/index.html" class="inline-block bg-gray-200 text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-300 transition">
|
|
Return to Homepage
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading-content" class="hidden text-center">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 mb-4">
|
|
<svg class="animate-spin h-12 w-12 text-blue-600" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-600">Verifying your donation...</p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="error-content" class="hidden text-center">
|
|
<div class="inline-flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-8">
|
|
<svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">Unable to Verify Donation</h1>
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
We couldn't verify your donation at this time. This might be a temporary issue.
|
|
</p>
|
|
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-500 p-6 mb-8 text-left max-w-2xl mx-auto">
|
|
<p class="text-yellow-900 mb-2">
|
|
<strong>Don't worry:</strong> If your payment went through, you'll receive an email receipt.
|
|
</p>
|
|
<p class="text-yellow-800">
|
|
If you have concerns, please contact <a href="mailto:support@agenticgovernance.digital" class="text-yellow-900 underline">support@agenticgovernance.digital</a>
|
|
</p>
|
|
</div>
|
|
|
|
<a href="/koha.html" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
|
Return to Donation Page
|
|
</a>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<script src="/js/components/footer.js?v=1761163813"></script>
|
|
|
|
<!-- Donation verification -->
|
|
<script src="/js/koha-success.js?v=1761163813"></script>
|
|
|
|
</body>
|
|
</html>
|