style(ui): update theme, branding, and GitHub repository links
Update UI across all pages with: - New favicon and brand icons (favicon-new.svg, tractatus-icon-new.svg) - Theme CSS integration (tractatus-theme.min.css) - Correct GitHub repository links (AgenticGovernance/tractatus) - PWA manifest updates - Consistent branding colors and gradients 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
d32da03b3e
commit
9d390da76b
41 changed files with 627 additions and 1242 deletions
|
|
@ -5,7 +5,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
|
|
@ -28,6 +30,17 @@
|
|||
<!-- Navigation (injected by navbar.js) -->
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">About</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -229,60 +242,12 @@
|
|||
|
||||
<!-- Footer with Te Tiriti Acknowledgment -->
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Values & Principles | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Our core values: sovereignty, transparency, harmlessness, and community. Including our commitment to Te Tiriti o Waitangi and indigenous data sovereignty.">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
|
|
@ -34,10 +36,10 @@
|
|||
<div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-6" data-i18n="header.title">
|
||||
Values & Principles
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="header.subtitle">
|
||||
The foundational values that guide the Tractatus Framework's development, governance, and community.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -47,13 +49,13 @@
|
|||
<!-- Table of Contents -->
|
||||
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-4">Contents</h2>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-4" data-i18n="toc.heading">Contents</h2>
|
||||
<nav class="space-y-2">
|
||||
<a href="#core-values" class="block text-blue-600 hover:text-blue-700">Core Values</a>
|
||||
<a href="#sovereignty" class="block text-blue-600 hover:text-blue-700 pl-4">• Sovereignty</a>
|
||||
<a href="#transparency" class="block text-blue-600 hover:text-blue-700 pl-4">• Transparency</a>
|
||||
<a href="#harmlessness" class="block text-blue-600 hover:text-blue-700 pl-4">• Harmlessness</a>
|
||||
<a href="#community" class="block text-blue-600 hover:text-blue-700 pl-4">• Community</a>
|
||||
<a href="#core-values" class="block text-blue-600 hover:text-blue-700" data-i18n="toc.core_values">Core Values</a>
|
||||
<a href="#sovereignty" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.sovereignty">• Sovereignty</a>
|
||||
<a href="#transparency" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.transparency">• Transparency</a>
|
||||
<a href="#harmlessness" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.harmlessness">• Harmlessness</a>
|
||||
<a href="#community" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.community">• Community</a>
|
||||
<a href="#te-tiriti" class="block text-blue-600 hover:text-blue-700">Te Tiriti o Waitangi & Digital Sovereignty</a>
|
||||
<a href="#indigenous-data-sovereignty" class="block text-blue-600 hover:text-blue-700">Indigenous Data Sovereignty</a>
|
||||
<a href="#governance" class="block text-blue-600 hover:text-blue-700">Governance & Accountability</a>
|
||||
|
|
@ -66,21 +68,21 @@
|
|||
|
||||
<!-- Core Values -->
|
||||
<section id="core-values" class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Core Values</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="core_values.heading">Core Values</h2>
|
||||
<div class="prose prose-lg text-gray-600 mb-8">
|
||||
<p>
|
||||
<p data-i18n="core_values.intro">
|
||||
These four values form the foundation of the Tractatus Framework. They are not aspirational—they are architectural. The framework is designed to enforce these values through structure, not training.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Sovereignty -->
|
||||
<div id="sovereignty" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-green-600">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">1. Sovereignty</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="sovereignty.title">1. Sovereignty</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
<strong>Principle:</strong> Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it.
|
||||
<strong data-i18n="sovereignty.principle">Principle:</strong> <span data-i18n="sovereignty.principle_text">Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it.</span>
|
||||
</p>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="sovereignty.practice_heading">What This Means in Practice:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
|
||||
<li>AI cannot make values trade-offs (e.g., privacy vs. convenience) without human approval</li>
|
||||
<li>Users can always override AI decisions</li>
|
||||
|
|
@ -89,7 +91,7 @@
|
|||
<li>No paternalistic "AI knows best" approaches</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="sovereignty.framework_heading">Framework Implementation:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2">
|
||||
<li><strong>BoundaryEnforcer</strong> blocks values decisions requiring human judgment</li>
|
||||
<li><strong>InstructionPersistenceClassifier</strong> respects STRATEGIC and HIGH persistence instructions</li>
|
||||
|
|
@ -99,12 +101,12 @@
|
|||
|
||||
<!-- Transparency -->
|
||||
<div id="transparency" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-blue-600">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">2. Transparency</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="transparency.title">2. Transparency</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
<strong>Principle:</strong> All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices.
|
||||
<strong data-i18n="transparency.principle">Principle:</strong> <span data-i18n="transparency.principle_text">All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices.</span>
|
||||
</p>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="transparency.practice_heading">What This Means in Practice:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
|
||||
<li>Every AI decision includes reasoning and evidence</li>
|
||||
<li>Users can inspect instruction history and classification</li>
|
||||
|
|
@ -113,7 +115,7 @@
|
|||
<li>Source code is open and auditable</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="transparency.framework_heading">Framework Implementation:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2">
|
||||
<li><strong>CrossReferenceValidator</strong> shows which instruction conflicts with proposed action</li>
|
||||
<li><strong>MetacognitiveVerifier</strong> provides reasoning analysis and confidence scores</li>
|
||||
|
|
@ -123,12 +125,12 @@
|
|||
|
||||
<!-- Harmlessness -->
|
||||
<div id="harmlessness" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-purple-600">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">3. Harmlessness</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="harmlessness.title">3. Harmlessness</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
<strong>Principle:</strong> AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.
|
||||
<strong data-i18n="harmlessness.principle">Principle:</strong> <span data-i18n="harmlessness.principle_text">AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.</span>
|
||||
</p>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="harmlessness.practice_heading">What This Means in Practice:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
|
||||
<li>Prevent parameter contradictions (e.g., 27027 incident)</li>
|
||||
<li>Detect and halt values drift before deployment</li>
|
||||
|
|
@ -137,7 +139,7 @@
|
|||
<li>Fail safely: when uncertain, ask rather than assume</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="harmlessness.framework_heading">Framework Implementation:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2">
|
||||
<li><strong>ContextPressureMonitor</strong> detects when error probability increases</li>
|
||||
<li><strong>BoundaryEnforcer</strong> prevents values drift</li>
|
||||
|
|
@ -147,12 +149,12 @@
|
|||
|
||||
<!-- Community -->
|
||||
<div id="community" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-orange-600">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">4. Community</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="community.title">4. Community</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
<strong>Principle:</strong> AI safety is a collective endeavor, not a corporate product. Communities must have tools, knowledge, and agency to shape AI systems affecting their lives.
|
||||
</p>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="community.practice_heading">What This Means in Practice:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
|
||||
<li>Open source framework under permissive Apache License 2.0 (with patent protection)</li>
|
||||
<li>Accessible documentation and educational resources</li>
|
||||
|
|
@ -161,7 +163,7 @@
|
|||
<li>No paywalls, no vendor lock-in, no proprietary control</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="community.framework_heading">Framework Implementation:</h4>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-2">
|
||||
<li>All code publicly available on GitHub</li>
|
||||
<li>Interactive demos for education and advocacy</li>
|
||||
|
|
@ -172,52 +174,52 @@
|
|||
|
||||
<!-- Te Tiriti o Waitangi -->
|
||||
<section id="te-tiriti" class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Te Tiriti o Waitangi & Digital Sovereignty</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="te_tiriti_section.title">Te Tiriti o Waitangi & Digital Sovereignty</h2>
|
||||
|
||||
<div class="bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-lg mb-8">
|
||||
<p class="text-blue-900 mb-4">
|
||||
<strong>Context:</strong> The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm.
|
||||
<strong data-i18n="te_tiriti_section.context_label">Context:</strong> <span data-i18n="te_tiriti_section.context_text">The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm.</span>
|
||||
</p>
|
||||
<p class="text-blue-900">
|
||||
This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries.
|
||||
<span data-i18n="te_tiriti_section.context_para2">This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Why This Matters for AI Safety</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="te_tiriti_section.why_matters_heading">Why This Matters for AI Safety</h3>
|
||||
<div class="prose prose-lg text-gray-600 mb-6">
|
||||
<p>
|
||||
Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework's approach to digital sovereignty:
|
||||
<span data-i18n="te_tiriti_section.why_matters_text">Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework\'s approach to digital sovereignty:</span>
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-2">
|
||||
<li><strong>Rangatiratanga (sovereignty):</strong> Communities must control decisions affecting their data and values</li>
|
||||
<li><strong>Kaitiakitanga (guardianship):</strong> AI systems must be stewards, not exploiters, of data and knowledge</li>
|
||||
<li><strong>Mana (authority & dignity):</strong> Technology must respect human dignity and cultural context</li>
|
||||
<li><strong>Whanaungatanga (relationships):</strong> AI safety is collective, not individual—relationships matter</li>
|
||||
<li><strong data-i18n="te_tiriti_section.rangatiratanga_label">Rangatiratanga (sovereignty):</strong> <span data-i18n="te_tiriti_section.rangatiratanga_text">Communities must control decisions affecting their data and values</span></li>
|
||||
<li><strong data-i18n="te_tiriti_section.kaitiakitanga_label">Kaitiakitanga (guardianship):</strong> <span data-i18n="te_tiriti_section.kaitiakitanga_text">AI systems must be stewards, not exploiters, of data and knowledge</span></li>
|
||||
<li><strong data-i18n="te_tiriti_section.mana_label">Mana (authority & dignity):</strong> <span data-i18n="te_tiriti_section.mana_text">Technology must respect human dignity and cultural context</span></li>
|
||||
<li><strong data-i18n="te_tiriti_section.whanaungatanga_label">Whanaungatanga (relationships):</strong> <span data-i18n="te_tiriti_section.whanaungatanga_text">AI safety is collective, not individual—relationships matter</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Our Approach</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="te_tiriti_section.approach_heading">Our Approach</h3>
|
||||
<div class="prose prose-lg text-gray-600 mb-6">
|
||||
<p>
|
||||
We do not claim to speak for Māori or indigenous communities. Instead, we:
|
||||
<span data-i18n="te_tiriti_section.approach_intro">We do not claim to speak for Māori or indigenous communities. Instead, we:</span>
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-2">
|
||||
<li><strong>Follow established frameworks:</strong> We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</li>
|
||||
<li><strong>Respect without tokenism:</strong> Te Tiriti forms part of our strategic foundation, not a superficial overlay</li>
|
||||
<li><strong>Avoid premature engagement:</strong> We will not approach Māori organizations for endorsement until we have demonstrated value and impact</li>
|
||||
<li><strong>Document and learn:</strong> We study indigenous data sovereignty principles and incorporate them architecturally</li>
|
||||
<li><strong data-i18n="te_tiriti_section.approach_frameworks_label">Follow established frameworks:</strong> <span data-i18n="te_tiriti_section.approach_frameworks_text">We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</span></li>
|
||||
<li><strong data-i18n="te_tiriti_section.approach_respect_label">Respect without tokenism:</strong> <span data-i18n="te_tiriti_section.approach_respect_text">Te Tiriti forms part of our strategic foundation, not a superficial overlay</span></li>
|
||||
<li><strong data-i18n="te_tiriti_section.approach_engagement_label">Avoid premature engagement:</strong> <span data-i18n="te_tiriti_section.approach_engagement_text">We will not approach Māori organizations for endorsement until we have demonstrated value and impact</span></li>
|
||||
<li><strong data-i18n="te_tiriti_section.approach_learn_label">Document and learn:</strong> <span data-i18n="te_tiriti_section.approach_learn_text">We study indigenous data sovereignty principles and incorporate them architecturally</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 rounded-lg p-6">
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-3">Te Tiriti Principles in Practice</h4>
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="te_tiriti_section.principles_heading">Te Tiriti Principles in Practice</h4>
|
||||
<div class="space-y-4 text-sm text-gray-700">
|
||||
<div class="flex items-start">
|
||||
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1">
|
||||
<span class="text-green-700 font-bold">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Partnership:</strong> AI systems should be developed in partnership with affected communities, not imposed upon them.
|
||||
<strong data-i18n="te_tiriti_section.partnership_label">Partnership:</strong> <span data-i18n="te_tiriti_section.partnership_text">AI systems should be developed in partnership with affected communities, not imposed upon them.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
|
|
@ -225,7 +227,7 @@
|
|||
<span class="text-green-700 font-bold">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Protection:</strong> The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions.
|
||||
<strong data-i18n="te_tiriti_section.protection_label">Protection:</strong> <span data-i18n="te_tiriti_section.protection_text">The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
|
|
@ -233,7 +235,7 @@
|
|||
<span class="text-green-700 font-bold">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Participation:</strong> Communities maintain agency over AI decisions affecting their data and values.
|
||||
<strong data-i18n="te_tiriti_section.participation_label">Participation:</strong> <span data-i18n="te_tiriti_section.participation_text">Communities maintain agency over AI decisions affecting their data and values.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -242,61 +244,61 @@
|
|||
|
||||
<!-- Indigenous Data Sovereignty -->
|
||||
<section id="indigenous-data-sovereignty" class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Indigenous Data Sovereignty</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="indigenous_data.title">Indigenous Data Sovereignty</h2>
|
||||
|
||||
<div class="prose prose-lg text-gray-600 mb-6">
|
||||
<p>
|
||||
Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it's about self-determination in the digital age.
|
||||
<span data-i18n="indigenous_data.intro">Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it\'s about self-determination in the digital age.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">CARE Principles for Indigenous Data Governance</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="indigenous_data.care_heading">CARE Principles for Indigenous Data Governance</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
The Tractatus Framework aligns with the <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 underline" target="_blank" rel="noopener">CARE Principles</a>, developed by indigenous data governance experts:
|
||||
<span data-i18n="indigenous_data.care_intro">The Tractatus Framework aligns with the <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 underline" target="_blank" rel="noopener">CARE Principles</a>, developed by indigenous data governance experts:</span>
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-teal-500">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2">Collective Benefit</h4>
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.collective_benefit_label">Collective Benefit</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.
|
||||
<span data-i18n="indigenous_data.collective_benefit_text">Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2">Authority to Control</h4>
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.authority_label">Authority to Control</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Indigenous Peoples' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered.
|
||||
<span data-i18n="indigenous_data.authority_text">Indigenous Peoples\' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2">Responsibility</h4>
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.responsibility_label">Responsibility</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples' self-determination and collective benefit.
|
||||
<span data-i18n="indigenous_data.responsibility_text">Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples\' self-determination and collective benefit.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2">Ethics</h4>
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.ethics_label">Ethics</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Indigenous Peoples' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.
|
||||
<span data-i18n="indigenous_data.ethics_text">Indigenous Peoples\' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Resources & Further Reading</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="indigenous_data.resources_heading">Resources & Further Reading</h3>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a href="https://www.temanararaunga.maori.nz/" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener">
|
||||
Te Mana Raraunga – Māori Data Sovereignty Network →
|
||||
<span data-i18n="indigenous_data.tmr_title">Te Mana Raraunga – Māori Data Sovereignty Network →</span>
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 mt-1">Leading network advancing Māori data sovereignty in Aotearoa.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener">
|
||||
CARE Principles for Indigenous Data Governance →
|
||||
<span data-i18n="indigenous_data.care_title">CARE Principles for Indigenous Data Governance →</span>
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 mt-1">International framework for indigenous data rights.</p>
|
||||
</li>
|
||||
|
|
@ -306,40 +308,40 @@
|
|||
|
||||
<!-- Governance & Accountability -->
|
||||
<section id="governance" class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Governance & Accountability</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="governance.title">Governance & Accountability</h2>
|
||||
|
||||
<div class="prose prose-lg text-gray-600 mb-6">
|
||||
<p>
|
||||
Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance:
|
||||
<span data-i18n="governance.intro">Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance:</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">Strategic Review Protocol</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.strategic_review_heading">Strategic Review Protocol</h3>
|
||||
<p class="text-gray-600">
|
||||
Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction.
|
||||
<span data-i18n="governance.strategic_review_text">Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">Values Alignment Framework</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.values_alignment_heading">Values Alignment Framework</h3>
|
||||
<p class="text-gray-600">
|
||||
All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected.
|
||||
<span data-i18n="governance.values_alignment_text">All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">Human Oversight Requirements</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.human_oversight_heading">Human Oversight Requirements</h3>
|
||||
<p class="text-gray-600">
|
||||
AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment.
|
||||
<span data-i18n="governance.human_oversight_text">AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">Community Accountability</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.community_accountability_heading">Community Accountability</h3>
|
||||
<p class="text-gray-600">
|
||||
Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design.
|
||||
<span data-i18n="governance.community_accountability_text">Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -348,20 +350,20 @@
|
|||
<!-- Commitment Statement -->
|
||||
<section class="mb-16">
|
||||
<div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-white">
|
||||
<h2 class="text-3xl font-bold mb-4">Our Commitment</h2>
|
||||
<h2 class="text-3xl font-bold mb-4" data-i18n="commitment.title">Our Commitment</h2>
|
||||
<div class="prose prose-lg text-white opacity-95">
|
||||
<p class="mb-4">
|
||||
These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to:
|
||||
<span data-i18n="commitment.intro">These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to:</span>
|
||||
</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li>Preserving human sovereignty over values decisions</li>
|
||||
<li>Maintaining radical transparency in all framework operations</li>
|
||||
<li>Preventing harm through structural constraints, not promises</li>
|
||||
<li>Building and empowering community, not extracting from it</li>
|
||||
<li>Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li>
|
||||
<li data-i18n="commitment.item1">Preserving human sovereignty over values decisions</li>
|
||||
<li data-i18n="commitment.item2">Maintaining radical transparency in all framework operations</li>
|
||||
<li data-i18n="commitment.item3">Preventing harm through structural constraints, not promises</li>
|
||||
<li data-i18n="commitment.item4">Building and empowering community, not extracting from it</li>
|
||||
<li data-i18n="commitment.item5">Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li>
|
||||
</ul>
|
||||
<p class="font-semibold">
|
||||
When in doubt, we choose human agency over AI capability. Always.
|
||||
<span data-i18n="commitment.closing">When in doubt, we choose human agency over AI capability. Always.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -411,5 +413,9 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1760823000"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760823000"></script>
|
||||
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Audit Analytics | Tractatus Admin</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
<style>
|
||||
html { scroll-behavior: smooth; }
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog Curation | Tractatus Admin</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Case Study Moderation | Tractatus Admin</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CLAUDE.md Migration Wizard - Tractatus Admin</title>
|
||||
<link href="../css/tailwind.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Dashboard | Tractatus Framework</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Framework Hooks Dashboard | Tractatus Admin</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Login | Tractatus Framework</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Media Triage | Tractatus Admin</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Newsletter Management | Tractatus Admin</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project Manager | Multi-Project Governance</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1760127701">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rule Manager | Multi-Project Governance</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1760127701">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<script src="/js/admin/auth-check.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<title>API Reference | Tractatus Framework</title>
|
||||
<meta name="description" content="Complete API reference for Tractatus Framework - endpoints, authentication, request/response formats, and examples.">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
.endpoint-badge {
|
||||
@apply inline-block px-2 py-1 rounded text-xs font-mono font-semibold;
|
||||
|
|
@ -867,35 +868,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">Preserving human agency through architectural constraints.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Documentation</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white">Framework Docs</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white">Implementation Guide</a></li>
|
||||
<li><a href="/api-reference.html" class="hover:text-white">API Reference</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
|
||||
<li><a href="/admin/login.html" class="hover:text-white">Admin Portal</a></li>
|
||||
<li><a href="/" class="hover:text-white">Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm">
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>System Architecture | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
|
|
@ -30,6 +32,17 @@
|
|||
<!-- Navigation (injected by navbar.js) -->
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Architecture</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header role="banner">
|
||||
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
|
||||
|
|
@ -194,10 +207,10 @@
|
|||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #10b981;">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -206,15 +219,15 @@
|
|||
<p class="text-gray-600 text-sm mb-3">
|
||||
Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
|
||||
</p>
|
||||
<div class="text-xs text-green-700 bg-green-50 rounded px-3 py-2">
|
||||
<div class="text-xs rounded px-3 py-2" style="color: #065f46; background-color: #d1fae5;">
|
||||
<strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #6366f1;">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -223,15 +236,15 @@
|
|||
<p class="text-gray-600 text-sm mb-3">
|
||||
Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
|
||||
</p>
|
||||
<div class="text-xs text-blue-700 bg-blue-50 rounded px-3 py-2">
|
||||
<div class="text-xs rounded px-3 py-2" style="color: #3730a3; background-color: #e0e7ff;">
|
||||
<strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-purple-500">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #8b5cf6;">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
|
||||
<svg class="w-6 h-6 text-white" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -240,15 +253,15 @@
|
|||
<p class="text-gray-600 text-sm mb-3">
|
||||
Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.
|
||||
</p>
|
||||
<div class="text-xs text-purple-700 bg-purple-50 rounded px-3 py-2">
|
||||
<div class="text-xs rounded px-3 py-2" style="color: #581c87; background-color: #f3e8ff;">
|
||||
<strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-yellow-500">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #f59e0b;">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -257,15 +270,15 @@
|
|||
<p class="text-gray-600 text-sm mb-3">
|
||||
Monitors AI performance degradation. Escalates when context pressure threatens quality.
|
||||
</p>
|
||||
<div class="text-xs text-yellow-700 bg-yellow-50 rounded px-3 py-2">
|
||||
<div class="text-xs rounded px-3 py-2" style="color: #92400e; background-color: #fef3c7;">
|
||||
<strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-red-500">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #ec4899;">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -274,15 +287,15 @@
|
|||
<p class="text-gray-600 text-sm mb-3">
|
||||
Requires AI to pause and verify complex operations before execution. Structural safety check.
|
||||
</p>
|
||||
<div class="text-xs text-red-700 bg-red-50 rounded px-3 py-2">
|
||||
<div class="text-xs rounded px-3 py-2" style="color: #831843; background-color: #fce7f3;">
|
||||
<strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-indigo-500">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #14b8a6;">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);">
|
||||
<svg class="w-6 h-6 text-white" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -291,7 +304,7 @@
|
|||
<p class="text-gray-600 text-sm mb-3">
|
||||
Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority.
|
||||
</p>
|
||||
<div class="text-xs text-indigo-700 bg-indigo-50 rounded px-3 py-2">
|
||||
<div class="text-xs rounded px-3 py-2" style="color: #134e4a; background-color: #ccfbf1;">
|
||||
<strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -450,47 +463,8 @@
|
|||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
World's first production implementation of architectural AI safety constraints for human agency preservation.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/architecture.html" class="hover:text-white transition">System Architecture</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title id="page-title">Loading... | Tractatus Blog</title>
|
||||
<meta id="page-description" name="description" content="Tractatus AI Safety Framework blog post">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
|
||||
<!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
|
||||
<meta property="og:type" content="article">
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
<link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
|
|
@ -211,43 +212,7 @@
|
|||
<div id="post-body" class="blog-content prose prose-lg max-w-none mb-12"></div>
|
||||
|
||||
<!-- Post Footer -->
|
||||
<footer class="border-t border-gray-200 pt-8">
|
||||
<!-- Share Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Share this post</h3>
|
||||
<div class="flex gap-3">
|
||||
<button id="share-twitter" class="flex items-center gap-2 px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
|
||||
</svg>
|
||||
Twitter
|
||||
</button>
|
||||
<button id="share-linkedin" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button id="copy-link" class="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
Copy Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back to Blog -->
|
||||
<div>
|
||||
<a href="/blog.html" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
|
||||
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
Back to all posts
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<!-- Related Posts -->
|
||||
<div id="related-posts-section" class="hidden mt-16 border-t border-gray-200 pt-12">
|
||||
|
|
@ -259,49 +224,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Preserving human agency through architectural constraints, not aspirational goals.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white">Blog</a></li>
|
||||
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
|
||||
<li><a href="/" class="hover:text-white">Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Load Blog Post JavaScript -->
|
||||
<script src="/js/blog-post.js?v=1760394750"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
|
||||
<!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
|
||||
<meta property="og:type" content="website">
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
<link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
|
|
@ -258,49 +259,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Preserving human agency through architectural constraints, not aspirational goals.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white">Blog</a></li>
|
||||
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
|
||||
<li><a href="/" class="hover:text-white">Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Load Blog JavaScript -->
|
||||
<script src="/js/blog.js?v=1760396209"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,21 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Submit Case Study | Tractatus AI Safety</title>
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid var(--tractatus-core-end); }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid #3b82f6;
|
||||
outline: 3px solid var(--tractatus-core-end);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
|
||||
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-label {
|
||||
|
|
@ -28,15 +30,16 @@
|
|||
.form-input, .form-textarea, .form-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.15s;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.form-input:focus, .form-textarea:focus, .form-select:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--tractatus-core-end);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.form-textarea { min-height: 150px; resize: vertical; }
|
||||
.form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
|
||||
|
|
@ -86,9 +89,9 @@
|
|||
<p class="text-lg text-gray-600 mb-4">
|
||||
Share real-world examples of AI safety failures that could have been prevented by the Tractatus Framework.
|
||||
</p>
|
||||
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
|
||||
<h3 class="text-blue-900 font-semibold mb-2">What makes a good case study?</h3>
|
||||
<ul class="text-blue-800 text-sm space-y-1">
|
||||
<div class="bg-sky-50 border-l-4 p-4 rounded" style="border-left-color: var(--tractatus-core-end);">
|
||||
<h3 class="font-semibold mb-2" style="color: var(--tractatus-core-end);">What makes a good case study?</h3>
|
||||
<ul class="text-gray-700 text-sm space-y-1">
|
||||
<li>• <strong>Documented failure:</strong> Real incident with evidence (not hypothetical)</li>
|
||||
<li>• <strong>Clear failure mode:</strong> Specific way the AI system went wrong</li>
|
||||
<li>• <strong>Tractatus relevance:</strong> Shows how framework boundaries could have helped</li>
|
||||
|
|
@ -183,7 +186,7 @@
|
|||
<label for="case-evidence" class="form-label">
|
||||
Evidence/Sources
|
||||
</label>
|
||||
<textarea id="case-evidence" name="case_study.evidence" class="form-textarea" style="min-height: 100px;"></textarea>
|
||||
<textarea id="case-evidence" name="case_study.evidence" class="form-textarea"></textarea>
|
||||
<p class="form-help">
|
||||
Links to documentation, screenshots, articles, or other evidence (one per line)
|
||||
</p>
|
||||
|
|
@ -191,7 +194,7 @@
|
|||
|
||||
<!-- Submit Button -->
|
||||
<div class="mt-8">
|
||||
<button type="submit" id="submit-button" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
||||
<button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
|
||||
Submit Case Study
|
||||
</button>
|
||||
<p class="form-help mt-3 text-center">
|
||||
|
|
@ -206,141 +209,18 @@
|
|||
<div class="mt-6 text-sm text-gray-600 text-center">
|
||||
<p>
|
||||
Your submission is handled according to our
|
||||
<a href="/about/values.html" class="text-blue-600 hover:text-blue-700">privacy principles</a>.
|
||||
<a href="/about/values.html" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">privacy principles</a>.
|
||||
All case studies undergo human review before publication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/js/case-submission.js"></script>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('case-submission-form');
|
||||
const submitButton = document.getElementById('submit-button');
|
||||
const successMessage = document.getElementById('success-message');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide previous messages
|
||||
successMessage.style.display = 'none';
|
||||
errorMessage.style.display = 'none';
|
||||
|
||||
// Disable submit button
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Submitting...';
|
||||
|
||||
// Collect form data
|
||||
const evidenceText = document.getElementById('case-evidence').value;
|
||||
const evidence = evidenceText
|
||||
? evidenceText.split('\n').filter(line => line.trim())
|
||||
: [];
|
||||
|
||||
const formData = {
|
||||
submitter: {
|
||||
name: document.getElementById('submitter-name').value,
|
||||
email: document.getElementById('submitter-email').value,
|
||||
organization: document.getElementById('submitter-organization').value || null,
|
||||
public: document.getElementById('submitter-public').checked
|
||||
},
|
||||
case_study: {
|
||||
title: document.getElementById('case-title').value,
|
||||
description: document.getElementById('case-description').value,
|
||||
failure_mode: document.getElementById('case-failure-mode').value,
|
||||
tractatus_applicability: document.getElementById('case-tractatus').value,
|
||||
evidence: evidence,
|
||||
attachments: []
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/cases/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Success
|
||||
successMessage.textContent = data.message || 'Thank you for your submission. We will review it shortly.';
|
||||
successMessage.style.display = 'block';
|
||||
form.reset();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} else {
|
||||
// Error
|
||||
errorMessage.textContent = data.message || 'An error occurred. Please try again.';
|
||||
errorMessage.style.display = 'block';
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Submit error:', error);
|
||||
errorMessage.textContent = 'Network error. Please check your connection and try again.';
|
||||
errorMessage.style.display = 'block';
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} finally {
|
||||
// Re-enable submit button
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = 'Submit Case Study';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -40,62 +40,6 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Get the version from the main docs page
|
||||
fetch('/docs.html?' + Date.now())
|
||||
.then(r => r.text())
|
||||
.then(html => {
|
||||
const match = html.match(/docs-app\.js\?v=(\d+)/);
|
||||
const version = match ? match[1] : 'NOT FOUND';
|
||||
|
||||
const expected = '1759828916';
|
||||
const correct = version === expected;
|
||||
|
||||
// Now fetch the actual JavaScript
|
||||
return fetch('/js/docs-app.js?v=' + version + '&' + Date.now())
|
||||
.then(r => r.text())
|
||||
.then(js => {
|
||||
const hasNewHandler = js.includes('window.location.href=');
|
||||
const hasOldHandler = js.includes('event.stopPropagation()');
|
||||
|
||||
let html = '';
|
||||
|
||||
if (correct && hasNewHandler) {
|
||||
html = `
|
||||
<div class="box good">
|
||||
<h2>✅ Version is CORRECT</h2>
|
||||
<p>JavaScript version: <code>${version}</code></p>
|
||||
<p>Handler includes: <code>window.location.href</code></p>
|
||||
<p><strong>Downloads should work now!</strong></p>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
html = `
|
||||
<div class="box bad">
|
||||
<h2>❌ Version is WRONG</h2>
|
||||
<p>JavaScript version loaded: <code>${version}</code></p>
|
||||
<p>Expected: <code>${expected}</code></p>
|
||||
<p>Has new handler: ${hasNewHandler ? '✅ YES' : '❌ NO'}</p>
|
||||
<p><strong>Your browser is serving cached files!</strong></p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h3>Cached JavaScript Snippet:</h3>
|
||||
<pre>${js.substring(js.indexOf('onclick='), js.indexOf('onclick=') + 200).replace(/</g, '<').replace(/>/g, '>')}</pre>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
document.getElementById('results').innerHTML = html;
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('results').innerHTML = `
|
||||
<div class="box bad">
|
||||
<h2>Error</h2>
|
||||
<p>${err.message}</p>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
</script>
|
||||
<script src="/js/check-version.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The 27027 Incident - Tractatus Framework</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
|
|
@ -75,7 +76,7 @@
|
|||
<span id="progress-text">0 / 8</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
|
||||
<div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Boundary Enforcement Simulator - Tractatus Framework</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Instruction Classification Demo - Tractatus Framework</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
.quadrant-badge {
|
||||
@apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tractatus Framework Interactive Demo | AI Safety Architecture</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
.fade-in { animation: fadeIn 0.5s; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
|
@ -345,7 +346,7 @@
|
|||
<span id="pressure-percentage" class="font-medium">15%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="pressure-bar" class="bg-green-500 h-3 rounded-full transition-all duration-300" style="width: 15%"></div>
|
||||
<div id="pressure-bar" class="bg-green-500 h-3 rounded-full transition-all duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pressure-recommendations" class="text-sm text-gray-600">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Documentation - Tractatus Framework</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
/* Prose styling for document content */
|
||||
.prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Frequently Asked Questions | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
|
@ -16,9 +16,11 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
||||
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
|
||||
<!-- Syntax highlighting for code blocks -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
||||
|
|
@ -442,7 +444,7 @@
|
|||
</svg>
|
||||
<span data-i18n="still_have_questions.submit_case_study_btn">Submit a Case Study</span>
|
||||
</a>
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/issues" target="_blank" rel="noopener noreferrer" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white inline-flex items-center gap-2">
|
||||
<a href="https://github.com/AgenticGovernance/tractatus/issues" target="_blank" rel="noopener noreferrer" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.430.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
|
|
@ -460,57 +462,6 @@
|
|||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Search Modal -->
|
||||
<div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col">
|
||||
|
|
@ -679,13 +630,16 @@
|
|||
</div>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
<script src="/js/faq.js?v=1760430000"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,12 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
|
|
@ -39,6 +42,17 @@
|
|||
<!-- Navigation (injected by navbar.js) -->
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Implementer</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -116,7 +130,7 @@
|
|||
<span class="text-gray-700 text-sm">Troubleshooting guidance</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/deployment-guide"
|
||||
<a href="https://github.com/AgenticGovernance/tractatus/tree/main/deployment-guide"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-lg">
|
||||
|
|
@ -423,7 +437,7 @@
|
|||
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg">
|
||||
<p class="text-sm text-blue-900 font-medium mb-2">⚠️ Note: Reference Implementation</p>
|
||||
<p class="text-sm text-blue-800">
|
||||
The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900">source code</a>.
|
||||
The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus" class="underline font-medium hover:text-blue-900">source code</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -727,63 +741,15 @@ if (pressure.level === 'CRITICAL') {
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,20 @@
|
|||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<meta name="theme-color" content="#0ea5e9">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.hover-lift { transition: transform 0.2s; }
|
||||
|
|
@ -40,19 +46,35 @@
|
|||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<!-- Navigation (injected by navbar.js) -->
|
||||
<div id="navbar-placeholder" style="min-height: 64px;"></div>
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header role="banner">
|
||||
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white">
|
||||
<section class="text-white" style="background: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%);">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
|
||||
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
|
||||
<!-- Animated Brand Logo -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<img src="/images/tractatus-icon-animated.svg"
|
||||
alt="Tractatus Framework - Six Governance Services"
|
||||
width="256" height="256" class="w-48 h-48 md:w-64 md:h-64"
|
||||
loading="eager">
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1);" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1);" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/architecture.html" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="hero.cta_architecture">System Architecture</a>
|
||||
<a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition" data-i18n="hero.cta_docs">Read Documentation</a>
|
||||
<a href="/faq.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition" data-i18n="hero.cta_faq">FAQ</a>
|
||||
<a href="/architecture.html"
|
||||
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
|
||||
data-i18n="hero.cta_architecture">System Architecture</a>
|
||||
<a href="/docs.html"
|
||||
class="btn-base btn-primary inline-block"
|
||||
data-i18n="hero.cta_docs">Read Documentation</a>
|
||||
<a href="/faq.html"
|
||||
class="btn-base btn-validator inline-block"
|
||||
data-i18n="hero.cta_faq">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,131 +105,151 @@ We recognize this is one small step in addressing AI safety challenges. Explore
|
|||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Researcher Path -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
|
||||
<!-- Researcher Path → CrossReferenceValidator (Purple) -->
|
||||
<a href="/researcher.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-100" style="border-left-color: var(--service-validator-light);">
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
||||
<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
|
||||
<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
|
||||
<svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>
|
||||
<h3 class="text-2xl font-bold text-white" data-i18n="paths.researcher.title">Researcher</h3>
|
||||
<p class="text-blue-100 mt-2" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-validator);">
|
||||
🔬
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors" data-i18n="paths.researcher.title">Researcher</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6" data-i18n="paths.researcher.description">
|
||||
Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/researcher.html" class="block w-full text-center bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition font-medium" data-i18n="paths.researcher.cta">Explore Research
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Implementer Path -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<span class="font-semibold group-hover:underline" style="color: var(--service-validator-dark);" data-i18n="paths.researcher.cta">Explore Research →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Implementer Path → InstructionPersistenceClassifier (Indigo) -->
|
||||
<a href="/implementer.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-200" style="border-left-color: var(--service-instruction-light);">
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
||||
<span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
|
||||
<svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
||||
</svg>
|
||||
<h3 class="text-2xl font-bold text-white" data-i18n="paths.implementer.title">Implementer</h3>
|
||||
<p class="text-purple-100 mt-2" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-instruction);">
|
||||
⚙️
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" data-i18n="paths.implementer.title">Implementer</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6" data-i18n="paths.implementer.description">
|
||||
Get hands-on with implementation guides, API documentation, and reference code examples.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment best practices</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/implementer.html" class="block w-full text-center bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition font-medium" data-i18n="paths.implementer.cta">View Implementation Guide
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leader Path -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<span class="font-semibold group-hover:underline" style="color: var(--service-instruction-dark);" data-i18n="paths.implementer.cta">View Implementation Guide →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Leader Path → PluralisticDeliberationOrchestrator (Teal) -->
|
||||
<a href="/leader.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-300" style="border-left-color: var(--service-deliberation-light);">
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
||||
<span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-r from-amber-500 to-orange-600 p-6">
|
||||
<svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
|
||||
</svg>
|
||||
<h3 class="text-2xl font-bold text-white" data-i18n="paths.leader.title">Leader</h3>
|
||||
<p class="text-amber-100 mt-2" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-deliberation);">
|
||||
💼
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-teal-600 transition-colors" data-i18n="paths.leader.title">Leader</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6" data-i18n="paths.leader.description">
|
||||
Navigate the business case, compliance requirements, and competitive advantages of structural AI safety.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & ROI</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/leader.html" class="block w-full text-center bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition font-semibold" data-i18n="paths.leader.cta">View Leadership Resources
|
||||
</a>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<span class="font-semibold group-hover:underline" style="color: var(--service-deliberation-dark);" data-i18n="paths.leader.cta">View Leadership Resources →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -219,9 +261,9 @@ Navigate the business case, compliance requirements, and competitive advantages
|
|||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="border border-gray-200 rounded-lg p-6">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="card-base card-interactive card-service instruction">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-instruction);">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -231,9 +273,9 @@ Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metada
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg p-6">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="card-base card-interactive card-service validator">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-validator);">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -243,9 +285,9 @@ Validates AI actions against explicit user instructions to prevent pattern-based
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg p-6">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="card-base card-interactive card-service boundary">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-boundary);">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -255,9 +297,9 @@ Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally req
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg p-6">
|
||||
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="card-base card-interactive card-service pressure">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-pressure);">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -267,9 +309,9 @@ Detects degraded operating conditions (token pressure, errors, complexity) and a
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg p-6">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="card-base card-interactive card-service metacognitive">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-metacognitive);">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -279,9 +321,9 @@ AI self-checks alignment, coherence, safety before execution - structural pause-
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg p-6">
|
||||
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="card-base card-interactive card-service deliberation">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-deliberation);">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -345,63 +387,16 @@ Additional case studies and research findings documented in technical papers
|
|||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm" data-i18n="footer.description">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm" data-i18n="footer.acknowledgment">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300"><span data-i18n="footer.tagline">Safety Through Structure, Not Aspiration</span> | <span data-i18n="footer.built_with">Built with</span> <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -103,14 +103,22 @@ class DocumentViewer {
|
|||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Table of Contents</h2>
|
||||
<nav>
|
||||
<ul class="space-y-2">
|
||||
${toc.map(item => `
|
||||
<li style="margin-left: ${(item.level - 1) * 16}px">
|
||||
<a href="#${item.id}"
|
||||
class="text-blue-600 hover:text-blue-700 hover:underline">
|
||||
${this.escapeHtml(item.text)}
|
||||
</a>
|
||||
</li>
|
||||
`).join('')}
|
||||
${toc.map(item => {
|
||||
// Generate Tailwind margin class based on level
|
||||
const marginClass = item.level === 1 ? '' :
|
||||
item.level === 2 ? 'ml-4' :
|
||||
item.level === 3 ? 'ml-8' :
|
||||
item.level === 4 ? 'ml-12' :
|
||||
'ml-16';
|
||||
return `
|
||||
<li class="${marginClass}">
|
||||
<a href="#${item.id}"
|
||||
class="text-blue-600 hover:text-blue-700 hover:underline">
|
||||
${this.escapeHtml(item.text)}
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
}).join('')}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Donate (Koha)</a></li>
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Support (Koha)</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency</a></li>
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/privacy.html" class="hover:text-white transition">Privacy Policy</a></li>
|
||||
<li><a href="mailto:hello@agenticgovernance.digital" class="hover:text-white transition">Contact Us</a></li>
|
||||
<li><a href="https://github.com/yourusername/tractatus" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li>
|
||||
<li><a href="https://github.com/AgenticGovernance/tractatus-framework" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<!-- Bottom Row -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
|
||||
<p class="text-gray-400">
|
||||
© ${new Date().getFullYear()} Tractatus AI Safety Framework. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache 2.0</a>.
|
||||
© ${new Date().getFullYear()} John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache 2.0</a>.
|
||||
</p>
|
||||
<p class="text-gray-400">
|
||||
Made in Aotearoa New Zealand 🇳🇿
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ class TractatusNavbar {
|
|||
init() {
|
||||
this.render();
|
||||
this.attachEventListeners();
|
||||
this.setActivePageIndicator();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -25,7 +26,7 @@ class TractatusNavbar {
|
|||
<a href="/"
|
||||
class="flex items-center space-x-3 px-3 py-2 -ml-3 rounded-lg hover:bg-blue-50 transition-all duration-200 group"
|
||||
title="Return to homepage">
|
||||
<img src="/images/tractatus-icon.svg" alt="Tractatus Icon" class="w-8 h-8">
|
||||
<img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-8 h-8">
|
||||
<span class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors hidden sm:inline">Tractatus Framework</span>
|
||||
<span class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors sm:hidden">Tractatus</span>
|
||||
<svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity ml-1 hidden sm:block"
|
||||
|
|
@ -61,7 +62,7 @@ class TractatusNavbar {
|
|||
<div id="mobile-menu-panel" class="absolute right-0 top-0 bottom-0 w-80 max-w-[85vw] bg-white shadow-2xl transform transition-transform duration-300 ease-out">
|
||||
<div class="flex justify-between items-center px-5 h-16 border-b border-gray-200">
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="/images/tractatus-icon.svg" alt="Tractatus Icon" class="w-6 h-6">
|
||||
<img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-6 h-6">
|
||||
<span class="font-bold text-gray-900">Navigation</span>
|
||||
</div>
|
||||
<button id="mobile-menu-close-btn" class="text-gray-600 hover:text-gray-900 p-2 rounded hover:bg-gray-100 transition" aria-label="Close menu">
|
||||
|
|
@ -111,7 +112,12 @@ class TractatusNavbar {
|
|||
if (existingNavbar) {
|
||||
existingNavbar.outerHTML = navHTML;
|
||||
} else {
|
||||
document.body.insertAdjacentHTML('afterbegin', navHTML);
|
||||
const placeholder = document.getElementById('navbar-placeholder');
|
||||
if (placeholder) {
|
||||
placeholder.outerHTML = navHTML;
|
||||
} else {
|
||||
document.body.insertAdjacentHTML('afterbegin', navHTML);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,6 +180,35 @@ class TractatusNavbar {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
setActivePageIndicator() {
|
||||
// Get current page path
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
// Normalize paths (handle both /page.html and /page)
|
||||
const normalizePath = (path) => {
|
||||
if (path === '/' || path === '/index.html') return '/';
|
||||
return path.replace('.html', '').replace(/\/$/, '');
|
||||
};
|
||||
|
||||
const normalizedCurrent = normalizePath(currentPath);
|
||||
|
||||
// Find all navigation links in mobile menu
|
||||
const mobileLinks = document.querySelectorAll('#mobile-menu a');
|
||||
|
||||
mobileLinks.forEach(link => {
|
||||
const linkPath = link.getAttribute('href');
|
||||
const normalizedLink = normalizePath(linkPath);
|
||||
|
||||
if (normalizedLink === normalizedCurrent) {
|
||||
// Add active styling with brand colors
|
||||
link.classList.add('border-l-4', 'bg-sky-50');
|
||||
link.style.borderLeftColor = 'var(--tractatus-core-end)';
|
||||
link.style.color = 'var(--tractatus-core-end)';
|
||||
link.classList.remove('text-gray-700');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<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.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<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; }
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<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=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
|
|
@ -52,6 +53,13 @@
|
|||
.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>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
@ -79,12 +87,12 @@
|
|||
Ngā mihi nui! Thank You!
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto fade-in-up" style="animation-delay: 0.1s;">
|
||||
<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" style="animation-delay: 0.2s;">
|
||||
<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">
|
||||
|
|
@ -110,7 +118,7 @@
|
|||
</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" style="animation-delay: 0.3s;">
|
||||
<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>
|
||||
|
|
@ -164,7 +172,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Monthly Donors Section -->
|
||||
<div id="monthly-section" class="bg-white shadow rounded-lg p-8 mb-8 fade-in-up" style="animation-delay: 0.4s; display: none;">
|
||||
<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.
|
||||
|
|
@ -204,7 +212,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center fade-in-up" style="animation-delay: 0.5s;">
|
||||
<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>
|
||||
|
|
@ -219,7 +227,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="loading-content" class="text-center" style="display: none;">
|
||||
<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>
|
||||
|
|
@ -230,7 +238,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="error-content" class="text-center" style="display: none;">
|
||||
<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>
|
||||
|
|
@ -261,61 +269,8 @@
|
|||
<!-- Footer -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
<!-- Coming Soon Overlay (remove when Stripe is configured) -->
|
||||
<script src="/js/components/coming-soon-overlay.js"></script>
|
||||
|
||||
<script>
|
||||
// Get session ID from URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const sessionId = urlParams.get('session_id');
|
||||
|
||||
// Verify donation
|
||||
async function verifyDonation() {
|
||||
if (!sessionId) {
|
||||
// No session ID - just show success message
|
||||
document.getElementById('loading-content').style.display = 'none';
|
||||
document.getElementById('success-content').style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/koha/verify/${sessionId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.data.isSuccessful) {
|
||||
// Show success content
|
||||
document.getElementById('loading-content').style.display = 'none';
|
||||
document.getElementById('success-content').style.display = 'block';
|
||||
|
||||
// Update details
|
||||
document.getElementById('amount').textContent = `$${data.data.amount.toFixed(2)} ${data.data.currency.toUpperCase()}`;
|
||||
|
||||
const frequencyText = data.data.frequency === 'monthly' ? 'Monthly Donation' : 'One-Time Donation';
|
||||
document.getElementById('frequency').textContent = frequencyText;
|
||||
|
||||
// Show monthly section if applicable
|
||||
if (data.data.frequency === 'monthly') {
|
||||
document.getElementById('monthly-section').style.display = 'block';
|
||||
}
|
||||
|
||||
} else {
|
||||
throw new Error('Donation not successful');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Verification error:', error);
|
||||
document.getElementById('loading-content').style.display = 'none';
|
||||
document.getElementById('error-content').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Verify on page load
|
||||
if (sessionId) {
|
||||
document.getElementById('success-content').style.display = 'none';
|
||||
document.getElementById('loading-content').style.display = 'block';
|
||||
verifyDonation();
|
||||
}
|
||||
</script>
|
||||
<!-- Donation verification -->
|
||||
<script src="/js/koha-success.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<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=1759833751">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<!-- Chart.js for visual analytics -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" crossorigin="anonymous"></script>
|
||||
<style>
|
||||
|
|
@ -47,10 +48,10 @@
|
|||
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
<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>
|
||||
Export CSV
|
||||
<span data-i18n="export_csv">Export CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,44 +73,44 @@
|
|||
<!-- 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">Total Received</h2>
|
||||
<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">NZD lifetime</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">Monthly Supporters</h2>
|
||||
<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">Active subscriptions</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">Monthly Recurring</h2>
|
||||
<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">NZD per month</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">How Donations Are Allocated</h2>
|
||||
<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">
|
||||
|
|
@ -121,13 +122,13 @@
|
|||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900">Development</span>
|
||||
<span class="text-sm text-gray-600 ml-2">Feature development, bug fixes, security updates</span>
|
||||
<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" style="width: 0%;" data-width="40"></div>
|
||||
<div class="progress-bar bg-blue-600 h-3 rounded-full" data-width="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -135,13 +136,13 @@
|
|||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900">Hosting & Infrastructure</span>
|
||||
<span class="text-sm text-gray-600 ml-2">Servers, database, CDN, domain, SSL</span>
|
||||
<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-600">30%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div class="progress-bar bg-green-600 h-3 rounded-full" style="width: 0%;" data-width="30"></div>
|
||||
<div class="progress-bar bg-green-600 h-3 rounded-full" data-width="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -149,13 +150,13 @@
|
|||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900">Research</span>
|
||||
<span class="text-sm text-gray-600 ml-2">AI safety research, academic partnerships, publications</span>
|
||||
<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" style="width: 0%;" data-width="20"></div>
|
||||
<div class="progress-bar bg-purple-600 h-3 rounded-full" data-width="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -163,13 +164,13 @@
|
|||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900">Community</span>
|
||||
<span class="text-sm text-gray-600 ml-2">Documentation, outreach, contributor support</span>
|
||||
<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-600">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" style="width: 0%;" data-width="10"></div>
|
||||
<div class="progress-bar bg-orange-600 h-3 rounded-full" data-width="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -178,41 +179,41 @@
|
|||
<!-- 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">One-Time Donations</h3>
|
||||
<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">Total gifts received</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">Average Donation</h3>
|
||||
<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">NZD across all donations</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">Recent Supporters</h2>
|
||||
<p class="text-gray-600 mb-6">
|
||||
<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">Loading supporters...</p>
|
||||
<p class="text-gray-500 text-center py-8" data-i18n="supporters.loading">Loading supporters...</p>
|
||||
</div>
|
||||
|
||||
<div id="no-donors" class="text-center py-8 text-gray-500" style="display: none;">
|
||||
<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">Support the Tractatus Framework</h2>
|
||||
<p class="text-blue-100 mb-6 max-w-2xl mx-auto">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -222,11 +223,12 @@
|
|||
<!-- Footer -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
<!-- Coming Soon Overlay (remove when Stripe is configured) -->
|
||||
<script src="/js/components/coming-soon-overlay.js"></script>
|
||||
|
||||
<!-- Transparency Dashboard JavaScript -->
|
||||
<script src="/js/koha-transparency.js"></script>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js"></script>
|
||||
<script src="/js/components/language-selector.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,12 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.hover-lift { transition: all 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-2px); }
|
||||
|
|
@ -52,6 +55,17 @@
|
|||
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Leader</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 py-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -487,6 +501,24 @@
|
|||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
<p class="mt-3">
|
||||
<strong>AI Safety Research:</strong> Architectural Safeguards Against LLM Hierarchical Dominance — How Tractatus protects pluralistic values from AI pattern bias while maintaining safety boundaries.
|
||||
<span class="inline-flex gap-3 mt-2">
|
||||
<a href="/docs/research/ARCHITECTURAL-SAFEGUARDS-Against-LLM-Hierarchical-Dominance-Prose.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
|
||||
PDF
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="text-gray-400">|</span>
|
||||
<a href="/docs.html?doc=architectural-safeguards-against-llm-hierarchical-dominance-prose" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
|
||||
Read online
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -562,64 +594,16 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/leader-page.js"></script>
|
||||
<script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
|
||||
<script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#3b82f6",
|
||||
"theme_color": "#0ea5e9",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/images/tractatus-icon.svg",
|
||||
"src": "/images/tractatus-icon-new.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/favicon.svg",
|
||||
"src": "/favicon-new.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml"
|
||||
}
|
||||
|
|
@ -27,21 +27,21 @@
|
|||
"short_name": "Docs",
|
||||
"description": "Browse framework documentation",
|
||||
"url": "/docs.html",
|
||||
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
|
||||
"icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
|
||||
},
|
||||
{
|
||||
"name": "FAQ",
|
||||
"short_name": "FAQ",
|
||||
"description": "Frequently asked questions",
|
||||
"url": "/faq.html",
|
||||
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
|
||||
"icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
|
||||
},
|
||||
{
|
||||
"name": "27027 Demo",
|
||||
"short_name": "Demo",
|
||||
"description": "Interactive pattern bias demonstration",
|
||||
"url": "/demos/27027-demo.html",
|
||||
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
|
||||
"icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Media Inquiry | Tractatus AI Safety</title>
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-label {
|
||||
|
|
@ -16,15 +18,16 @@
|
|||
.form-input, .form-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.15s;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.form-input:focus, .form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--tractatus-core-end);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.form-textarea { min-height: 150px; resize: vertical; }
|
||||
.form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
|
||||
|
|
@ -48,15 +51,15 @@
|
|||
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid var(--tractatus-core-end); }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid #3b82f6;
|
||||
outline: 3px solid var(--tractatus-core-end);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
@ -145,7 +148,7 @@
|
|||
|
||||
<!-- Submit Button -->
|
||||
<div class="mt-8">
|
||||
<button type="submit" id="submit-button" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
||||
<button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
|
||||
Submit Inquiry
|
||||
</button>
|
||||
<p class="form-help mt-3 text-center">
|
||||
|
|
@ -160,7 +163,7 @@
|
|||
<div class="mt-6 text-sm text-gray-600 text-center">
|
||||
<p>
|
||||
Your contact information is handled according to our
|
||||
<a href="/about/values.html" class="text-blue-600 hover:text-blue-700">privacy principles</a>.
|
||||
<a href="/about/values.html" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">privacy principles</a>.
|
||||
We never share media inquiries with third parties.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -168,126 +171,10 @@
|
|||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/js/media-inquiry.js"></script>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('media-inquiry-form');
|
||||
const submitButton = document.getElementById('submit-button');
|
||||
const successMessage = document.getElementById('success-message');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide previous messages
|
||||
successMessage.style.display = 'none';
|
||||
errorMessage.style.display = 'none';
|
||||
|
||||
// Disable submit button
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Submitting...';
|
||||
|
||||
// Collect form data
|
||||
const formData = {
|
||||
contact: {
|
||||
name: document.getElementById('contact-name').value,
|
||||
email: document.getElementById('contact-email').value,
|
||||
outlet: document.getElementById('contact-outlet').value,
|
||||
phone: document.getElementById('contact-phone').value || null
|
||||
},
|
||||
inquiry: {
|
||||
subject: document.getElementById('inquiry-subject').value,
|
||||
message: document.getElementById('inquiry-message').value,
|
||||
deadline: document.getElementById('inquiry-deadline').value || null,
|
||||
topic_areas: []
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/media/inquiries', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Success
|
||||
successMessage.textContent = data.message || 'Thank you for your inquiry. We will review and respond shortly.';
|
||||
successMessage.style.display = 'block';
|
||||
form.reset();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} else {
|
||||
// Error
|
||||
errorMessage.textContent = data.message || 'An error occurred. Please try again.';
|
||||
errorMessage.style.display = 'block';
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Submit error:', error);
|
||||
errorMessage.textContent = 'Network error. Please check your connection and try again.';
|
||||
errorMessage.style.display = 'block';
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} finally {
|
||||
// Re-enable submit button
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = 'Submit Inquiry';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<title>Media Triage Transparency | Tractatus Framework</title>
|
||||
<meta name="description" content="Transparent AI-powered media inquiry triage with 100% human oversight. See how the Tractatus framework governs AI analysis in practice.">
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
|
|
@ -187,7 +188,7 @@
|
|||
<span id="urgency-high-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full" style="width: 0%"></div>
|
||||
<div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -198,7 +199,7 @@
|
|||
<span id="urgency-medium-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full" style="width: 0%"></div>
|
||||
<div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -209,7 +210,7 @@
|
|||
<span id="urgency-low-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full" style="width: 0%"></div>
|
||||
<div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -228,7 +229,7 @@
|
|||
<span id="sensitivity-high-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full" style="width: 0%"></div>
|
||||
<div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -239,7 +240,7 @@
|
|||
<span id="sensitivity-medium-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full" style="width: 0%"></div>
|
||||
<div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -250,7 +251,7 @@
|
|||
<span id="sensitivity-low-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full" style="width: 0%"></div>
|
||||
<div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -354,47 +355,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Preserving human agency through architectural constraints, not aspirational goals.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
|
||||
<li><a href="/media-triage-transparency.html" class="hover:text-white">Triage Transparency</a></li>
|
||||
<li><a href="/" class="hover:text-white">Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/js/media-triage-transparency.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<title>Privacy Policy | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Privacy policy for the Tractatus AI Safety Framework. Learn how we collect, use, and protect your data.">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
|
|
|
|||
|
|
@ -14,9 +14,12 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
|
|
@ -43,6 +46,17 @@
|
|||
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Researcher</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 py-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -87,10 +101,10 @@
|
|||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2>
|
||||
|
||||
<!-- Organisational Theory -->
|
||||
<div class="border border-gray-300 rounded-lg mb-4">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="org-theory">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
|
||||
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg mb-4" style="border-left-color: #8b5cf6;">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
|
||||
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -136,10 +150,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Values Pluralism -->
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="values">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
|
||||
<svg id="values-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
|
||||
<svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -283,10 +297,10 @@
|
|||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="architecture">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
|
||||
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="architecture">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
|
||||
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -425,10 +439,10 @@
|
|||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="limitations">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
|
||||
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="limitations">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
|
||||
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -495,64 +509,16 @@
|
|||
|
||||
<!-- Footer -->
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
||||
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Community</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
||||
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
||||
<p class="text-sm">
|
||||
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
||||
Built with respect for CARE Principles and Māori data sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
||||
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
||||
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/researcher-page.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* - PWA functionality
|
||||
*/
|
||||
|
||||
const CACHE_VERSION = '1.1.1';
|
||||
const CACHE_VERSION = '1.1.5';
|
||||
const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
|
||||
const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds
|
||||
|
||||
|
|
@ -61,48 +61,65 @@ self.addEventListener('fetch', (event) => {
|
|||
return;
|
||||
}
|
||||
|
||||
// HTML files: Network-first (always check for updates)
|
||||
// HTML files: Network-ONLY (never cache, always fetch fresh)
|
||||
// This ensures users always get the latest content without cache refresh
|
||||
if (request.destination === 'document' || url.pathname.endsWith('.html')) {
|
||||
event.respondWith(
|
||||
fetch(request)
|
||||
.then((response) => {
|
||||
// Clone response to cache and return
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(request, responseClone);
|
||||
});
|
||||
return response;
|
||||
})
|
||||
.catch(() => {
|
||||
// If network fails, try cache
|
||||
return caches.match(request);
|
||||
// Only for offline fallback: serve cached index.html
|
||||
if (url.pathname === '/' || url.pathname === '/index.html') {
|
||||
return caches.match('/index.html');
|
||||
}
|
||||
// All other HTML: network only, fail if offline
|
||||
throw new Error('Network required for HTML pages');
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Static assets (CSS, JS, images): Cache-first
|
||||
// Static assets (CSS, JS, images): Network-first for versioned URLs, cache-first for others
|
||||
if (
|
||||
request.destination === 'style' ||
|
||||
request.destination === 'script' ||
|
||||
request.destination === 'image' ||
|
||||
request.destination === 'font'
|
||||
) {
|
||||
event.respondWith(
|
||||
caches.match(request).then((cachedResponse) => {
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
return fetch(request).then((response) => {
|
||||
// Clone response to cache
|
||||
// If URL has version parameter, always fetch fresh (network-first)
|
||||
const hasVersionParam = url.searchParams.has('v');
|
||||
|
||||
if (hasVersionParam) {
|
||||
// Network-first for versioned assets (ensures cache-busting works)
|
||||
event.respondWith(
|
||||
fetch(request).then((response) => {
|
||||
// Cache the response for offline use
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(request, responseClone);
|
||||
});
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
}).catch(() => {
|
||||
// Fallback to cache if offline
|
||||
return caches.match(request);
|
||||
})
|
||||
);
|
||||
} else {
|
||||
// Cache-first for non-versioned assets
|
||||
event.respondWith(
|
||||
caches.match(request).then((cachedResponse) => {
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
return fetch(request).then((response) => {
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(request, responseClone);
|
||||
});
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"version": "1.1.1",
|
||||
"buildDate": "2025-10-14T01:30:00Z",
|
||||
"version": "1.1.5",
|
||||
"buildDate": "2025-10-18T03:03:00Z",
|
||||
"changelog": [
|
||||
"Revised Copilot Q&A to match measured tone of leader page",
|
||||
"Removed overconfident claims, added context and limitations",
|
||||
"Focused on structural governance questions rather than assertions"
|
||||
"Implemented proper cache-busting for JavaScript files",
|
||||
"Versioned assets now use network-first strategy",
|
||||
"Fixes deployment issues without requiring manual cache clearing"
|
||||
],
|
||||
"forceUpdate": true,
|
||||
"minVersion": "1.1.1"
|
||||
"minVersion": "1.1.5"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue